When we use webpack as our packaging tool, we can use karma as our test environment, so that our project more flexible and convenient.
Enjoy learning karma and webpack.
Karma:
Introduction:
Karma is a simple tool that allows you to execute JavaScript code in multiple real browsers.
Purpose:
The main purpose of karma is to make your test-driven development easy,fast,and fun.
Webpack:
webpack is a module bundler for modern JavaScript applications.
There are some steps When we want to use karma and webpack to build js test environment.
The basic version：nodejs:6.10.1,angularjs:2.3.1,karma:1.6.0,webpack:2.4.1.
Webpack configuration:
Step1: Create the webpack.test.js file in the root directory.
Step2: You should add devtool:’inline-source-map’ in the module.exports so that you can more easy to test the environment.
Step3: In the class loader configuration you should set ts loarder as follows:
And you also need set istanbul loarder if you want to istanbul to test you code and show the coverage without unuseful code.You can set as follows:
Step4:You must set the plugins:
Karma configuration:karma.conf.js
First you need two files:
projectRoot/config/helpers.js:
projectRoot/config/karma-test-shim.js:
Step1:two command need to run
npm install karma –save-dev ,
npm install -g karma-cli
Step2: You can run karma init in the root terminal to set up karma.conf.js baselly;I choose jasmine ,phantomjs for test.
Step3:You need to add some add some attributes:
1.Files and preprocessors should include your test files and source files:
If you set autowatch true,you need not restart karma to view your code coverage.It will recompile webpack and change the code coverage report automatically.
2.Preprocessors is as follows:
3.Reporters can be like this:
set junit is for CI job.
4.Webpack can be like this:
webpack: webpackConfig,
In the file head you should add:
var webpack=require(‘webpack’)
var webpackConfig=require(‘./webpack.test.js’)
5.The most important instanbul set up
Step4:You also need add this dev-dependency in your package.json
Step5:All preparations have been completed.You can run karma start to test the file in the karma-test-shim.js
Step6:Set up the sonarqube configuration so that you put the code coverage to the sonarqube.
sonar configuration:sonar-project.properties 
Reference:
https://angular.io/docs/ts/latest/guide/webpack.html
http://karma-runner.github.io/1.0/config/configuration-file.html
https://webpack.js.org/configuration/
https://github.com/webpack-contrib/istanbul-instrumenter-loader
https://github.com/mattlewis92/karma-coverage-istanbul-reporter
https://github.com/Pablissimo/SonarTsPlugin
https://docs.sonarqube.org/display/PLUG/JavaScript+Coverage+Results+Import
