"No provider for TestComponentBuilder!"
wembernard opened this issue ยท 7 comments
Hi guys,
DESCRIPTION
I've been wasting some time to make this work
/// <reference path="../../typings/index.d.ts"/>
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'zone.js/dist/async-test';
import {describe, it, expect, beforeEachProviders, inject, async, setBaseTestProviders, TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from '@angular/platform-browser-dynamic/testing';
import { AppComponent } from './app.component';
describe('Basic test', () => {
it('expect null is not the same thing as undefined',
() => expect(null).not.toEqual(undefined)
);
});
describe('App Component', () => {
it('should render some title', async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
tcb.createAsync(AppComponent)
.then((fixture: ComponentFixture<any>) => {
fixture.detectChanges();
const app = fixture.nativeElement;
expect(app.querySelector('h1').textContent).toBe('Hello World');
});
})));
});
which fails when I run npm run test
Chrome 51.0.2704 (Mac OS X 10.11.4) App Component should render some title FAILED
Error: No provider for TestComponentBuilder!
Error: DI Exception
CONTEXT
I've been using generator-fountain-angular2
@ 0.5.4
. Since it was seemed more painful to bootstrap a brand new generator-fountain-angular2
using 0.6.0
and move all my work there, I scaffolded 0.6.0 in some temp directory to compare and update my working directory. All was doing fine (Angular RC4, Router, ...) except this test.
In your hello.spec.ts, npm run test
works just fine but in mine, it just fails.
I suspect you already had this problem when you wrote this code hopefuly.
POSTSCRIPTUM
How do you update typings
directory and typings.json
?
Is it something you hardcode in your generator or some command that should rebuild this directory ?
In one test you need to have
import {setBaseTestProviders} from '@angular/core/testing';
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from '@angular/platform-browser-dynamic/testing';
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
If you need to update typings, you can follow https://github.com/typings/typings#quick-start
Thanks @micaelmbagira, I was missing the setBaseTestProviders
part ๐
By the way, I've been getting a ORIGINAL EXCEPTION: No provider for Router!
. I realized your generator does not test yet the Root Component. I've been digging about this and it seems likes the ROUTER_DIRECTIVES
will be some painful configuration.
Last and least, after using your code sample in a couple of *.spec.ts
, I got some Error: Cannot set /home/(...)/my-project providers because it has already been called
. After some research, I found this issue Problem when setting base test providers into several unit tests which suggest to do this in one file such as karma-test-shim.js
.
You're doing yours in your main.spec.ts
which isn't ideal if some dev delete this component without knowing about this whole stuff.
I moved this in the index.spec.js
which imho makes more sense by just adding this at the end:
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'zone.js/dist/async-test';
import {setBaseTestProviders} from '@angular/core/testing';
import {TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS} from '@angular/platform-browser-dynamic/testing';
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
- if you need to test the router, I think you have to manually add a provider
beforeEach(() => {
addProviders([{provide: Router, useClass: null}])
}
- moving tests bootstraping to
karma-test-shim.js
is something we have on our todo list
@micaelmbagira I've been testing your code but I run into
ReferenceError: addProviders is not defined
at Object.beforeEach (eval at <anonymous> (/home/me/web/src/index.spec.js:4792:2), <anonymous>:28:3)
ORIGINAL EXCEPTION: No provider for Router!
You need to import it. import {addProviders} from '@angular/core/testing';
. Make sure you have angular rc4.
Shouldn't we use beforeEachProviders
? Is there a difference at all to using combination of beforeEach
and addproviders
?
beforeEachProviders has been deprecated