Separate Functional and Unit Test Modes (#166)

* Update for seperate unit and functional test builds

* Continue to support depracated test mode and add unit tests

* Fix up unit tests

* README updates

* Fix up files for eject

* Limit test mode to single bundle too

* Change bundle and asset to all for the unit and functional modes

Author: agubler

README.md

@@ -39,7 +39,7 @@ There are three modes available to build a Dojo application, `dist`, `dev` and `
 dojo build app --mode dist
 ```
 
-The built application files are written to the `output/{mode selected}` directory
+The built application files are written to the `output/{dist/dev}` directory. The built test files are written to the `output/test/{unit|functionl}` directory.
 
 Note: `dist` is the default mode and so can be run without any arguments, `dojo build app`.
 
@@ -51,9 +51,13 @@ The `dist` mode creates a production-ready build.
 
 The `dev` mode creates an application build that has been optimized for debugging and development.
 
-#### Test mode
+#### Unit mode
 
-The `test` mode creates bundles that can be used to run the unit and functional tests of the application.
+The `unit` mode creates bundles that can be used to run the unit tests of the application.
+
+#### Functional mode
+
+The `functional` mode creates bundles that can be used to run the functional tests of the application.
 
 ### Serving the Application
 
@@ -126,14 +130,16 @@ Ejecting `@dojo/cli-build-app` will produce the following files under the `confi
 - `build-options.json`: the build-specific config options removed from the `.dojorc`
 - `ejected.config.js`: the root webpack config that passes the build options to the appropriate mode-specific config based on the `--env.mode` flag's value.
 - `base.config.js`: a common configuration used by the mode-specific configs.
+- `base.test.config.js`: a common configuration used by the unit and functional modes.
 - `dev.config.js`: the configuration used during development.
 - `dist.config.js`: the production configuration.
-- `test.config.js`: the configuration used when running tests.
+- `unit.config.js`: the configuration used when running unit tests.
+- `functional.config.js`: the configuration used when running functional tests.
 
 As already noted, the dojorc's `build-app` options are moved to `config/build-app/build-options.json` after ejecting. Further, the modes are specified using webpack's `env` flag (e.g., `--env.mode=dev`), defaulting to `dist`. You can run a build using webpack with:
 
 ```bash
-node_modules/.bin/webpack --config=config/build-app/ejected.config.js --env.mode={dev|dist|test}
+node_modules/.bin/webpack --config=config/build-app/ejected.config.js --env.mode={dev|dist|unit|functional}
 ```
 
 ### Configuration

src/base.config.ts

@@ -152,14 +152,16 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		},
 		[] as string[]
 	);
+	const singleBundle =
+		args.singleBundle || args.mode === 'unit' || args.mode === 'functional' || args.mode === 'test';
 
 	const customTransformers: any[] = [];
 
-	if (lazyModules.length > 0 && !args.singleBundle) {
+	if (lazyModules.length > 0 && !singleBundle) {
 		customTransformers.push(registryTransformer(basePath, lazyModules));
 	}
 
-	if (!args.legacy && !args.singleBundle) {
+	if (!args.legacy && !singleBundle) {
 		customTransformers.push(importTransformer(basePath, args.bundles));
 	}
 
@@ -276,7 +278,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		devtool: 'source-map',
 		watchOptions: { ignored: /node_modules/ },
 		plugins: removeEmpty([
-			args.singleBundle &&
+			singleBundle &&
 				new webpack.optimize.LimitChunkCountPlugin({
 					maxChunks: 1
 				}),

src/test.config.ts renamed to src/base.test.config.ts

@@ -1,36 +1,10 @@
 import baseConfigFactory from './base.config';
-import * as path from 'path';
-import * as webpack from 'webpack';
-import * as globby from 'globby';
-import * as CleanWebpackPlugin from 'clean-webpack-plugin';
+import { WebpackConfiguration } from './interfaces';
 import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
 
-const basePath = process.cwd();
-
-function webpackConfig(args: any): webpack.Configuration {
+function webpackConfig(args: any): WebpackConfiguration {
 	const config = baseConfigFactory(args);
-	const { plugins, output, module } = config;
-	config.entry = () => {
-		const unit = globby
-			.sync([`${basePath}/tests/unit/**/*.ts`])
-			.map((filename: string) => filename.replace(/\.ts$/, ''));
-
-		const functional = globby
-			.sync([`${basePath}/tests/functional/**/*.ts`])
-			.map((filename: string) => filename.replace(/\.ts$/, ''));
-
-		const tests: any = {};
-
-		if (unit.length) {
-			tests.unit = unit;
-		}
-
-		if (functional.length) {
-			tests.functional = functional;
-		}
-
-		return tests;
-	};
+	const { plugins, module } = config;
 	const externals: any[] = (config.externals as any[]) || [];
 
 	const instrumenterOptions = args.legacy ? {} : { esModules: true };
@@ -41,8 +15,7 @@ function webpackConfig(args: any): webpack.Configuration {
 				(plugin as any).options = { ...(plugin as any).options, disable: true };
 			}
 			return plugin;
-		}),
-		new CleanWebpackPlugin(['test'], { root: output.path, verbose: false })
+		})
 	];
 
 	module.rules = module.rules.map((rule) => {
@@ -74,10 +47,6 @@ function webpackConfig(args: any): webpack.Configuration {
 	externals.push(/^intern/);
 	config.externals = externals;
 	config.devtool = 'inline-source-map';
-	config.output = {
-		...output,
-		path: path.join(output.path, 'test')
-	};
 	return config;
 }
 

src/ejected.config.ts

@@ -2,10 +2,11 @@ import * as webpack from 'webpack';
 
 import devConfigFactory from './dev.config';
 import distConfigFactory from './dist.config';
-import testConfigFactory from './test.config';
+import unitConfigFactory from './unit.config';
+import functionalConfigFactory from './functional.config';
 
 export interface EnvOptions {
-	mode?: 'dev' | 'dist' | 'test';
+	mode?: 'dev' | 'dist' | 'unit' | 'functional';
 }
 
 function webpackConfig(env: EnvOptions = {}): webpack.Configuration {
@@ -14,8 +15,10 @@ function webpackConfig(env: EnvOptions = {}): webpack.Configuration {
 	let config: webpack.Configuration;
 	if (mode === 'dev') {
 		config = devConfigFactory(rc);
-	} else if (mode === 'test') {
-		config = testConfigFactory(rc);
+	} else if (mode === 'unit') {
+		config = unitConfigFactory(rc);
+	} else if (mode === 'functional') {
+		config = functionalConfigFactory(rc);
 	} else {
 		config = distConfigFactory(rc);
 	}

src/functional.config.ts

@@ -0,0 +1,36 @@
+import baseTestConfigFactory from './base.test.config';
+import * as path from 'path';
+import { WebpackConfiguration } from './interfaces';
+import * as globby from 'globby';
+import * as CleanWebpackPlugin from 'clean-webpack-plugin';
+
+const basePath = process.cwd();
+
+function webpackConfig(args: any): WebpackConfiguration {
+	const config = baseTestConfigFactory(args);
+	const { output, plugins } = config;
+	config.entry = () => {
+		const functional = globby
+			.sync([`${basePath}/tests/functional/**/*.ts`])
+			.map((filename: string) => filename.replace(/\.ts$/, ''));
+
+		const tests: any = {};
+
+		if (functional.length) {
+			tests.all = functional;
+		}
+
+		return tests;
+	};
+	config.plugins = [
+		...plugins,
+		new CleanWebpackPlugin(['functional'], { root: path.join(output.path, 'test'), verbose: false })
+	];
+	config.output = {
+		...output,
+		path: path.join(output.path, 'test', 'functional')
+	};
+	return config;
+}
+
+export default webpackConfig;

src/main.ts

@@ -12,7 +12,8 @@ import * as history from 'connect-history-api-fallback';
 
 const pkgDir = require('pkg-dir');
 import devConfigFactory from './dev.config';
-import testConfigFactory from './test.config';
+import unitConfigFactory from './unit.config';
+import functionalConfigFactory from './functional.config';
 import distConfigFactory from './dist.config';
 import logger from './logger';
 import { moveBuildOptions } from './util/eject';
@@ -21,6 +22,8 @@ const fixMultipleWatchTrigger = require('webpack-mild-compile');
 const hotMiddleware = require('webpack-hot-middleware');
 const webpackMiddleware = require('webpack-dev-middleware');
 
+const testModes = ['test', 'unit', 'functional'];
+
 function createCompiler(config: webpack.Configuration) {
 	const compiler = webpack(config);
 	fixMultipleWatchTrigger(compiler);
@@ -57,6 +60,11 @@ function build(config: webpack.Configuration, args: any) {
 					return;
 				}
 			}
+			if (args.mode === 'test') {
+				console.warn(
+					'Using `--mode=test` is deprecated and has only built the unit test bundle. This mode will be removed in the next major release, please use `unit` or `functional` explicitly instead.'
+				);
+			}
 			resolve(args.serve || process.exit(0));
 		});
 	});
@@ -214,7 +222,7 @@ const command: Command = {
 			describe: 'the output mode',
 			alias: 'm',
 			default: 'dist',
-			choices: ['dist', 'dev', 'test']
+			choices: ['dist', 'dev', 'test', 'unit', 'functional']
 		});
 
 		options('watch', {
@@ -275,15 +283,17 @@ const command: Command = {
 		remainingArgs = { ...remainingArgs, features: { ...remainingArgs.features, ...feature } };
 		if (args.mode === 'dev') {
 			config = devConfigFactory(remainingArgs);
-		} else if (args.mode === 'test') {
-			config = testConfigFactory(remainingArgs);
+		} else if (args.mode === 'unit' || args.mode === 'test') {
+			config = unitConfigFactory(remainingArgs);
+		} else if (args.mode === 'functional') {
+			config = functionalConfigFactory(remainingArgs);
 		} else {
 			config = distConfigFactory(remainingArgs);
 		}
 
 		if (args.serve) {
-			if (args.mode === 'test') {
-				return Promise.reject(new Error('Cannot use `--serve` with `--mode=test`'));
+			if (testModes.indexOf(args.mode) !== -1) {
+				return Promise.reject(new Error(`Cannot use \`--serve\` with \`--mode=${args.mode}\``));
 			}
 			return serve(config, args);
 		}
