Refactors Theme Component and added tests for coverage

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>

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');
+    });
+  }));
 });