src/app/error-message/error-message.component.spec.ts

@@ -1,25 +1,52 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ErrorMessageComponent } from './error-message.component';
+import {ErrorMessageComponent} from './error-message.component';
+import {Component, ViewChild} from '@angular/core';
+import {Step} from '../step';
+
+@Component({
+  template: '<app-error-message [step]="step"></app-error-message>'
+})
+class TestHostComponent {
+  public step: Step = new Step(42);
+  @ViewChild(ErrorMessageComponent)
+  public sutComponent: ErrorMessageComponent;
+}
 
 describe('ErrorMessageComponent', () => {
-  let component: ErrorMessageComponent;
-  let fixture: ComponentFixture<ErrorMessageComponent>;
+  let testHostComponent: TestHostComponent;
+  let testHostFixture: ComponentFixture<TestHostComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ErrorMessageComponent ]
+      declarations: [
+        ErrorMessageComponent,
+        TestHostComponent
+      ]
     })
       .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ErrorMessageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
+    testHostFixture = TestBed.createComponent(TestHostComponent);
+    testHostComponent = testHostFixture.componentInstance;
+    testHostFixture.detectChanges();
   });
 
   it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(testHostComponent.sutComponent).toBeTruthy();
+  });
+
+  it('should display an error message', () => {
+    // arrange
+    testHostComponent.step.error = true;
+    testHostComponent.step.message = 'This is an error message';
+
+    // act
+    testHostFixture.detectChanges();
+
+    // assert
+    expect(testHostComponent.sutComponent.step.error).toBeTruthy();
+    expect(testHostComponent.sutComponent.step.message).toEqual('This is an error message');
   });
 });