refactor(header): scheme toggle button class to id

davidlj95 · Sep 29, 2023 · 7490297 · 7490297
1 parent ef2b368
commit 7490297
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -3,7 +3,7 @@
     <button
       (click)="colorSchemeService.toggleDarkLight()"
       aria-label="Color scheme toggle (dark or light)"
-      class="dark-light-scheme-toggle"
+      id="dark-light-scheme-toggle"
     >
       <span class="material-symbols-outlined light-only">{{
         MaterialSymbol.DarkTheme

diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
 import { MockProviders, ngMocks } from 'ng-mocks'
 import { ColorSchemeService } from './color-scheme.service'
 import { HeaderComponent } from './header.component'
@@ -25,7 +26,10 @@ describe('ToolbarComponent', () => {
   describe('when pressing scheme switcher icon', () => {
     it('should call dark / light scheme toggle', () => {
       const colorSchemeService = TestBed.inject(ColorSchemeService)
-      ngMocks.click('.dark-light-scheme-toggle')
+
+      fixture.debugElement
+        .query(By.css('#dark-light-scheme-toggle'))
+        .triggerEventHandler('click')
 
       expect(colorSchemeService.toggleDarkLight).toHaveBeenCalled()
     })