"No provider for TestComponentBuilder!"

[wembernard]

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 ?

[micaelmbagira]

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

[wembernard]

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);

[micaelmbagira]

• 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

[wembernard]

@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!

[micaelmbagira]

You need to import it. import {addProviders} from '@angular/core/testing';. Make sure you have angular rc4.

[wethinkagile]

Shouldn't we use beforeEachProviders? Is there a difference at all to using combination of beforeEach and addproviders?

[micaelmbagira]

beforeEachProviders has been deprecated