2

I have been battaling with this for a bit now and cant seem to find the right solution,

i am running an ionic 2 project that uses angular 2's testing environment, when i run 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 at http://localhost:8888/ 07 12 2016 11:20:50.591:INFO [launcher]: Launching browser Chrome with unlimited concurrency 07 12 2016 11:20:50.682:INFO [launcher]: Starting browser Chrome 07 12 2016 11:20:52.993:INFO [Chrome 55.0.2883 (Linux 0.0.0)]: Connected on socket /#wi3gg8nwMc27F0H4AAAA with id 3728337

Finished in 0.002 secs / 0 secs

SUMMARY: ✔ 0 tests completed

But when using PhantomJS all tests run perfectly.

My system i am running is:

  • Linux ubuntu 16.04LT
  • NodeJs: 6.9.2
  • Npm: 3.10.8

I have tried reinstalling all modules, i have reinstalled OS, i have installed project on another linux system and it works perfectly 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
        });
    };

My test.ts file is as the followinig:


    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's 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);
            }
        }
    }

Any Help or direction would be appreciated

Spazzy757
  • 889
  • 4
  • 20

1 Answers1

8

So I Found the answer if anybody has the same issue, it seems that my Chrome browser updated to Version 55.0.2883.75 (64-bit) which causes a bug with the Angular 2 Typescript app I am coding, i fixed this by adding

mime: {
    'text/x-typescript': ['ts','tsx']
},

to my karma.conf.js file.

James B. Nall
  • 1,398
  • 3
  • 16
  • 27
Spazzy757
  • 889
  • 4
  • 20
  • Thanks ! It fixed the problem for me. – Toilal Mar 26 '17 at 15:48
  • I banged my head against the wall for half a day testing Angular 1.6 Typescript app. The tests ran perfectly in PhantomJS, however failed with nomod (unable to find angular module) errors. Your solution fixed it. – Yan Yankowski Sep 16 '17 at 13:21
  • 1
    I already have that in my file, but my situation is even weirder. One of my spec files runs fine in both phantomjs and karma in Chrome, but another spec only passes in phantomjs, and Karma complains about cross-origin requests, which I think is caused by something else, because I don't have any CORS. – redOctober13 Mar 22 '18 at 16:20