refactor: TT-332 application of Azure toggle function to display dark mode

Author: JosueOb

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

@@ -1,6 +1,7 @@
 <button
   class="w-10 h-6 rounded-full bg-gray-lightest flex items-center transition duration-300 focus:outline-none shadow"
   (click)="changeToDarkOrLightTheme()"
+  *ngIf="isFeatureToggleDarkModeActive"
 >
   <div
     #themeToggle

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

@@ -1,10 +1,13 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CookieService } from 'ngx-cookie-service';
+import { FeatureToggle } from 'src/environments/enum';
 
 import { DarkModeComponent } from './dark-mode.component';
 
 describe('DarkModeComponent', () => {
   let component: DarkModeComponent;
   let fixture: ComponentFixture<DarkModeComponent>;
+  let cookieService: CookieService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -14,6 +17,7 @@ describe('DarkModeComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DarkModeComponent);
+    cookieService = TestBed.inject(CookieService);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
@@ -26,32 +30,32 @@ describe('DarkModeComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should be clear the default theme', () => {
-    expect(component.theme).toBe('light');
+  it('should be light the default theme', () => {
+    expect(component.theme).toEqual('light');
   });
 
   it('should change the value of the theme property if it exists in the local storage', () => {
     localStorage.setItem('theme', 'dark');
     component.checkThemeInLocalStorage();
-    expect(component.theme).toBe('dark');
+    expect(component.theme).toEqual('dark');
   });
 
   it('should be light theme if it does not exist in local storage', () => {
     component.checkThemeInLocalStorage();
-    expect(component.theme).toBe('light');
+    expect(component.theme).toEqual('light');
   });
 
   it('should be light theme if only the theme property exists in local storage and not its value', () => {
     localStorage.setItem('theme', '');
     component.checkThemeInLocalStorage();
-    expect(component.theme).toBe('light');
+    expect(component.theme).toEqual('light');
   });
 
   it('should switch to dark theme if the theme property is light and vice versa', () => {
     component.theme = component.setTheme();
-    expect(component.theme).toBe('dark');
+    expect(component.theme).toEqual('dark');
     component.theme = component.setTheme();
-    expect(component.theme).toBe('light');
+    expect(component.theme).toEqual('light');
   });
 
   it('should add the dark class in the html tag to apply dark mode', () => {
@@ -63,9 +67,19 @@ describe('DarkModeComponent', () => {
   });
 
   it('should be changed to dark mode if the mode toggle is selected', () => {
+    component.isFeatureToggleDarkModeActive = true;
+    fixture.detectChanges();
     component.themeToggle.nativeElement.click();
     fixture.detectChanges();
-    expect(component.theme).toBe('dark');
-    expect(localStorage.getItem('theme')).toBe('dark');
+    expect(component.theme).toEqual('dark');
+    expect(localStorage.getItem('theme')).toEqual('dark');
+  });
+
+  it('call switchThemeToggleStyles() when ngAfterViewInit is called and isFeatureToggleDarkModeActive is true', () => {
+    component.isFeatureToggleDarkModeActive = true;
+    fixture.detectChanges();
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    expect(component.themeToggle.nativeElement.classList.contains('bg-warning')).toBe(true);
   });
 });

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

@@ -1,22 +1,38 @@
-import { AfterViewInit, ElementRef, ViewChild, Component } from '@angular/core';
+import { AfterViewInit, ElementRef, ViewChild, 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 AfterViewInit {
+export class DarkModeComponent implements OnInit, AfterViewInit {
   public theme = 'light';
+  public isFeatureToggleDarkModeActive: boolean;
 
   @ViewChild('themeToggle') themeToggle: ElementRef;
 
-  constructor() {
-    this.checkThemeInLocalStorage();
-    this.addOrRemoveDarkMode();
+  constructor(
+    private cookiesService: CookieService,
+    private featureToggleGeneralService: FeatureToggleGeneralService
+  ) {}
+
+  ngOnInit(): void {
+    this.featureToggleGeneralService.getActivated().subscribe(() => {
+      this.isFeatureToggleDarkModeActive = this.cookiesService.get(FeatureToggle.DARK_MODE) === 'true';
+    });
+    if (this.isFeatureToggleDarkModeActive) {
+      this.checkThemeInLocalStorage();
+      this.addOrRemoveDarkMode();
+    }
   }
 
   ngAfterViewInit(): void {
-    this.switchThemeToggleStyles(this.theme);
+    if (this.isFeatureToggleDarkModeActive) {
+      this.switchThemeToggleStyles(this.theme);
+    }
   }
 
   getLocalStorageTheme(): string {

src/environments/enum.ts

@@ -1,4 +1,5 @@
 export enum FeatureToggle {
-    SWITCH_GROUP = 'switch-group',
-    TIME_TRACKER_CALENDAR = 'time-tracker-calendar'
+  SWITCH_GROUP = 'switch-group',
+  TIME_TRACKER_CALENDAR = 'time-tracker-calendar',
+  DARK_MODE = 'dark-mode',
 }