Wie kann ich Unit Komponenten in AngularJS2 "final" testen?

Question

Ich versuche gerade, einen Komponententest für eine sehr einfache AngularJs2-Komponente zu schreiben.

Dies ist das Typoskript:

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

Und hier ist mein aktueller Test:

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

Dies ist die Vorlage ist

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

Dies scheitert mit:

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

Aber displayMarker ist eine Funktion in der Zelle Klasse:

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; 

... und wenn manuell (statt durch Karma/Jasmin) getestet das funktioniert gut.

Irgendwelche Ideen, wie ich meinen Komponententest machen kann?

Answer 1

Ein paar Fehler.

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

   Sie die Zuordnung der CellFunktion-cell. Es funktioniert beim manuellen Testen, weil die Typinformationen nicht mehr vorhanden sind, und Sie können ihm beliebige Informationen zuweisen. Also, wenn Sie eine tatsächliche Cell Instanz zu ihm übergeben, dann ist es in Ordnung. Aber es sollte die Typ Syntax

   @Input() cell: Cell; 
   

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

   fixture.nativeElementnicht geben Sie die zu testende Komponente zu verwenden, geändert werden, geben Sie das DOM-Element. Warum denkst du, du kannst componentUnderTest.querySelectorAll tun?

   Sie sollten stattdessen fixture.componentInstance verwenden, um die zu testende Komponente zu erhalten.