refactor: TT-332 changes to the button to change the page theme

Author: JosueOb

src/app/modules/shared/components/dark-mode/dark-mode.component.html

@@ -1,17 +1,10 @@
 <button
-  class="w-10 h-6 rounded-full bg-grayTW-lightest flex items-center transition duration-300 focus:outline-none shadow"
+  type="button"
+  class="p-2 transition duration-150 ease-in-out bg-whiteTW rounded-md hover:bg-grayTW-lightest dark:bg-grayTW-dark dark:hover:bg-grayTW-darker dark:hover:bg-gray-700 hover:text-gray-700 focus:outline-none focus:bg-grayTW-lightest dark:focus:bg-grayTW-darker"
   (click)="changeToDarkOrLightTheme()"
   *ngIf="isFeatureToggleDarkModeActive"
 >
-  <div
-    #themeToggle
-    class="w-7 h-7 relative rounded-full transition duration-500 transform bg-warningTW -translate-x-1 p-1"
-  >
-    <ng-container *ngIf="isDarkTheme(); else elseToggle">
-      <img src="assets/icons/moon.svg" alt="moon icon" />
-    </ng-container>
-    <ng-template #elseToggle>
-      <img src="assets/icons/sun.svg" alt="sun icon" />
-    </ng-template>
-  </div>
+  <div *ngIf="isDarkTheme(); then sunIcon; else moonIcon"></div>
+  <ng-template #moonIcon><img class="w-5 h-5" src="assets/icons/moon.svg" alt="moon icon" /></ng-template>
+  <ng-template #sunIcon><img class="w-5 h-5" src="assets/icons/sun.svg" alt="sun icon" /></ng-template>
 </button>

src/app/modules/shared/components/dark-mode/dark-mode.component.scss

@@ -1,9 +1,10 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed} from '@angular/core/testing';
 import { DarkModeComponent } from './dark-mode.component';
 
 describe('DarkModeComponent', () => {
   let component: DarkModeComponent;
   let fixture: ComponentFixture<DarkModeComponent>;
+  let html: HTMLElement;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -14,6 +15,7 @@ describe('DarkModeComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DarkModeComponent);
     component = fixture.componentInstance;
+    html = document.documentElement;
     fixture.detectChanges();
   });
 
@@ -57,24 +59,21 @@ describe('DarkModeComponent', () => {
     component.theme = 'dark';
     component.addOrRemoveDarkMode();
     fixture.detectChanges();
-    const htmlContainsDarkClass = document.documentElement.classList.contains('dark');
-    expect(htmlContainsDarkClass).toBe(true);
+    expect(html.classList.contains('dark')).toBe(true);
   });
 
-  it('should be changed to dark mode if the mode toggle is selected', () => {
-    component.isFeatureToggleDarkModeActive = true;
-    fixture.detectChanges();
-    component.themeToggle.nativeElement.click();
+  it('should not have dark class in the html tag when  theme is light', () => {
+    component.addOrRemoveDarkMode();
     fixture.detectChanges();
-    expect(component.theme).toEqual('dark');
-    expect(localStorage.getItem('theme')).toEqual('dark');
+    expect(component.theme).toEqual('light');
+    expect(html.classList.contains('dark')).toBe(false);
   });
 
-  it('call switchThemeToggleStyles() when ngAfterViewInit is called and isFeatureToggleDarkModeActive is true', () => {
-    component.isFeatureToggleDarkModeActive = true;
-    fixture.detectChanges();
-    component.ngAfterViewInit();
+  it('should change the value of the theme property, save it in the local storage and add the dark class to the HTML tag to change the theme', () => {
+    component.changeToDarkOrLightTheme();
     fixture.detectChanges();
-    expect(component.themeToggle.nativeElement.classList.contains('bg-warningTW')).toBe(true);
+    expect(component.theme).toEqual('dark');
+    expect(localStorage.getItem('theme')).toEqual('dark');
+    expect(html.classList.contains('dark')).toBe(true);
   });
 });

src/app/modules/shared/components/dark-mode/dark-mode.component.spec.ts

@@ -1,38 +1,29 @@
-import { AfterViewInit, ElementRef, ViewChild, Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
 import { FeatureToggle } from 'src/environments/enum';
 import { FeatureToggleGeneralService } from '../../feature-toggles/feature-toggle-general/feature-toggle-general.service';
 
 @Component({
   selector: 'app-dark-mode',
   templateUrl: './dark-mode.component.html',
-  styleUrls: ['./dark-mode.component.scss'],
 })
-export class DarkModeComponent implements OnInit, AfterViewInit {
+export class DarkModeComponent implements OnInit {
   public theme = 'light';
   public isFeatureToggleDarkModeActive: boolean;
 
-  @ViewChild('themeToggle') themeToggle: ElementRef;
-
   constructor(
     private cookiesService: CookieService,
     private featureToggleGeneralService: FeatureToggleGeneralService
   ) {}
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.featureToggleGeneralService.getActivated().subscribe(() => {
       this.isFeatureToggleDarkModeActive = this.cookiesService.get(FeatureToggle.DARK_MODE) === 'true';
+      if (this.isFeatureToggleDarkModeActive) {
+        this.checkThemeInLocalStorage();
+        this.addOrRemoveDarkMode();
+      }
     });
-    if (this.isFeatureToggleDarkModeActive) {
-      this.checkThemeInLocalStorage();
-      this.addOrRemoveDarkMode();
-    }
-  }
-
-  ngAfterViewInit(): void {
-    if (this.isFeatureToggleDarkModeActive) {
-      this.switchThemeToggleStyles();
-    }
   }
 
   getLocalStorageTheme(): string {
@@ -70,17 +61,6 @@ export class DarkModeComponent implements OnInit, AfterViewInit {
   changeToDarkOrLightTheme(): void {
     this.theme = this.setTheme();
     this.setLocalStorageTheme(this.theme);
-    this.switchThemeToggleStyles();
     this.addOrRemoveDarkMode();
   }
-
-  switchThemeToggleStyles(): void {
-    if (this.isDarkTheme()) {
-      this.themeToggle.nativeElement.classList.remove('bg-warningTW', '-translate-x-1');
-      this.themeToggle.nativeElement.classList.add('bg-grayTW-lighter', 'translate-x-1/2');
-    } else {
-      this.themeToggle.nativeElement.classList.remove('bg-grayTW-lighter', 'translate-x-1/2');
-      this.themeToggle.nativeElement.classList.add('bg-warningTW', '-translate-x-1');
-    }
-  }
 }