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

[psnider]

Continued from: #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.

[psnider]

Found another solution, that I like better:

Instead of the changing app/app.component.spec.ts as above, modify app/app.component.ts:

add this import at the top:

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

then add this directives field to the @component decorator:

  directives: [HeroDetailComponent]

[psnider]

Please update the tutorial with whichever change is preferable.

[guntram]

We had similar issues with angular2-material@2.0.0-alpha.8-2 components.
The app runs fine, but the karma/jasmine tests throw errors for these components.

Your first solution works well, but is there an equivalent workaround to your "directives" include?
Because the directives key was replaced with "declarations" and is only available in @NgModule annotations...?!

Thanks for the hint, we were looking for a solution for quite some time now only to get the karma/jasmine tests running again 🍹

[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

[guntram]

Thanks for clarifying! :)

[imanalopher]

...
import { HeroDetailComponent } from './hero-detail.component';
...
declarations: [ AppComponent, HeroDetailComponent ]

In app.module.ts

[oxydaemon]

The tutorial is missing the import in the app.module.ts ; the changes should be added to the tutorial and the final code review section else this doesn't work.

The zip file download of the final code of tutorial 5 actually contains the changes but it isn't mentioned in the tutorial itself or the final code review tabs

[leb9049]

For anyone else that stumbles on to this.
I had the same error show up, long story short. I had to stop the 'ng serve' and restart it.

I ultimately figured this out by getting rid of the '[hero]="selectedHero"' from heroes.component.html and when it auto refreshed I got the auto generated 'hero-detail works'.

I am using:

• Ubuntu 18.04
• Chrome 71.0.3578.98
• Visual Studio Code 1.30.1
• Angular CLI: 7.2.3
• Node: 10.15.0
• Angular: 7.2.2

[farnsworth2008]

It's invalid to have this as a closed issue because it was not fixed or addressed in the documentation.

[Treer]

Agree with farnsworth2008 - shouldn't be closed.

I ran through the tutorial and it runs fine, but Ng test errors suggest to me something is structured wrong and I don't know what because the solutions from google/stackoverflow feel like hacks - should I really be importing and listing every sub-component and sub-sub-component in a project into the top-level app.component.spec.ts ?

The tutorial doesn't need to cover this, but since it leaves you with a project that fails most of its tests out of the box, an optional section on the right way to get the heroes project testable would be excellent. The Testing section of the Angular guide starts from the position that your project will be automagically ready to test and [in the beginning] passing its tests.

Edit: Regarding other commenters mentioning ng serve, I don't know what this ng test issue has to do with that, but restarting/stopping ng serve does not change for me that the tests fail.

[troypilewski]

I did not change a thing.

But tried the suggestion by @leb9049 to restart the 'ng serve'
This seemed to fix the issue.