Add unit test on webapp's tcr-role-component initialization

Author: mengdaming

webapp/src/app/components/tcr-console/tcr-console.component.ts

@@ -31,7 +31,7 @@ export class TcrConsoleComponent implements OnInit {
   @ViewChild('term', {static: false}) child!: NgTerminal;
 
   constructor(private messageService: TcrMessageService) {
-    this.tcrMessage = toSignal(this.messageService.webSocket$);
+    this.tcrMessage = toSignal(this.messageService.message$);
 
     effect(() => {
       // When receiving a message from the server

webapp/src/app/components/tcr-role/tcr-role.component.html

@@ -3,12 +3,13 @@
               'navigator-on': role.active && role.name === 'navigator',
               'driver-on' : role.active && role.name === 'driver',
               'role-off': !role.active}"
+     data-testid="role-component"
      class="wrap">
   <div class="ico-wrap">
-    <span class="mbr-iconfont fa-compass fa" *ngIf="role.name === 'navigator'"></span>
-    <span class="mbr-iconfont fa-keyboard-o fa" *ngIf="role.name === 'driver'"></span>
+    <span class="mbr-iconfont fa-compass fa" *ngIf="role.name === 'navigator'" data-testid="role-icon"></span>
+    <span class="mbr-iconfont fa-keyboard-o fa" *ngIf="role.name === 'driver'" data-testid="role-icon"></span>
   </div>
   <div class="text-wrap vcenter">
-    <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">{{ role.description }}</h2>
+    <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5" data-testid="role-label">{{ role.description }}</h2>
   </div>
 </div>

webapp/src/app/components/tcr-role/tcr-role.component.spec.ts

@@ -1,17 +1,18 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {TcrRoleComponent} from './tcr-role.component';
-import {HttpClientTestingModule} from "@angular/common/http/testing";
-import {Observable, Subject} from "rxjs";
+import {Observable, of} from "rxjs";
 import {TcrMessage} from "../../interfaces/tcr-message";
 import {TcrRolesService} from "../../services/trc-roles.service";
 import {TcrRole} from "../../interfaces/tcr-role";
+import {By} from "@angular/platform-browser";
 
 class TcrRolesServiceFake implements Partial<TcrRolesService> {
-  webSocket$: Subject<TcrMessage> = new Subject<TcrMessage>();
+  constructor(public message$ = new Observable<TcrMessage>()) {
+  }
 
-  getRole(name: string): Observable<TcrRole> {
-    return new Observable<TcrRole>();
+  getRole(): Observable<TcrRole> {
+    return of({name: "", description: "", active: false});
   }
 }
 
@@ -22,20 +23,93 @@ describe('TcrRoleComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TcrRoleComponent, HttpClientTestingModule],
+      imports: [TcrRoleComponent],
       providers: [
         {provide: TcrRolesService, useClass: TcrRolesServiceFake},
       ]
     }).compileComponents();
 
+    serviceFake = TestBed.inject(TcrRolesService);
     fixture = TestBed.createComponent(TcrRoleComponent);
     component = fixture.componentInstance;
-    serviceFake = TestBed.inject(TcrRolesService);
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('component instance', () => {
+    it('should be created', () => {
+      expect(component).toBeTruthy();
+    });
+  });
+
+  describe('component initialization', () => {
+    const testCases = [
+      {
+        name: "driver",
+        description: "driver role",
+        active: true,
+        componentClass: 'driver-on',
+        iconClass: 'fa-keyboard-o'
+      },
+      {
+        name: "driver",
+        description: "driver role",
+        active: false,
+        componentClass: 'role-off',
+        iconClass: 'fa-keyboard-o'
+      },
+      {
+        name: "navigator",
+        description: "navigator role",
+        active: true,
+        componentClass: 'navigator-on',
+        iconClass: 'fa-compass'
+      },
+      {
+        name: "navigator",
+        description: "navigator role",
+        active: false,
+        componentClass: 'role-off',
+        iconClass: 'fa-compass'
+      }
+    ];
+
+    testCases.forEach(testCase => {
+      it(`should work with ${testCase.name} role ${testCase.active ? "on" : "off"}`, (done) => {
+        const role: TcrRole = {
+          name: testCase.name,
+          description: testCase.description,
+          active: testCase.active,
+        };
+
+        // Have the service fake's getRole method return the role
+        serviceFake.getRole = () => of(role);
+        fixture = TestBed.createComponent(TcrRoleComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        done()
+
+        // Verify that the component's role attribute is set correctly
+        expect(component.role).toEqual(role);
+
+        // Verify that the component is rendered with the expected CSS class
+        const componentElement = fixture.debugElement.query(
+          By.css(`[data-testid="role-component"]`));
+        expect(componentElement).toBeTruthy();
+        expect(componentElement.nativeElement.classList).toContain(testCase.componentClass);
+
+        // Verify that the right role icon is rendered
+        const iconElement = fixture.debugElement.query(
+          By.css(`[data-testid="role-icon"]`));
+        expect(iconElement).toBeTruthy();
+        expect(iconElement.nativeElement.classList).toContain(testCase.iconClass);
+
+        // Verify that the role label is rendered
+        const labelElement = fixture.debugElement.query(
+          By.css(`[data-testid="role-label"]`));
+        expect(labelElement).toBeTruthy();
+        expect(labelElement.nativeElement.textContent).toEqual(role.description);
+      });
+    });
   });
 });
 

webapp/src/app/components/tcr-role/tcr-role.component.ts

@@ -21,7 +21,7 @@ export class TcrRoleComponent implements OnInit {
   roleMessage: Signal<TcrMessage | undefined>;
 
   constructor(private rolesService: TcrRolesService) {
-    this.roleMessage = toSignal(this.rolesService.webSocket$);
+    this.roleMessage = toSignal(this.rolesService.message$);
 
     effect(() => {
       // When receiving a role message from the server

webapp/src/app/components/tcr-timer/tcr-timer.component.ts

@@ -29,7 +29,7 @@ export class TcrTimerComponent implements OnInit, AfterViewInit {
   private SYNC_INTERVAL = 10;
 
   constructor(private timerService: TcrTimerService) {
-    this.timerMessage = toSignal(this.timerService.webSocket$);
+    this.timerMessage = toSignal(this.timerService.message$);
 
     effect(() => {
       // When receiving a timer message from the server

webapp/src/app/services/tcr-message.service.spec.ts

@@ -43,7 +43,7 @@ describe('TcrMessageService', () => {
           timestamp: "",
         };
         let actual: TcrMessage | undefined;
-        service.webSocket$.subscribe((msg) => {
+        service.message$.subscribe((msg) => {
           actual = msg;
           done();
         });

webapp/src/app/services/tcr-message.service.ts

@@ -8,10 +8,10 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
   providedIn: 'root'
 })
 export class TcrMessageService {
-  public webSocket$: Observable<TcrMessage>;
+  public message$: Observable<TcrMessage>;
 
   constructor(private ws: WebsocketService) {
-    this.webSocket$ = this.ws.webSocket$.pipe(
+    this.message$ = this.ws.webSocket$.pipe(
       retry({delay: 5_000}),
       takeUntilDestroyed(),
     )

webapp/src/app/services/tcr-timer.service.spec.ts

@@ -86,7 +86,7 @@ describe('TcrTimerService', () => {
         timestamp: "",
       };
       let actual: TcrMessage | undefined;
-      service.webSocket$.subscribe((msg) => {
+      service.message$.subscribe((msg) => {
         actual = msg;
         done();
       });
@@ -103,7 +103,7 @@ describe('TcrTimerService', () => {
         timestamp: "",
       };
       let actual: TcrMessage | undefined;
-      service.webSocket$.subscribe((msg) => {
+      service.message$.subscribe((msg) => {
         actual = msg;
         done();
       });

webapp/src/app/services/tcr-timer.service.ts

@@ -11,10 +11,10 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 })
 export class TcrTimerService {
   private apiUrl = `/api`; // URL to web api
-  public webSocket$: Observable<TcrMessage>;
+  public message$: Observable<TcrMessage>;
 
   constructor(private http: HttpClient, private ws: WebsocketService) {
-    this.webSocket$ = this.ws.webSocket$.pipe(
+    this.message$ = this.ws.webSocket$.pipe(
       filter(message => message.type === TcrMessageType.TIMER),
       retry({delay: 5_000}),
       takeUntilDestroyed(),

webapp/src/app/services/trc-roles.service.spec.ts

@@ -133,7 +133,7 @@ describe('TcrRolesService', () => {
         timestamp: "",
       };
       let actual: TcrMessage | undefined;
-      service.webSocket$.subscribe((msg) => {
+      service.message$.subscribe((msg) => {
         actual = msg;
         done();
       });
@@ -150,7 +150,7 @@ describe('TcrRolesService', () => {
         timestamp: "",
       };
       let actual: TcrMessage | undefined;
-      service.webSocket$.subscribe((msg) => {
+      service.message$.subscribe((msg) => {
         actual = msg;
         done();
       });

webapp/src/app/services/trc-roles.service.ts

@@ -11,10 +11,10 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
 })
 export class TcrRolesService {
   private apiUrl = `/api`; // URL to web api
-  public webSocket$: Observable<TcrMessage>;
+  public message$: Observable<TcrMessage>;
 
   constructor(private http: HttpClient, private ws: WebsocketService) {
-    this.webSocket$ = this.ws.webSocket$.pipe(
+    this.message$ = this.ws.webSocket$.pipe(
       filter(message => message.type === TcrMessageType.ROLE),
       retry({delay: 5_000}),
       takeUntilDestroyed(),