refactor(GroupTabsComponent): Convert to standalone (#1913)

Author: hirokiterashima

src/app/student/vle/student-vle.module.ts

@@ -39,14 +39,14 @@ import { NodeComponent } from '../../../assets/wise5/vle/node/node.component';
   declarations: [
     ChooseBranchPathDialogComponent,
     GenerateImageDialogComponent,
-    GroupTabsComponent,
     SafeUrl,
     VLEComponent,
     VLEParentComponent
   ],
   imports: [
     CommonModule,
     ComponentStudentModule,
+    GroupTabsComponent,
     MatDialogModule,
     NavigationComponent,
     NodeComponent,

src/assets/wise5/directives/group-tabs/group-tabs.component.html

@@ -4,6 +4,7 @@
   animationDuration="0ms"
   class="app-bg-bg"
 >
-  <mat-tab *ngFor="let node of groupNodes" [label]="node.title" [disabled]="node.disabled">
-  </mat-tab>
+  @for (node of groupNodes; track node.id) {
+    <mat-tab [label]="node.title" [disabled]="node.disabled" />
+  }
 </mat-tab-group>

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<GroupTabsComponent>;
+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,32 +67,32 @@ 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();
 });
 
 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');
     });
   });
 }

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);
   }

src/assets/wise5/vle/vle.component.html

@@ -41,7 +41,7 @@
     class="vle-content tabbed"
     [ngClass]="{ 'nav-view': layoutState === 'nav', 'node-view': layoutState === 'node' }"
   >
-    <group-tabs></group-tabs>
+    <group-tabs />
     <div class="tab-content">
       <run-ended-and-locked-message *ngIf="runEndedAndLocked" />
       @if (layoutState === 'node') {