Add test to dark mode/light mode toggle

Author: salmacodecomputerlove

apps/fretonator-web/src/app/common/header/__snapshots__/header.component.spec.ts.snap

@@ -68,7 +68,8 @@ exports[`HeaderComponent should match snapshot 1`] = `
         class="toggle__container"
       >
         <button
-          class="theme__toggle"
+          aria-label="Toggle dark/light mode"
+          class="theme__toggle isDark"
         >
           
           <app-moon-svg>

apps/fretonator-web/src/app/common/header/header.component.html

@@ -27,6 +27,8 @@
 
     <div class="toggle__container">
       <button class="theme__toggle"
+              [class.isDark]="darkColorMode"
+              [class.isLight]="!darkColorMode"
               aria-label="Toggle dark/light mode"
               (click)="toggleTheme()">
         <app-moon-svg *ngIf="darkColorMode"></app-moon-svg>

apps/fretonator-web/src/app/common/header/header.component.spec.ts

@@ -11,11 +11,14 @@ describe('HeaderComponent', () => {
     logo: By.css('.header__siteLogo'),
     links: By.css('.header__linksItemLink'),
     hamburger: By.css(`.hamburger`),
-    menu: By.css('.header__links')
+    menu: By.css('.header__links'),
+    themeToggleButton: By.css('.theme__toggle')
   };
 
   const classNames = {
-    menuHide: 'header__links--hide'
+    menuHide: 'header__links--hide',
+    isDark: 'isDark',
+    isLight: 'isLight'
   };
 
   @Component({
@@ -105,4 +108,23 @@ describe('HeaderComponent', () => {
       expect(menu.classes[classNames.menuHide]).toBeFalsy();
     });
   });
+
+  describe('toggleTheme()', () => {
+    let themeToggleButton: DebugElement;
+
+    beforeEach(() => {
+      themeToggleButton = fixture.debugElement.query(selectors.themeToggleButton);
+      fixture.detectChanges();
+    });
+
+    it('has the dark class by default', () => {
+      expect(themeToggleButton.classes[classNames.isDark]).toBeTruthy();
+    })
+
+    it('switches the class to isLight when clicked', () => {
+      themeToggleButton.nativeElement.click();
+      fixture.detectChanges();
+      expect(themeToggleButton.classes[classNames.isLight]).toBeTruthy();
+    })
+  });
 });