Skip to content

Commit

Permalink
refactor(TeacherProjectService): Extract CreateComponentService
Browse files Browse the repository at this point in the history
  • Loading branch information
hirokiterashima committed Aug 21, 2024
1 parent 55b3c24 commit c00fa00
Show file tree
Hide file tree
Showing 9 changed files with 130 additions and 83 deletions.
61 changes: 61 additions & 0 deletions src/app/services/createComponentService.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { TestBed } from '@angular/core/testing';
import { CreateComponentService } from '../../assets/wise5/services/createComponentService';
import { TeacherProjectService } from '../../assets/wise5/services/teacherProjectService';
import { StudentTeacherCommonServicesModule } from '../student-teacher-common-services.module';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { ComponentServiceLookupService } from '../../assets/wise5/services/componentServiceLookupService';
import { Node } from '../../assets/wise5/common/Node';

let componentServiceLookupService: ComponentServiceLookupService;
let projectService: TeacherProjectService;
let service: CreateComponentService;
let node;
describe('CreateComponentService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [StudentTeacherCommonServicesModule],
providers: [
CreateComponentService,
TeacherProjectService,
provideHttpClient(withInterceptorsFromDi())
]
});
node = new Node();
componentServiceLookupService = TestBed.inject(ComponentServiceLookupService);
projectService = TestBed.inject(TeacherProjectService);
service = TestBed.inject(CreateComponentService);
spyOn(projectService, 'getNode').and.returnValue(node);
});
create_NullInsertAfterComponentId();
create_NonNullInsertAfterComponentId();
});

function create_NullInsertAfterComponentId() {
describe('create() without insertAfterComponentId', () => {
it('should add the new component at the beginning', () => {
const component1 = service.create('node1', 'HTML');
expect(component1.type).toEqual('HTML');
expectNodeComponentTypes(['HTML']);
const component2 = service.create('node1', 'OpenResponse');
expect(component2.type).toEqual('OpenResponse');
expectNodeComponentTypes(['OpenResponse', 'HTML']);
});
});
}

function create_NonNullInsertAfterComponentId() {
describe('create() with insertAfterComponentId', () => {
it('should add the new component after the insertAfterComponentId', () => {
const component1 = service.create('node1', 'HTML');
expect(component1.type).toEqual('HTML');
expectNodeComponentTypes(['HTML']);
const component2 = service.create('node1', 'OpenResponse', component1.id);
expect(component2.type).toEqual('OpenResponse');
expectNodeComponentTypes(['HTML', 'OpenResponse']);
});
});
}

function expectNodeComponentTypes(types: string[]) {
expect(node.components.map((c) => c.type)).toEqual(types);
}
2 changes: 2 additions & 0 deletions src/app/teacher/teacher-authoring.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { ComponentInfoService } from '../../assets/wise5/services/componentInfoS
import { TeacherProjectTranslationService } from '../../assets/wise5/services/teacherProjectTranslationService';
import { DeleteTranslationsService } from '../../assets/wise5/services/deleteTranslationsService';
import { CopyTranslationsService } from '../../assets/wise5/services/copyTranslationsService';
import { CreateComponentService } from '../../assets/wise5/services/createComponentService';
import { NotifyAuthorService } from '../../assets/wise5/services/notifyAuthorService';

