Jest unit tests

README.md

@@ -1,4 +1,4 @@
-Ionic Unit Testing Example
+Ionic Unit Testing Example with jest
 =====================
 
 Based on the awesome [unit testing example](https://github.com/roblouie/unit-testing-demo) from [@roblouie](https://github.com/roblouie/) :thumbsup:
@@ -11,12 +11,3 @@ Unit Tests
 To run the tests, run `npm test`.
 
 See the example test in `src/app/app.component.spec.ts` for an example of a component test.
-
-End-To-End Tests (Browser-Only)
--------------------------------
-
-To serve the app, run `ionic serve`.
-
-To run the end-to-end tests, run (while the app is being served) `npm run e2e`.
-
-See the example end-to-end test in `e2e/app.e2e-spec.ts`.

package.json

@@ -8,50 +8,54 @@
     "build": "ionic-app-scripts build",
     "ionic:build": "ionic-app-scripts build",
     "ionic:serve": "ionic-app-scripts serve",
-    "test": "karma start ./test-config/karma.conf.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "e2e": "webdriver-manager update --standalone false --gecko false; protractor ./test-config/protractor.conf.js"
   },
   "dependencies": {
-    "@angular/common": "2.4.8",
-    "@angular/compiler": "2.4.8",
-    "@angular/compiler-cli": "2.4.8",
-    "@angular/core": "2.4.8",
-    "@angular/forms": "2.4.8",
-    "@angular/http": "2.4.8",
-    "@angular/platform-browser": "2.4.8",
-    "@angular/platform-browser-dynamic": "2.4.8",
-    "@angular/platform-server": "2.4.8",
-    "@ionic-native/core": "3.1.0",
-    "@ionic-native/splash-screen": "3.1.0",
-    "@ionic-native/status-bar": "3.1.0",
-    "@ionic/storage": "2.0.0",
-    "ionic-angular": "2.2.0",
+    "@angular/common": "4.0.2",
+    "@angular/compiler": "4.0.2",
+    "@angular/compiler-cli": "4.0.2",
+    "@angular/core": "4.0.2",
+    "@angular/forms": "4.0.2",
+    "@angular/http": "4.0.2",
+    "@angular/platform-browser": "4.0.2",
+    "@angular/platform-browser-dynamic": "4.0.2",
+    "@ionic-native/core": "3.6.1",
+    "@ionic-native/splash-screen": "3.6.1",
+    "@ionic-native/status-bar": "3.6.1",
+    "@ionic/storage": "2.0.1",
+    "ionic-angular": "3.1.1",
     "ionicons": "3.0.0",
-    "rxjs": "5.0.1",
+    "rxjs": "5.1.1",
     "sw-toolbox": "3.4.0",
-    "zone.js": "0.7.2"
+    "zone.js": "^0.8.9"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "1.1.4",
+    "@ionic/app-scripts": "1.3.6",
     "@ionic/cli-build-ionic-angular": "0.0.3",
     "@ionic/cli-plugin-cordova": "0.0.9",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.8",
     "angular2-template-loader": "^0.6.2",
     "html-loader": "^0.4.5",
-    "jasmine": "^2.5.3",
-    "jasmine-spec-reporter": "^3.2.0",
-    "karma": "^1.5.0",
-    "karma-chrome-launcher": "^2.0.0",
-    "karma-jasmine": "^1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.3",
+    "jest": "^20.0.0",
+    "jest-preset-angular": "^2.0.1",
     "null-loader": "^0.1.1",
-    "protractor": "^5.1.1",
     "ts-loader": "^2.0.3",
     "ts-node": "^3.0.2",
-    "typescript": "2.1.6"
+    "typescript": "2.2.1"
+  },
+  "jest": {
+    "preset": "jest-preset-angular",
+    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
+    "transformIgnorePatterns": [
+      "node_modules/(?!@ngrx|angular2-ui-switch|ng-dynamic|@ionic-native|ionic-angular)"
+    ],
+    "globals": {
+      "__TS_CONFIG__": "tsconfig.json",
+      "__TRANSFORM_HTML__": true
+    }
   },
   "version": "0.0.1",
   "description": "An Ionic project"

src/app/app.component.spec.ts

@@ -28,11 +28,11 @@ describe('MyApp Component', () => {
     component = fixture.componentInstance;
   });
 
