refactor(ShowNodeInfoDialog): Convert to standalone component

WISE-Community · Nov 26, 2024 · ffbd0c1 · ffbd0c1
1 parent 03ccec3
commit ffbd0c1
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 13 deletions.
diff --git a/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.spec.ts b/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.spec.ts
@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ClassroomMonitorTestingModule } from '../../../assets/wise5/classroomMonitor/classroom-monitor-testing.module';
-import { NodeInfoComponent } from '../../../assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
@@ -17,7 +16,6 @@ const nodeId1: string = 'node1';
 const prompt: string = 'This is the prompt.';
 const stepRubric: string = 'This is the step rubric.';
 const stepTitle: string = 'This is the title';
-
 const node: any = {
   components: [
     {
@@ -35,12 +33,10 @@ const node: any = {
 describe('ShowNodeInfoDialogComponents', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ShowNodeInfoDialogComponent],
       imports: [
         ClassroomMonitorTestingModule,
         ComponentTypeServiceModule,
-        MatDialogModule,
-        NodeInfoComponent
+        ShowNodeInfoDialogComponent
       ],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: nodeId1 },
@@ -63,7 +59,7 @@ describe('ShowNodeInfoDialogComponents', () => {
   });
 
   it('should render the step content in the dialog', () => {
-    expect(fixture.debugElement.nativeElement.innerHTML).toContain(component.stepNumberAndTitle);
+    expect(fixture.debugElement.nativeElement.innerHTML).toContain(stepTitle);
     expect(fixture.debugElement.nativeElement.innerHTML).toContain(prompt);
     expect(fixture.debugElement.nativeElement.innerHTML).toContain(stepRubric);
     expect(fixture.debugElement.nativeElement.innerHTML).toContain(componentRubric);

diff --git a/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.ts b/src/app/classroom-monitor/show-node-info-dialog/show-node-info-dialog.component.ts
@@ -1,15 +1,19 @@
 import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
+import { NodeInfoComponent } from '../../../assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component';
 
 @Component({
+  imports: [MatButtonModule, MatDialogModule, NodeInfoComponent],
   selector: 'show-node-info-dialog',
   templateUrl: './show-node-info-dialog.component.html',
-  styleUrls: ['./show-node-info-dialog.component.scss']
+  styleUrl: './show-node-info-dialog.component.scss',
+  standalone: true
 })
 export class ShowNodeInfoDialogComponent implements OnInit {
   @ViewChild('nodeInfoDiv') nodeInfoDiv: ElementRef;
-  stepNumberAndTitle: string;
+  protected stepNumberAndTitle: string;
 
   constructor(
     public dialogRef: MatDialogRef<ShowNodeInfoDialogComponent>,

diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
@@ -9,7 +9,6 @@ import { PeerGroupGradingModule } from './peer-group-grading.module';
 import { TeacherSummaryDisplayComponent } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentTeacherCommonModule } from '../student-teacher-common.module';
-import { NodeInfoComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/shared/node-info/node-info.component';
 import { ComponentStudentModule } from '../../assets/wise5/components/component/component-student.module';
 import { NotebookWorkgroupGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component';
 import { ProjectProgressComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/studentProgress/project-progress/project-progress.component';
@@ -49,7 +48,6 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     NotebookWorkgroupGradingComponent,
     NotificationsMenuComponent,
     PauseScreensMenuComponent,
-    ShowNodeInfoDialogComponent,
     StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
@@ -69,13 +67,13 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     ManageStudentsModule,
     MilestoneModule,
     NavItemScoreComponent,
-    NodeInfoComponent,
     PeerGroupGradingModule,
     PreviewComponentComponent,
     ProjectProgressComponent,
     RouterModule,
     SaveIndicatorComponent,
     SelectPeriodComponent,
+    ShowNodeInfoDialogComponent,
     StepInfoComponent,
     StepToolsComponent,
     StudentTeacherCommonModule,