refactor(UtilService): Move connected component functions #1347 (#1348)

src/app/services/graphService.spec.ts

@@ -63,6 +63,7 @@ function createComponentState(studentData: any, isSubmit: boolean = false) {
 
 function createComponentContent(series: any[] = [], xAxis: any = {}, yAxis: any = {}) {
   return {
+    connectedComponents: [],
     series: series,
     xAxis: xAxis,
     yAxis: yAxis
@@ -205,16 +206,17 @@ function hasSubmitComponentState() {
 }
 
 function canEdit() {
-  function expectCanEdit(component: any, expectedResult: boolean) {
-    expect(service.canEdit(component)).toEqual(expectedResult);
-  }
-  it('should check if the student can edit the graph when they can not edit', () => {
-    const multipleSeries = [createSingleSeries([], false), createSingleSeries([], false)];
-    expectCanEdit(createComponentContent(multipleSeries), false);
-  });
-  it('should check if the student can edit the graph when they can edit', () => {
-    const multipleSeries = [createSingleSeries([], false), createSingleSeries([], true)];
-    expectCanEdit(createComponentContent(multipleSeries), true);
+  describe('canEdit()', () => {
+    it('should return false when they can not edit', () => {
+      const multipleSeries = [createSingleSeries([], false), createSingleSeries([], false)];
+      const content = createComponentContent(multipleSeries);
+      content.connectedComponents = [{ type: 'showWork' }];
+      expect(service.canEdit(content)).toEqual(false);
+    });
+    it('should return true when they can edit', () => {
+      const multipleSeries = [createSingleSeries([], false), createSingleSeries([], true)];
+      expect(service.canEdit(createComponentContent(multipleSeries))).toEqual(true);
+    });
   });
 }
 

src/app/services/labelService.spec.ts

@@ -4,13 +4,11 @@ import { ConfigService } from '../../assets/wise5/services/configService';
 import { ProjectService } from '../../assets/wise5/services/projectService';
 import { StudentAssetService } from '../../assets/wise5/services/studentAssetService';
 import { TagService } from '../../assets/wise5/services/tagService';
-import { UtilService } from '../../assets/wise5/services/utilService';
 import { LabelService } from '../../assets/wise5/components/label/labelService';
 import { TestBed } from '@angular/core/testing';
 import { SessionService } from '../../assets/wise5/services/sessionService';
 
 let service: LabelService;
-let utilService: UtilService;
 let label1: any;
 let label2: any;
 let label1Text: any = 'Label 1';
@@ -46,12 +44,10 @@ describe('LabelService', () => {
         ProjectService,
         SessionService,
         StudentAssetService,
-        TagService,
-        UtilService
+        TagService
       ]
     });
-    service = TestBed.get(LabelService);
-    utilService = TestBed.get(UtilService);
+    service = TestBed.inject(LabelService);
     label1 = createLabel(label1Text, label1PointX, label1PointY, label1TextX, label1TextY, color1);
     label2 = createLabel(label2Text, label2PointX, label2PointY, label2TextX, label2TextY, color2);
   });
@@ -233,15 +229,13 @@ function componentStateHasLabel() {
 }
 
 function canEdit() {
-  it(`should check if the component can be edited when it does not have a show work connected
-      component`, () => {
-    spyOn(utilService, 'hasShowWorkConnectedComponent').and.returnValue(false);
-    expect(service.canEdit({})).toEqual(true);
-  });
-  it(`should check if the component can be edited when it does have a show work connected
-      component`, () => {
-    spyOn(utilService, 'hasShowWorkConnectedComponent').and.returnValue(true);
-    expect(service.canEdit({})).toEqual(false);
+  describe('canEdit()', () => {
+    it(`should return true when it does not have a show work connected component`, () => {
+      expect(service.canEdit({})).toEqual(true);
+    });
+    it(`should return false when it does have a show work connected component`, () => {
+      expect(service.canEdit({ connectedComponents: [{ type: 'showWork' }] })).toEqual(false);
+    });
   });
 }
 

src/assets/wise5/common/ComponentContent.spec.ts

@@ -0,0 +1,18 @@
+import { ComponentContent, hasConnectedComponent } from './ComponentContent';
+
+describe('ComponentContent', () => {
+  describe('hasConnectedComponent()', () => {
+    it('returns false when content does not have any connected components', () => {
+      const content = {} as ComponentContent;
+      expect(hasConnectedComponent(content, 'importWork')).toBeFalse();
+    });
+    it('returns false when content does not have the specified connected component type', () => {
+      const content = { connectedComponents: [{ type: 'showWork' }] } as ComponentContent;
+      expect(hasConnectedComponent(content, 'importWork')).toBeFalse();
+    });
+    it('returns true when content has the specified connected component type', () => {
+      const content = { connectedComponents: [{ type: 'importWork' }] } as ComponentContent;
+      expect(hasConnectedComponent(content, 'importWork')).toBeTrue();
+    });
+  });
+});

src/assets/wise5/common/ComponentContent.ts

@@ -15,3 +15,13 @@ export interface ComponentContent {
   showSubmitButton?: boolean;
   type: string;
 }
+
+export function hasConnectedComponent(
+  content: ComponentContent,
+  connectedComponentType: 'importWork' | 'showWork'
+): boolean {
+  return (
+    content.connectedComponents != null &&
+    content.connectedComponents.some((c) => c.type === connectedComponentType)
+  );
+}

src/assets/wise5/components/animation/animation-student/animation-student.component.ts

@@ -7,10 +7,10 @@ import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { AnimationService } from '../animationService';
+import { hasConnectedComponent } from '../../../common/ComponentContent';
 
 @Component({
   selector: 'animation-student',
@@ -52,8 +52,7 @@ export class AnimationStudent extends ComponentStudent {
     protected NodeService: NodeService,
     protected NotebookService: NotebookService,
     protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService,
-    protected UtilService: UtilService
+    protected StudentDataService: StudentDataService
   ) {
     super(
       AnnotationService,
@@ -77,7 +76,7 @@ export class AnimationStudent extends ComponentStudent {
     this.svgId = this.AnimationService.getSvgId(domIdEnding);
     this.initializeCoordinates();
 
-    if (this.UtilService.hasShowWorkConnectedComponent(this.componentContent)) {
+    if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (
       this.AnimationService.componentStateHasStudentWork(this.componentState, this.componentContent)

src/assets/wise5/components/audioOscillator/audio-oscillator-student/audio-oscillator-student.component.ts

@@ -7,10 +7,10 @@ import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { AudioOscillatorService } from '../audioOscillatorService';
+import { hasConnectedComponent } from '../../../common/ComponentContent';
 
 @Component({
   selector: 'audio-oscillator-student',
@@ -71,8 +71,7 @@ export class AudioOscillatorStudent extends ComponentStudent {
     protected NodeService: NodeService,
     protected NotebookService: NotebookService,
     protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService,
-    protected UtilService: UtilService
+    protected StudentDataService: StudentDataService
   ) {
     super(
       AnnotationService,
@@ -97,7 +96,7 @@ export class AudioOscillatorStudent extends ComponentStudent {
     this.setButtonTextToPlay();
     this.setParametersFromComponentContent();
 
-    if (this.UtilService.hasShowWorkConnectedComponent(this.componentContent)) {
+    if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (
       this.AudioOscillatorService.componentStateHasStudentWork(

src/assets/wise5/components/conceptMap/concept-map-student/concept-map-student.component.ts

@@ -9,13 +9,13 @@ import { NotebookService } from '../../../services/notebookService';
 import { ProjectService } from '../../../services/projectService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { ConceptMapService } from '../conceptMapService';
 import { DialogWithCloseComponent } from '../../../directives/dialog-with-close/dialog-with-close.component';
 import { copy } from '../../../common/object/object';
 import { convertToPNGFile } from '../../../common/canvas/canvas';
+import { hasConnectedComponent } from '../../../common/ComponentContent';
 
 @Component({
   selector: 'concept-map-student',
@@ -75,8 +75,7 @@ export class ConceptMapStudent extends ComponentStudent {
     protected NotebookService: NotebookService,
     private ProjectService: ProjectService,
     protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService,
-    protected UtilService: UtilService
+    protected StudentDataService: StudentDataService
   ) {
     super(
       AnnotationService,
@@ -156,7 +155,7 @@ export class ConceptMapStudent extends ComponentStudent {
 
   initializeSVG(): void {
     this.setupSVG();
-    if (this.UtilService.hasShowWorkConnectedComponent(this.componentContent)) {
+    if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (this.componentStateHasStudentWork(this.componentState, this.componentContent)) {
       this.componentState = this.ProjectService.injectAssetPaths(this.componentState);

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

@@ -6,7 +6,6 @@ import { StudentTeacherCommonServicesModule } from '../../../../../app/student-t
 import { Component } from '../../../common/Component';
 import { ProjectService } from '../../../services/projectService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { DrawService } from '../drawService';
 import { DrawStudent } from './draw-student.component';
 
@@ -87,9 +86,8 @@ function createCanvasObject(type: string): any {
 function initializeStudentData() {
   it('should initialize student data when there is a show work connected component', () => {
     component.componentContent.connectedComponents = [
-      { nodeId: 'node', componentId: 'component1' }
+      { nodeId: 'node', componentId: 'component1', type: 'showWork' }
     ];
-    spyOn(TestBed.inject(UtilService), 'hasShowWorkConnectedComponent').and.returnValue(true);
     spyOn(
       TestBed.inject(StudentDataService),
       'getLatestComponentStateByNodeIdAndComponentId'

src/assets/wise5/components/draw/draw-student/draw-student.component.ts

@@ -7,13 +7,13 @@ import { NotebookService } from '../../../services/notebookService';
 import { ProjectService } from '../../../services/projectService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { DrawService } from '../drawService';
 import { MatDialog } from '@angular/material/dialog';
 import { copy } from '../../../common/object/object';
 import { convertToPNGFile } from '../../../common/canvas/canvas';
+import { hasConnectedComponent } from '../../../common/ComponentContent';
 
 @Component({
   selector: 'draw-student',
@@ -41,8 +41,7 @@ export class DrawStudent extends ComponentStudent {
     protected NotebookService: NotebookService,
     private ProjectService: ProjectService,
     protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService,
-    protected UtilService: UtilService
+    protected StudentDataService: StudentDataService
   ) {
     super(
       AnnotationService,
@@ -113,7 +112,7 @@ export class DrawStudent extends ComponentStudent {
   }
 
   initializeStudentData(): void {
-    if (this.UtilService.hasShowWorkConnectedComponent(this.componentContent)) {
+    if (hasConnectedComponent(this.componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (
       this.DrawService.componentStateHasStudentWork(this.componentState, this.componentContent)

src/assets/wise5/components/graph/graphService.ts

@@ -4,10 +4,10 @@ import * as html2canvas from 'html2canvas';
 import { Injectable } from '@angular/core';
 import { ComponentService } from '../componentService';
 import { StudentAssetService } from '../../services/studentAssetService';
-import { UtilService } from '../../services/utilService';
 import { ConfigService } from '../../services/configService';
 import { HttpClient } from '@angular/common/http';
 import { convertToPNGFile } from '../../common/canvas/canvas';
+import { hasConnectedComponent } from '../../common/ComponentContent';
 
 @Injectable()
 export class GraphService extends ComponentService {
@@ -16,8 +16,7 @@ export class GraphService extends ComponentService {
   constructor(
     private configService: ConfigService,
     private http: HttpClient,
-    private StudentAssetService: StudentAssetService,
-    protected UtilService: UtilService
+    private StudentAssetService: StudentAssetService
   ) {
     super();
   }
@@ -128,17 +127,14 @@ export class GraphService extends ComponentService {
    * @param component The component content.
    * @return Whether the student can perform any work on this component.
    */
-  canEdit(component: any) {
+  canEdit(component: any): boolean {
     const series = component.series;
     for (const singleSeries of series) {
       if (singleSeries.canEdit) {
         return true;
       }
     }
-    if (this.UtilService.hasImportWorkConnectedComponent(component)) {
-      return true;
-    }
-    return false;
+    return hasConnectedComponent(component, 'importWork');
   }
 
   hasSeriesData(studentData: any) {

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

@@ -5,14 +5,14 @@ import { ConfigService } from '../../../services/configService';
 import { NodeService } from '../../../services/nodeService';
 import { NotebookService } from '../../../services/notebookService';
 import { StudentDataService } from '../../../services/studentDataService';
-import { UtilService } from '../../../services/utilService';
 import { ComponentStudent } from '../../component-student.component';
 import { ComponentService } from '../../componentService';
 import { LabelService } from '../labelService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { MatDialog } from '@angular/material/dialog';
 import { convertToPNGFile } from '../../../common/canvas/canvas';
 import { wordWrap } from '../../../common/string/string';
+import { hasConnectedComponent } from '../../../common/ComponentContent';
 
 @Component({
   selector: 'label-student',
@@ -55,8 +55,7 @@ export class LabelStudent extends ComponentStudent {
     protected NodeService: NodeService,
     protected NotebookService: NotebookService,
     protected StudentAssetService: StudentAssetService,
-    protected StudentDataService: StudentDataService,
-    protected UtilService: UtilService
+    protected StudentDataService: StudentDataService
   ) {
     super(
       AnnotationService,
@@ -287,7 +286,7 @@ export class LabelStudent extends ComponentStudent {
   }
 
   initializeStudentWork(componentContent: any, componentState: any): void {
-    if (this.UtilService.hasShowWorkConnectedComponent(componentContent)) {
+    if (hasConnectedComponent(componentContent, 'showWork')) {
       this.handleConnectedComponents();
     } else if (this.LabelService.componentStateHasStudentWork(componentState, componentContent)) {
       this.setStudentWork(componentState);

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

@@ -5,9 +5,9 @@ import SVG from 'svg.js';
 import { ComponentService } from '../componentService';
 import { StudentAssetService } from '../../services/studentAssetService';
 import { Injectable } from '@angular/core';
-import { UtilService } from '../../services/utilService';
 import { convertToPNGFile } from '../../common/canvas/canvas';
 import { wordWrap } from '../../common/string/string';
+import { hasConnectedComponent } from '../../common/ComponentContent';
 
 @Injectable()
 export class LabelService extends ComponentService {
@@ -16,10 +16,7 @@ export class LabelService extends ComponentService {
   circleZIndex: number = 2;
   defaultTextBackgroundColor: string = 'blue';
 
-  constructor(
-    private StudentAssetService: StudentAssetService,
-    protected UtilService: UtilService
-  ) {
+  constructor(private StudentAssetService: StudentAssetService) {
     super();
   }
 
@@ -83,8 +80,8 @@ export class LabelService extends ComponentService {
    * @param component The component content.
    * @return Whether the student can perform any work on this component.
    */
-  canEdit(component: any) {
-    return !this.UtilService.hasShowWorkConnectedComponent(component);
+  canEdit(component: any): boolean {
+    return !hasConnectedComponent(component, 'showWork');
   }
 
   componentStateHasStudentWork(componentState: any, componentContent: any): boolean {