-  it ('should be created', () => {
+  it('should be created', () => {
     expect(component instanceof MyApp).toBe(true);
   });
 
-  it ('should have two pages', () => {
+  it('should have two pages', () => {
     expect(component.pages.length).toBe(2);
   });
 

src/app/app.component.ts

@@ -15,7 +15,7 @@ export class MyApp {
 
   rootPage: any = Page1;
 
-  pages: Array<{title: string, component: any}>;
+  pages: Array<{ title: string, component: any }>;
 
   constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
     this.initializeApp();

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { NgModule, ErrorHandler } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 
@@ -15,6 +16,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     Page2
   ],
   imports: [
+    BrowserModule,
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [IonicApp],
@@ -26,7 +28,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    { provide: ErrorHandler, useClass: IonicErrorHandler }
   ]
 })
-export class AppModule {}
+export class AppModule { }

src/jestGlobalMocks.ts

@@ -0,0 +1,47 @@
+const mock = () => {
+  let storage = {};
+  return {
+    getItem: key => key in storage ? storage[key] : null,
+    setItem: (key, value) => storage[key] = value || '',
+    removeItem: key => delete storage[key],
+    clear: () => storage = {},
+  };
+};
+
+Object.defineProperty(window, 'localStorage', {value: mock()});
+Object.defineProperty(window, 'sessionStorage', {value: mock()});
+Object.defineProperty(window, 'getComputedStyle', {
+  value: () => ['-webkit-appearance']
+});
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function() {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+      || window[vendors[x]+'CancelRequestAnimationFrame'];
+  }
+
+  if (!global.__zone_symbol__requestAnimationFrame)
+    global.__zone_symbol__requestAnimationFrame = function(callback, element) {
+      var currTime = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+        timeToCall);
+      lastTime = currTime + timeToCall;
+      return id;
+    };
+
+/*  if (!global.cancelAnimationFrame)
+    global.cancelAnimationFrame = function(id) {
+      clearTimeout(id);
+    };*/
+}());

src/pages/page1/page1.spec.ts

@@ -4,14 +4,14 @@ import { DebugElement } from '@angular/core';
 import { Page1 } from "./page1";
 import { IonicModule, NavController } from "ionic-angular/index";
 
-describe('Page1', function () {
+describe('Page1', function() {
   let de: DebugElement;
   let comp: Page1;
   let fixture: ComponentFixture<Page1>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ Page1 ],
+      declarations: [Page1],
       imports: [
         IonicModule.forRoot(Page1)
       ],
@@ -27,12 +27,13 @@ describe('Page1', function () {
     de = fixture.debugElement.query(By.css('h3'));
   });
 
-  it('should create component', () => expect(comp).toBeDefined() );
+  it('should create component', () => expect(comp).toBeDefined());
 
-  it('should have expected <h3> text', () => {
-    fixture.detectChanges();
+  it('should have expected <h3> text', async () => {
+    await fixture.detectChanges();
     const h3 = de.nativeElement;
-    expect(h3.innerText).toMatch(/ionic/i,
+
+    expect(h3.innerHTML).toMatch(/ionic/i,
       '<h3> should say something about "Ionic"');
   });
 });

src/pages/page1/page1.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
 
-import { NavController } from 'ionic-angular';
-
 @Component({
   selector: 'page-page1',
   templateUrl: 'page1.html'
 })
 export class Page1 {
 
-  constructor(public navCtrl: NavController) {
-
+  //@todo angular DI error when NavController is passed with jest as testrunner
+  constructor() {
+
   }
 
 }

src/pages/page2/page2.ts

@@ -9,15 +9,15 @@ import { NavController, NavParams } from 'ionic-angular';
 export class Page2 {
   selectedItem: any;
   icons: string[];
-  items: Array<{title: string, note: string, icon: string}>;
+  items: Array<{ title: string, note: string, icon: string }>;
 
   constructor(public navCtrl: NavController, public navParams: NavParams) {
     // If we navigated to this page, we will have an item available as a nav param
     this.selectedItem = navParams.get('item');
 
     // Let's populate this page with some filler content for funzies
     this.icons = ['flask', 'wifi', 'beer', 'football', 'basketball', 'paper-plane',
-    'american-football', 'boat', 'bluetooth', 'build'];
+      'american-football', 'boat', 'bluetooth', 'build'];
 
     this.items = [];
     for (let i = 1; i < 11; i++) {

src/setupJest.ts

@@ -0,0 +1,2 @@
+import 'jest-preset-angular';
+import './jestGlobalMocks';