测试 - 间歇性错误:'失败:选择器"#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';

在我的组件测试之前添加此内容：

  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);