Webpack, Karma, and You

karma.conf.js

module.exports = function karmaConfig(config) {
  config.set({
    frameworks: [
      'jasmine',
      'es6-shim' // needed to take advantage of es6 collections
    ],

    reporters: [
      'progress', // print to console
      'coverage' // output code coverage
    ],

    files: [
      'src/tests.webpack.js' // grab all test (*.spec.js) files
    ],

    preprocessors: {
      'src/tests.webpack.js': ['webpack', 'sourcemap'] // convert files and load sourcemaps
    },

    browsers: [
      'PhantomJS' // run tests via phantomJS
    ],

    singleRun: true, // only run once

    // Configure code coverage reporter
    coverageReporter: {
      dir: 'coverage/',
      reporters: [
        { type: 'text-summary' },
        { type: 'html' }
      ]
    },

    webpack: require('./webpack.config'),

    // Hide webpack build information from output
    webpackMiddleware: {
      noInfo: 'errors-only'
    }
  });
};

main.webpack.file.js

'use strict';
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const ENV = process.env.npm_lifecycle_event;
console.log();

const isTestBuild = ENV === 'test';
const isDevBuild = ENV === 'dev-build';
const isProdBuild = ENV === 'build';

const config = {
  module: {
    preLoaders: [],
    loaders: [{
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/
    }]
  }
};

if (isTestBuild) {
  config.devtool = 'inline-source-map';
  config.entry = {};
  config.output = {};

  // code coverage config
  config.module.preLoaders.push({
    test: /\.js$/,
    exclude: [
      /node_modules/,
      /\.spec\.js$/
    ],
    loader: 'isparta'
  });
}

if (isDevBuild || isProdBuild) {

  config.devtool = isDevBuild ? 'eval-source-map' : 'source-map';
  config.entry = ['./src/app.js'];

  config.output = {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
  };

  config.plugins = [
    new CopyWebpackPlugin([
      {
        from: 'src/index.html'
      },
      {
        from: 'src/images'
      }
    ]),
    new ExtractTextPlugin("styles.css")
  ];

  config.eslint = {
    configFile: './.eslintrc'
  };

  config.module.loaders = [
    {
      test: /\.js$/,
      loader: 'babel?presets[]=es2015',
      exclude: /node_modules/
    },
    {
      test: /\.html$/,
      loader: path.join('angular-template?relativeTo=', path.resolve(__dirname, './src'), '/!html')
    },
    {
      test: /\.css$/,
      loader: 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'
    }
  ];
}

if (isDevBuild) {
  console.log('**********************************************************************');
  console.log('*                          DEVELOPMENT BUILD                         *');
  console.log('**********************************************************************');
}

if (isTestBuild) {
  console.log('**********************************************************************');
  console.log('*                             TEST BUILD                             *');
  console.log('**********************************************************************');
}

if (isProdBuild) {

  console.log('**********************************************************************');
  console.log('*                          PRODUCTION BUILD                          *');
  console.log('**********************************************************************');

  // only do linting for production
  // builds so we can do log debugging and other stuff
  config.module.preLoaders.push({
    test: /\.js$/,
    loader: 'eslint-loader',
    include: path.join(__dirname, '/src'),
    exclude: /node_modules/
  });
}

module.exports = config;

OneServiceTest.spec.js

import {IngredientService} from './IngredientService';
describe('test ingredient service', () => {

  let service, _$httpBackend;
  beforeEach(() => {
    inject(($http, $httpBackend) => {
      _$httpBackend = $httpBackend;
      service = new IngredientService($http);
    });
  });

  describe('test IngredientService.getAll', () => {

    let result;
    beforeEach(() => {
      _$httpBackend.when('GET', 'ws/ingredients').respond([]);
      result = service.getAll();
    });

    it('getAll() should return a promise', () => {
      expect(result.then).toBeDefined();
    });

    it('getAll().then should return an empty array', () => {
      result.then((response) => {
        expect(response.data).toEqual([]);
      });
    });
  });

  describe('test IngredientService.getMap', () => {

    let result;
    beforeEach(() => {
      _$httpBackend.when('GET', 'ws/ingredients/map').respond({});
      result = service.getMap();
    });

    it('getMap().then should return a promise', () => {
      expect(result.then).toBeDefined();
    });

    it('getMap().then should return an empty object', () => {
      result.then((response) => {
        expect(response.data).toEqual({});
      });
    });
  });

  describe('test IngredientService.getTree', () => {

    let result;
    beforeEach(() => {
      _$httpBackend.when('GET', 'ws/ingredients/tree').respond([]);
      result = service.getTree();
    });

    it('getMap().then should return a promise', () => {
      expect(result.then).toBeDefined();
    });

    it('getMap().then should return an empty object', () => {
      result.then((response) => {
        expect(response.data).toEqual([]);
      });
    });
  });
});

package.json

{
  "name": "beerfactory",
  "version": "1.0.0",
  "description": "BeerFactory",
  "main": "app.js",
  "scripts": {
    "build": "rimraf dist && webpack --bail --optimize-dedupe -p --progress --colors --profile",
    "dev-build": "rimraf dist && webpack -d --progress --colors",
    "test": "karma start",
    "test-watch": "karma start --auto-watch --no-single-run",
    "start": "node ./server/server.js"
  },
  "author": "icfantv",
  "license": "ISC",
  "private": true,
  "dependencies": {
    "angular": "^1.5.0",
    "angular-animate": "^1.5.0",
    "angular-messages": "^1.5.0",
    "angular-route": "^1.5.0",
    "angular-sanitize": "^1.5.0",
    "angular-ui-bootstrap": "^1.2.5",
    "angular-ui-tree": "^2.14.0",
    "bootstrap": "^3.3.6",
    "font-awesome": "^4.5.0",
    "lodash": "^4.6.1"
  },
  "devDependencies": {
    "angular-mocks": "^1.5.0",
    "angular-template-loader": "0.0.2",
    "babel-core": "^6.6.5",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "body-parser": "^1.15.0",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "eslint": "^2.3.0",
    "eslint-config-angular": "^0.5.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-angular": "^1.0.0",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.21",
    "karma-coverage": "^0.5.5",
    "karma-es6-shim": "^0.2.3",
    "karma-jasmine": "^0.3.7",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.24",
    "karma-webpack": "^1.7.0",
    "morgan": "^1.7.0",
    "phantomjs-prebuilt": "^2.1.6",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14"
  }
}

tests.webpack.js

import * as _ from 'lodash';
import 'angular';
import 'angular-mocks/angular-mocks';

const tests = require.context(".", true, /.spec$/);
tests.keys().forEach(tests);

const components = require.context('.', true, /index\.js$/);
components.keys().forEach(components);