Merge branch 'release/5.0.1'

Author: dweber019

.gitignore

@@ -4,6 +4,7 @@ npm-debug.log*
 yarn-error.log
 /dist
 /test/*coverage
+/test/coverage*
 /.chrome
 
 # Logs #

README.md

@@ -12,11 +12,6 @@ From the project folder, execute the following commands:
 npm install # or: yarn install
 ```
 
-Don't forget to install the typings:
-```shell
-npm run install:typings
-```
-
 This will install all required dependencies, including a local version of Webpack that is going to
 build and bundle the app. There is no need to install Webpack globally.
 
@@ -67,13 +62,26 @@ This skeleton provides three frameworks for running tests.
 
 You can choose one or two and remove the other, or even use all of them for different types of tests.
 
-### Jest
+By default, both Jest and Karma are configured to run the same tests with Jest's matchers (see Jest documentation for more information).
+
+If you wish to only run certain tests under one of the runners, wrap them in an `if`, like this:
+
+```js
+if (jest) {
+  // since only jest supports creating snapshot:
+  it('should render correctly', () => {
+    expect(document.body.outerHTML).toMatchSnapshot();
+  });
+}
+```
+
+### Jest + Jasmine 2
 
 Jest is a powerful unit testing runner and framework.
 It runs really fast, however the tests are run under NodeJS, not the browser.
 This means there might be some cases where something you'd expect works in reality, but fails in a test. One of those things will be SVG, which isn't supported under NodeJS. However, the framework is perfect for doing unit tests of pure functions, and works pretty well in combination with `aurelia-testing`.
 
-To create new Jest tests, create files with the extension `.test.ts`, either in the `src` directory or in the `test/jest-unit` directory.
+To create new Jest tests, create files with the extension `.spec.ts`, either in the `src` directory or in the `test/unit` directory.
 
 To run the Jest unit tests, run:
 
@@ -87,11 +95,13 @@ To run the Jest watcher (re-runs tests on changes), run:
 npm start -- test.jest.watch
 ```
 
-### Karma + Jasmine
+### Karma + Jasmine 2
+
+Karma is also a powerful test runner, which by default runs in the browser. This means that whatever works in real browsers, should also work the same way in the unit tests. But it also means the framework is heavier to execute and not as lean to work with.
 
-Karma is also a powerful test runner, and combined with Jasmine it can be a pleasure to work with. Karma always runs in the browser. This means that whatever works in real browsers, should also work the same way in the unit tests. But it also means the framework is heavier to execute and not as lean to work with.
+To ease transitioning between Jest and Karma, Jasmine 2 is configured with Jest's matchers.
 
-To create new Karma tests, create files with the extension `.spec.ts`, either in the `src` directory or in the `test/karma-unit` directory.
+To create new Karma tests, create files with the extension `.spec.ts`, either in the `src` directory or in the `test/unit` directory.
 
 To run the Karma unit tests, run:
 

package-scripts.js

@@ -7,16 +7,19 @@ module.exports = {
     test: {
       default: 'nps test.jest',
       jest: {
-        default: 'jest',
+        default: series(
+          rimraf('test/coverage-jest'),
+          'jest'
+        ),
         watch: 'jest --watch',
       },
       karma: {
         default: series(
-          rimraf('test/karma-coverage'),
+          rimraf('test/coverage-karma'),
           'karma start test/karma.conf.js'
         ),
-        watch: 'karma start test/karma.conf.js --single-run=false',
-        debug: 'karma start test/karma.conf.js --single-run=false --debug'
+        watch: 'karma start test/karma.conf.js --no-single-run',
+        debug: 'karma start test/karma.conf.js --no-single-run --debug'
       },
       all: concurrent({
         browser: series.nps('test.karma', 'e2e'),
@@ -85,7 +88,7 @@ module.exports = {
         hmr: `webpack-dev-server -d --devtool '#source-map' --inline --hot --env.server`
       },
     },
-    serve: 'http-server dist --cors',
+    serve: 'http-server dist --cors --gzip',
     mobile: {
       default: 'nps mobile.build',
       link: 'node ./scripts/mobile-link.js',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-typescript-boilerplate",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "title": "Aurelia Typescript Boilerplate",
   "description": "A starter kit for building a standard navigation-style app with Aurelia and Webpack.",
   "main": "dist/app.bundle.js",
@@ -52,86 +52,105 @@
     "transform": {
       "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
-    "testRegex": "\\.test\\.(ts|js)x?$",
+    "testRegex": "\\.spec\\.(ts|js)x?$",
     "setupFiles": [
       "<rootDir>/test/jest-pretest.ts"
     ],
     "testEnvironment": "node",
     "moduleNameMapper": {
       "aurelia-(.*)": "<rootDir>/node_modules/$1"
-    }
+    },
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "src/**/*.{js,ts}",
+      "!**/*.spec.{js,ts}",
+      "!**/node_modules/**",
+      "!**/test/**"
+    ],
+    "coverageDirectory": "<rootDir>/test/coverage-jest",
+    "coverageReporters": [
+      "json",
+      "lcov",
+      "text",
+      "html"
+    ],
+    "mapCoverage": true
   },
   "devDependencies": {
-    "@types/jest": "^19.2.2",
-    "@types/lodash": "^4.14.62",
-    "@types/node": "^7.0.12",
-    "@types/webpack": "^2.2.14",
+    "@types/jest": "^19.2.3",
+    "@types/lodash": "^4.14.64",
+    "@types/node": "^7.0.21",
+    "@types/webpack": "^2.2.15",
     "aurelia-loader-nodejs": "^1.0.1",
     "aurelia-pal-nodejs": "1.0.0-beta.1.0.0",
-    "aurelia-protractor-plugin": "^1.0.2",
+    "aurelia-protractor-plugin": "^1.0.3",
     "aurelia-template-lint-webpack-loader": "^1.0.3",
     "aurelia-testing": "^1.0.0-beta.3.0.1",
     "aurelia-webpack-plugin": "^2.0.0-rc.2",
-    "autoprefixer": "^6.7.7",
-    "awesome-typescript-loader": "^3.1.2",
+    "autoprefixer": "^7.1.1",
+    "awesome-typescript-loader": "^3.1.3",
+    "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "chalk": "^1.1.3",
     "compression-webpack-plugin": "^0.4.0",
     "copy-webpack-plugin": "^4.0.1",
-    "cordova": "^6.5.0",
-    "cross-env": "^4.0.0",
-    "css-loader": "^0.28.0",
+    "cordova": "^7.0.1",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.1",
     "expose-loader": "^0.7.3",
     "extract-text-webpack-plugin": "^2.1.0",
     "favicons-webpack-plugin": "^0.0.7",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
-    "http-server": "^0.9.0",
+    "http-server": "^0.10.0",
     "img-loader": "^2.0.0",
     "istanbul-instrumenter-loader": "^2.0.0",
-    "jasmine-core": "^2.5.2",
-    "jest": "^19.0.2",
+    "jasmine-core": "^2.6.2",
+    "jest": "^20.0.3",
+    "jest-cli": "^20.0.3",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-coverage-istanbul-reporter": "^1.1.0",
-    "karma-jasmine": "^1.0.2",
-    "karma-mocha-reporter": "^2.2.0",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.3",
     "karma-webpack": "^2.0.3",
     "loader-utils": "^1.1.0",
     "ncp": "^2.0.0",
-    "node-sass": "^4.5.2",
-    "nps": "^5.0.5",
+    "node-sass": "^4.5.3",
+    "nps": "^5.2.0",
     "nps-utils": "^1.2.0",
-    "postcss-loader": "^1.3.3",
-    "protractor": "^5.1.1",
-    "sass-loader": "^6.0.3",
-    "style-loader": "^0.16.1",
-    "ts-jest": "^19.0.8",
-    "ts-node": "^3.0.2",
-    "tslint": "^5.1.0",
-    "tslint-loader": "^3.5.2",
-    "typescript": "^2.2.2",
+    "postcss-loader": "^2.0.5",
+    "protractor": "^5.1.2",
+    "sass-loader": "^6.0.5",
+    "style-loader": "^0.17.0",
+    "ts-jest": "^20.0.4",
+    "ts-node": "^3.0.4",
+    "tslib": "^1.7.1",
+    "tslint": "^5.2.0",
+    "tslint-loader": "^3.5.3",
+    "typescript": "^2.3.2",
     "typings": "^2.1.1",
     "url-loader": "^0.5.8",
     "wait-on": "^2.0.2",
-    "webpack": "^2.3.3",
-    "webpack-dev-server": "^2.4.2",
+    "webpack": "^2.5.1",
+    "webpack-dev-server": "^2.4.5",
     "webpack-notifier": "^1.5.0"
   },
   "dependencies": {
     "animate.css": "^3.5.2",
     "aurelia-animator-css": "^1.0.2",
     "aurelia-bootstrapper": "^2.1.1",
+    "aurelia-dialog": "^1.0.0-rc.1.0.3",
     "aurelia-fetch-client": "^1.1.2",
     "aurelia-framework": "^1.1.2",
     "aurelia-history-browser": "^1.0.0",
-    "aurelia-i18n": "^1.5.0",
+    "aurelia-i18n": "^1.6.0",
     "aurelia-loader-webpack": "^2.1.0",
     "aurelia-logging-console": "^1.0.0",
     "aurelia-pal-browser": "^1.2.1",
     "aurelia-polyfills": "^1.2.1",
     "aurelia-router": "^1.3.0",
-    "aurelia-templating": "^1.4.1",
+    "aurelia-templating": "^1.4.2",
     "aurelia-templating-binding": "^1.3.0",
     "aurelia-templating-resources": "^1.4.0",
     "aurelia-templating-router": "^1.1.0",

src/app/app.vm.ts

@@ -46,21 +46,21 @@ export class AppViewModel {
       {
         route: ['', 'welcome'],
         name: 'welcome',
-        moduleId: PLATFORM.moduleName('./modules/welcome/welcome.vm'),
+        moduleId: PLATFORM.moduleName('./modules/welcome/welcome.vm', 'welcome'),
         nav: true,
         title: 'Welcome'
       },
       {
         route: 'users',
         name: 'users',
-        moduleId: PLATFORM.moduleName('./modules/users/users.vm'),
+        moduleId: PLATFORM.moduleName('./modules/users/users.vm', 'users'),
         nav: true,
         title: 'Github Users'
       },
       {
         route: 'child-router',
         name: 'child-router',
-        moduleId: PLATFORM.moduleName('./modules/child-router/child-router.vm'),
+        moduleId: PLATFORM.moduleName('./modules/child-router/child-router.vm', 'child-router'),
         nav: true,
         title: 'Child Router'
       }

src/app/main.ts

@@ -1,4 +1,4 @@
-
+/// <reference types="aurelia-loader-webpack/src/webpack-hot-interface"/>
 /**
  * Import the main sass file for all the styles
  */
@@ -87,6 +87,13 @@ export async function configure(aurelia: Aurelia): Promise<void> {
     .plugin(PLATFORM.moduleName('aurelia-animator-css'))
     // if the css animator is enabled, add swap-order="after" to all router-view elements
 
+    .plugin(PLATFORM.moduleName('aurelia-dialog'), config => {
+      config.useDefaults();
+      config.settings.startingZIndex = 1005;
+      config.settings.lock = true;
+      config.settings.centerHorizontalOnly = false;
+    })
+
     // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
     // .plugin('aurelia-html-import-template-loader')
 		/**

src/app/modules/welcome/welcome.vm.html

@@ -39,5 +39,8 @@ <h3>Converter utility</h3>
     <h3>Validation</h3>
     <p>Validation is: ${validationValid}</p>
     <button class="btn btn-primary" click.delegate="validateFirstName()">validate</button>
+
+    <h3>Dialog</h3>
+    <button click.delegate="openDialog()" class="btn btn-primary">open dialog</button>
   </section>
 </template>

src/app/modules/welcome/welcome.vm.ts

@@ -1,9 +1,11 @@
 import { autoinject } from 'aurelia-framework';
 import { ValidationControllerFactory, ValidationController, validateTrigger, ValidationRules } from 'aurelia-validation';
+import { DialogService } from 'aurelia-dialog';
 
 import { LogManager, Logger} from './../../services/logger.service';
 import { AppConfigService } from './../../services/app-config.service';
 import { LanguageService } from './../../services/language.service';
+import { EditPersonCustomElement } from './../../resources/elements/edit-person/edit-person.element';
 
 @autoinject
 export class WelcomeViewModel {
@@ -21,6 +23,7 @@ export class WelcomeViewModel {
 	constructor(
     private appConfigService: AppConfigService,
     private languageService: LanguageService,
+    private dialogService: DialogService,
     validationControllerFactory: ValidationControllerFactory
   ) {
 		this.logger = LogManager.getLogger('Welcome VM');
@@ -50,6 +53,17 @@ export class WelcomeViewModel {
       .then(r => this.validationValid = r.valid);
   }
 
+  public openDialog(): void {
+    const person = { firstName: 'Wade', middleName: 'Owen', lastName: 'Watts' };
+    this.dialogService.open({ viewModel: EditPersonCustomElement, model: person}).whenClosed(response => {
+      if (!response.wasCancelled) {
+        this.logger.info('Dialog not cancled', response);
+      } else {
+        this.logger.info('Dialog cancled', response);
+      }
+    });
+  }
+
 	//Getters can't be directly observed, so they must be dirty checked.
 	//However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
 	//To optimize by declaring the properties that this getter is computed from, uncomment the line below

src/app/resources/elements/edit-person/edit-person.element.html

@@ -0,0 +1,13 @@
+<template>
+  <ux-dialog>
+    <ux-dialog-body>
+      <h2>Edit first name</h2>
+      <input value.bind="person.firstName" />
+    </ux-dialog-body>
+
+    <ux-dialog-footer>
+      <button click.trigger="dialogController.cancel()">Cancel</button>
+      <button click.trigger="dialogController.ok(person)">Ok</button>
+    </ux-dialog-footer>
+  </ux-dialog>
+</template>

src/app/resources/elements/edit-person/edit-person.element.ts

@@ -0,0 +1,16 @@
+import { autoinject } from 'aurelia-framework';
+import {DialogController} from 'aurelia-dialog';
+
+@autoinject
+export class EditPersonCustomElement {
+
+  public person = { firstName: '' };
+
+  constructor(
+    public dialogController: DialogController
+  ) { }
+
+  public activate(person): void {
+    this.person = person;
+  }
+}