Angular2 Testing Component with Provider dependency

Question

I have a simple angular2 component as defined below. And I'm looking to create a unit testing with karma, jasmine to run through this component.

@Component({
selector: 'property',
template: require('./property.component.html'),
directives: [Panel],
providers: [ConfigService]});

export class PropertyComponent {
config:any;

constructor(config:ConfigService) {
    this.config = config.getConfig();
}
}

This is my testing spec file.

describe('property component', () => {

it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(PropertyComponent).then((fixture) => {
  let propertyComp = fixture.componentInstance,
      element = fixture.nativeElement;

  expect(element.querySelector('h1').innerText).toBe('property page');
      });
    }));
  })

However I got a list of weird errors... I'm guessing this is due to the ConfigService Provider in the PropertyComponent, because when I removed the provider dependency, it went through.

Does anyone know how to deal with the dependency Providers?

Thanks!

errors:

_instantiateProvider@angular2-seed/config/spec-bundle.js:23435:38
  _new@angular2-seed/config/spec-bundle.js:23424:42
  getObjByKeyId@angular2-seed/config/spec-bundle.js:22937:38
  _getByKeyDefault@angular2-seed/config/spec-bundle.js:23641:51
  _getByKey@angular2-seed/config/spec-bundle.js:23587:42
  _getByDependency@angular2-seed/config/spec-bundle.js:23573:35
  _instantiate@angular2-seed/config/spec-bundle.js:23463:53
  _instantiateProvider@angular2-seed/config/spec-bundle.js:23435:38
  _new@angular2-seed/config/spec-bundle.js:23424:42
  instantiateProvider@angular2-seed/config/spec-bundle.js:22924:35
  init@angular2-seed/config/spec-bundle.js:34694:44
  AppElement@angular2-seed/config/spec-bundle.js:34371:33
  viewFactory_HostPropertyComponent0
  createRootHostView@angular2-seed/config/spec-bundle.js:35741:48

drew moore · Accepted Answer · 2016-04-13 23:39:06Z

1

You need to use beforeEachProviders in this case:

import {beforeEachProviders, describe, it, expect} from 'angular2/testing';
//...other imports... 

describe('property component', () => {

  beforeEachProviders(()=> [
      ConfigService, //if you don't need to mock 
      provide(ConfigService, {useClass:MockConfigService}) // more typical
  ]);

  it('should have property page title', injectAsync([TestComponentBuilder], (tcb) => {
    return tcb.createAsync(PropertyComponent).then((fixture) => {
      //expectations...
    });
  }));
})

Note that you need to import angular's patched describe, it, expect functions along with beforeEachProvidersfrom angular2/testing. I emphasize this because it's easy to forget to do that, and it results in failures with rather unintuitive messages.

edited Apr 13, 2016 at 23:39

answered Apr 13, 2016 at 23:27

drew moore

32.8k17 gold badges79 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Testing Component with Provider dependency

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related