Merge branch 'beetz12-master'

.travis.yml

@@ -29,6 +29,7 @@ branches:
 before_install:
   - nvm use 4.1.2
   - npm install -g cordova ionic
+  - ionic state clear
 
 install: npm install
 
@@ -58,6 +59,8 @@ before_deploy:
   - echo "y" | ./android-sdk-linux/tools/android update sdk --no-ui --filter android-23,build-tools-23.0.1
   - export ANDROID_HOME=${PWD}/android-sdk-linux
   # end install android
+  - ionic state restore
+  - ionic platform add android
   - ionic build android
   # `ionic build android` wraps `cordova build android`, which gives a legit exit code if it fails. Ionic does not; test apk exists.
   - ls ./platforms/android/build/outputs/apk/android*.apk

CHANGELOG.md

@@ -1,3 +1,12 @@
+<a name="1.3.0"></a>
+# 1.3.0 (2016-05-22)
+
+### Features
+
+* **Update**: Update to Ionic 2.0.0.beta.7 and Angular 2.0.0.rc.1 PR[#93](https://github.com/lathonez/clicker/pull/93) big update due to Angular RC1 ([f3b6641](https://github.com/lathonez/clicker/commit/f3b6641))
+
+### Browserify in Karma
+
 <a name="1.2.0"></a>
 # 1.2.0 (2016-04-28)
 

README.md

@@ -55,11 +55,12 @@ See the changelog [here](https://github.com/lathonez/clicker/blob/master/CHANGEL
 
 ## Dependencies
 
-* **Angular:** 2.0.0-beta.15
-* **Ionic:** 2.0.0-beta.6
+* **@Angular:** 2.0.0-rc.1
+* **Ionic:** 2.0.0-beta.7
 
 External dependencies are listed here to justify their inclusion and to allow for their removal if your project isn't using the related functionality.
 
+* browserify: peer dependency of karma-browserify
 * browserify-istanbul: coverage transformer for karma-browserify
 * codecov.io: sending unit test coverage reports to codecov.io
 * gulp-tslint: access tslint from gulp
@@ -76,7 +77,6 @@ External dependencies are listed here to justify their inclusion and to allow fo
 * karma-phantomjs-launcher: allows using phantom with Karma
 * phantomjs-prebuilt: phantom headless browser
 * protractor: e2e test runner
-* traceur: needed to prevent errors in Phantom
 * tsify: typescript plugin for karma-browserify
 * ts-node: transpile gulpfile
 * tslint: static code analysis for typescript

app/app.html

@@ -6,7 +6,7 @@
 
   <ion-content>
     <ion-list>
-      <button ion-item *ngFor="#p of pages" (click)="openPage(p)">
+      <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
         {{p.title}}
       </button>
     </ion-list>

app/app.spec.ts

@@ -1,30 +1,32 @@
-import { TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser';
-import { setBaseTestProviders } from 'angular2/testing';
-import { ClickerApp }           from './app';
-
-// this needs doing _once_ for the entire test suite, hence it's here
-setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
+import { ADDITIONAL_TEST_BROWSER_PROVIDERS, TEST_BROWSER_STATIC_PLATFORM_PROVIDERS } from '@angular/platform-browser/testing/browser_static';
+import { BROWSER_APP_DYNAMIC_PROVIDERS }                from '@angular/platform-browser-dynamic';
+import { resetBaseTestProviders, setBaseTestProviders } from '@angular/core/testing';
+import { ClickerApp }                                   from './app';
+import { Page2 }                                        from './pages/page2/page2';
+
+resetBaseTestProviders();
+setBaseTestProviders(
+  TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
+  [
+    BROWSER_APP_DYNAMIC_PROVIDERS,
+    ADDITIONAL_TEST_BROWSER_PROVIDERS,
+  ]
+);
 
 let clickerApp: ClickerApp = null;
 
-function getComponentStub(name: string): any {
-  'use strict';
-
-  let component: Object = {
-    setRoot: function(): boolean { return true; },
-    close: function(root: any): boolean { return true; },
-  };
-  return component;
-}
-
 class MockClass {
   public ready(): any {
     return new Promise((resolve: Function) => {
       resolve();
     });
   }
 
-  public getComponent(): any {
+  public close(): any {
+    return true;
+  }
+
+  public setRoot(): any {
     return true;
   }
 }
@@ -49,9 +51,12 @@ describe('ClickerApp', () => {
   });
 
   it('opens a page', () => {
-    spyOn(clickerApp['app'], 'getComponent').and.callFake(getComponentStub);
+    spyOn(clickerApp['menu'], 'close');
+    // cant be bothered to set up DOM testing for app.ts to get access to @ViewChild (Nav)
+    clickerApp['nav'] = (<any>clickerApp['menu']);
+    spyOn(clickerApp['nav'], 'setRoot');
     clickerApp.openPage(clickerApp['pages'][1]);
-    expect(clickerApp['app'].getComponent).toHaveBeenCalledWith('leftMenu');
-    expect(clickerApp['app'].getComponent).toHaveBeenCalledWith('nav');
+    expect(clickerApp['menu']['close']).toHaveBeenCalled();
+    expect(clickerApp['nav'].setRoot).toHaveBeenCalledWith(Page2);
   });
 });

app/app.ts

@@ -1,25 +1,28 @@
 'use strict';
 
-import { Type }                    from 'angular2/core';
-import { App, IonicApp, Platform } from 'ionic-angular';
-import { ClickerList }             from './pages/clickerList/clickerList';
-import { Page2 }                   from './pages/page2/page2';
+import { Type, ViewChild }                    from '@angular/core';
+import { App, Platform, MenuController, Nav } from 'ionic-angular';
+import { StatusBar }                          from 'ionic-native';
+import { ClickerList }                        from './pages/clickerList/clickerList';
+import { Page2 }                              from './pages/page2/page2';
 
 @App({
   templateUrl: 'build/app.html',
   config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
 })
 export class ClickerApp {
 
+  @ViewChild(Nav) private nav: Nav;
+
   private rootPage: Type;
   private pages: Array<{title: string, component: Type}>;
-  private app: IonicApp;
+  private menu: MenuController;
   private platform: Platform;
 
-  constructor(app: IonicApp, platform: Platform) {
+  constructor(platform: Platform, menu: MenuController) {
 
-    this.app = app;
     this.platform = platform;
+    this.menu = menu;
 
     this.rootPage = ClickerList;
     this.initializeApp();
@@ -33,27 +36,16 @@ export class ClickerApp {
 
   private initializeApp(): void {
     this.platform.ready().then(() => {
-      // The platform is now ready. Note: if this callback fails to fire, follow
-      // the Troubleshooting guide for a number of possible solutions:
-      //
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
-      //
-      // First, let's hide the keyboard accessory bar (only works natively) since
-      // that's a better default:
-      //
-      // Keyboard.setAccessoryBarVisible(false);
-      //
-      // For example, we might change the StatusBar color. This one below is
-      // good for dark backgrounds and light text:
-      // StatusBar.setStyle(StatusBar.LIGHT_CONTENT)
+      StatusBar.styleDefault();
     });
   }
 
   public openPage(page: any): void {
     // close the menu when clicking a link from the menu
-    this.app.getComponent('leftMenu').close();
+    this.menu.close();
     // navigate to the new page if it is not the current page
-    this.app.getComponent('nav').setRoot(page.component);
+    this.nav.setRoot(page.component);
   };
 }

app/components/clickerButton/clickerButton.spec.ts

@@ -1,22 +1,24 @@
 import {
   beforeEach,
   beforeEachProviders,
-  ComponentFixture,
   describe,
   expect,
   injectAsync,
   it,
+}                        from '@angular/core/testing';
+import {
+  ComponentFixture,
   TestComponentBuilder,
-}                        from 'angular2/testing';
-import { provide }       from 'angular2/core';
+}                        from '@angular/compiler/testing';
+import { provide }       from '@angular/core';
 import { Config }        from 'ionic-angular';
 import { ClickerButton } from './clickerButton';
 import { Clickers }      from '../../services/clickers';
 import { TestUtils }     from '../../../test/testUtils';
 import { Utils }         from '../../services/utils';
 
 let clickerButton: ClickerButton = null;
-let clickerButtonFixture: ComponentFixture = null;
+let clickerButtonFixture: ComponentFixture<ClickerButton> = null;
 
 class MockClickers {
   public doClick(): boolean {
@@ -45,7 +47,7 @@ describe('ClickerButton', () => {
   beforeEach(injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     return tcb
       .createAsync(ClickerButton)
-      .then((componentFixture: ComponentFixture) => {
+      .then((componentFixture: ComponentFixture<ClickerButton>) => {
         clickerButtonFixture = componentFixture;
         clickerButton = componentFixture.componentInstance;
         clickerButton['clicker'] = { name: 'TEST CLICKER' };

app/components/clickerButton/clickerButton.ts

@@ -1,6 +1,6 @@
 'use strict';
 
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 import { Button }    from 'ionic-angular';
 import { Clickers }  from '../../services/clickers';
 

app/components/clickerForm/clickerForm.spec.ts

@@ -1,14 +1,16 @@
 import {
   beforeEach,
   beforeEachProviders,
-  ComponentFixture,
   describe,
   expect,
   injectAsync,
   it,
+}                        from '@angular/core/testing';
+import {
+  ComponentFixture,
   TestComponentBuilder,
-}                        from 'angular2/testing';
-import { provide }       from 'angular2/core';
+}                        from '@angular/compiler/testing';
+import { provide }       from '@angular/core';
 import {
   Config,
   Form,
@@ -21,7 +23,7 @@ import { TestUtils }     from '../../../test/testUtils';
 import { Utils }         from '../../services/utils';
 
 let clickerForm: ClickerForm = null;
-let clickerFormFixture: ComponentFixture = null;
+let clickerFormFixture: ComponentFixture<ClickerForm> = null;
 
 class MockClickers {
   public newClicker(): boolean {
@@ -56,7 +58,7 @@ describe('ClickerForm', () => {
   beforeEach(injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     return tcb
       .createAsync(ClickerForm)
-      .then((componentFixture: ComponentFixture) => {
+      .then((componentFixture: ComponentFixture<ClickerForm>) => {
         clickerFormFixture = componentFixture;
         clickerForm = componentFixture.componentInstance;
         spyOn(clickerForm, 'newClicker').and.callThrough();
@@ -72,7 +74,7 @@ describe('ClickerForm', () => {
   it('passes new clicker through to service', () => {
     let clickerName: string = 'dave';
     let input: any = clickerFormFixture.nativeElement.querySelectorAll('.text-input')[0];
-    let button: any = clickerFormFixture.nativeElement.querySelectorAll('button')[0];
+    let button: any = clickerFormFixture.nativeElement.querySelectorAll('button')[1];
     spyOn(Utils, 'resetControl').and.callThrough();
     input.value = clickerName;
     clickerFormFixture.detectChanges();
@@ -85,7 +87,7 @@ describe('ClickerForm', () => {
   });
 
   it('doesn\'t try to add a clicker with no name', () => {
-    let button: any = clickerFormFixture.nativeElement.querySelectorAll('button')[0];
+    let button: any = clickerFormFixture.nativeElement.querySelectorAll('button')[1];
     TestUtils.eventFire(button, 'click');
     expect(clickerForm.newClicker).toHaveBeenCalled();
     expect(clickerForm['clickerService'].newClicker).not.toHaveBeenCalled();

app/components/clickerForm/clickerForm.ts

@@ -1,7 +1,7 @@
 'use strict';
 
-import { AbstractControl, ControlGroup, FormBuilder, Validators } from 'angular2/common';
-import { Component }                                              from 'angular2/core';
+import { AbstractControl, ControlGroup, FormBuilder, Validators } from '@angular/common';
+import { Component }                                              from '@angular/core';
 import { Button, Icon, Item, Label, TextInput }                   from 'ionic-angular';
 import { Clickers }                                               from '../../services/clickers';
 import { Utils }                                                  from '../../services/utils';

app/pages/clickerList/clickerList.e2e.ts

@@ -1,7 +1,7 @@
 import { ElementFinder } from 'protractor';
 
 let clickerField: ElementFinder = element(by.css('.text-input'));
-let clickerButton: ElementFinder = element.all(by.className('button')).first();
+let clickerButton: ElementFinder = element.all(by.className('button-outline')).first();
 let removeButton: ElementFinder = element.all(by.css('.button-outline-danger')).first();
 let firstClicker: ElementFinder = element.all(by.className('clickerList')).first();
 

app/pages/clickerList/clickerList.html

@@ -7,7 +7,7 @@
 
 <ion-content padding>
   <clicker-form></clicker-form>
-  <ion-row *ngFor="#clicker of clickerService.getClickers()" class="clickerList">
+  <ion-row *ngFor="let clicker of clickerService.getClickers()" class="clickerList">
     <ion-col width-80><clicker-button [clicker]="clicker"></clicker-button></ion-col>
     <ion-col>
       <button block danger outline (click)="clickerService.removeClicker(clicker.id)"><ion-icon name="trash"></ion-icon></button>

app/pages/clickerList/clickerList.spec.ts

@@ -1,14 +1,16 @@
 import {
   beforeEach,
   beforeEachProviders,
-  ComponentFixture,
   describe,
   expect,
   injectAsync,
   it,
+}                               from '@angular/core/testing';
+import {
+  ComponentFixture,
   TestComponentBuilder,
-}                               from 'angular2/testing';
-import { provide }              from 'angular2/core';
+}                               from '@angular/compiler/testing';
+import { provide }              from '@angular/core';
 import { ClickerList }          from './clickerList';
 import { Utils }                from '../../services/utils';
 import {
@@ -35,7 +37,7 @@ class MockClass {
 }
 
 let clickerList: ClickerList = null;
-let clickerListFixture: ComponentFixture = null;
+let clickerListFixture: ComponentFixture<ClickerList> = null;
 
 describe('ClickerList', () => {
 
@@ -51,7 +53,7 @@ describe('ClickerList', () => {
   beforeEach(injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
     return tcb
       .createAsync(ClickerList)
-      .then((componentFixture: ComponentFixture) => {
+      .then((componentFixture: ComponentFixture<ClickerList>) => {
         clickerListFixture = componentFixture;
         clickerList = componentFixture.componentInstance;
         clickerListFixture.detectChanges();