Angular2 Testing - Failed: Uncaught (in promise): Error: Template parse errors: Can't bind to 'message' since it isn't a known property of

Question

I have two components which one uses the other.

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

Second one is:

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 to 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, 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 "GamePanelOutputComponent" and that doesn't help.

I'm really stuck on it. Can someone assist ?

Answer 1

When you are going to test your GamePanelComponent and placed your <my-game-panel-output> in the template, your GamePanelOutputComponent is a child component of GamePanelComponent now. Since your <my-game-panel-output> is a custom HTML element angular wouldn't know what to do with it. Therefore you'll have to declare it as well.

In order to be able to declare your component you'll have to import it first, like you've done already:

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

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

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

---

When your child component is part of a Module (eg the <md-icon>form the @angular/material) you can just import the whole module.

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

To use it you'll have to import it your GamePanelOutputComponent in the imports of your TestBed.configureTestingModule(). All material components are already declared in the Module so there is no need to declare them again.

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