I'm already a little beaten with this, and it seems I can’t find the right solution,
I am running an ionic 2 project that uses angular 2 testing environment, when I run an ng test using karmas chrome launcher, I get the following error:
START:
07.12.2016 11: 20: 50.590: INFO [karma]: Karma v1.2.0 server started with http: // localhost: 8888/07
12 2016 11: 20: 50.591: INFO [launcher]: launching the Chrome browser with unlimited concurrency 07.12.2016 11: 20: 50.682: INFO [launcher]: launching the Chrome browser 07 12 2016 11: 20: 52.993: INFO [Chrome 55.0.2883 (Linux 0.0.0)]: connected to the socket / # wi3gg8nwMc27F0H4AAAA with identifier 3728337
Finished in 0.002 sec / 0 sec.
SUMMARY: ✔ 0 completed tests
But when using PhantomJS, all tests run fine.
My system that I run:
- Linux ubuntu 16.04LT
- NodeJs: 6.9.2
- Npm: 3.10.8
I tried reinstalling all the modules, I reinstalled the OS, I installed the project on another Linux system and works fine with the same environment
My karma.conf.js file is as follows
module.exports = function (config) {
config.set ({
basePath: '../',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require ('karma-jasmine'),
require ('karma-chrome-launcher'),
require ('karma-phantomjs-launcher'),
require ('karma-remap-istanbul'),
require ('karma-mocha-reporter'),
require ('angular-cli / plugins / karma')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: 'coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: [
'mocha', 'karma-remap-istanbul'
],
customLaunchers: {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
},
port: 8888,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browserNoActivityTimeout: 40000,
browsers: ['Chrome'],
singleRun: false
});
};
test.ts :
import './polyfills.ts';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { App, Config, Form, IonicModule, Keyboard, MenuController, NavController, Platform } from 'ionic-angular';
import { ConfigMock } from './test/mock';
// Unfortunately there no typing for the `__karma__` variable. Just declare it as any.
declare var __karma__: any;
declare var require: any;
// Prevent Karma from running prematurely.
__karma__.loaded = (): any => { /* no op */};
Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing'),
])
// First, initialize the Angular testing environment.
.then(([testing, testingBrowser]) => {
testing.getTestBed().initTestEnvironment(
testingBrowser.BrowserDynamicTestingModule,
testingBrowser.platformBrowserDynamicTesting()
);
})
// Then we find all the tests.
.then(() => require.context('./', true, /\.spec\.ts/))
// And load the modules.
.then(context => context.keys().map(context))
// Finally, start Karma to run the tests.
.then(__karma__.start, __karma__.error);
export class TestUtils {
public static beforeEachCompiler(components: Array): Promise {
return TestUtils.configureIonicTestingModule(components)
.compileComponents().then(() => {
let fixture: any = TestBed.createComponent(components[0]);
return {
fixture,
instance: fixture.debugElement.componentInstance,
};
});
}
public static configureIonicTestingModule(components: Array): typeof TestBed {
return TestBed.configureTestingModule({
declarations: [
...components,
],
imports: [
FormsModule,
IonicModule,
ReactiveFormsModule,
],
providers: [
{provide: App, useClass: ConfigMock},
{provide: Config, useClass: ConfigMock},
Form,
{provide: Keyboard, useClass: ConfigMock},
{provide: MenuController, useClass: ConfigMock},
{provide: NavController, useClass: ConfigMock},
{provide: Platform, useClass: ConfigMock},
{provide: Config, useClass: ConfigMock},
],
});
}
// http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
public static eventFire(el: any, etype: string): void {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
let evObj: any = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
}