Angular: TestComponentBuilder.createAsync() does not resolve its promise

Created on 7 May 2016 · 3Comments · Source: angular/angular

Given a component MyComponent exposing a simplistic API for demo purposes, and importing the symbols we require to conduct usual component testing:

import MyComponent from './my.component';
import {
  describe,
  expect,
  it,
  inject,
  beforeEach,
  beforeEachProviders } from '@angular/core/testing';
import { TestComponentBuilder } from '@angular/compiler/testing';

I attempt to conduct a basic test injecting and instantiating the TestComponentBuilder to create a fixture component of the MyComponent type, like this:

describe('MyComponent', () => {
  let testComponentBuilder: TestComponentBuilder;

  beforeEachProviders(() => [TestComponentBuilder]);

  beforeEach(inject([TestComponentBuilder],  (_testComponentBuilder: TestComponentBuilder) => {
      testComponentBuilder = _testComponentBuilder;
    }
  ));

  it('should feature this or that behavior', done => {
    // We create a test component fixture on runtime out from the component symbol
    testComponentBuilder.createAsync(MyComponent).then(componentFixture => {

      // Here we proceed to run assertions on the componentFixture
      // ...

      done();
    })
    .catch(e => done.fail(e));
  });

I always get the same error after upgrading my code to RC.1.

Error: No precompiled component MyComponent found

Basically the promise returned by testComponentBuilder.createAsync(MyComponent) is never resolved. The issue is consistent on all my tests encompassing the use of TestComponentBuilder.

For the record, and prior to conduct any test, I previously configure the testing providers like this:

import { setBaseTestProviders } from '@angular/core/testing';
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_STATIC_APPLICATION_PROVIDERS
} from '@angular/platform-browser/testing';

setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  TEST_BROWSER_STATIC_APPLICATION_PROVIDERS
);

I've scanned the code high and low to determine wether this is an actual bug in RC.1 or an issue with my test setup, with no success. Prior to RC.1, my testing setup worked seamlessly in all specs testing components specifically.

Any pointers?

Source

deeleman

Most helpful comment

I managed to fix this by myself. It turns out my application and platform testing providers setup was wrong. Configuring the setup script like this did the trick:

import { resetBaseTestProviders, setBaseTestProviders } from '@angular/core/testing';
import { BROWSER_APP_DYNAMIC_PROVIDERS } from "@angular/platform-browser-dynamic";
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  ADDITIONAL_TEST_BROWSER_PROVIDERS
} from '@angular/platform-browser/testing';

resetBaseTestProviders();
setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  [
    BROWSER_APP_DYNAMIC_PROVIDERS,
    ADDITIONAL_TEST_BROWSER_PROVIDERS
  ]
);

My bad! ;)

deeleman on 7 May 2016

❤4 👍3

All 3 comments

I managed to fix this by myself. It turns out my application and platform testing providers setup was wrong. Configuring the setup script like this did the trick:

import { resetBaseTestProviders, setBaseTestProviders } from '@angular/core/testing';
import { BROWSER_APP_DYNAMIC_PROVIDERS } from "@angular/platform-browser-dynamic";
import {
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  ADDITIONAL_TEST_BROWSER_PROVIDERS
} from '@angular/platform-browser/testing';

resetBaseTestProviders();
setBaseTestProviders(
  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
  [
    BROWSER_APP_DYNAMIC_PROVIDERS,
    ADDITIONAL_TEST_BROWSER_PROVIDERS
  ]
);

My bad! ;)

deeleman on 7 May 2016

❤4 👍3

@deeleman I'm running into this same issue w/ the default setup used by the ng-cli and https://github.com/juliemr/ng2-test-seed/blob/master/karma-test-shim.js :(

/*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

__karma__.loaded = function () {
};

var distPath = '/base/.test/';
var appPath = distPath + 'app/';

function isJsFile(path) {
  return path.slice(-3) == '.js';
}

function isSpecFile(path) {
  return path.slice(-8) == '.spec.js';
}

function isAppFile(path) {
  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
  .filter(isSpecFile)
  .filter(isAppFile);

// Load our SystemJS configuration.
System.config({
  baseURL: distPath,
});


System.import('system.config.js').then(function(e) {
  // Load and configure the TestComponentBuilder.
  return Promise.all([
    System.import('@angular/core/testing'),
    System.import('@angular/platform-browser-dynamic/testing')
  ]).then(function (providers) {
    var testing = providers[0];
    var testingBrowser = providers[1];
    testing.setBaseTestProviders(
      testingBrowser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
      testingBrowser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS
    );
  });
}).then(function() {
  return Promise.all(
    allSpecFiles.map(function (moduleName) {
      return System.import(moduleName);
    }));
}).then(__karma__.start, __karma__.error);