@@ -304,15 +314,17 @@ const command: Command = {
 				files: [
 					moveBuildOptions(`${this.group}-${this.name}`),
 					'./base.config.js',
+					'./base.test.config.js',
 					'./dev.config.js',
 					'./dist.config.js',
 					'./ejected.config.js',
-					'./test.config.js'
+					'./unit.config.js',
+					'./functional.config.js'
 				]
 			},
 			hints: [
 				`to build run ${chalk.underline(
-					'./node_modules/.bin/webpack --config ./config/build-app/ejected.config.js --env.mode={dev|dist|test}'
+					'./node_modules/.bin/webpack --config ./config/build-app/ejected.config.js --env.mode={dev|dist|unit|functional}'
 				)}`
 			],
 			npm: {

src/unit.config.ts

@@ -0,0 +1,36 @@
+import baseTestConfigFactory from './base.test.config';
+import * as path from 'path';
+import * as globby from 'globby';
+import * as CleanWebpackPlugin from 'clean-webpack-plugin';
+import { WebpackConfiguration } from './interfaces';
+
+const basePath = process.cwd();
+
+function webpackConfig(args: any): WebpackConfiguration {
+	const config = baseTestConfigFactory(args);
+	const { output, plugins } = config;
+	config.entry = () => {
+		const unit = globby
+			.sync([`${basePath}/tests/unit/**/*.ts`])
+			.map((filename: string) => filename.replace(/\.ts$/, ''));
+
+		const tests: any = {};
+
+		if (unit.length) {
+			tests.all = unit;
+		}
+
+		return tests;
+	};
+	config.plugins = [
+		...plugins,
+		new CleanWebpackPlugin(['unit'], { root: path.join(output.path, 'test'), verbose: false })
+	];
+	config.output = {
+		...output,
+		path: path.join(output.path, 'test', 'unit')
+	};
+	return config;
+}
+
+export default webpackConfig;

tests/unit/ejected.config.ts

@@ -7,14 +7,21 @@ const configJson: any = { bundles: {} };
 let mockModule: MockModule;
 let mockDevConfig: any;
 let mockDistConfig: any;
-let mockTestConfig: any;
+let mockUnitTestConfig: any;
+let mockFunctionalTestConfig: any;
 
 describe('ejected config', () => {
 	beforeEach(() => {
 		mockModule = new MockModule('../../src/ejected.config', require);
-		mockModule.dependencies(['./dev.config', './dist.config', './test.config', './build-options.json']);
+		mockModule.dependencies([
+			'./dev.config',
+			'./dist.config',
+			'./unit.config',
+			'./functional.config',
+			'./build-options.json'
+		]);
 
-		const configs = ['dev', 'dist', 'test'].map((name) => {
+		const configs = ['dev', 'dist', 'unit', 'functional'].map((name) => {
 			const config = mockModule.getMock(`./${name}.config`);
 			config.default = stub();
 			return config.default;
@@ -23,7 +30,8 @@ describe('ejected config', () => {
 		Object.assign(mockModule.getMock('./build-options.json'), configJson);
 		mockDevConfig = configs[0];
 		mockDistConfig = configs[1];
-		mockTestConfig = configs[2];
+		mockUnitTestConfig = configs[2];
+		mockFunctionalTestConfig = configs[3];
 	});
 
 	afterEach(() => {
@@ -44,10 +52,17 @@ describe('ejected config', () => {
 		assert.isTrue(mockDistConfig.calledWith(configJson));
 	});
 
-	it('can run test mode', () => {
+	it('can run unit mode', () => {
 		const config = mockModule.getModuleUnderTest();
-		config({ mode: 'test' });
-		assert.isTrue(mockTestConfig.calledOnce);
-		assert.isTrue(mockTestConfig.calledWith(configJson));
+		config({ mode: 'unit' });
+		assert.isTrue(mockUnitTestConfig.calledOnce);
+		assert.isTrue(mockUnitTestConfig.calledWith(configJson));
+	});
+
+	it('can run functional mode', () => {
+		const config = mockModule.getModuleUnderTest();
+		config({ mode: 'functional' });
+		assert.isTrue(mockFunctionalTestConfig.calledOnce);
+		assert.isTrue(mockFunctionalTestConfig.calledWith(configJson));
 	});
 });