Enable Karma Test

config/assets.js

@@ -14,7 +14,7 @@ module.exports = {
 
 	// Test specific source files
 	tests: {
-		client: [ 'test-client.js', 'src/client/**/*.spec.ts' ],
+		client: [ 'src/client/**/*.spec.ts' ],
 		server: [ 'test-server.js', 'src/server/**/*.spec.js' ],
 		e2e: [ 'e2e/**/*.spec.js' ]
 	},

config/build/test-client.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * Module dependencies.
+ */
+var Server = require('karma').Server;
+
+console.info('Starting initialization of client tests');
+
+new Server({
+	configFile: __dirname + '/../karma.conf.js'
+}, function(exitStatus) {
+	process.exit(exitStatus);
+}).start();

config/build/webpack.conf.js

@@ -162,19 +162,24 @@ module.exports = (mode) => {
 		));
 	}
 
-	// Chunk common code if we're not running in test mode
 	wpConfig.plugins.push(
 		new webpack.ProvidePlugin({
 			d3: 'd3'
 		}),
-		new webpack.optimize.CommonsChunkPlugin({
-			name: [ 'app', 'vendor' ],
-			filename: '[name].js'
-		}),
 		new webpack.ContextReplacementPlugin(
 			/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/
 		)
 	);
 
+	// Chunk common code if we're not running in test mode
+	if(!test) {
+		wpConfig.plugins.push(
+			new webpack.optimize.CommonsChunkPlugin({
+				name: [ 'app', 'vendor' ],
+				filename: '[name].js'
+			})
+		);
+	}
+
 	return wpConfig;
 };

config/karma-test-shim.js

@@ -0,0 +1,21 @@
+Error.stackTraceLimit = Infinity;
+
+require('core-js/es6');
+require('core-js/es7/reflect');
+
+require('zone.js/dist/zone');
+require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/proxy');
+require('zone.js/dist/sync-test');
+require('zone.js/dist/jasmine-patch');
+require('zone.js/dist/async-test');
+require('zone.js/dist/fake-async-test');
+
+var appContext = require.context('../src/client', true, /\.spec\.ts/);
+
+appContext.keys().forEach(appContext);
+
+var testing = require('@angular/core/testing');
+var browser = require('@angular/platform-browser-dynamic/testing');
+
+testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

config/karma.conf.js

@@ -0,0 +1,81 @@
+// Karma configuration
+// Generated on Wed Dec 14 2016 15:07:52 GMT-0500 (EST)
+
+const webpackConfig = require('./build/webpack.conf')('test');
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+		{pattern: './karma-test-shim.js', watched: false}
+	],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+		'./karma-test-shim.js': ['webpack', 'sourcemap']
+    },
+
+	webpack: webpackConfig,
+
+	webpackMiddleware: {
+		stats: 'errors-only'
+	},
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['mocha'],
+
+	mochaReporter: {
+		maxLogLines: -1
+	},
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  });
+};

gulpfile.js

@@ -239,6 +239,38 @@ gulp.task('test-server', ['env:test'], () => {
 	});
 });
 
