refactor(LabelStudentComponent): Clean up code

src/app/services/labelService.spec.ts

@@ -37,8 +37,7 @@ let canDeleteBoolean: boolean = true;
 describe('LabelService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    imports: [],
-    providers: [
+      providers: [
         AnnotationService,
         ConfigService,
         LabelService,
@@ -48,8 +47,8 @@ describe('LabelService', () => {
         TagService,
         provideHttpClient(withInterceptorsFromDi()),
         provideHttpClientTesting()
-    ]
-});
+      ]
+    });
     service = TestBed.inject(LabelService);
     label1 = createLabel(label1Text, label1PointX, label1PointY, label1TextX, label1TextY, color1);
     label2 = createLabel(label2Text, label2PointX, label2PointY, label2TextX, label2TextY, color2);
@@ -61,15 +60,12 @@ describe('LabelService', () => {
   canEdit();
   componentStateHasStudentWork();
   componentStateIsSameAsStarter();
-  labelArraysAreTheSame();
-  labelsAreTheSame();
   getTSpans();
   getSVGTextElementString();
   initializeCanvas();
   addLabelsToCanvas();
   addLabelToCanvas();
   createLabelServiceFunction();
-  makeSureValueIsWithinLimit();
 });
 
 function createComponentState(labels: any[], isSubmit: boolean = false) {
@@ -319,54 +315,6 @@ function componentStateIsSameAsStarter() {
   });
 }
 
