├── .gitignore
├── README.md
├── bundle.js
├── coverage.png
├── index.html
├── index.ts
├── karma.conf.js
├── package.json
├── src
├── app
│ ├── app.controller.ts
│ ├── app.module.ts
│ └── index.ts
└── transformer
│ ├── index.ts
│ ├── transformer.factory.spec.ts
│ ├── transformer.factory.ts
│ └── transformer.module.ts
├── tsconfig.json
├── typings.json
├── webpack.config.js
└── webpack.config.karma.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 | *.pid.lock
11 |
12 | # Directory for instrumented libs generated by jscoverage/JSCover
13 | lib-cov
14 |
15 | # Coverage directory used by tools like istanbul
16 | coverage
17 |
18 | # nyc test coverage
19 | .nyc_output
20 |
21 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
22 | .grunt
23 |
24 | # node-waf configuration
25 | .lock-wscript
26 |
27 | # Compiled binary addons (http://nodejs.org/api/addons.html)
28 | build/Release
29 |
30 | # Dependency directories
31 | node_modules
32 | jspm_packages
33 |
34 | # Optional npm cache directory
35 | .npm
36 |
37 | # Optional REPL history
38 | .node_repl_history
39 |
40 | typings
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-webpack-typescript-karma-coverage
2 | An exemplary project using Angular 1.x, Webpack, TypeScript and Karma (with Coverage).
3 |
4 | 
5 |
6 | ## How to run?
7 | 0. `npm install -g typings` (if you don't have it installed globally yet).
8 | 1. Clone the repository (i.e. `git clone https://github.com/zbicin/angular-webpack-typescript-karma-coverage.git && cd angular-webpack-typescript-karma-coverage`).
9 | 2. `npm install`.
10 | 3. `typings install`.
11 | 4. `npm start` to see the simple app running.
12 | 5. `npm test` to run karma and generate coverage tests. The latter are located in the `coverage/` directory.
13 |
14 | ## The most interesting parts:
15 | * `webpack.config.js` with `devtool` set to `inline-source-map` and an appropriate entry point:
16 | ```javascript
17 | // webpack.config.js
18 | module.exports = {
19 | entry: 'index.ts',
20 | devtool: 'inline-source-map',
21 |
22 | // ...
23 | }
24 | ```
25 | * `webpack.config.karma.js` - slightly modified webpack config which is used exclusively by karma:
26 | ```javascript
27 | // webpack.config.karma.js
28 | var webpackConfig = require('./webpack.config.js');
29 |
30 | webpackConfig.entry = {};
31 | webpackConfig.module.postLoaders = [
32 | {
33 | test: /\.ts$/,
34 | loader: 'istanbul-instrumenter-loader',
35 | exclude: [
36 | 'node_modules',
37 | /\.spec\.ts$/
38 | ]
39 | }
40 | ]
41 |
42 | module.exports = webpackConfig;
43 | ```
44 | * `karma.conf.js` using `source-map-support` framework and generating a json coverage report:
45 | ```javascript
46 | // karma.conf.js
47 | var webpackKarmaConfig = require('./webpack.config.karma.js');
48 |
49 | module.exports = function (config) {
50 | config.set({
51 | frameworks: ['jasmine', 'source-map-support'],
52 |
53 | files: [
54 | './index.ts',
55 | './node_modules/angular-mocks/angular-mocks.js',
56 | './src/**/*.spec.ts'
57 | ],
58 |
59 | preprocessors: {
60 | './index.ts': ['webpack'],
61 | './src/**/*.spec.ts': ['webpack']
62 | },
63 |
64 | reporters: ['progress', 'coverage'],
65 |
66 | webpack: webpackKarmaConfig,
67 |
68 | coverageReporter: {
69 | reporters: [
70 | {
71 | type: 'html',
72 | dir: 'coverage/html-js',
73 | subdir: '.'
74 | },
75 | {
76 | type: 'json',
77 | dir: 'coverage/json',
78 | subdir: '.'
79 | }
80 | ]
81 | }
82 |
83 | // ...
84 | })
85 | }
86 | ```
87 | * `tsconfig.json` with `inlineSourceMap` set to `true` and `sourceMap` set to `false`:
88 | ```javascript
89 | // tsconfig.json
90 | {
91 | "compilerOptions": {
92 | "inlineSourceMap": true,
93 | "sourceMap": false
94 | },
95 |
96 | // ...
97 | }
98 |
99 | ```
100 | * `remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html` being run by `npm test`. It generates an HTML report containing original TypeScript source files, basing on the json report generated by karma-coverage:
101 | ```javascript
102 | // package.json
103 | {
104 | "scripts": {
105 | "start": "http-server -o",
106 | "test": "npm run karma && npm run ts-coverage-remap",
107 | "karma": "karma start",
108 | "ts-coverage-remap": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html-ts -t html"
109 | },
110 |
111 | // ...
112 | }
113 | ```
114 |
115 | ## License
116 | [WTFPL](http://www.wtfpl.net/)
117 |
118 |
119 |
--------------------------------------------------------------------------------
/coverage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zbicin/angular-webpack-typescript-karma-coverage/ffdc3eef7bcf182b78160b3fad5555ea4bcf801e/coverage.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | An exemplary project using Angular 1.x, Webpack, TypeScript and Karma (with Coverage)
7 |
8 |
9 |
10 |
11 |
angular-webpack-typescript-karma-coverage
12 |
An exemplary project using Angular 1.x, Webpack, TypeScript and Karma (with Coverage)
13 |
14 |
15 |
16 |
33 |
34 |
35 |
36 |
37 | View on GitHub
38 |
39 |