heroes: fixup HeroesComponent deep test

Author: petebacondarwin

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

@@ -1,69 +1,64 @@
-import { TestBed, fakeAsync, tick, async, ComponentFixture, inject } from '@angular/core/testing';
+import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { HeroComponent } from '../hero.component/hero.component';
 import { HeroesComponent } from './heroes.component';
 import { HeroService } from '../hero.service/hero.service';
 import { Router } from '@angular/router';
-import { By } from '@angular/platform-browser';
 
-describe('HeroDetailComponent (shallow tests)', () => {
+describe('HeroDetailComponent (deep tests)', () => {
   let fixture: ComponentFixture<HeroesComponent>;
-  let component: HeroesComponent;
-  let element;
-  let heroes = [
+  const HEROES = [
     {id: 3, name: 'Magneta', strength: 4},
     {id: 4, name: 'Dynama', strength: 2}
   ];
 
-  beforeEach(() => {
+  beforeEach(fakeAsync(() => {
 
     const mockHeroService = {
-      getHeros: () => Promise.resolve(heroes),
+      getHeroes: () => Promise.resolve(HEROES),
       delete: () => Promise.resolve()
     };
 
     const mockRouter = {};
 
     TestBed.configureTestingModule({
-      imports: [
-      ],
       declarations: [
         HeroComponent,
         HeroesComponent
       ],
       providers: [
         { provide: HeroService, useValue: mockHeroService },
         { provide: Router, useValue: mockRouter },
-      ],
-      schemas: [
-        // NO_ERRORS_SCHEMA will hide that angular doesn't know about ngModel
       ]
     });
 
     fixture = TestBed.createComponent(HeroesComponent);
-    component = fixture.componentInstance;
-    element = fixture.nativeElement;
-  });
-
-  describe('initial display', () => {
-    it('should show the hero id and name for each hero', fakeAsync(() => {
-      console.log(2.5);
-      expect(3).toBe(3);
-    }))
-  });
 
-  it('should select the hero when the hero is clicked');
+    // Trigger ngOnInit()
+    fixture.detectChanges();
+    // Resolve the promise from heroesService.getHeroes()
+    tick();
+    // Render the hero components
+    fixture.detectChanges();
+  }));
 
-  it('should delete the hero when the delete button is clicked');
+  it('should show the hero id and name for each hero', () => {
+    const heroComponents = fixture.debugElement.queryAll(By.directive(HeroComponent));
+    expect(heroComponents.length).toEqual(HEROES.length);
 
-});
-
-function createEvent(eventName: string, bubbles = false, cancelable = false) {
-  let evt = document.createEvent('CustomEvent');  // MUST be 'CustomEvent'
-  evt.initCustomEvent(eventName, bubbles, cancelable, null);
-  return evt;
-}
+    expect(heroComponents[0].nativeElement.textContent).toContain('Magneta');
+  });
 
-function getHeadingText(fixture) {
-  return fixture.debugElement.query(By.css('h2')).nativeElement.textContent;
-}
+  it('should delete the hero when the HeroComponent outputs the "delete" event', () => {
+    spyOn(fixture.componentInstance, 'delete');
+    const heroComponents = fixture.debugElement.queryAll(By.directive(HeroComponent));
+    heroComponents[0].triggerEventHandler('delete', null);
+    expect(fixture.componentInstance.delete).toHaveBeenCalledWith(HEROES[0]);
+  });
 
+  it('should select the hero when the hero is clicked', () => {
+    const heroContainers = fixture.debugElement.queryAll(By.css('li'));
+    heroContainers[0].triggerEventHandler('click', null);
+    expect(fixture.componentInstance.selectedHero).toBe(HEROES[0]);
+  });
+});

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

@@ -19,7 +19,7 @@ <h2>
 </div>
 
 
-<!-- 
+<!--
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license

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

@@ -15,11 +15,9 @@ export class HeroesComponent implements OnInit {
   constructor(
     private heroService: HeroService,
     private router: Router) {
-    console.log(1.5);
   }
 
   getHeroes(): void {
-    console.log(2)
     this.heroService
       .getHeroes()
       .then(heroes => this.heroes = heroes);