karma fails for Tour of Heroes tutorial, part 3, Multiple Components

Continued from: https://github.com/angular/quickstart/pull/184

I cannot run npm test on the results of the Tour of Heroes tutorial, part 3, Multiple Components. It produces this error:

    Chrome 52.0.2743 (Mac OS X 10.11.6) AppComponent with TCB should instantiate component FAILED
[1]     Error: Template parse errors:
[1]     Can't bind to 'hero' since it isn't a known property of 'my-hero-detail'.
[1]     1. If 'my-hero-detail' is an Angular component and it has 'hero' input, then verify that it is part of this module.
[1]     2. If 'my-hero-detail' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
[1]      ("
[1]           </li>
[1]         </ul>
[1]         <my-hero-detail [ERROR ->][hero]="selectedHero"></my-hero-detail>
[1]       "): AppComponent@10:20

It seems to me that hero is a known property of my-hero-detail:

export class HeroDetailComponent {
  @Input()
  hero: Hero;
}

What am I missing?

[psnider]

Found a solution!

Figuring perhaps the spec test needs to know about HeroDetailComponent, I modified app/app.component.spec.ts, by adding:

import { HeroDetailComponent } from './hero-detail.component';

and changing beforeEach() to include HeroDetailComponent in its declarations:

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [AppComponent, HeroDetailComponent]
    });
  });

Please update the tutorial to include these changes.

[filipesilva]

The right solution is to configure your testing module correctly:

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [AppComponent, HeroDetailComponent]
    });
  });

Tour of Heroes doesn’t talk about unit tests so it really doesn’t make sense to update it with these solutions. Instead, we have the testing chapter at https://angular.io/docs/ts/latest/guide/testing.html