Unit tests for MessageComponent

Author: amercier

src/app/messages/messages.component.html

@@ -2,6 +2,6 @@
 
   <h2>Messages</h2>
   <button class="clear" (click)="messageService.clear()">clear</button>
-  <div *ngFor='let message of messageService.messages'> {{message}} </div>
+  <div *ngFor='let message of messageService.messages'>{{message}}</div>
 
 </div>

src/app/messages/messages.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MessagesComponent } from './messages.component';
 import { MessageService } from '../message.service';
@@ -7,25 +7,88 @@ describe('MessagesComponent', () => {
   let component: MessagesComponent;
   let fixture: ComponentFixture<MessagesComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        MessagesComponent
-      ],
-      providers: [
-        MessageService
-      ]
-    })
-    .compileComponents();
-  }));
+  /**
+   * Configure `TestBed`
+   * @param messageService Message service or mock
+   * @return Promise
+   */
+  function configureTestingModule(messageService: any = MessageService) {
+    return TestBed
+      .configureTestingModule({
+        declarations: [MessagesComponent],
+        providers: [{ provide: MessageService, useClass: messageService }]
+      })
+      .compileComponents()
+      .then(() => {
+        fixture = TestBed.createComponent(MessagesComponent);
+        component = fixture.componentInstance;
+      });
+  }
 
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MessagesComponent);
-    component = fixture.componentInstance;
+  it('should create', () => configureTestingModule().then(() => {
     fixture.detectChanges();
+    expect(component).toBeTruthy();
+  }));
+
+  describe('when message service contains messages', () => {
+    const messages = ['foo', 'bar'];
+    beforeEach(() => configureTestingModule(class { messages: String[] = messages; }));
+
+    it('should display a "Messages" title', () => {
+      fixture.detectChanges();
+
+      const titleElement = fixture.nativeElement.querySelector('h2');
+      expect(titleElement).toBeDefined();
+      expect(titleElement.textContent).toBe('Messages');
+    });
+
+    it('should display a "clear" button', () => {
+      fixture.detectChanges();
+
+      const clearButtonElement = fixture.nativeElement.querySelector('button.clear');
+      expect(clearButtonElement).toBeDefined();
+      expect(clearButtonElement.textContent).toBe('clear');
+    });
+
+    it('should display messages from the message service', () => {
+      fixture.detectChanges();
+
+      const messageElements = fixture.nativeElement.querySelector('div').querySelectorAll('div');
+      expect(messageElements.length).toBe(2);
+
+      const displayedMessages = Array.from(messageElements).map((d: HTMLElement) => d.textContent);
+      expect(displayedMessages).toEqual(messages);
+    });
+
+    describe('#clear button', () => {
+      it('should empty the message list when clicked', () => {
+        fixture.detectChanges();
+        component.messageService.clear = jasmine.createSpy('clear');
+
+        const clearButtonElement = fixture.nativeElement.querySelector('button.clear');
+        clearButtonElement.click();
+        expect(component.messageService.clear).toHaveBeenCalled();
+      });
+    });
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('when message service contains no message', () => {
+    const messages = [];
+    beforeEach(() => configureTestingModule(class { messages: String[] = messages; }));
+
+    it('should not display "Messages"', () => {
+      fixture.detectChanges();
+      expect(fixture.nativeElement).not.toContain('Messages');
+    });
+
+    it('should not display any button', () => {
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelectorAll('button').length).toBe(0);
+    });
+
+    it('should not display the container element', () => {
+      fixture.detectChanges();
+      expect(fixture.nativeElement.querySelector('div')).toBe(null);
+    });
   });
 });