javascript - 如何在 AngularJS2 "final"中对组件进行单元测试？

Question

我目前正在尝试为一个非常简单的 AngularJs2 组件编写单元测试。

这是 typescript :

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

... 并且在手动测试时(而不是通过 Karma/Jasmine)这工作正常。

我有什么想法可以让我的单元测试正常工作吗？

Answer 1

几个错误。

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

   您正在将 Cell 函数 分配给 cell。它在手动测试时有效，因为类型信息消失了，您可以为其分配任何内容。因此，当您将实际的 Cell 实例传递给它时，就可以了。但应该改为使用type语法

   @Input() cell: Cell;
   

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

   fixture.nativeElement 不给你被测组件，它给你 DOM 元素。为什么你认为你可以做 componentUnderTest.querySelectorAll？

   您应该改为使用 fixture.componentInstance 来获取被测组件。