与fakeAsync Angular2测试 [英] Angular2 testing with fakeAsync

问题描述

我试图用fakeAsync来测试角2组件，但夹具变量没有被设置。事实上，许回调不被调用。这里是code：

      

@Component（{
  模板：''，
  指令：[分组框中，GroupBoxHeader]
}）
类TestComponent {
  expandedCallback（）{this.expandedCalled = TRUE; }
}它（'测试...，注入（[TestComponentBuilder] fakeAsync（（TCB）=＆GT; {  VAR夹具;  tcb.createAsync（TestComponent）。然后（（rootFixture）= GT; {
    夹具= rootFixture
  }）;  蜱（）;  fixture.detectChanges（）;
}）））;


当我运行这个code，我得到：

  

失败：无法读取的未定义的属性'detectChanges
          类型错误：无法读取的未定义的属性'detectChanges

我不明白，为什么回调不会触发。在这个仓库，它工作正常：的https://github.com/juliemr/ng2-test-seed/blob/master/src/test/greeting-component_test.ts

任何线索？

请注意：我使用ES6，Traceur，角2测试版，因果报应和茉莉花

------ UPDATE ------

它需要遵循与失败的测试存储库：

https://github.com/cangosta/ng2_testing_fakeasync

解决方案

试试这个方法
<一href=\"https://github.com/antonybudianto/angular2-starter/blob/master/app/simplebind/child.component.spec.ts#L15\" rel=\"nofollow\">https://github.com/antonybudianto/angular2-starter/blob/master/app/simplebind/child.component.spec.ts#L15

问题的关键是你创建（ TestComponent ）后一个测试假人组件并注册要在指令来测试组件：[.. ] ，并使用模板：LT;我-CMP＆GT;＆LT; /我-CMP＆GT; ，然后通过 TestComponent 到 tsb.createAsync（TestComponent）... ，并使用 injectAsync 。

我preFER这种方式，因为我可以很容易地从模拟母公司的数据，并通过任何输入，从组件处理输出/

\r

\r

进口{\r
它，\r
injectAsync，\r
描述，\r
期望，\r
TestComponentBuilder，\r
ComponentFixture\r
}从angular2 /测试';\r
进口{}组件从angular2 /核心;\r
进口{} ChildComponent从'./child.component';\r
\r
@零件（{\r
    选择：测试，\r
    模板：`\r
    ＆LT;子文本=您好测试[（fromParent）] =测试名＆GT;＆LT; /儿童＆GT;\r
    `\r
    指令：[ChildComponent]\r
}）\r
类TestComponent {\r
    测试名称：字符串;\r
\r
    构造函数（）{\r
        this.testName =从父;\r
    }\r
}\r
\r
让我们的TestFixture：ComponentFixture;\r
让childCompiled;\r
让childCmp：ChildComponent;\r
\r
描述（'ChildComponent'，（）=＆GT; {\r
    它（'应该正确打印的投入，injectAsync（[TestComponentBuilder]\r
    （TSB：TestComponentBuilder）= GT; {\r
        返回tsb.createAsync（TestComponent）。然后（（夹具）=＆GT; {\r
            的TestFixture =夹具;\r
            testFixture.detectChanges（）;\r
\r
            childCompiled = testFixture.nativeElement;\r
            childCmp = testFixture.debugElement.children [0] .componentInstance;\r
\r
            期待（childCompiled）.toBeDefined（）;\r
            期待（childCmp）.toBeDefined（）;\r
            期待（childCompiled.querySelector（'H6'））\r
                .toHaveText（从父'）;\r
            期待（childCompiled.querySelector（'H5'））\r
                .toHaveText（你好测试）;\r
        }）;\r
    }））;\r
\r
    它（'应该正确触发事件changeMe'，（）=＆GT; {\r
        childCmp.changeMe（）;\r
        testFixture.detectChanges（）;\r
        期待（childCmp.num）.toEqual（1）;\r
        期待（childCompiled.querySelector（'H6'））\r
            .toHaveText（'从孩子改变计数：'+ childCmp.num）;\r
    }）;\r
}）;

\r

\r

\r

I'm trying to use fakeAsync to test an Angular 2 component, but the fixture variable is not being set. In fact, the promise callback is not being called. Here is the code:

@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();
})));

When I run this code, I get:

Failed: Cannot read property 'detectChanges' of undefined TypeError: Cannot read property 'detectChanges' of undefined

I can't figure out why the callback isn't fired. In this repository, it works fine: https://github.com/juliemr/ng2-test-seed/blob/master/src/test/greeting-component_test.ts

Any clue?

Note: I'm using ES6, Traceur, Angular 2 beta, Karma and Jasmine.

------ UPDATE ------

It follows a repository with the failing test:

https://github.com/cangosta/ng2_testing_fakeasync

解决方案

Try this way https://github.com/antonybudianto/angular2-starter/blob/master/app/simplebind/child.component.spec.ts#L15

The point is you create a test dummy component (TestComponent for example) and register the component you want to test in directives: [...] and use template: <my-cmp></my-cmp>, then pass the TestComponent to tsb.createAsync(TestComponent)..., and use injectAsync.

I prefer this way since I can easily mock the data from parent, and pass any input and handle output to/from the component.

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

这篇关于与fakeAsync Angular2测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！