测试 - 间歇性错误：'失败：选择器“#root0”与任何元素都不匹配

Question

我正在使用Angular2 beta版本构建一个应用程序，当我运行我的测试用例时，我随机得到错误：

选择器“#root0”与任何元素的错误都不匹配。

测试代码：

@Component({
  template: '',
  directives: [GroupBox, GroupBoxHeader]
})
class TestComponent {
}

describe('group-box control', () => {

  it('should show the title', injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.overrideTemplate(TestComponent, '<group-box><group-box-header>Title Content</group-box-header></group-box>')
      .createAsync(TestComponent).then( (fixture) => {
        fixture.detectChanges();
        let compiled = fixture.debugElement.nativeElement;
        expect(compiled).toContainText('Title Content');
    });
  }));

  it('should show the body', injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.overrideTemplate(TestComponent, '<group-box><group-box-header>Title Content</group-box-header>Body Content</group-box>')
      .createAsync(TestComponent).then( (fixture) => {
        fixture.detectChanges();
        let compiled = fixture.debugElement.nativeElement;
        expect(compiled).toContainText('Body Content');
    });
  }));
});

我使用Karma和Jasmine，遵循https://github.com/juliemr/ng2-test-seed的指导方针

以下存储库重现错误： https ： //github.com/cangosta/ng2_testing_controls

堆栈跟踪：

14 01 2016 11：40：32.073：INFO [业力]：Karma v0.13.19服务器始于http：// localhost：9876/14 01 2016 11：40：32.078：INFO [launcher]：启动浏览器Chrome 14 01 2016 11 ：40：32.669：INFO [Chrome 47.0.2526（Windows 8.1 0.0.0）]：已连接到socket /＃9hKZqsNbKFPfYWzIAAAA，ID为50428936 Chrome 47.0.2526（Windows 8.1 0.0.0）组框控件应显示正文失败：选择器“#root0”与任何元素都不匹配错误：选择器“#root0”与新BaseException中的任何元素都不匹配（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2.dev。 js：8080：21）在AppRManager上的DomRenderer_.createRootHostView（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2.dev.js：15248：15）（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js / angular2.dev.js：11265：52）at C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2.dev.js：14531：46 at Zone。在Zone.run上运行（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:138:17）（C：/ Projectos / zoneBoundFn上的Fontes / Stratus-HTML / build / assets / js / testing.dev.js：2544：30）（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：111： 19）at lib $ es6 $ promise $$ internal $$ tryCatch（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:1511:16）at lib $ es6 $ promise $$内部$$ invokeCallback（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1523：17）在lib $ es6 $ promise $$ internal $$ publish（C：/ Projectos /在C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：243：5 at Zone.run上的微任务（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js：2557：15）（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js） /angular2-polyfills.js:138:17）在ZoneBr（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js：2544：30）的zoneBoundFn（C：/ Projectos） /Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:111:19）在lib $ es6 $ promise $ asap $$ flush（C：/ Proje） ctos / Fontes / Stratus-HTML / build / assets / js / angular2-polyfills.js：1305：9）失败：无法读取未定义的属性'hostView'TypeError：无法在新的ComponentFixture_读取未定义的属性'hostView'（C： /Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js:2047:97）在C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js：2145 ：Zone.run上的16个Zone.run（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:138:17）（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js / testing.dev.js：2544：30）在zone $ es6上的zoneBoundFn（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：111：19） $ promise内部$$ tryCatch（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1511：16）在lib $ es6 $ promise $$ internal $$ invokeCallback（C ：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1523：17）在lib $ es6 $ promise $$ internal $$ publish（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js / angular2-polyfills.js：1494：11）at C：/ Pr ojectos / Fontes / Stratus-HTML / build / assets / js / angular2-polyfills.js：243：5 at microtask（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js:2557 ：15）在Zone.run上的Zone.run（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:138:17）（C：/ Projectos / Fontes / Stratus-HTML /build/assets/js/testing.dev.js:2544:30）在lib $上的zoneBoundFn（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:111:19） es6 $ promise $ asap $$ flush（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1305：9）失败：无法读取未定义的属性'detectChanges'TypeError：无法读取属性'detectChanges'未定义于C：/Projectos/Fontes/Stratus-HTML/build/test/infrastructure/controls/group-box.test.js：52：20 at Zone.run（C：/ Projectos / Fontes / Stratus） Zone.run中的-HTML / build / assets / js / angular2-polyfills.js：138：17）（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js:2544：30 ）在zoneBoundFn（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js /） angular2-polyfills.js：111：19）在lib $ es6 $ promise $$ internal $$ tryCatch（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js:1511:16）在lib $ es6 $ promise $$内部$$ invokeCallback（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1523：17）在lib $ es6 $ promise $$ internal $ $ publish（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：1494：11）在C：/ Projectos / Fontes / Stratus-HTML / build / assets / js / angular2- polyfills.js：243：5在微区任务（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js：2557：15）在Zone.run（C：/ Projectos / Fontes / Stratus） Zone.run中的-HTML / build / assets / js / angular2-polyfills.js：138：17）（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/testing.dev.js:2544：30 ）在zoneBoundFn（C：/Projectos/Fontes/Stratus-HTML/build/assets/js/angular2-polyfills.js：111：19）的lib $ es6 $ promise $ asap $$ flush（C：/ Projectos / Fontes / Stratus-HTML / build / assets / js / angular2-polyfills.js：1305：9）Chrome 47.0.2526（Windows 8.1 0.0.0）：执行59 of 6 0（1失败）（跳过1）（0.519秒/ 0.51秒）[11:40:33]'测试'错误在2.01秒之后[11:40:33]错误：1在formatError（C：\\ Users \\ LSANTOS \\在Gulp的AppData \\ Roaming \\ npm \\ node_modules \\ gulp \\ bin \\ gulp.js：169：10）。 （C：\\ Users \\ LSANTOS \\ AppData \\ Roaming \\ npm \\ node_modules \\ gulp \\ bin \\ gulp.js：195：15）在Gulp.emit的emitOne（events.js：77：13）处（events.js：169： 7）在C：\\ Projectos \\ Fontes \\ Stratus-HTML \\ node_modules \\ orchestrator \\ index的Gulp.Orchestrator._emitTaskDone（C：\\ Projectos \\ Fontes \\ Stratus-HTML \\ node_modules \\ orchestrator \\ index.js：264：8）。 js：275：23 at cb（C：\\ Projectos \\ Fontes \\ Stratus-HTML \\ node_modules \\ orchestrator） \\ lib \\ runTask.js：29：3）在Server的removeAllListeners（C：\\ Projectos \\ Fontes \\ Stratus-HTML \\ node_modules \\ karma \\ lib \\ server.js：333：7）中。 （C：\\ Projectos \\ Fontes \\ Stratus-HTML \\ node_modules \\ karma \\ lib \\ server.js：344：9）在Servers.g（events.js：260：16）的emitNone（events.js：72：20）在at.eTCallNT（node.js：418：8）的emit.emit（events.js：166：7）处于process._tickCallback（node.js：340：17）的doNTCallback1（node.js：418：9）处

Answer 1

这在Angular 2.0.0-beta.3中得到修复

有关详细信息，请参阅https://github.com/angular/angular/issues/6483#issuecomment-179557485

基本上，我必须做的事情：

• 使用tsd install jasmine -so手动添加jasmine的输入，并在测试文件中添加///<reference... ;
• 在我的导入中添加：

import {setBaseTestProviders} from 'angular2/testing';

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

在我的Component测试之前添加它：

  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);