POC leveraging ng-cli

angular-cli.json

@@ -0,0 +1,44 @@
+{
+  "project": {
+    "version": "1.0.0-beta.16",
+    "name": "signaturepad-demo"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "../tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false
+  }
+}

karma.conf.js

@@ -0,0 +1,41 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('karma-mocha-reporter'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: [
+      'mocha', 'progress', 'karma-remap-istanbul'
+    ],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

@@ -13,52 +13,38 @@
     "run:before": "build",
     "e2e": "gulp --gulpfile test/gulpfile.ts --cwd ./ build-e2e && protractor test/protractor.conf.js",
     "karma": "gulp --gulpfile test/gulpfile.ts --cwd ./ karma-debug",
-    "postinstall": "ionic state restore && typings install && webdriver-manager update",
+    "postinstall": "ionic state restore && webdriver-manager update",
     "start": "ionic serve",
-    "test": "gulp --gulpfile test/gulpfile.ts --cwd ./ unit-test"
+    "test": "ng test"
   },
   "version": "2.0.0",
   "dependencies": {
-    "@ngrx/core": "1.2.0",
-    "@ngrx/effects": "2.0.0",
-    "@ngrx/store": "2.2.1",
     "ionic-angular": "2.0.0-rc.0",
     "ionicons": "3.0.0",
     "@ionic/storage": "1.0.3",
     "ionic-native": "2.0.3",
-    "ngrx-store-freeze": "0.1.0",
-    "ngrx-store-logger": "0.1.7"
+    "core-js": "^2.4.1",
+    "ts-helpers": "^1.1.1"
   },
   "devDependencies": {
-    "browserify": "13.1.0",
-    "browserify-istanbul": "2.0.0",
-    "codecov.io": "0.1.6",
-    "del": "2.2.2",
-    "gulp": "3.9.1",
-    "gulp-tslint": "6.1.1",
-    "gulp-typescript": "2.13.6",
-    "gulp-watch": "4.3.9",
     "@ionic/app-scripts": "latest",
-    "isparta": "4.0.0",
-    "jasmine-core": "2.5.0",
-    "jasmine-spec-reporter": "2.7.0",
+    "@types/jasmine": "^2.2.30",
+    "angular-cli": "1.0.0-beta.16",
+    "codelyzer": "~0.0.26",
+    "jasmine-core": "2.4.1",
+    "jasmine-spec-reporter": "2.5.0",
     "karma": "1.2.0",
-    "karma-browserify": "5.1.0",
-    "karma-chrome-launcher": "2.0.0",
-    "karma-coverage": "1.1.1",
-    "karma-jasmine": "1.0.2",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
     "karma-mocha-reporter": "2.1.0",
-    "karma-phantomjs-launcher": "1.0.2",
-    "phantomjs-prebuilt": "2.1.12",
-    "protractor": "4.0.3",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "4.0.9",
     "protractor-jasmine2-screenshot-reporter": "0.3.2",
-    "run-sequence": "1.2.2",
     "ts-node": "1.3.0",
-    "tsify": "1.0.5",
     "tslint": "3.15.1",
     "tslint-eslint-rules": "1.5.0",
-    "typescript": "2.0.3",
-    "typings": "1.3.3"
+    "typescript": "2.0.3"
   },
   "description": "Clicker: An Ionic project",
   "cordovaPlugins": [

src/pages/page2/page2.spec.ts

@@ -1,17 +1,30 @@
-import { beforeEach, beforeEachProviders, describe, expect, it } from '@angular/core/testing';
-import { asyncCallbackFactory, injectAsyncWrapper, providers }   from '../../../test/diExports';
-import { Page2 }                                                 from './page2';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { App, MenuController, NavController, Platform, Config, Keyboard, Form, IonicModule }  from 'ionic-angular';
+import { ConfigMock, FormMock, NavMock, PlatformMock } from '../../../test/mocks';
+import { Page2 } from './page2';
 
-this.fixture = null;
-this.instance = null;
-
-describe('Page2', () => {
-
-  beforeEachProviders(() => providers);
-  beforeEach(injectAsyncWrapper(asyncCallbackFactory(Page2, this, true)));
-
-  it('initialises', () => {
-    expect(this.instance).not.toBeNull();
-    expect(this.fixture).not.toBeNull();
+describe('Pages: Page2', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        Page2,
+      ],
+      providers: [
+        {provide: App, useClass: ConfigMock},
+        {provide: Config, useClass: ConfigMock},
+        {provide: Form, useClass: FormMock},
+        {provide: Keyboard, useClass: ConfigMock},
+        {provide: MenuController, useClass: ConfigMock},
+        {provide: NavController, useValue: NavMock},
+        {provide: Platform, useValue: PlatformMock},
+      ],
+      imports: [ IonicModule ],
+    });
   });
+
+  it('should create page2', async(() => {
+    let fixture: ComponentFixture<Page2> = TestBed.createComponent(Page2);
+    let instance: any = fixture.debugElement.componentInstance;
+    expect(instance).toBeTruthy();
+  }));
 });

src/polyfills.ts

@@ -0,0 +1,19 @@
+// This file includes polyfills needed by Angular 2 and is loaded before
+// the app. You can add your own extra polyfills to this file.
+import 'core-js/es6/symbol';
+import 'core-js/es6/object';
+import 'core-js/es6/function';
+import 'core-js/es6/parse-int';
+import 'core-js/es6/parse-float';
+import 'core-js/es6/number';
+import 'core-js/es6/math';
+import 'core-js/es6/string';
+import 'core-js/es6/date';
+import 'core-js/es6/array';
+import 'core-js/es6/regexp';
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+import 'core-js/es6/reflect';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';

src/test.ts

@@ -0,0 +1,33 @@
+import './polyfills.ts';
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function (): any { /* no op */};
+
+Promise.all([
+  System.import('@angular/core/testing'),
+  System.import('@angular/platform-browser-dynamic/testing'),
+])
+  // First, initialize the Angular testing environment.
+  .then(([testing, testingBrowser]) => {
+    testing.getTestBed().initTestEnvironment(
+      testingBrowser.BrowserDynamicTestingModule,
+      testingBrowser.platformBrowserDynamicTesting()
+    );
+  })
+  // Then we find all the tests.
+  .then(() => require.context('./', true, /\page2.spec\.ts/))
+  // And load the modules.
+  .then(context => context.keys().map(context))
+  // Finally, start Karma to run the tests.
+  .then(__karma__.start, __karma__.error);

src/typings.d.ts

@@ -0,0 +1,5 @@
+// Typings reference file, see links for more information
+// https://github.com/typings/typings
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+
+declare var System: any;

test/mocks.ts

@@ -16,6 +16,12 @@ export class ConfigMock {
   }
 }
 
+export class FormMock {
+  public register(): any {
+    return true;
+  }
+}
+
 export class NavMock {
 
   public pop(): any {

tsconfig.json

@@ -1,22 +1,20 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": true,
-    "declaration": true,
+    "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2015"
+    "exlucde": [
+      "node_modules"
     ],
-    "module": "es2015",
+    "lib": ["es6", "dom"],
+    "mapRoot": "./",
+    "module": "es6",
     "moduleResolution": "node",
-    "target": "es5"
-  },
-  "exclude": [
-    "node_modules"
-  ],
-  "compileOnSave": false,
-  "atom": {
-    "rewriteTsconfig": false
+    "outDir": "../dist/out-tsc",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ]
   }
 }