Fixed a problem with milestone-report-data throwing an error because we changed the data from an object to an array. #2896

Author: geoffreykwan

src/main/webapp/site/src/app/teacher/milestone/milestone-report-data/milestone-report-data.component.spec.ts

@@ -1,21 +1,112 @@
 import { MilestoneReportDataComponent } from './milestone-report-data.component';
 
+let comp: any = null;
+const nodeId1: string = 'node1';
+const nodeId2: string = 'node2';
+const componentId1: string = 'component1';
+const componentId2: string = 'component2';
+const counts1: any = { 1: 0, 2: 0, 3: 1, 4: 1, 5: 0 };
+const counts2: any = { 1: 0, 2: 0, 3: 0, 4: 2, 5: 0 };
+const average1: number = 3.5;
+const average2: number = 4;
+const scoreCount1: number = 2;
+const scoreCount2: number = 2;
+const scoreSum1: number = 7;
+const scoreSum2: number = 8;
+const stepTitle1: string = '1.1: Milestone Step 1';
+const stepTitle2: string = '1.2: Milestone Step 2';
+const componentData1: any = createComponentData(
+  nodeId1,
+  componentId1,
+  counts1,
+  average1,
+  scoreCount1,
+  scoreSum1,
+  stepTitle1
+);
+const componentData2: any = createComponentData(
+  nodeId2,
+  componentId2,
+  counts2,
+  average2,
+  scoreCount2,
+  scoreSum2,
+  stepTitle2
+);
+
 describe('MilestoneReportDataComponent', () => {
-  it('#getPercent() should return percentage', () => {
-    const comp = new MilestoneReportDataComponent();
-    comp.data = { scoreCount: 5 };
+  beforeEach(() => {
+    comp = new MilestoneReportDataComponent();
+    comp.data = [componentData1, componentData2];
+  });
+
+  getPercent();
+  getCount();
+  getAverage();
+  getScoreValuesCount();
+  getComponentData();
+});
+
+function getPercent(): void {
+  it('getPercent() should return percentage', () => {
     expect(comp.getPercent()).toEqual('100%');
   });
+}
 
-  it('#getScoreValuesCount() should count for current score value', () => {
-    const comp = new MilestoneReportDataComponent();
+function getCount(): void {
+  it('getCount() should get the count when scoreValues is not specified', () => {
+    expect(comp.getCount()).toEqual(2);
+  });
+
+  it('getCount() should get the count when scoreValues is specified', () => {
     comp.scoreValues = [5];
-    comp.data = {
-      average: 4.3333333333333,
-      counts: { 1: 0, 2: 0, 3: 1, 4: 0, 5: 2 },
-      scoreCount: 3,
-      scoreSum: 13
-    };
+    expect(comp.getCount()).toEqual(0);
+  });
+}
+
+function getAverage(): void {
+  it('getAverage() should get the average', () => {
+    expect(comp.getAverage()).toEqual(4);
+  });
+}
+
+function getScoreValuesCount(): void {
+  it('getScoreValuesCount() should get the count for the specified score value', () => {
+    comp.scoreValues = [4];
     expect(comp.getScoreValuesCount()).toEqual(2);
   });
-});
+}
+
+function getComponentData(): void {
+  it(`getComponentData() should get the last component data if nodeId and componentId are not
+      specified`, () => {
+    expect(comp.getComponentData()).toEqual(componentData2);
+  });
+
+  it(`getComponentData() should get the component data if nodeId and componentId are
+      specified`, () => {
+    comp.nodeId = nodeId1;
+    comp.componentId = componentId1;
+    expect(comp.getComponentData()).toEqual(componentData1);
+  });
+}
+
+function createComponentData(
+  nodeId: string,
+  componentId: string,
+  counts: any,
+  average: number,
+  scoreCount: number,
+  scoreSum: number,
+  stepTitle: string
+): any {
+  return {
+    nodeId: nodeId,
+    componentId: componentId,
+    average: average,
+    counts: counts,
+    scoreCount: scoreCount,
+    scoreSum: scoreSum,
+    stepTitle: stepTitle
+  };
+}

src/main/webapp/site/src/app/teacher/milestone/milestone-report-data/milestone-report-data.component.ts

@@ -5,6 +5,12 @@ import { Component, Input } from '@angular/core';
   template: `{{ output }}`
 })
 export class MilestoneReportDataComponent {
+  @Input()
+  nodeId: string = '';
+
+  @Input()
+  componentId: string = '';
+
   @Input()
   calc: string;
 
@@ -30,30 +36,55 @@ export class MilestoneReportDataComponent {
       this.output = this.getCount();
     }
     if (this.calc === 'average') {
-      this.output = this.data.average;
+      this.output = this.getAverage();
     }
   }
 
   getPercent() {
     const count = this.getCount();
-    const total = this.data.scoreCount;
+    const total = this.getComponentData().scoreCount;
     return `${Math.round((count / total) * 100)}%`;
   }
 
   getCount() {
     if (this.scoreValues && this.scoreValues.length) {
       return this.getScoreValuesCount();
     }
-    return this.data.scoreCount;
+    return this.getComponentData().scoreCount;
+  }
+
+  getAverage() {
+    return this.getComponentData().average;
   }
 
   getScoreValuesCount() {
     let count = 0;
-    for (const [key, value] of Object.entries(this.data.counts)) {
+    for (const [key, value] of Object.entries(this.getComponentData().counts)) {
       if (this.scoreValues.includes(Number(key))) {
         count += Number(value);
       }
     }
     return count;
   }
+
+  getComponentData(
+    data: any[] = this.data,
+    nodeId: string = this.nodeId,
+    componentId: string = this.componentId
+  ): any {
+    if (nodeId === '' && componentId === '') {
+      return data[data.length - 1];
+    } else {
+      return this.getComponentDataByNodeIdAndComponentId(data, nodeId, componentId);
+    }
+  }
+
+  getComponentDataByNodeIdAndComponentId(data: any[], nodeId: string, componentId: string): any {
+    for (const componentData of data) {
+      if (componentData.nodeId === nodeId && componentData.componentId === componentId) {
+        return componentData;
+      }
+    }
+    return null;
+  }
 }