heroes: add shallow test for HeroComponent

Author: petebacondarwin

tour-of-heroes/src/app/hero.component/hero.component.html

@@ -1,4 +1,3 @@
 <span class="badge">{{hero.id}}</span>
 <span>{{hero.name}}</span>
-<button class="delete"
-  (click)="onButtonClick(); $event.stopPropagation()">x</button>
+<button class="delete" (click)="onDelete()">x</button>

tour-of-heroes/src/app/hero.component/hero.component.spec.ts

@@ -0,0 +1,40 @@
+import { Component } from '@angular/core';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { HeroComponent } from './hero.component';
+import { Hero } from '../shared/hero';
+
+@Component({ selector: 'app-test', template: `<app-hero [hero]="hero" (delete)="onDelete($event)"></app-hero>`})
+class TestContainerComponent {
+  hero: Hero;
+  onDelete = jasmine.createSpy('onDelete');
+}
+
+describe('HeroComponent', () => {
+  let fixture: ComponentFixture<TestContainerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestContainerComponent, HeroComponent]
+    });
+    fixture = TestBed.createComponent(TestContainerComponent);
+  }));
+
+  it('should display the hero passed in as the hero input', () => {
+    fixture.componentInstance.hero = { id: 121, name: 'Mr Hero', strength: 4 };
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('121');
+    expect(fixture.nativeElement.textContent).toContain('Mr Hero');
+  });
+
+  it('should trigger the delete output when the X button is clicked', () => {
+    fixture.componentInstance.hero = { id: 121, name: 'Mr Hero', strength: 4 };
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button'));
+    button.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.onDelete).toHaveBeenCalledWith(fixture.componentInstance.hero);
+  });
+});

tour-of-heroes/src/app/hero.component/hero.component.ts

@@ -1,27 +1,16 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { Router }            from '@angular/router';
-
-import { Hero }                from '../shared/hero';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Hero } from '../shared/hero';
 
 @Component({
   selector: 'app-hero',
   templateUrl: './hero.component.html',
   styleUrls:  ['./hero.component.css']
 })
-export class HeroComponent implements OnInit {
+export class HeroComponent {
   @Input() hero: Hero;
   @Output() delete = new EventEmitter();
 
-  constructor() { 
-    console.log(4);
-  }
-
-  ngOnInit(): void { 
-    console.log(4.5);
-   }
-
-  onButtonClick(): void {
+  onDelete(): void {
     this.delete.next(this.hero);
   }
-
 }