Build Configuration

karma-shim.js

Error.stackTraceLimit = Infinity;

require('es6-shim');
require('reflect-metadata');

require('ts-helpers');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

/*
 Ok, this is kinda crazy. We can use the the context method on
 require that webpack created in order to tell webpack
 what files we actually want to require or import.
 Below, context will be a function/object with file names as keys.
 using that regex we are saying look in client/app and find
 any file that ends with '.spec.ts' and get its path. By passing in true
 we say do this recursively
 */
var appContext = require.context('./src/main/webapp/static/app', true, /\.spec\.ts/);

// get all the files, for each file, call the context function
// that will require the file and load it up here. Context will
// loop and require those spec files here
appContext.keys().forEach(appContext);

// Select BrowserDomAdapter.
// see https://github.com/AngularClass/angular2-webpack-starter/issues/124
// Somewhere in the test setup
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.setBaseTestProviders(browser.TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
  browser.TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

karma.conf.js

const path = require('path');
const webpackConfig = require('./webpack.config');
module.exports = function(config) {
  var _config = {

    // 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-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-shim.js': ['webpack', 'sourcemap']
    },

    webpack: webpackConfig,

    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    },

    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        {
          type: 'json',
          dir: 'coverage',
          subdir: 'json',
          file: 'coverage-final.json'
        }
      ]
    },

    remapIstanbulReporter: {
      src: 'coverage/json/coverage-final.json',
      reports: {
        lcovonly: 'coverage/json/lcov.info',
        html: 'coverage/html',
        'text': null
      },
      timeoutNotCreated: 1000, // default value
      timeoutNoMoreFiles: 1000 // default value
    },

    webpackServer: {
      noInfo: true // please don't spam the console when running in karma!
    },

    // test results reporter to use
    // possible values: 'dots', 'progress', 'mocha'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ["mocha", "coverage", "karma-remap-istanbul"],

    // 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'], // you can also use Chrome

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  };

  config.set(_config);
};

webpack.config.js

'use strict';
const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');

//noinspection ES6ModulesDependencies
const ENV = process.env.npm_lifecycle_event;
const IS_TEST = ENV === 'test';
if (IS_TEST) {
  console.log('**********************************************************************');
  console.log('*                             TEST BUILD                             *');
  console.log('**********************************************************************');
}

const config = {
  devtool: IS_TEST ? 'eval-source-map' : 'source-map',
  entry: IS_TEST ? {} : './src/main/webapp/static/app/app.js',
  output: IS_TEST ? {} : {
    path: __dirname + '/src/main/webapp/static/dist',
    filename: 'bundle.[hash].js',
    hashFunction: 'sha256'
  },
  plugins: IS_TEST ? [] : [
    new ExtractTextPlugin('styles.[hash].css'),
    new HtmlWebpackPlugin({
      inject: 'body',
      template: 'raw!./src/main/webapp/WEB-INF/jsp/main-template.jsp'
    }),
    new AssetsPlugin({
      filename: 'assets.json'
    }),
    new WebpackShellPlugin({
      onBuildStart: ['npm run clean'],
      onBuildEnd: ['npm run post-webpack']
    })
  ],
  resolve: {
    cache: !IS_TEST,
    extensions: ['', '.js', '.ts']
  },
  tslint: {
    emitErrors: false,
    failOnHint: false
  },
  htmlLoader: {  // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
    minimize: true,
    removeAttributeQuotes: false,
    caseSensitive: true,
    customAttrSurround: [
      [/#/, /(?:)/],
      [/\*/, /(?:)/],
      [/\[?\(?/, /(?:)/]
    ],
    customAttrAssign: [/\)?\]?=/]
  },
  module: {
    preLoaders: IS_TEST ? [] : [
      {
        test: /\.ts$/,
        loader: 'tslint'
      }
    ],
    loaders: [
      {
        test: require.resolve('jquery'),
        loader: 'expose?$!expose?jQuery'
      },
      {
        test: /\.ts$/,
        loader: 'ts',
        query: {
          ignoreDiagnostics: [
            2300, // 2300 -> Duplicate identifier, needed or it'll barf on the typings files
            2374, // 2374 -> Duplicate number index signature, needed or it'll barf on the typings files
            2375  // 2375 -> Duplicate string index signature, needed or it'll barf on the typings files
          ]
        },
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          compact: false
        }
      },
      {
        test: /\.html$/,
        loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './src/main/webapp/static/app')) + '/!html'
      },
      {
        test: /\.css$/,
        loader: IS_TEST ? 'null' : ExtractTextPlugin.extract('style-loader', 'css-loader')
      },
      {
        test: /\.png$/,
        loader: 'url-loader?limit=100000'
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/,
        loader: 'file-loader'
      }
    ],
    postLoaders: [],
    noParse: [/.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/, /angular2-polyfills\.js/]
  }
};

if (IS_TEST) {
  config.module.postLoaders.push({
    test: /\.ts$/,
    include: path.resolve('src'),
    loader: 'istanbul-instrumenter-loader',
    exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
  });

  // needed for remap-instanbul
  config.ts = {
    compilerOptions: {
      sourceMap: false,
      sourceRoot: './src/main/webapp/static/app/components',
      inlineSourceMap: true
    }
  };
}

module.exports = config;