@NgModule({
Expand All @@ -45,6 +46,7 @@ import { NotifyAuthorService } from '../../assets/wise5/services/notifyAuthorSer
CopyNodesService,
CopyProjectService,
CopyTranslationsService,
CreateComponentService,
DataExportService,
{ provide: DataService, useExisting: TeacherDataService },
TeacherProjectTranslationService,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ReactiveFormsModule
} from '@angular/forms';
import { ComponentTypeService } from '../../../services/componentTypeService';
import { CreateComponentService } from '../../../services/createComponentService';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { TeacherProjectService } from '../../../services/teacherProjectService';
import { CommonModule } from '@angular/common';
Expand Down Expand Up @@ -52,6 +53,7 @@ export class AddYourOwnNodeComponent {

constructor(
private componentTypeService: ComponentTypeService,
private createComponentService: CreateComponentService,
private fb: FormBuilder,
private projectService: TeacherProjectService,
private route: ActivatedRoute,
Expand Down Expand Up @@ -97,7 +99,7 @@ export class AddYourOwnNodeComponent {
private addInitialComponents(nodeId: string, components: any[]): void {
components
.reverse()
.forEach((component) => this.projectService.createComponent(nodeId, component.type));
.forEach((component) => this.createComponentService.create(nodeId, component.type));
}

private save(): any {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddComponentButtonComponent } from './add-component-button.component';
import { MatDialog } from '@angular/material/dialog';
import { CreateComponentService } from '../../../services/createComponentService';
import { TeacherProjectService } from '../../../services/teacherProjectService';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
Expand All @@ -11,9 +12,11 @@ import { Node } from '../../../common/Node';
import { provideRouter } from '@angular/router';

class MockTeacherProjectService {
createComponent() {}
saveProject() {}
}
class MockCreateComponentService {
create() {}
}
let loader: HarnessLoader;
describe('AddComponentButtonComponent', () => {
let component: AddComponentButtonComponent;
Expand All @@ -23,6 +26,7 @@ describe('AddComponentButtonComponent', () => {
await TestBed.configureTestingModule({
imports: [AddComponentButtonComponent],
providers: [
{ provide: CreateComponentService, useClass: MockCreateComponentService },
{ provide: TeacherProjectService, useClass: MockTeacherProjectService },
provideRouter([])
]
Expand All @@ -40,7 +44,7 @@ describe('AddComponentButtonComponent', () => {
afterClosed: () => of({ action: 'create', componentType: 'OpenResponse' })
} as any);
const projectService = TestBed.inject(TeacherProjectService);
const createComponentSpy = spyOn(projectService, 'createComponent');
const createComponentSpy = spyOn(TestBed.inject(CreateComponentService), 'create');
const saveProjectSpy = spyOn(projectService, 'saveProject');
await (await loader.getHarness(MatButtonHarness)).click();
expect(dialogSpy).toHaveBeenCalledWith(ChooseNewComponent, {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { CreateComponentService } from '../../../services/createComponentService';
import { TeacherProjectService } from '../../../services/teacherProjectService';
import { MatDialog } from '@angular/material/dialog';
import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
Expand All @@ -21,6 +22,7 @@ export class AddComponentButtonComponent {
@Output() newComponentsEvent: EventEmitter<any> = new EventEmitter<any>();

constructor(
private createComponentService: CreateComponentService,
private dialog: MatDialog,
private projectService: TeacherProjectService,
private route: ActivatedRoute,
Expand All @@ -44,7 +46,7 @@ export class AddComponentButtonComponent {
}
});
} else {
const component = this.projectService.createComponent(
const component = this.createComponentService.create(
this.node.id,
componentType,
this.insertAfterComponentId
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import { TranslatableInputComponent } from '../../components/translatable-input/
import { CopyTranslationsService } from '../../../services/copyTranslationsService';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { RouterTestingModule } from '@angular/router/testing';
import { CreateComponentService } from '../../../services/createComponentService';

let component: NodeAuthoringComponent;
let component1: any;
Expand Down Expand Up @@ -68,6 +69,7 @@ describe('NodeAuthoringComponent', () => {
],
providers: [
ClassroomStatusService,
CreateComponentService,
CopyTranslationsService,
DeleteTranslationsService,
TeacherProjectTranslationService,
Expand Down
45 changes: 45 additions & 0 deletions src/assets/wise5/services/createComponentService.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Injectable } from '@angular/core';
import { TeacherProjectService } from './teacherProjectService';
import { ComponentServiceLookupService } from './componentServiceLookupService';
import { Node } from '../common/Node';

@Injectable()
export class CreateComponentService {
constructor(
private componentServiceLookupService: ComponentServiceLookupService,
private projectService: TeacherProjectService
) {}

/**
* Create a new component
* @param nodeId the node id to create the component in
* @param componentType the component type
* @param insertAfterComponentId Insert the new component after the given
* component id. If this argument is null, we will place the new component
* in the first position.
*/
create(nodeId: string, componentType: string, insertAfterComponentId: string = null): any {
const node = this.projectService.getNode(nodeId);
const service = this.componentServiceLookupService.getService(componentType);
const component = service.createComponent();
if (service.componentHasWork(component)) {
if (node.showSaveButton == false) {
if (this.projectService.doesAnyComponentInNodeShowSubmitButton(node.id)) {
component.showSaveButton = true;
} else {
node.showSaveButton = true;
}
}
}
this.addComponentToNode(node, component, insertAfterComponentId);
return component;
}

private addComponentToNode(node: Node, component: any, insertAfterComponentId: string): void {
const insertPosition =
insertAfterComponentId == null
? 0
: node.components.findIndex((c) => c.id === insertAfterComponentId) + 1;
node.components.splice(insertPosition, 0, component);
}
}
71 changes: 0 additions & 71 deletions src/assets/wise5/services/teacherProjectService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1465,31 +1465,6 @@ export class TeacherProjectService extends ProjectService {
}
}

/**
* Create a new component
* @param nodeId the node id to create the component in
* @param componentType the component type
* @param insertAfterComponentId Insert the new compnent after the given
* component id. If this argument is null, we will place the new component
* in the first position.
*/
createComponent(nodeId, componentType, insertAfterComponentId = null) {
const node = this.getNodeById(nodeId);
const service = this.componentServiceLookupService.getService(componentType);
const component = service.createComponent();
if (service.componentHasWork(component)) {
if (node.showSaveButton == false) {
if (this.doesAnyComponentInNodeShowSubmitButton(node.id)) {
component.showSaveButton = true;
} else {
node.showSaveButton = true;
}
}
}
this.addComponentToNode(node, component, insertAfterComponentId);
return component;
}

/**
* Check if any of the components in the node are showing their submit button.
* @param nodeId {string} The node id to check.
Expand Down Expand Up @@ -1529,52 +1504,6 @@ export class TeacherProjectService extends ProjectService {
return -1;
}

/**
* Add the component to the node
* @param node the node
* @param component the component
* @param insertAfterComponentId Insert the component after this given
* component id. If this argument is null, we will place the new component
* in the first position.
*/
addComponentToNode(node, component, insertAfterComponentId) {
if (insertAfterComponentId == null) {
node.components.splice(0, 0, component);
} else {
// place the new component after the insertAfterComponentId

// boolean flag for whether we have added the component yet
let added = false;

const components = node.components;
for (let c = 0; c < components.length; c++) {
const tempComponent = components[c];
if (
tempComponent != null &&
tempComponent.id != null &&
tempComponent.id == insertAfterComponentId
) {
/*
* we have found the component we want to add the new
* one after
*/

components.splice(c + 1, 0, component);
added = true;
break;
}
}

if (!added) {
/*
* the component has not been added yet so we will just add
* it at the end
*/
node.components.push(component);
}
}
}

hasGroupStartId(nodeId) {
const startId = this.getGroupStartId(nodeId);
return startId != null && startId != '';
Expand Down
16 changes: 8 additions & 8 deletions src/messages.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -9644,7 +9644,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
<source>New Step</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts</context>
<context context-type="linenumber">46</context>
<context context-type="linenumber">47</context>
</context-group>
</trans-unit>
<trans-unit id="909afacc2d9d62ea57b1ba4b1e70b6c4314f668d" datatype="html">
Expand Down Expand Up @@ -18957,46 +18957,46 @@ Category Name: <x id="PH_1" equiv-text="categoryName"/></source>
<source>Are you sure you want to overwrite the current line data?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">231</context>
<context context-type="linenumber">237</context>
</context-group>
</trans-unit>
<trans-unit id="6882380861047606832" datatype="html">
<source>The series you are trying to add a point to is currently hidden. Please show the series by clicking the series name in the legend and try adding the point again.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">846</context>
<context context-type="linenumber">852</context>
</context-group>
</trans-unit>
<trans-unit id="2852989551014711458" datatype="html">
<source>You can not edit this series. Please choose a series that can be edited.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">860</context>
<context context-type="linenumber">866</context>
</context-group>
</trans-unit>
<trans-unit id="7053114367342967943" datatype="html">
<source>Are you sure you want to reset the series?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">1093</context>
<context context-type="linenumber">1099</context>
</context-group>
</trans-unit>
<trans-unit id="7889560203726829643" datatype="html">
<source>Are you sure you want to reset the &quot;<x id="PH" equiv-text="seriesName"/>&quot; series?</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">1095</context>
<context context-type="linenumber">1101</context>
</context-group>
</trans-unit>
<trans-unit id="6999515396807067782" datatype="html">
<source>Trial</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">1593</context>
<context context-type="linenumber">1518</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/components/graph/graph-student/graph-student.component.ts</context>
<context context-type="linenumber">2417</context>
<context context-type="linenumber">2350</context>
</context-group>
</trans-unit>
<trans-unit id="7500488806315952979" datatype="html">
Expand Down

0 comments on commit c00fa00

Please sign in to comment.