Angular2テスト - 失敗：未知（約束）：エラー：テンプレート解析エラー：「メッセージ」にはバインドできません

Question

私は2つのコンポーネントを使用しています。

まず一つがある：含まれているhtmlファイルあり"GamePanelComponent"： "my-game-panel-output"タグを

2つ目は、次のとおりです。私は、テストを書いた

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; 
} 

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); 
    }); 

}); 

残念ながら、このエラーでテストは失敗します：

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'. 

ご覧のとおり、「GamePanelOutputComponent」をインポートしようとしましたが、それは役に立ちません。

私は本当にそれに固執しています。 誰かを助けることができますか？

Answer 1

あなたGamePanelComponentをテストしようとテンプレートであなたの<my-game-panel-output>を配置すると、あなたのGamePanelOutputComponentは今GamePanelComponentの子コンポーネントです。 <my-game-panel-output>はカスタムのHTML要素なので、角度は何をするべきかわかりません。したがって、をと宣言する必要があります。

あなたは既にやったように、最初のimportにそれをあなたが持っているよ、あなたのコンポーネントを宣言することを可能にするために：

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

を今、あなたは宣言する必要があなたのdeclarationsでごGamePanelOutputComponentTestBed.configureTestingModule()。

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

---

あなたの子コンポーネントがModuleの一部であり、あなただけのimportモジュール全体（例えば<md-icon>は@angular/materialを形成します）。あなたはインポートあなたTestBed.configureTestingModule()のimportsで、それはあなたのGamePanelOutputComponentする必要がありますそれを使用する

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

。すべての品目構成品目はで、すでにモジュールにと宣言されているので、再度宣言する必要はありません。

... imports: [ MaterialModule.forRoot() ], ...私はインポートすると、ちょうどその時の宣言を追加する必要がないとき