feat: App-Template: Karma Unit Tests with Coverage Report

generators/project-app/template-app-package/{{+pkg_scope}}/{{pkg_name}}/src/app/AppComponent.spec.ts

@@ -1,10 +1,32 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { AppComponent } from "./AppComponent";
+
+@Component({selector: 'router-outlet', template: ''})
+class RouterOutletStubComponent { }
+
 /**
- * .spec.-Files will be found anywhere inside a package. If you want to have unit
- * tests in a separate folder feel free to move the file elsewhere.
+ * .spec.-Files will be found anywhere inside the packages folder. If you want
+ * to have test specs in a separate folder feel free to move them elsewhere.
+ * The test below is a sample of a test for a component with a <router-outlet>
+ * like our sample AppComponent. See angular.io to learn more about Angular
+ * testing.
  */
 describe('AppComponent', () => {
 
+    beforeEach(() => {
+        const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
+        TestBed.configureTestingModule({
+            declarations: [AppComponent, RouterOutletStubComponent],
+            providers: [
+                { provide: Router, useValue: routerSpy}
+            ]
+        });
+    });
+
     it('should succeed', () => {
-        expect(true).toBe(true, 'Sample Unit Test');
+        const fixture: ComponentFixture<AppComponent> = TestBed.createComponent(AppComponent);
+        expect(fixture).toBeDefined('No fixture created');
     });
 });

generators/project-app/template/_.gitignore

@@ -1,6 +1,6 @@
 node_modules
 npm-debug.log
 dist
-logs
+reports
 *gitignore.*
 ng-mono.json

generators/project-app/template/config/karma.conf.js

@@ -1,42 +1,59 @@
-var path = require('path');
-var webpack = require('webpack');
-var webpackTestConf = require('./webpack.test.js');
+const path = require('path');
+const process = require('process');
+const webpackMerge = require('webpack-merge');
+const webpackTestConf = require('./webpack.test.js');
+
+// ==== Command Line Arguments ====
+const DEBUG = process.argv.filter(arg => arg === "debug").length > 0;
 
 module.exports = function(config) {
   config.set({
-    basePath: path.resolve(__dirname),
-    files: [
-        // only specify one entry point and require all tests in there
-        './karma.shim.js',
-    ],
-    preprocessors: {
-        // add webpack as preprocessor
-        './karma.shim.js': ['webpack']//, 'sourcemap']
-    },
-    plugins: [
+    basePath: path.resolve(__dirname)
+    ,files: ['./karma.shim.js'] // one webpack entry point requires all tests
+    ,preprocessors: {
+        './karma.shim.js': ['webpack']
+    }
+    ,plugins: [
         'karma-jasmine',
-        'karma-webpack',
-        // 'karma-phantomjs-launcher',
-        'karma-chrome-launcher'
-    ],
-    frameworks: [
-        'jasmine'
-    ],
-    webpack: webpackTestConf,
-    webpackMiddleware: {
-      // webpack-dev-middleware configuration
-      stats: 'errors-only'
-    },
-    browsers: [
-        // 'PhantomJS',
-        'ChromeHeadless'
-    ],
-    // port: 9999,
-    // singleRun: true,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    // autoWatchBatchDelay: 300,
-    // captureTimeout: 6000,
+        ,'karma-webpack'
+        ,'karma-chrome-launcher'
+        ,'karma-coverage-istanbul-reporter'
+    ]
+    ,frameworks: ['jasmine']
+    ,browsers: ['myChromeHeadless']
+    ,customLaunchers: {
+        myChromeHeadless: {
+            base: 'ChromeHeadless'
+            ,flags: ['--password-store=basic']
+        }
+    }
+    // When debugging tests...
+    // ...keep code readable and don't instrument it
+    // ...keep watching files and recompile on changes
+    ,autoWatch: DEBUG == true
+    ,singleRun: DEBUG == false
+    ,reporters: DEBUG == true ? [] : ['coverage-istanbul']
+    ,webpack: webpackMerge(webpackTestConf, {
+        watch: DEBUG == true
+        ,module: {
+            rules: [{
+                test: /\.tsx?$/
+                ,loader: 'istanbul-instrumenter-loader'
+                ,enforce: 'post'
+                ,options: { esModules: true }
+                ,exclude: [/\.(spec|e2e|mock)\.tsx?/, /node_modules/]
+            }]
+        }
+    })
+    ,webpackMiddleware: { stats: 'errors-only' }
+    ,coverageIstanbulReporter: {
+        dir: path.resolve(__dirname, '../reports/coverage')
+        ,reports: ['html', 'text-summary', 'lcovonly']
+        ,fixWebpackSourcePaths: true
+    }
+    ,logLevel: config.LOG_INFO
+    ,colors: true
+    // ,autoWatchBatchDelay: 300
+    // ,captureTimeout: 6000
   });
 };

generators/project-app/template/config/webpack.test.js

@@ -1,11 +1,33 @@
 var path = require('path');
