Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tests are failing after Angular 2 RC5

I had used the following format for my tests:

export function main() {
    describe('Angular2 component test', function() {
         it('should initialize component',
           async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
              var template = '<specific-component-tag>';
                return tcb.overrideTemplate(TestComponent, template)
                .createAsync(TestComponent)
                .then((fixture) => {
                    expect(fixture.componentInstance.viewChild).toBeDefined();
                    fixture.detectChanges();
                    expect(fixture.componentInstance.viewChild.items.length).toBe(1);
                    // .... etc.
                }).catch (reason => {
                    console.log(reason);
                    return Promise.reject(reason);
                });
         })));
      });
}
This work fine in RC4. But RC5 came suddenly and now this code have not worked. It throws me the following errors:

Module ".... @angular/core/testing" has no exported member 'it'.
Module ".... @angular/core/testing" has no exported member 'describe'.
Module ".... @angular/core/testing" has no exported member 'expect'.
Module ".... @angular/core/testing" has no exported member 'beforeEachProviders'.
Module ".... @angular/compiler/testing" has no exported member 'TestComponentBuilder'.
Module ".... @angular/compiler/testing" has no exported member 'ComponentFixture'.

Please help me to migrate this test to angular2 RC5.

Update: I have already read RC5 release notes but nothing comes to my mind how to achieve my goal.

like image 738
P.Petkov Avatar asked Aug 11 '16 11:08

P.Petkov


2 Answers

The Jasmine imports available through @angular/core/testing are removed. So remove the imports for the following

Before:

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';

after

/// <reference path="../../../typings/main/ambient/jasmine/index.d.ts" />
import {
  inject, addProviders
} from '@angular/core/testing';

The reference path should be the first line in the file and it should point to jasmine type definition file. (Update the relative up. i.e the ../../ to whatever)To get jasmine type defitions, add the following line to ambientDevDependencies. Mine looks something like this

{
  "ambientDevDependencies": {
    "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654"
  },
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
  }
}

Also change

  beforeEachProviders(() => [InMemoryDataService]);

to

import { TestBed } from '@angular/core/testing';
...
describe('...', () => {
  TestBed.configureTestingModule({
    providers: [ InMemoryDataService ]
  });
  it(...);
});
like image 193
user6123723 Avatar answered Nov 06 '22 21:11

user6123723


Take a look at changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md

It looks like API, which you are using is deprecated - path and names has changed. :)

For example:

  • TestComponentBuilder and ComponentFixture is now in @angular/core/testing,
  • beforeEachProviders:

code:

beforeEachProviders(() => [MyService]);

changed to:

beforeEach(() => {
    addProviders([MyService]);
});
like image 4
Kamil Myśliwiec Avatar answered Nov 06 '22 21:11

Kamil Myśliwiec