Angular2 - testing component with two "it" creates 'selector "#root0" did not match any elements error'

1
votes

I am trying to create a simple component test, when I createAsync an element twice I get The selector "#root0" did not match any elements error. I assume it creates it the second time with #root1 but looks for #root0

it('should render',
    inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(TestComponent)
        .then((componentFixture) => {
          componentFixture.detectChanges();
          expect(true).toBeTruthy();      
          componentFixture.destroy();
        }).catch((e) =>{
          console.log(e);
        });
    })
);

it('should render',
    inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(TestComponent)
        .then((componentFixture) => {
          componentFixture.detectChanges();
          expect(true).toBeTruthy();      
          componentFixture.destroy();
        }).catch((e) =>{
          console.log(e);
        });
    })
);

If I run just one "it" test it works fine. the second one fails... I tried it with and without the componentFixture.destroy(); but no success... To be clear - the tests passes, but the error shows up in the console.

Here is the complete error log:

LOG: BaseException{message: 'The selector "#root0" did not match any elements', stack: 'Error: The selector "#root0" did not match any elements at new BaseException (http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21) at DomRenderer.selectRootElement (http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:13643:15) at HostViewFactory.viewFactory_HostTestComponent0 [as viewFactory] (viewFactory_HostTestComponent:72:18) at AppViewManager_.createRootHostView (http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:9172:34) at http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:12189:46 at M (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8769) at H (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8401) at R.when (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:12075) at b.run (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:11111) at t._drain (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:3029) at drain (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:2683) at MutationObserver.e (http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:4604) at Zone.run (http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a193e6e9bdd25760b711f1ce03caeac530e48c1:138:17) at MutationObserver.zoneBoundFn (http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a1

2
unit-testingangular

2 Answers

1
votes

This is a known issue https://github.com/angular/angular/issues/6483 (dup of https://github.com/angular/angular/issues/5662) when templateUrl is used in components.

Update

This is fixed in Angular 2.0.0-beta.3

See https://github.com/angular/angular/issues/6483#issuecomment-179557485 for more details

Basically, what I had to do:

  • Manually add typings for jasmine with tsd install jasmine -so and add ///<reference... in the test files;
  • Add this in my imports:
import {setBaseTestProviders} from 'angular2/testing';

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

Add this before my Component tests:

  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
0
votes

An update to the update: Beta.3 did fix the problem as Günter Zöchbauer mentioned, we can now use injectAsync that didn't work before. Also I suggest to use this:

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

if (getTestInjector().platformProviders.length === 0 || getTestInjector().applicationProviders.length === 0) {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
}

otherwise you will get an error when loading your BaseTestProviders the second time.