AngularJS2の "final"のテストコンポーネントをどのようにユニット化できますか？

Question

私は現在、非常に単純なAngularJs2コンポーネントの単体テストを作成しようとしています。これはテンプレートです

// cell.component.ts 
import { Component, Input } from '@angular/core'; 
import Cell from './cell'; 

@Component({ 
    moduleId: module.id, 
    selector: 'cell', 
    templateUrl: 'cell.component.html', 
    styleUrls: ['cell.component.css'] 
}) 

export class CellComponent { 
    @Input() 
    cell = Cell; 
} 

：

<!-- cell.component.html --> 
<div class="ticTacToe--board-cell ticTacToe--board-cell--{{cell.background}}"> 
    <div class="ticTacToe--board-cell--{{cell.displayMarker()}}">{{cell.displayMarker()}}</div> 
</div> 

そして、ここに私の現在のテストです：

この

は活字体である

Chrome 49.0.2623 (Windows XP 0.0.0) CellComponent should render a cell FAILED1] [1] Failed: Uncaught (in promise): Error: Error in app/cell.component.html:1:9 caused by: self.context.cell.displayMarker is not a function [1] Error: Uncaught (in promise): Error: Error in app/cell.component.html:1:9 caused by: self.context.cell.displayMarker is not a function

：これはで失敗

// cell.component.spec.ts 
    import { async, inject, TestBed } from '@angular/core/testing'; 
    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; 
    import { ReflectiveInjector } from '@angular/core'; 

    import { CellComponent } from './cell.component'; 
    import Cell from './cell'; 
    import Marker from './marker.enum'; 

    //TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting()); 

    describe('CellComponent',() => { 
     beforeEach(() => { 
      TestBed.configureTestingModule({ 
       declarations: [CellComponent] 
      }); 
     }); 

     it ('should render a cell', async(() => { 
      TestBed.compileComponents().then(() => { 
       // Arrange 
       const fixture = TestBed.createComponent(CellComponent); 
       const componentUnderTest = fixture.nativeElement; 
       const testId = 1; 
       const testMarker = Marker.X; 
       const testCell = new Cell(1); 
       testCell['marker'] = testMarker; 

       // Act 
       componentUnderTest.cell = testCell; 

       // Assert 
       fixture.detectChanges(); 
       expect(componentUnderTest.querySelectorAll('div.ticTacToe--board-cell').length).toBe(1); 
       expect(componentUnderTest.querySelectorAll('div.ticTacToe--board-cell--background').length).toBe(1); 
       expect(componentUnderTest.querySelectorAll('div.ticTacToe--board-cell--X').length).toBe(1); 
       expect(componentUnderTest.querySelectorAll('div.ticTacToe--board-cell--X')[0].innerText).toBe('X'); 
      }); 
     })); 
    }); 

しかしdisplayMarkerは、私のセルクラス内の関数です：

import Marker from './marker.enum'; 

export class Cell { 
    id: number; 
    private marker: Marker; 
    private background = 'background'; 

    constructor(id: number) { 
     this.id = id; 
    } 

    displayMarker() { 
     return Marker[this.marker]; 
    } 

    getMarker() { 
     return this.marker; 
    } 

    setMarker(marker: Marker) { 
     if (!this.marker) { 
      this.marker = marker; 
     } 
    } 

    declareWinner() { 
     this.background = 'winner'; 
    } 

    isEmpty() { 
     return this.marker === undefined; 
    } 

    } 

export default Cell; 

...と（代わりのカルマ/ジャスミンて）手動でテストしたとき、これは正常に動作します。

私のユニットテストをどのようにすることができますか？

Answer 1

カップルの間違い。

1. export class CellComponent { 
       @Input() 
       cell = Cell; <=========== 
   } 
   

   あなたはCell機能cellから代入しています。これは、型情報がなくなったため手動でテストするときに機能し、何かを割り当てることができます。したがって、実際のCellインスタンスを渡すと問題ありません。しかし、は、テスト中のあなたのコンポーネントを与えるものではありません、それはあなたのDOM要素を与える

   @Input() cell: Cell; 
   

2. const fixture = TestBed.createComponent(CellComponent); 
   const componentUnderTest = fixture.nativeElement; 
   

   fixture.nativeElementタイプ構文を使用するように変更する必要があります。なぜあなたはcomponentUnderTest.querySelectorAllをやることができると思いますか？

   代わりにfixture.componentInstanceを使用してテスト対象のコンポーネントを取得する必要があります。