Angular 4 + Jasmine 单元测试：fixture.detectChanges() 可能无法在更改 @Input() 变量时工作的原因

Question

已运行进入这一问题并在互联网上搜索有关 fixture.detectChanges() 的内容，其中在显式插入模拟数据时无法识别 @Input() 中的更改。有大量线程和文档描述了设置，但不一定会导致我的所有测试失败。

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

删除 fixture.detectChanges() 似乎 "resolve" 这个错误。但是现在没有检测到任何新模拟数据的插入（根据规范）。

示例：

TestComponent.ts

import { TestComponent } from './test-component';
import { TestComponentModule } from './test-component.module';
import { Data } from './interfaces/data';

export class TestComponent {
    @Input() data: Data;

    displayData(){ 
        let firstName = data.first;
        let lastName = data.last;
        let fullName = firstName + ' ' + lastName;
        return fullName;
    };
}

TestComponent.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TestComponent } from './test-component';
import { TestComponentModule } from './test-component.module';

class DataMock {
    data: Data = getDataMock({
        first: 'Roger',
        last: 'Moore'
    });
};

describe('TestComponent', () => {
    'use strict';
    let testComponent: TestComponent;
    let fixture: ComponentFixture<TestComponent>;

    beforeEach(async() => {
        TestBed.configureTestingModule({
        imports: [ TestComponentModule ]
        }).compileComponents();
        fixture = TestBed.createComponent(TestComponent);
        testComponent = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should render the app', () => {
        expect(TestComponent).toBeDefined();
    });

    describe('displayData()', () => {
        let dataMock = new DataMock;
        beforeEach(() => {
            testComponent.data = dataMock.data;
        });

        it('should return fullName', () => {
            expect(TestComponent.displayData()).toBe('Roger Moore');
        });
    });
});

最初，class dataMock 被定义为 const 变量 - 在这种情况下 fixture.detectChanges() 会破坏它所应用的所有测试。
现在，dataMock 是一个带有模拟 Input() 数据的 class，并且 fixture.detectChanges() 似乎又可以工作了

那么，为什么要在 fixture.detectChanges() 工作所需的每个规范之前实例化 class dataMock？是这个原因吗？

Answer 1

您必须在执行 compileComponents 后创建夹具。

beforeEach(async() => {
    TestBed.configureTestingModule({
        imports: [ TestComponentModule ]
    }).compileComponents();
});

beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    testComponent = fixture.componentInstance;
    fixture.detectChanges();
});

Angular 4 + Jasmine 单元测试：fixture.detectChanges() 可能无法在更改 @Input() 变量时工作的原因

Angular 4 + Jasmine Unit Tests: Reasons why fixture.detectChanges() may not work upon change of @Input() variables

angular

unit-testing

jasmine

angular2-changedetection