-var webpack = require('webpack');
-var webpackMerge = require('webpack-merge');
-var commonConfig = require('./webpack.common.js');
+
 ////////////////////////////////////////////////////////////////////////////////
 const ENV = process.env.NODE_ENV = process.env.ENV = 'development';
 ////////////////////////////////////////////////////////////////////////////////
 module.exports = {
   mode: 'development',
-  plugins: []
+  resolve: {
+    extensions: [".ts", ".tsx", ".js"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        options: {
+          configFile: path.resolve(__dirname, '../tsconfig.json'),
+          transpileOnly: true,
+        }
+      }
+      ,{
+        test: /\.tsx?$/,
+        loader: 'angular2-template-loader',
+        exclude: [/\.(spec|e2e)\.ts$/]
+      }
+      ,{
+        test: /\.(html|css)$/,
+        loader: 'raw-loader',
+        exclude: /\.async\.(html|css)$/
+      }
+    ]
+  }
 };

generators/project-app/template/doc/KNOWN_ISSUES.md → generators/project-app/template/doc/KNOWN_SOLUTIONS.md

@@ -1,4 +1,10 @@
-# Known Issues
+# Known Solutions
+
+If you plan to modify the initial configuration there's always some risk of
+running into errors where messages might not be self-explanatory or things stop
+to work as expected. This page covers some errors we've come accross while
+making the app template and what we have identified to be the reasons and
+possible solutions.
 
 **Module not found: Error can't resolve '[you-name-it].ngfactory'**
 

generators/project-app/template/package.json

@@ -1,80 +1,80 @@
 {
   "private": true,
-  "name": "<%= proj_pkg_fullname %>",
-  "version": "<%= pkg_version %>",
-  "description": "<%= pkg_description %>",
+  "name": "@foo/ng-mono-sample-project",
+  "version": "1.0.0",
+  "description": "Project generated with https://github.com/about-code/ng-mono",
   "dependencies": {
-    "@angular/animations": "^6.0.3",
-    "@angular/common": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
+    "@angular/animations": "^5.2.0",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
-    "rxjs": "^6.2.0",
+    "rxjs": "^5.5.6",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular/language-service": "^6.0.3",
-    "@ngtools/webpack": "6.0.7",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
+    "@ngtools/webpack": "^1.10.1",
     "@types/jasmine": "~2.8.4",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~9.3.0",
+    "angular2-template-loader": "^0.6.2",
     "clean-webpack-plugin": "^0.1.17",
     "codelyzer": "~4.0.2",
-    "connect-history-api-fallback": "~1.5.0",
     "css-loader": "^0.28.5",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^3.0.4",
-    "http-proxy-middleware": "^0.18.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~2.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.2",
+    "karma-coverage-istanbul-reporter": "^2.0.1",
+    "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-webpack": "~2.0.5",
-    "koa-connect": "~2.0.1",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^3.0.0",
     "lerna": "^2.4.0",
-    "ng-packagr": "~3.0.0",
+    "ng-packagr": "~2.4.0",
     "node-sass": "^4.5.3",
     "protractor": "~5.2.2",
     "raw-loader": "^0.5.1",
     "sass-loader": "^6.0.6",
     "standard-version": "^4.2.0",
     "style-loader": "^0.19.0",
-    "ts-loader": "^4.3.0",
+    "ts-loader": "^4.4.2",
     "ts-node": "~4.1.0",
     "tslint": "~5.7.0",
-    "typescript": "~2.7.1",
-    "webpack": "4.10.2",
+    "typescript": "^2.7.2",
+    "webpack": "^4.2.0",
     "webpack-cli": "2.0.10",
-    "webpack-merge": "4.1.0",
-    "webpack-serve": "~1.0.2"
+    "webpack-dev-server": "3.1.0",
+    "webpack-merge": "4.1.0"
   },
   "main": "index.js",
   "scripts": {
     "build": "webpack --config ./config/webpack.prod.js",
     "build-pkg": "node ./scripts/build-packages.js",
-    "build-serve": "webpack-serve --config ./config/webpack.prod.js",
+    "build-serve": "webpack-dev-server --config ./config/webpack.prod.js --watch --progress",
     "clean": "node ./scripts/clean.js",
     "lerna": "lerna",
     "linter-fix": "tslint --fix --project='./tslint.json' --type-check",
     "release": "standard-version",
     "selenium": "webdriver-manager start",
-    "start": "webpack-serve --config ./config/webpack.dev.js",
+    "start": "webpack-dev-server --config ./config/webpack.dev.js --progress",
     "test": "./node_modules/karma/bin/karma start ./config/karma.conf.js",
     "test-e2e": "protractor ./config/protractor.js",
     "webdriver-manager": "webdriver-manager"
   },
-  "author": "<%= pkg_author %>",
+  "author": "anonymous",
   "license": "SEE LICENSE IN LICENSE.txt"
 }

generators/project-app/template/tsconfig.json

@@ -2,13 +2,13 @@
   "compilerOptions": {
     /* Basic Options */
     "target": "es5",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
-    "module": "es2015",                  /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "module": "es2015",                    /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
     "lib": ["es2015", "dom"],              /* Specify library files to be included in the compilation:  */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    "declaration": false,                   /* Generates corresponding '.d.ts' file. */
-    "sourceMap": false,                     /* Generates corresponding '.map' file. */
+    "declaration": false,                  /* Generates corresponding '.d.ts' file. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
@@ -59,7 +59,9 @@
   },
   "angularCompilerOptions": {
     "entryModule": "./packages/<%= pkg_fullname %>/src/AppModule#AppModule",
-    "enableResourceInlining": false,
-    "skipMetadataEmit": true
+    "skipMetadataEmit": true,
+    // enableResourceInlining not supported by @ngtools/webpack
+    // See https://github.com/angular/devkit/issues/1005
+    "enableResourceInlining": false
   }
 }