使用 fakeAsync 进行 Angular2 测试

Question

我正在尝试使用 fakeAsync 来测试 Angular 2 组件，但未设置夹具变量。事实上，promise 回调并没有被调用。这是代码：

@Component({
  template: '',
  directives: [GroupBox, GroupBoxHeader]
})
class TestComponent {
  expandedCallback() { this.expandedCalled = true; }
}

it('testing...', inject([TestComponentBuilder], fakeAsync((tcb) => {

  var fixture;

  tcb.createAsync(TestComponent).then((rootFixture) => {
    fixture = rootFixture
  });

  tick();

  fixture.detectChanges();
})));

当我运行这段代码时，我得到：

失败：无法读取未定义的属性“detectChanges” TypeError：无法读取未定义的属性“detectChanges”

我无法弄清楚为什么没有触发回调。在这个存储库中，它工作正常：https://github.com/juliemr/ng2-test-seed/blob/master/src/test/greeting-component_test.ts

有什么线索吗？

注意：我正在使用 ES6、Traceur、Angular 2 beta、Karma 和 Jasmine。

----- 更新 ------

它遵循一个测试失败的存储库：

https://github.com/cangosta/ng2_testing_fakeasync

Answer 1

TestComonentBuilder 不适用于 templateUrl https://github.com/angular/angular/issues/5662

Answer 2

试试这个方法 https://github.com/antonybudianto/angular2-starter/blob/master/app/simplebind/child.component.spec.ts#L15

重点是您创建一个测试虚拟组件（例如TestComponent）并在directives: [...] 中注册要测试的组件并使用template: <my-cmp></my-cmp>，然后将TestComponent 传递给tsb.createAsync(TestComponent)...，然后使用injectAsync.

我更喜欢这种方式，因为我可以轻松地模拟来自父级的数据，并将任何输入和处理输出传递给组件。

import {
it,
injectAsync,
describe,
expect,
TestComponentBuilder,
ComponentFixture
} from 'angular2/testing';
import { Component } from 'angular2/core';
import { ChildComponent } from './child.component';

@Component({
    selector: 'test',
    template: `
    <child text="Hello test" [(fromParent)]="testName"></child>
    `,
    directives: [ChildComponent]
})
class TestComponent {
    testName: string;

    constructor() {
        this.testName = 'From parent';
    }
}

let testFixture: ComponentFixture;
let childCompiled;
let childCmp: ChildComponent;

describe('ChildComponent', () => {
    it('should print inputs correctly', injectAsync([TestComponentBuilder],
    (tsb: TestComponentBuilder) => {
        return tsb.createAsync(TestComponent).then((fixture) => {
            testFixture = fixture;
            testFixture.detectChanges();

            childCompiled = testFixture.nativeElement;
            childCmp = testFixture.debugElement.children[0].componentInstance;

            expect(childCompiled).toBeDefined();
            expect(childCmp).toBeDefined();
            expect(childCompiled.querySelector('h6'))
                .toHaveText('From parent');
            expect(childCompiled.querySelector('h5'))
                .toHaveText('Hello test');
        });
    }));

    it('should trigger changeMe event correctly', () => {
        childCmp.changeMe();
        testFixture.detectChanges();
        expect(childCmp.num).toEqual(1);
        expect(childCompiled.querySelector('h6'))
            .toHaveText('Changed from child. Count: ' + childCmp.num);
    });
});