Refactors Theme Component and increase coverage

src/app/theme/theme.component.html

@@ -1,18 +1,50 @@
 <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" id="default">Default</button>
-      <button type="button" (click)="setTheme('darkTheme')" class="btn btn-round btn-default theme-link" id="dark">Dark</button>
-      <button type="button" (click)="setTheme('basicTheme')" class="btn btn-round btn-default theme-link" id="basic">Basic</button>
-      <button type="button" (click)="setTheme('contrastTheme')" class="btn btn-round btn-default theme-link" id="contrast">Contrast</button>
-      <button type="button" (click)="setTheme('terminalTheme')" class="btn btn-round btn-default theme-link" id="terminal">Terminal</button>
-      <button type="button" (click)="setTheme('nightTheme')" class="btn btn-round btn-default theme-link" id="night">Night</button>
+      <button
+        type="button"
+        (click)="setTheme('defaultTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="default"
+      >Default</button>
+      <button
+        type="button"
+        (click)="setTheme('darkTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="dark"
+      >Dark</button>
+      <button
+        type="button" 
+        (click)="setTheme('basicTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="basic"
+      >Basic</button>
+      <button 
+        type="button"
+        (click)="setTheme('contrastTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="contrast"
+      >Contrast</button>
+      <button
+        type="button"
+        (click)="setTheme('terminalTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="terminal"
+      >Terminal</button>
+      <button
+        type="button"
+        (click)="setTheme('nightTheme')"
+        class="btn btn-round btn-default theme-link"
+        id="night"
+      >Night</button>
     </div>
-
   </div>
 </div>

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,109 @@ 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 default theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[0];
+    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('defaultTheme');
+    });
+  }));
+
+  it('should set dark 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');
+    });
+  }));
+
+  it('should set basic theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[2];
+    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('basicTheme');
+    });
+  }));
+
+  it('should set contrast theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[3];
+    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('contrastTheme');
+    });
+  }));
+
+  it('should set terminal theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[4];
+    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('terminalTheme');
+    });
+  }));
+
+  it('should set night theme', async(() => {
+    spyOn(component, 'setTheme').and.callThrough();
+
+    const element = fixture.debugElement.queryAll(By.css('button.theme-link'))[5];
+    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('nightTheme');
+    });
+  }));
 });

src/app/theme/theme.component.ts

@@ -123,15 +123,19 @@ export class ThemeComponent implements OnInit {
     this.themeService.navbarbgColor = '#373737';
     this.themeService.searchbarColor = '#ffffff';
     this.themeService.searchbarbgColor = '#323232';
-    (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.background = '#373737';
-    (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.borderTop = '#222222';
+    if (typeof(document.getElementsByClassName("footer-bar")[0] as HTMLElement) !== 'undefined') {
+      (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.background = '#373737';
+      (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.borderTop = '#222222';
+    }
     setBtnActive('night');
   }
 }
 
 function setFooter() {
-  (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.background = '#f2f2f2';
-  (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.borderTop = '#e4e4e4';
+  if (typeof(document.getElementsByClassName("footer-bar")[0] as HTMLElement) !== 'undefined') {
+    (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.background = '#f2f2f2';
+    (document.getElementsByClassName("footer-bar")[0] as HTMLElement).style.borderTop = '#e4e4e4';
+  }
 }
 
 function setBtnActive(btnID) {