From a7f2b09198cd8f2d1c45064874c009a94dd5101c Mon Sep 17 00:00:00 2001
From: Shreyansh Dwivedi <shreyanshdwivedi1997@gmail.com>
Date: Sun, 23 Dec 2018 03:41:33 +0530
Subject: [PATCH] Refactors Theme Component and added tests for coverage

---
 src/app/theme/theme.component.html    | 48 +++++++++++++++++++++------
 src/app/theme/theme.component.spec.ts | 31 +++++++++++++++++
 2 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/src/app/theme/theme.component.html b/src/app/theme/theme.component.html
index 66d878750d..f080c67b0e 100644
--- a/src/app/theme/theme.component.html
+++ b/src/app/theme/theme.component.html
@@ -1,18 +1,44 @@
 <div class="modal-dialog" role="document">
   <div class="modal-content">
-
     <div class="modal-header">
-      <!-- Start ignoring HTMLLintBear -->
-      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-      <!-- Stop ignoring HTMLLintBear -->
+      <button
+        type="button"
+        class="close"
+        data-dismiss="modal"
+        aria-label="Close"
+        ><span aria-hidden="true">&times;</span
+      ></button>
       <h4 class="modal-title" id="my-modal-label">Customization</h4>
-      <button type="button" (click)="setTheme('defaultTheme')" class="btn btn-round btn-default theme-link">Default</button>
-      <button type="button" (click)="setTheme('darkTheme')" class="btn btn-round btn-default theme-link">Dark</button>
-      <button type="button" (click)="setTheme('basicTheme')" class="btn btn-round btn-default theme-link">Basic</button>
-      <button type="button" (click)="setTheme('contrastTheme')" class="btn btn-round btn-default theme-link">Contrast</button>
-      <button type="button" (click)="setTheme('terminalTheme')" class="btn btn-round btn-default theme-link">Terminal</button>
-      <button type="button" (click)="setTheme('nightTheme')" class="btn btn-round btn-default theme-link">Night</button>
+      <button
+        type="button"
+        (click)="setTheme('defaultTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Default</button>
+      <button
+        type="button"
+        (click)="setTheme('darkTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Dark</button>
+      <button
+        type="button" 
+        (click)="setTheme('basicTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Basic</button>
+      <button 
+        type="button"
+        (click)="setTheme('contrastTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Contrast</button>
+      <button
+        type="button"
+        (click)="setTheme('terminalTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Terminal</button>
+      <button
+        type="button"
+        (click)="setTheme('nightTheme')"
+        class="btn btn-round btn-default theme-link"
+      >Night</button>
     </div>
-
   </div>
 </div>
diff --git a/src/app/theme/theme.component.spec.ts b/src/app/theme/theme.component.spec.ts
index 76e139c339..d8e7040ab4 100644
--- a/src/app/theme/theme.component.spec.ts
+++ b/src/app/theme/theme.component.spec.ts
@@ -2,6 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ThemeComponent } from './theme.component';
 import { ThemeService } from '../services/theme.service';
+import { By } from '@angular/platform-browser';
 
 describe('ThemeComponent', () => {
   let component: ThemeComponent;
@@ -28,4 +29,34 @@ describe('ThemeComponent', () => {
   it('should be created', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should have modal-title', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h4.modal-title')).toBeTruthy();
+  });
+
+  it('should have button of class close', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('button.close')).toBeTruthy();
+  });
+
+  it('should have 6 buttons of class theme-link', () => {
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'));
+    expect(element.length).toBe(6);
+  });
+
+  it('should set theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[1];
+    const btn = element.nativeElement as HTMLElement;
+    btn.click();
+
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      fixture.detectChanges();
+      const theme = JSON.parse(localStorage.getItem('theme')).value;
+      expect(theme).toBe('darkTheme');
+    });
+  }));
 });