+function runKarmaTest(callback) {
+	const spawn = require('child_process').spawn;
+	const karma = spawn('node', ['./config/build/test-client.js']);
+
+	karma.stdout.pipe(process.stdout);
+	karma.stderr.pipe(process.stderr);
+
+	karma.on('close', callback);
+}
+
+gulp.task('test-client', ['env:test'], () => {
+
+	const clientFilesToWatch = _.union(
+			assets.tests.client,
+			assets.client.app.src.ts,
+			assets.client.app.src.sass,
+			assets.client.app.views,
+			assets.client.app.content,
+			assets.build
+	);
+
+	const minTimeBetweenTestsCalls = 5000;
+
+	const runKarmaTestWithDebounce = _.throttle(_.partial(runKarmaTest, _.noop), minTimeBetweenTestsCalls);
+
+	gulp.watch(clientFilesToWatch, runKarmaTestWithDebounce);
+	runKarmaTestWithDebounce();
+
+});
+
+gulp.task('test-client-ci', ['env:test'], runKarmaTest);
+
 gulp.task('coverage-init', () => {
 	// Covering all server code minus routes
 	return gulp.src([
@@ -316,13 +348,13 @@ gulp.task('build', [ 'build-client', 'build-server' ]);
 /**
  * test - Run tests in dev mode with nodemon
  */
-gulp.task('test', (done) => { runSequence([ 'test-server' ], done); });
+gulp.task('test', (done) => { runSequence([ 'test-server', 'test-client' ], done); });
 
 
 /**
  * Run tests in CI mode with coverage and no nodemon
  */
-gulp.task('test-ci', (done) => { runSequence([ 'test-server-ci' ], done); });
+gulp.task('test-ci', (done) => { runSequence([ 'test-server-ci', 'test-client-ci' ], done); });
 
 
 /**

package.json

@@ -119,6 +119,15 @@
 		"mochawesome": "1.5",
 		"should": "11.1",
 
+		"karma": "1.3.0",
+		"karma-jasmine": "1.1.0",
+		"karma-mocha-reporter": "2.2.1",
+		"karma-phantomjs-launcher": "1.0.2",
+		"karma-sourcemap-loader": "0.3.7",
+		"karma-webpack": "1.8.0",
+		"jasmine-core": "2.5.2",
+		"@types/jasmine": "2.5.38",
+
 		"gulp": "3.9",
 		"del": "2.2",
 		"gulp-clean-css": "2.0",
@@ -129,6 +138,7 @@
 		"gulp-hash": "3.1",
 		"gulp-insert": "0.5",
 		"gulp-istanbul": "1.1",
+		"gulp-karma": "0.0.5",
 		"gulp-livereload": "3.8",
 		"gulp-load-plugins": "1.4",
 		"gulp-mocha": "3.0",

src/client/app/core/about.component.spec.ts

@@ -0,0 +1,53 @@
+import { ConfigService } from './config.service';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AboutComponent } from './about.component';
+import { DebugElement } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+describe('AboutComponent', () => {
+	let aboutComponent: AboutComponent;
+	let fixture: ComponentFixture<AboutComponent>;
+	let rootDebugElement: DebugElement;
+	let rootNativeElement: HTMLElement;
+
+	const testConfig = {
+		version: 'TEST_VERSION_0.1.0',
+		mailer: {
+			admin: 'admin@email.com'
+		},
+		app: {
+			instanceName: 'TEST_INSTANCE'
+		}
+	}
+
+	const configServiceStub = {
+		getConfig() {
+			return new BehaviorSubject(testConfig);
+		}
+	}
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			declarations: [AboutComponent],
+			providers: [{provide: ConfigService, useValue: configServiceStub}]
+		});
+
+		fixture = TestBed.createComponent(AboutComponent);
+
+		aboutComponent = fixture.componentInstance;
+
+		rootDebugElement = fixture.debugElement;
+		rootNativeElement = rootDebugElement.nativeElement;
+	});
+
+	it('should display the current version', () => {
+		fixture.detectChanges();
+		expect(rootNativeElement.textContent).toContain(testConfig.version);
+	});
+
+	it('should display the admin email address', () => {
+		fixture.detectChanges();
+		expect(rootNativeElement.textContent).toContain(testConfig.mailer.admin);
+	});
+
+});

src/client/app/shared/capitalize.pipe.spec.ts

@@ -0,0 +1,18 @@
+import { CapitalizePipe } from './capitalize.pipe';
+describe('CapitalizePipe', () => {
+
+	let capitalize = new CapitalizePipe();
+
+	it('transforms "foo" to "Foo"', () => {
+		expect(capitalize.transform('foo')).toBe('Foo');
+	});
+
+	it('transforms "fooBar" to "FooBar"', () => {
+		expect(capitalize.transform('fooBar')).toBe('FooBar');
+	});
+
+	it('transforms "foo bar" to "Foo bar"', () => {
+		expect(capitalize.transform('foo bar')).toBe('Foo bar');
+	});
+
+});