Angular2 Webpack basic setup with UNIT TESTS!

app.component.spec.ts

// src/app.components.ts

import {AppComponent} from './app.component';
import {Injector} from '@angular/core';
import {expect, it, describe, beforeEach, beforeEachProviders, inject} from '@angular/core/testing';

describe('Component: AppComponent should be created', function () {
    let fooComponent: FooComponent;
    
    beforeEachProviders(() => [
        FooComponent
    ]);
    
    beforeEach(inject([Injector], injector => {
        fooComponent = injector.get(FooComponent)
    }))
    
    it('should instantiate component', () => {
        expect(fooComponent).toBeDefined('Whoopie!');
    });
});

app.component.ts

// src/app.components.ts

import {Component} from '@angular/core';

@Component({
    selector: 'foo',
    template: `
        <h1>Hello World</h1>
    `
})
export class AppComponent {}

karma.conf.js

// karma.conf.js

const specFiles = [
    './src/**/*.spec.*'
];

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: [
          'node_modules/es6-shim/es6-shim.js',
          'node_modules/reflect-metadata/Reflect.js',
          'node_modules/zone.js/dist/zone.js',
          'node_modules/zone.js/dist/jasmine-patch.js',
          'node_modules/zone.js/dist/async-test.js',
          'node_modules/zone.js/dist/fake-async-test.js',
          ...specFiles
      ],


      // 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: {
          './src/**/*.spec.*': ['webpack']
      },

      webpack: {
          resolve: {
              extensions: ['', '.webpack.js', '.web.js', '.tsx', '.ts', '.js']
          },
          module: {
              loaders: [
                  { test: /\.tsx|ts$/, loader: 'ts-loader' }
              ]
          }
      },

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

      // 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: true,

      // start these browsers
      // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
      browsers: ['Chrome'],

      // Continuous Integration mode
      // if true, Karma captures browsers, runs the tests and exits
      singleRun: (process.env.NODE_ENV === 'production'),

      // Concurrency level
      // how many browser should be started simultaneous
      concurrency: Infinity
    });
}

main.ts

// src/main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

package.json

{
    "name": "angular2-sample-app",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "webpack-dev-server --inline --history-api-fallback --hot",
        "build": "webpack --optimize-minimize",
        "test": "karma start",
        "typings": "typings",
        "postinstall": "typings install"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "jasmine-core": "^2.4.1",
        "karma": "^0.13.22",
        "karma-chrome-launcher": "^1.0.1",
        "karma-jasmine": "^1.0.2",
        "karma-webpack": "^1.7.0",
        "ts-loader": "^0.8.2",
        "typescript": "^1.8.10",
        "typings": "^0.8.1",
        "webcomponentsjs": "*",
        "webpack": "^1.13.0",
        "webpack-dev-server": "^1.14.1"
    },
    "dependencies": {
        "@angular/common": "2.0.0-rc.1",
        "@angular/compiler": "2.0.0-rc.1",
        "@angular/core": "2.0.0-rc.1",
        "@angular/platform-browser": "2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "^0.1.3",
        "rxjs": "5.0.0-beta.6",
        "zone.js": "^0.6.12"
    }
}

typings.json

{
    "name": "react-sample-app",
    "version": false,
    "ambientDependencies": {
        "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
    }
}

webpack.config.js

module.exports = {
    entry: './src/main.ts',
    output: {
        filename: 'bundle.js',
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.tsx', '.ts', '.js']
    },
    module: {
        loaders: [
          { test: /\.tsx|ts$/, loader: 'ts-loader' }
        ]
    }
}