feat(Tests): Minimal working configuration for Unit Tests and coverage with Karma, TypeScript and WebPack

Author: emyann

jsconfig.json

@@ -1,6 +1,7 @@
 {
 	// See https://go.microsoft.com/fwlink/?LinkId=759670
 	// for the documentation about the jsconfig.json format
+	"sourceMap": true,
 	"compilerOptions": {
 		"target": "es6",
 		"module": "commonjs",

karma.conf.js

@@ -1,18 +1,14 @@
-// Karma configuration
-// Generated on Wed Feb 01 2017 12:12:42 GMT+0100 (Paris, Madrid)
 var webpackConf = require('./webpack.config.js');
-delete webpackConf.entry
-
 module.exports = function (config) {
   config.set({
-    basePath: './src',
-    frameworks: ['jasmine', 'karma-typescript'],
-    files: [{ pattern: './**/*.spec.ts', watched: false }],
-    preprocessors: {
-      'index.ts': ['webpack', 'karma-typescript', 'coverage'],
-      '**/*.spec.ts': ['webpack', 'karma-typescript', 'coverage']
+    basePath:'',
+    frameworks: ['jasmine'],
+    files: [{ pattern: './spec-bundle.js', watched: false }],
+    preprocessors: { './spec-bundle.js': ['coverage', 'webpack', 'sourcemap'] },
+    webpack: {
+      module: webpackConf.module,
+      resolve: webpackConf.resolve
     },
-    webpack: webpackConf, // Pass your webpack.config.js file's content
     webpackMiddleware: {
       noInfo: true,
       stats: 'errors-only'
@@ -21,7 +17,7 @@ module.exports = function (config) {
     // optionally, configure the reporter
     coverageReporter: {
       // specify a common output directory
-      dir: 'build/reports/coverage',
+      dir: './tests/build/reports/coverage',
       reporters: [
         // reporters not supporting the `file` property
         { type: 'html', subdir: 'report-html' },
@@ -54,12 +50,12 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false,
+    singleRun: true,
     concurrency: Infinity
   });
 
+
   if (process.env.TRAVIS) {
     config.browsers = ['Chrome_travis_ci'];
-    config.singleRun = true;
   }
 };

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "npm run server:dev",
     "server": "npm run server:dev",
-    "server:dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --content-base dist/",
+    "server:dev": "webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --inline --progress --watch",
     "server:prod": "cross-env NODE_ENV=production webpack-dashboard -- webpack-dev-server --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --profile --watch --content-base dist/",
     "build": "npm run build:dev",
     "build:dev": "webpack --config ./webpack.config.js --progress --profile --color --display-error-details --display-cached",
@@ -21,38 +21,38 @@
   "author": "yrenaudin",
   "license": "ISC",
   "devDependencies": {
-    "@types/jasmine": "^2.5.41",
-    "@types/lodash": "^4.14.50",
-    "cross-env": "^3.1.4",
-    "css-loader": "^0.26.1",
+    "@types/jasmine": "^2.5.53",
+    "@types/lodash": "^4.14.70",
+    "awesome-typescript-loader": "^3.2.1",
+    "cross-env": "^5.0.1",
+    "css-loader": "^0.28.4",
     "ejs-loader": "^0.3.0",
-    "eslint": "^3.14.0",
-    "expose-loader": "^0.7.1",
-    "html-loader": "^0.4.4",
-    "html-webpack-plugin": "^2.26.0",
-    "jasmine": "^2.5.3",
-    "jasmine-core": "^2.5.2",
-    "karma": "^1.4.1",
+    "eslint": "^4.2.0",
+    "expose-loader": "^0.7.3",
+    "html-loader": "^0.4.5",
+    "html-webpack-plugin": "^2.29.0",
+    "jasmine": "^2.6.0",
+    "jasmine-core": "^2.6.4",
+    "karma": "^1.7.0",
     "karma-babel-preprocessor": "^6.0.1",
-    "karma-chrome-launcher": "^2.0.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-coverage": "^1.1.1",
-    "karma-firefox-launcher": "^1.0.0",
+    "karma-firefox-launcher": "^1.0.1",
     "karma-jasmine": "^1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-phantomjs-launcher": "^1.0.2",
+    "karma-phantomjs-launcher": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.26",
-    "karma-typescript": "^2.1.7",
-    "karma-webpack": "^2.0.2",
-    "rimraf": "^2.5.4",
-    "style-loader": "^0.13.1",
-    "ts-loader": "^2.0.0",
-    "tslint": "^4.3.1",
-    "tslint-loader": "^3.3.0",
-    "typescript": "^2.1.5",
-    "webpack": "^2.2.1",
-    "webpack-dashboard": "^0.2.1",
-    "webpack-dev-server": "2.2.0"
+    "karma-spec-reporter": "0.0.31",
+    "karma-webpack": "^2.0.4",
+    "rimraf": "^2.6.1",
+    "source-map-loader": "^0.2.1",
+    "style-loader": "^0.18.2",
+    "tslint": "^5.5.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.4.1",
+    "webpack": "^3.3.0",
+    "webpack-dashboard": "^0.4.0",
+    "webpack-dev-server": "2.5.1"
   },
   "dependencies": {
     "lodash": "^4.17.4"

spec-bundle.js

@@ -0,0 +1,9 @@
+Error.stackTraceLimit = Infinity;
+
+var testContext = require.context('./src', true, /\.spec\.ts/);
+
+function requireAll(requireContext) {
+  return requireContext.keys().map(requireContext);
+}
+
+var modules = requireAll(testContext);

src/index.spec.ts

@@ -1,5 +1,5 @@
-describe('TypeScript WebPack Starter Tests', ()=> {
-    it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', ()=> {
+describe('TypeScript WebPack Starter Tests', () => {
+    it('A good way to start building an awesome lib is by doing Unit Tests 👌🏽', () => {
         expect(true).toBe(true);
-    })
+    });
 })

tsconfig.json

@@ -1,9 +1,16 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "es6",
-    "moduleResolution": "node",
-    "sourceMap": true
+    "module": "commonjs",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true
   },
   "exclude": [
     "node_modules",

webpack.config.js

@@ -1,66 +1,77 @@
-const webpack = require('webpack');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const DashboardPlugin = require('webpack-dashboard/plugin');
-const nodeEnv = process.env.NODE_ENV || 'development';
-const isProd = nodeEnv === 'production';
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const DashboardPlugin = require("webpack-dashboard/plugin");
+const nodeEnv = process.env.NODE_ENV || "development";
+const isProd = nodeEnv === "production";
 
 var config = {
-    devtool: isProd ? 'hidden-source-map' : 'cheap-eval-source-map',
-    context: path.resolve('./src'),
-    entry: {
-        app: './index.ts',
-        vendor: './vendor.ts'
-    },
-    output: {
-        path: path.resolve('./dist'),
-        filename: '[name].bundle.js',
-        sourceMapFilename: '[name].map',
-        devtoolModuleFilenameTemplate: function (info) {
-            return "file:///" + info.absoluteResourcePath;
-        }
-    },
-    module: {
-        rules: [
-            { enforce: 'pre', test: /\.ts$/, exclude: ["node_modules"], loader: 'ts-loader' },
-            { test: /\.html$/, loader: "html" },
-            { test: /\.css$/, loaders: ['style', 'css'] }
-        ]
-    },
-    resolve: {
-        extensions: [".ts", ".js"],
-        modules: [path.resolve('./src'), 'node_modules']
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            'process.env': { // eslint-disable-line quote-props
-                NODE_ENV: JSON.stringify(nodeEnv)
-            }
-        }),
-        new HtmlWebpackPlugin({
-            title: 'Typescript Webpack Starter',
-            template: '!!ejs-loader!src/index.html'
-        }),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'vendor',
-            minChunks: Infinity,
-            filename: 'vendor.bundle.js'
-        }),
-        new webpack.optimize.UglifyJsPlugin({
-            compress: { warnings: false },
-            output: { comments: false },
-            sourceMap: false
-        }),
-        new DashboardPlugin(),
-        new webpack.LoaderOptionsPlugin({
-            options: {
-                tslint: {
-                    emitErrors: true,
-                    failOnHint: true
-                }
-            }
-        })
+  devtool: isProd ? "hidden-source-map" : "source-map",
+  context: path.resolve("./src"),
+  entry: {
+    app: "./index.ts",
+    vendor: "./vendor.ts"
+  },
+  output: {
+    path: path.resolve("./dist"),
+    filename: "[name].bundle.js",
+    sourceMapFilename: "[name].bundle.map",
+    devtoolModuleFilenameTemplate: function (info) {
+        return "file:///" + info.absoluteResourcePath;
+    }
+  },
+  module: {
+    rules: [
+      {
+        enforce: "pre",
+        test: /\.ts?$/,
+        exclude: ["node_modules"],
+        use: ["awesome-typescript-loader", "source-map-loader"]
+      },
+      { test: /\.html$/, loader: "html-loader" },
+      { test: /\.css$/, loaders: ["style-loader", "css-loader"] }
     ]
+  },
+  resolve: {
+    extensions: [".ts", ".js"]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      "process.env": {
+        // eslint-disable-line quote-props
+        NODE_ENV: JSON.stringify(nodeEnv)
+      }
+    }),
+    new HtmlWebpackPlugin({
+      title: "Typescript Webpack Starter",
+      template: "!!ejs-loader!src/index.html"
+    }),
+    new webpack.optimize.CommonsChunkPlugin({
+      name: "vendor",
+      minChunks: Infinity,
+      filename: "vendor.bundle.js"
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: { warnings: false },
+      output: { comments: false },
+      sourceMap: true
+    }),
+    new DashboardPlugin(),
+    new webpack.LoaderOptionsPlugin({
+      options: {
+        tslint: {
+          emitErrors: true,
+          failOnHint: true
+        }
+      }
+    })
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, "dist/"),
+    compress: true,
+    port: 3000,
+    hot: true
+  }
 };
 
 module.exports = config;