首页 文章

使用fakeAsync进行Angular2测试

提问于
浏览 次
2

我正在尝试使用fakeAsync来测试Angular 2组件，但是没有设置fixture变量 . 事实上，没有调用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();
})));

当我运行此代码时，我得到：

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

我可以__87436_解雇了 . 在这个存储库中，它工作正常：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

unit-testing angular karma-jasmine

2 回答

  • 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);
    });
});
    回复于
  • 2

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

    回复于

相关问题