Angular2 Testing - Failure: Uncleanness (in the promise): Error: Template parsing errors: It is impossible to bind to the "message", since this is not a known property

Question

I have two components, one of which uses the other.

First: "GamePanelComponent" , which has an html file that contains: "my-game-panel-output" tag

Second:

 import { Component, Input } from '@angular/core'; @Component({ moduleId: module.id, selector: 'my-game-panel-output', templateUrl: 'gamepaneloutput.component.html', styleUrls: [ 'gamepaneloutput.component.css' ] }) export class GamePanelOutputComponent { @Input() message: string; } 

I wrote a test on GamePanelComponent :

 import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { GamePanelComponent } from './gamepanel.component'; import { GamePanelOutputComponent } from '../gamepaneloutput/gamepaneloutput.component'; describe('GamePanelComponent (inline template)', () => { let comp: GamePanelComponent; let fixture: ComponentFixture<GamePanelComponent>; beforeEach( async ( () => { TestBed.configureTestingModule({ declarations: [ GamePanelComponent ], // declare the test component }).compileComponents() .then(() => { fixture = TestBed.createComponent(GamePanelComponent); comp = fixture.componentInstance; }); })); it('isValidMove', () => { comp.ngOnInit(); let isValid = comp.isValidMove(0,0); expect(isValid).toBe(false); }); }); 

Unfortunately, the test fails with this error:

 Failed: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property of 'my-game-panel-output'. 

As you can see, I tried to import the " GamePanelOutputComponent " and this does not help.

I really stuck on it. Can anyone help?

Answer 1

When you are going to test your GamePanelComponent and put your <my-game-panel-output> in the template, your GamePanelOutputComponent now a child component of the GamePanelComponent . Since your <my-game-panel-output> is a custom angular HTML element, it does not know what to do with it. Therefore you need to declare .

To be able to declare your component, you first need to import , as you have already done:

 import { GamePanelOutputComponent } from '../gamepaneloutput/gamepaneloutput.component'; 

Now you need to declare your GamePanelOutputComponent in the declarations your TestBed.configureTestingModule() .

... declarations: [ GamePanelComponent, GamePanelOutputComponent ], ...

---

When your child component is part of the Module (for example, the form <md-icon> @angular/material ), you can simply import entire module.

 // Material Design Assets import { MaterialModule } from '@angular/material'; 

To use it, you need to import its GamePanelOutputComponent into imports your TestBed.configureTestingModule() . All material components are already declared in the module, so there is no need to declare them again.

... imports: [ MaterialModule.forRoot() ], ...