如何在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> 

這裏是我目前的測試：

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

這種失敗：

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

但displayMarker是我Cell類的函數：

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實例傳遞給它時，那就沒問題。但應改爲使用型語法

   @Input() cell: Cell; 
   

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

   fixture.nativeElement不給你試驗下的部件，它給你的DOM元素。爲什麼你認爲你可以做componentUnderTest.querySelectorAll？您應該使用fixture.componentInstance來獲得被測組件。