-function labelArraysAreTheSame() {
-  function expectLabelArraysAreTheSame(labels1: any[], labels2: any[], expectedResult) {
-    expect(service.labelArraysAreTheSame(labels1, labels2)).toEqual(expectedResult);
-  }
-  it('should check if label arrays are the same when they are both null', () => {
-    expectLabelArraysAreTheSame(null, null, true);
-  });
-  it('should check if label arrays are the same when one is null and the other is not null', () => {
-    expectLabelArraysAreTheSame([label1], null, false);
-  });
-  it(`should check if label arrays are the same when both are not null and contain different
-      labels`, () => {
-    expectLabelArraysAreTheSame([label1], [label2], false);
-  });
-  it(`should check if label arrays are the same when both are not null and contain the same
-      labels`, () => {
-    expectLabelArraysAreTheSame([label1, label2], [label1, label2], true);
-  });
-}
-
-function labelsAreTheSame() {
-  function expectLabelsAreTheSame(label1: any, label2: any, expectedResult: any) {
-    expect(service.labelsAreTheSame(label1, label2)).toEqual(expectedResult);
-  }
-  it('should check if labels are the same when they are both null', () => {
-    expectLabelsAreTheSame(null, null, true);
-  });
-  it('should check if labels are the same when one is null and one is not null', () => {
-    expectLabelsAreTheSame({}, null, false);
-  });
-  it(`should check if labels are the same when both are not null and do not have the same
-      values`, () => {
-    expectLabelsAreTheSame(label1, label2, false);
-  });
-  it(`should check if labels are the same when both are not null and do have the same
-      values`, () => {
-    const label3 = createLabel(
-      label1Text,
-      label1PointX,
-      label1PointY,
-      label1TextX,
-      label1TextY,
-      color1
-    );
-    expectLabelsAreTheSame(label1, label3, true);
-  });
-}
-
 function getTSpans() {
   it('should get TSpans for the text', () => {
     const textWrapped = 'The quick brown fox\njumps over\nthe lazy dog.';
@@ -465,20 +413,3 @@ function createLabelServiceFunction() {
     expect(label.canDelete).toEqual(canDeleteBoolean);
   });
 }
-
-function makeSureValueIsWithinLimit() {
-  const limit: number = 100;
-  it('should make sure value is within limit when it is negative', () => {
-    expectMakeSureValueIsWithinLimit(-1, limit, 0);
-  });
-  it('should make sure value is within limit when it is between zero and limit', () => {
-    expectMakeSureValueIsWithinLimit(50, limit, 50);
-  });
-  it('should make sure value is within limit when it is greater than limit', () => {
-    expectMakeSureValueIsWithinLimit(101, limit, 100);
-  });
-}
-
-function expectMakeSureValueIsWithinLimit(x: number, width: number, expectedValue: number) {
-  expect(service.makeSureValueIsWithinLimit(x, width)).toEqual(expectedValue);
-}

src/assets/wise5/components/label/LabelStudentData.ts

@@ -0,0 +1,18 @@
+export class LabelStudentData {
+  backgroundImage: string = null;
+  labels: any[] = [];
+  submitCounter: number = 0;
+  version: number = 2;
+
+  constructor(
+    labels: any[] = [],
+    backgroundImage: string = null,
+    submitCounter: number = 0,
+    version: number = 2
+  ) {
+    this.labels = labels;
+    this.backgroundImage = backgroundImage;
+    this.submitCounter = submitCounter;
+    this.version = version;
+  }
+}

src/assets/wise5/components/label/label-student/label-student.component.html

@@ -1,13 +1,13 @@
 <component-header [component]="component" />
 <div class="input-wrapper" fxLayout="row wrap" fxLayoutAlign="start center">
-  @if (isAddNewLabelButtonVisible) {
+  @if (addNewLabelButtonVisible) {
     <button
       mat-raised-button
       color="primary"
       class="add-button"
       (click)="addNewLabel()"
       [disabled]="isDisabled"
-      matTooltip="Add New Label"
+      matTooltip="Add new label"
       matTooltipPosition="above"
       i18n-matTooltip
     >
@@ -87,7 +87,7 @@
       mat-raised-button
       color="primary"
       class="reset-button"
-      (click)="resetButtonClicked()"
+      (click)="reset()"
       [disabled]="isDisabled"
       matTooltip="Reset"
       matTooltipPosition="above"

src/assets/wise5/components/label/label-student/label-student.component.spec.ts

@@ -6,14 +6,20 @@ import { Component } from '../../../common/Component';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { MockComponents } from 'ng-mocks';
 import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatButtonHarness } from '@angular/material/button/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LabelStudentData } from '../LabelStudentData';
 
 let component: LabelStudentComponent;
 let fixture: ComponentFixture<LabelStudentComponent>;
+let loader: HarnessLoader;
 describe('LabelStudentComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [MockComponents(ComponentHeaderComponent)],
-      imports: [LabelStudentComponent, StudentTeacherCommonServicesModule],
+      imports: [BrowserAnimationsModule, LabelStudentComponent, StudentTeacherCommonServicesModule],
       providers: [provideHttpClient(withInterceptorsFromDi())]
     });
     fixture = TestBed.createComponent(LabelStudentComponent);
@@ -23,7 +29,8 @@ describe('LabelStudentComponent', () => {
       type: 'Label',
       prompt: 'Create some labels.',
       width: 800,
-      height: 600
+      height: 600,
+      canCreateLabels: true
     };
     component.component = new Component(componentContent, null);
     spyOn(component, 'giveFocusToLabelTextInput').and.callFake(() => {});
@@ -33,12 +40,12 @@ describe('LabelStudentComponent', () => {
       return true;
     });
     spyOn(component, 'studentDataChanged').and.callFake(() => {});
+    loader = TestbedHarnessEnvironment.loader(fixture);
     fixture.detectChanges();
   });
 
   initializeComponent();
   setStudentWork();
-  getLabelJSONObjectFromCircle();
   getLabelJSONObjectFromText();
   createStudentData();
   getTextCoordinate();
@@ -97,7 +104,6 @@ function initializeComponent() {
     expect(component.enableCircles).toEqual(enableCircles);
     expect(component.isSaveButtonVisible).toEqual(showSaveButton);
     expect(component.isSubmitButtonVisible).toEqual(showSubmitButton);
-    expect(component.isAddNewLabelButtonVisible).toEqual(canCreateLabels);
   });
 }
 
@@ -117,31 +123,6 @@ function setStudentWork() {
   });
 }
 
