From eb55f297061ebd8806b173d1a4e8aa6e60d3164e Mon Sep 17 00:00:00 2001
From: elinuxhenrik <henrik.b.andersson@est.tech>
Date: Wed, 10 Feb 2021 14:44:10 +0100
Subject: [PATCH] Add coverage to app.component

Change-Id: Icdedf93dc91c4b15d728af588a638987a339bb66
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
Issue-ID: NONRTRIC-439
---
 webapp-frontend/src/app/app.component.html        |  2 +-
 webapp-frontend/src/app/app.component.spec.ts     | 47 +++++++++++++++++++++--
 webapp-frontend/src/app/app.component.ts          |  6 ---
 webapp-frontend/src/app/services/ui/ui.service.ts |  4 ++
 4 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/webapp-frontend/src/app/app.component.html b/webapp-frontend/src/app/app.component.html
index 0f2aa0d..202afc5 100644
--- a/webapp-frontend/src/app/app.component.html
+++ b/webapp-frontend/src/app/app.component.html
@@ -80,7 +80,7 @@
         <div class="mode-toggle__container">
           <span class="mode-toggle__text">Light</span>
           <label class="toggle-button__container">
-            <input (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
+            <input id="darkModeSwitch" (click)="modeToggleSwitch()" type="checkbox" class="mode-toggle__input" />
             <span [ngClass]="{'mode-toggle__bg-checked': darkMode}" class="mode-toggle__bg"></span>
             <span [ngClass]="{'mode-toggle__circle-checked': darkMode}" class="mode-toggle__circle"></span>
           </label>
diff --git a/webapp-frontend/src/app/app.component.spec.ts b/webapp-frontend/src/app/app.component.spec.ts
index ed040a0..af5126c 100644
--- a/webapp-frontend/src/app/app.component.spec.ts
+++ b/webapp-frontend/src/app/app.component.spec.ts
@@ -26,9 +26,12 @@ import { UiService } from './services/ui/ui.service';
 
 describe('AppComponent', () => {
   let fixture: ComponentFixture<AppComponent>;
+  let app: AppComponent;
+  let cookieServiceSpy: any;
+  let uiService: UiService;
 
   beforeEach(async(() => {
-    const cookieSpy = jasmine.createSpyObj('CookieService', [ 'get' ]);
+    cookieServiceSpy = jasmine.createSpyObj('CookieService', [ 'get', 'put' ]);
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule
@@ -40,7 +43,7 @@ describe('AppComponent', () => {
         AppComponent
       ],
       providers: [
-        { provide: CookieService, useValue: cookieSpy },
+        { provide: CookieService, useValue: cookieServiceSpy },
         UiService
       ]
     }).compileComponents();
@@ -48,11 +51,12 @@ describe('AppComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AppComponent);
+    app = fixture.componentInstance;
+    uiService = TestBed.get(UiService);
     fixture.detectChanges();
   });
 
   it('should create the app', () => {
-    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
@@ -62,6 +66,16 @@ describe('AppComponent', () => {
       expect(ele.src).toContain('assets/oran-logo.png');
     }));
 
+    it('should contain navigation menu', async(() => {
+      const ele = fixture.debugElement.nativeElement.querySelector('nrcp-sidenav-list');
+      expect(ele).toBeTruthy();
+    }));
+
+    it('should contain dark mode selector', async(() => {
+      const ele = fixture.debugElement.nativeElement.querySelector('#darkModeSwitch');
+      expect(ele).toBeTruthy();
+    }));
+
     it('should contain heading', async(() => {
       const ele = fixture.debugElement.nativeElement.querySelector('tspan');
       expect(ele.textContent.trim()).toBe('Non-RT RIC Control Panel');
@@ -77,4 +91,31 @@ describe('AppComponent', () => {
       expect(ele).toBeTruthy();
     }));
   });
+
+  describe('#darkMode', () => {
+    it('when dark mode value yes from cookie at start should set mode to dark', () => {
+      uiService.darkModeState.next(false); // Set internal state to light mode.
+      cookieServiceSpy.get.and.returnValue('yes'); // Cookie shall return dark mode used.
+
+      app.ngOnInit();
+
+      expect(uiService.getDarkMode()).toBeTruthy();
+      expect(app.darkMode).toBeTruthy();
+    });
+
+    it('should toggle dark mode when selector is clicked', () => {
+      const darkModeSelector = fixture.debugElement.nativeElement.querySelector('#darkModeSwitch');
+
+      // Toggle to light mode
+      darkModeSelector.click();
+      expect(uiService.getDarkMode()).toBeFalsy();
+      expect(cookieServiceSpy.put).toHaveBeenCalledWith('darkMode', 'no');
+
+
+      // Toggle to dark mode
+      darkModeSelector.click();
+      expect(uiService.getDarkMode()).toBeTruthy();
+      expect(cookieServiceSpy.put).toHaveBeenCalledWith('darkMode', 'yes');
+    });
+  });
 });
diff --git a/webapp-frontend/src/app/app.component.ts b/webapp-frontend/src/app/app.component.ts
index 544f0c4..9bbfba5 100644
--- a/webapp-frontend/src/app/app.component.ts
+++ b/webapp-frontend/src/app/app.component.ts
@@ -27,7 +27,6 @@ import { CookieService } from 'ngx-cookie';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  private showMenu = false;
   darkMode: boolean;
   private 'DARK_MODE_COOKIE' = 'darkMode';
 
@@ -45,13 +44,8 @@ export class AppComponent implements OnInit {
     });
   }
 
-  toggleMenu() {
-    this.showMenu = !this.showMenu;
-  }
-
   modeToggleSwitch() {
     this.ui.darkModeState.next(!this.darkMode);
     this.cookieService.put(this.DARK_MODE_COOKIE, this.darkMode ? 'yes' : 'no');
   }
-
 }
diff --git a/webapp-frontend/src/app/services/ui/ui.service.ts b/webapp-frontend/src/app/services/ui/ui.service.ts
index c475f1d..eea2ce3 100644
--- a/webapp-frontend/src/app/services/ui/ui.service.ts
+++ b/webapp-frontend/src/app/services/ui/ui.service.ts
@@ -31,4 +31,8 @@ export class UiService {
     this.darkModeState = new BehaviorSubject<boolean>(true);
     this.expanded = new Observable<boolean>();
   }
+
+  getDarkMode(): boolean {
+    return this.darkModeState.getValue();
+  }
 }
-- 
2.16.6