AngularJS 2单元测试组件与jasmine面临错误,无法读取属性'firstChild'的null

我正在为我的角度2应用程序编写单元测试,我正在尝试测试我制作的组件 . 我指的是使用TypeScript和Jasmine框架以角度2编写测试用例的示例git存储库 . 我做了相同的示例存储库(https://github.com/juliemr/ng2-test-seed),以测试我的组件,但我得到以下错误 .

TypeError: Cannot read property 'firstChild' of null
at Object.el (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:537:29)
at TestComponentBuilder.createAsync (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:841:28)
at eval (http://127.0.0.1:9090/app/test/search.component.specs_test.js:95:32)
at FunctionWrapper.apply (http://127.0.0.1:9090/node_modules/angular2/bundles/angular2.dev.js:327:17)
at FunctionWithParamTokens.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1947:37)
at TestInjector.execute (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:1868:17)
at Object.<anonymous> (http://127.0.0.1:9090/node_modules/angular2/bundles/testing.dev.js:2006:44)
at attemptAsync (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1916:24)
at QueueRunner.run (http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1871:9)
at http://127.0.0.1:9090/node_modules/jasmine-core/lib/jasmine-core/jasmine.js:1898:16

我的组件是这样的:

@Component({
  selector: 'search',
  templateUrl: 'app/html/search.component.html',
  styleUrls: ['app/css/search.css'],
  providers: [SearchService,SearchUtil],
  directives: [OverviewComponent]
})
export class SearchComponent {}

我的单元测试用例如下所示:

it('should populate search suggestions UI', injectAsync([TestComponentBuilder,SearchComponent], (tcb) => {
    return tcb.createAsync(SearchComponent).then((fixture) => {
      fixture.detectChanges();
      var compiled = fixture.debugElement.nativeElement;

      compiled.querySelector('search').value('teachers');
      fixture.detectChanges();

      var compiled = fixture.debugElement.nativeElement;

      console.log(compiled.querySelector('search').value()+" = "+compiled.querySelector('.searchlist>a').length);

      expect(compiled.querySelector('.searchlist>a').length).toBeGreaterThan(1);
    });
  }));

我收到错误,在这一行 - tcb.createAsync(SearchComponent) ,说对象为空 .

回答(1)

2 years ago

您无需在 injectAsync 函数的第一个参数中指定 SearchComponent

it('should populate search suggestions UI', 
       injectAsync([TestComponentBuilder], (tcb) => {
  return tcb.createAsync(SearchComponent).then((fixture) => {
    (...)
  });
}));

Edit

您还需要基础测试提供程序,如下所述:

import {setBaseTestProviders} from 'angular2/testing';

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

describe('Some tests', () => {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, 
                   TEST_BROWSER_APPLICATION_PROVIDERS);
  (...)
});

Edit1

您需要使用 beforeEachProviders 函数注册组件将使用的提供程序(直接或间接) .

这是一个示例:

beforeEachProviders(() => {
  return [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: MockBackend }),
    HttpService
  ];
});