-function getLabelJSONObjectFromCircle() {
-  it('should get label json object from circle', () => {
-    const circleLeft = 100;
-    const circleTop = 200;
-    const circle = new fabric.Circle({ left: circleLeft, top: circleTop });
-    const textLeft = 300;
-    const textTop = 400;
-    const textString = 'Leaf';
-    const textBackgroundColor = 'green';
-    circle.text = {
-      left: textLeft,
-      top: textTop,
-      backgroundColor: textBackgroundColor
-    };
-    spyOn(component, 'getLabelFromCircle').and.returnValue({ textString: textString });
-    const labelJson = component.getLabelJSONObjectFromCircle(circle);
-    expect(labelJson.pointX).toEqual(circleLeft);
-    expect(labelJson.pointY).toEqual(circleTop);
-    expect(labelJson.textX).toEqual(textLeft);
-    expect(labelJson.textY).toEqual(textTop);
-    expect(labelJson.text).toEqual(textString);
-    expect(labelJson.color).toEqual(textBackgroundColor);
-  });
-}
-
 function getLabelJSONObjectFromText() {
   it('should get label json object from text', () => {
     const circleLeft = 100;
@@ -159,15 +140,17 @@ function getLabelJSONObjectFromText() {
     };
     const canEdit = true;
     const canDelete = true;
-    spyOn(component, 'getLabelFromText').and.returnValue({
-      textString: textString,
-      canEdit: canEdit,
-      canDelete: canDelete,
-      circle: circle,
-      line: {},
-      text: text
-    });
-    const labelJson = component.getLabelJSONObjectFromText(circle);
+    component.labels = [
+      {
+        textString: textString,
+        canEdit: canEdit,
+        canDelete: canDelete,
+        circle: circle,
+        line: {},
+        text: text
+      }
+    ];
+    const labelJson = component.getLabelJSONObjectFromText(text);
     expect(labelJson.pointX).toEqual(circleLeft);
     expect(labelJson.pointY).toEqual(circleTop);
     expect(labelJson.textX).toEqual(textLeft);
@@ -183,7 +166,7 @@ function createStudentData() {
   it('should create student data', () => {
     const labels = [{ text: 'Leaf' }, { text: 'Stem' }];
     const backgroundImage = 'plant.png';
-    const studentData = component.createStudentData(labels, backgroundImage);
+    const studentData = new LabelStudentData(labels, backgroundImage);
     expect(studentData.version).toEqual(2);
     expect(studentData.labels).toEqual(labels);
     expect(studentData.backgroundImage).toEqual(backgroundImage);
@@ -256,13 +239,12 @@ function limitObjectYPosition() {
 
 function getUnoccupiedPointLocation() {
   it('should get unoccupied point location when there are no occupied points', () => {
-    spyOn(component, 'getOccupiedPointLocations').and.returnValue([]);
     const unoccupiedPointLocation = component.getUnoccupiedPointLocation();
     expect(unoccupiedPointLocation.pointX).toEqual(80);
     expect(unoccupiedPointLocation.pointY).toEqual(80);
   });
   it('should get unoccupied point location when there are occupied points', () => {
-    spyOn(component, 'getOccupiedPointLocations').and.returnValue([
+    spyOn(component, 'getLabelData').and.returnValue([
       { pointX: 80, pointY: 80 },
       { pointX: 280, pointY: 80 }
     ]);
@@ -291,16 +273,19 @@ function getNumShowWorkConnectedComponents() {
 }
 
 function addNewLabel() {
-  it('should add a new label', () => {
-    component.addNewLabel();
-    expect(component.labels.length).toEqual(1);
+  describe('"Add new label" button is clicked', () => {
+    it('should add a new label', async () => {
+      await (
+        await loader.getHarness(MatButtonHarness.with({ selector: '[mattooltip="Add new label"]' }))
+      ).click();
+      expect(component.labels.length).toEqual(1);
+    });
   });
 }
 
 function deleteLabel() {
   it('should delete a label', () => {
-    component.addNewLabel();
-    expect(component.labels.length).toEqual(1);
+    component.labels = [{ text: 'leaf' }];
     component.deleteLabel(component.labels[0]);
     expect(component.labels.length).toEqual(0);
   });