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?
), so we’re ready for beta.12.