diff --git a/src/app/student/vle/student-vle.module.ts b/src/app/student/vle/student-vle.module.ts index 526b902315c..7410d27beae 100644 --- a/src/app/student/vle/student-vle.module.ts +++ b/src/app/student/vle/student-vle.module.ts @@ -39,7 +39,6 @@ import { NodeComponent } from '../../../assets/wise5/vle/node/node.component'; declarations: [ ChooseBranchPathDialogComponent, GenerateImageDialogComponent, - GroupTabsComponent, SafeUrl, VLEComponent, VLEParentComponent @@ -47,6 +46,7 @@ import { NodeComponent } from '../../../assets/wise5/vle/node/node.component'; imports: [ CommonModule, ComponentStudentModule, + GroupTabsComponent, MatDialogModule, NavigationComponent, NodeComponent, diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.html b/src/assets/wise5/directives/group-tabs/group-tabs.component.html index 68a41ad2c1b..70c880376f1 100644 --- a/src/assets/wise5/directives/group-tabs/group-tabs.component.html +++ b/src/assets/wise5/directives/group-tabs/group-tabs.component.html @@ -4,6 +4,7 @@ animationDuration="0ms" class="app-bg-bg" > - - + @for (node of groupNodes; track node.id) { + + } diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.spec.ts b/src/assets/wise5/directives/group-tabs/group-tabs.component.spec.ts index 8dd9c4271c5..32bc0441e28 100644 --- a/src/assets/wise5/directives/group-tabs/group-tabs.component.spec.ts +++ b/src/assets/wise5/directives/group-tabs/group-tabs.component.spec.ts @@ -1,13 +1,17 @@ -import { TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { of } from 'rxjs'; import { NodeStatusService } from '../../services/nodeStatusService'; import { StudentDataService } from '../../services/studentDataService'; import { VLEProjectService } from '../../vle/vleProjectService'; import { GroupTabsComponent } from './group-tabs.component'; import { NodeService } from '../../services/nodeService'; +import { HarnessLoader } from '@angular/cdk/testing'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; +import { MatTabGroupHarness } from '@angular/material/tabs/testing'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -const group1 = { id: 'group1' }; -const group2 = { id: 'group2' }; +const group1 = { id: 'group1', title: 'Lesson 1', startId: 'node1' }; +const group2 = { id: 'group2', title: 'Lesson 2', startId: 'node2' }; const node1 = { id: 'node1' }; class MockNodeStatusService { @@ -47,10 +51,14 @@ class MockStudentDataService { } let component: GroupTabsComponent; +let fixture: ComponentFixture; +let loader: HarnessLoader; let projectService: VLEProjectService; +let tabGroup: MatTabGroupHarness; describe('GroupTabsComponent', () => { - beforeEach(() => { + beforeEach(async () => { TestBed.configureTestingModule({ + imports: [BrowserAnimationsModule], providers: [ GroupTabsComponent, { provide: NodeService, useClass: MockNodeService }, @@ -59,8 +67,12 @@ describe('GroupTabsComponent', () => { { provide: StudentDataService, useClass: MockStudentDataService } ] }); - component = TestBed.inject(GroupTabsComponent); + fixture = TestBed.createComponent(GroupTabsComponent); + component = fixture.componentInstance; projectService = TestBed.inject(VLEProjectService); + fixture.detectChanges(); + loader = TestbedHarnessEnvironment.loader(fixture); + tabGroup = await loader.getHarness(MatTabGroupHarness); }); ngOnInit(); goToGroupTab(); @@ -68,23 +80,19 @@ describe('GroupTabsComponent', () => { function ngOnInit() { describe('ngOnInit()', () => { - it('should initialize class variables', () => { - component.ngOnInit(); - expect(component.groupNodes.length).toEqual(2); - expect(component.selectedTabIndex).toEqual(0); + it('should initialize class variables', async () => { + expect((await tabGroup.getTabs()).length).toEqual(2); + expect(await (await tabGroup.getSelectedTab()).getLabel()).toEqual('Lesson 1'); }); }); } function goToGroupTab() { describe('goToGroupTab()', () => { - it("should call function to set new group's startNodeId", () => { - component.groupNodes = [ - { id: 'group1', disabled: false, startId: 'node1', title: 'Lesson 1' } - ]; + it("should call function to set new group's startNodeId", async () => { const spy = spyOn(TestBed.inject(NodeService), 'setCurrentNode'); - component.goToGroupTab(0); - expect(spy).toHaveBeenCalledWith('node1'); + await (await tabGroup.getTabs())[1].select(); + expect(spy).toHaveBeenCalledWith('node2'); }); }); } diff --git a/src/assets/wise5/directives/group-tabs/group-tabs.component.ts b/src/assets/wise5/directives/group-tabs/group-tabs.component.ts index 736da32c273..35da28fb5f2 100644 --- a/src/assets/wise5/directives/group-tabs/group-tabs.component.ts +++ b/src/assets/wise5/directives/group-tabs/group-tabs.component.ts @@ -4,6 +4,8 @@ import { NodeStatusService } from '../../services/nodeStatusService'; import { StudentDataService } from '../../services/studentDataService'; import { VLEProjectService } from '../../vle/vleProjectService'; import { NodeService } from '../../services/nodeService'; +import { CommonModule } from '@angular/common'; +import { MatTabsModule } from '@angular/material/tabs'; class GroupNode { id: string; @@ -13,12 +15,14 @@ class GroupNode { } @Component({ + imports: [CommonModule, MatTabsModule], selector: 'group-tabs', + standalone: true, templateUrl: './group-tabs.component.html' }) export class GroupTabsComponent implements OnInit { - groupNodes: GroupNode[] = []; - selectedTabIndex: number; + protected groupNodes: GroupNode[] = []; + protected selectedTabIndex: number; private subscriptions: Subscription = new Subscription(); constructor( @@ -62,7 +66,7 @@ export class GroupTabsComponent implements OnInit { ); } - goToGroupTab(groupTabIndex: number): void { + protected goToGroupTab(groupTabIndex: number): void { const groupStartNodeId = this.groupNodes[groupTabIndex].startId; this.nodeService.setCurrentNode(groupStartNodeId); } diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html index 3bb2ea6adef..3f5d3e321f5 100644 --- a/src/assets/wise5/vle/vle.component.html +++ b/src/assets/wise5/vle/vle.component.html @@ -41,7 +41,7 @@ class="vle-content tabbed" [ngClass]="{ 'nav-view': layoutState === 'nav', 'node-view': layoutState === 'node' }" > - +
@if (layoutState === 'node') { diff --git a/src/messages.xlf b/src/messages.xlf index 5f3fbacbf35..1f7c7e827d9 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -18957,46 +18957,46 @@ Category Name: Are you sure you want to overwrite the current line data? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 231 + 237 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. src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 846 + 852 You can not edit this series. Please choose a series that can be edited. src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 860 + 866 Are you sure you want to reset the series? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1093 + 1099 Are you sure you want to reset the "" series? src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1095 + 1101 Trial src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 1593 + 1518 src/assets/wise5/components/graph/graph-student/graph-student.component.ts - 2417 + 2350