Setting up Karma on Ionic2 using Webpack

Highly copied from https://github.com/lathonez/clicker
but that repo uses browserifiy that soon will be out.

*the code below is while a trying on my own app

Create a simple task like

gulp.task('karma-debug', (done) => {

  let karma = require('karma');
  let karmaOpts= {
    configFile: path.join(process.cwd(), 'karma.conf.js')
  };

  new karma.Server(karmaOpts, done).start();
});

And the actual karma.conf.js

// Karma configuration
// Generated on Wed Aug 10 2016 10:47:57 GMT+0100 (BST)
var path = require('path')
module.exports = function (config) {
  config.set({

    basePath: '',
    frameworks: ['jasmine'],

    files: [
      { pattern: 'app/**/*.spec.ts', watched: false },
    ],


    exclude: [
    ],

    preprocessors: {
      'app/**/*.spec.ts': ['webpack'],
      'app/**/*.ts': ['webpack'],
    },
    webpack: {
      debug: false,


      devtool: 'cheap-module-source-map',

      module: {
        loaders: [{
          test: /\.spec.ts$/,
          loader: 'awesome-typescript',
          query: {
            doTypeCheck: true,
            resolveGlobs: false,
            externals: ["typings/globals/jasmine/index.d.ts"]
          },
          include: path.resolve('app')
        },{
          test: /\.ts$/,
          loader: 'awesome-typescript',
          query: {
            doTypeCheck: true,
            resolveGlobs: false,
            externals: ["typings/browser.d.ts"]
          },
          include: path.resolve('app'),
          exclude: /node_modules/
        },
        
        
        
        
        
        ]
      },
      resolve: {
        alias: {
        },
        extensions: ['', '.js', '.ts']
      }
    },

    webpackMiddleware: {
      stats: 'errors-only'
    },

    reporters: ['progress'],
    port: 9999,

    colors: true,

    logLevel: config.LOG_DEBUG,

    autoWatch: true,

    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
}

and app.spec.ts

/// <reference path="../typings/index.d.ts"/>
declare var require: any
require("zone.js/dist/zone");
require("zone.js/dist/long-stack-trace-zone");
require("reflect-metadata/Reflect.js");
require("es6-shim/es6-sham.min.js");

import {
  TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
}                               from '@angular/platform-browser-dynamic/testing';
import { setBaseTestProviders } from '@angular/core/testing';
import { MyAppComponent } from './app';

// this needs doing _once_ for the entire test suite, hence it's here
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

// Mock out Ionic's platform class
class MockClass {
  public ready(): any {
    return new Promise((resolve: Function) => {
      resolve();
    });
  }
}

let myApp = null;

describe('MyApp', () => {

  beforeEach(function() {
    let platform = (<any>new MockClass());
    myApp = new MyAppComponent(platform);
  });

  it('initialises with two possible pages', () => {
    expect(myApp).not.toBeNull();
  });
});

the browser get lauched, and the test run and eventually get SUCCESS. But only after a bunch of template errors like below

I assume I must have some sort of karma-static folder witha debug.html and content.html files.
But have no clue where it is looking for it.

Chrome 52.0.2743 (Mac OS X 10.10.5) ERROR: 'Unhandled Promise rejection:', 'EXCEPTION: Error in ./AppRoot class AppRoot_Host - inline template:0:0
ORIGINAL EXCEPTION: The selector "ion-app" did not match any elements
ORIGINAL STACKTRACE:
Error: The selector "ion-app" did not match any elements
    at new BaseException (http://localhost:10001/base/app/app.spec.ts?ba6505d7e4094563dfa6430fcf2ad0812cd43f48:32164:24)
    at DomRenderer.selectRootElement (http://localhost:10001/base/app/app.spec.ts?ba6505d7e4094563dfa6430fcf2ad0812cd43f48:34348:24)
    at DebugDomRenderer.selectRootElement (http://localhost:10001/base/app/app.spec.ts?ba6505d7e4094563dfa6430fcf2ad0812cd43f48:22505:40)
    at DebugAppView.AppView.selectOrCreateHostElement (http://localhost:10001/base/app/app.spec.ts?ba6505d7e4094563dfa6430fcf2ad0812cd43f48:22867:42)

Any help anyone?

Hey,

As per my response on clicker we’re waiting until Ionic have moved (back) to Webpack before making any changes. If this happens in beta.12 we’ll migrate clicker as we pull in those changes.

Of course if you want to get the work done ahead of time we’d be very interested in a link to your changes (or maybe a PR :wink:), so we’re ready for beta.12.

Regarding your issue with Karma’s static, here’s background on the ion-app issue:

Karma’s static lives in node_modules/karma/static. You can see our npm postinstall step to copy over the static here.

It’s also mentioned in the blog post (ctrl + f “patch karma’s static”)

Hope this is helpful,

Thanks

Stephen

1 Like

Yeah! I found the link and managed to copy the html properly but I still havent found a 100% working configuration for the karma-webpack plugin. Once I get it I will be happy to submit a PR. :slight_smile:

Once I get it I will be happy to submit a PR.

Legend, look forward to it.

Got it to work with my project. Only thing I noticed is that when clicking debug, my app shows with no css applied what so ever. Gonna keep digging

Just submitted the PR with as far as I could get with it.
Still some errors but maybe you can spot them.

Hi,
Any news about a working karma config for ionic2 (RC) ?
Should we wait till the final version to have a test configuration set in starter projects ?