test(app): add status bar tests for an iOS platform on different modes

references #5924

ionic/components/app/test/cordova/e2e.ts

@@ -0,0 +1,8 @@
+
+it('should navigate to page 2', function() {
+  element(by.css('.e2eCordovaPage2')).click();
+});
+
+it('should open modal', function() {
+  element(by.css('.e2eCordovaOpenModal')).click();
+});

ionic/components/app/test/cordova/index.ts

@@ -0,0 +1,62 @@
+import {App, NavController, Page, IonicApp, Modal} from 'ionic-angular';
+
+
+@Page({
+  template: `
+  <ion-toolbar>
+    <ion-title>This is a modal</ion-title>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-buttons end>
+      <button>
+        <ion-icon name="funnel"></ion-icon>
+      </button>
+    </ion-buttons>    
+  </ion-toolbar>
+  <ion-content>
+    The modal should have status bar padding, too because it is a toolbar.
+  </ion-content>
+
+  `
+})
+class MyModal {
+
+}
+
+
+@Page({
+  templateUrl: 'page1.html'
+})
+class Page1 {
+  page2 = Page2;
+  sort: string = 'all';
+}
+
+
+@Page({
+  templateUrl: 'page2.html'
+})
+class Page2 {
+  constructor(private nav: NavController) {
+
+  }
+
+  openModal() {
+    let modal = Modal.create(MyModal);
+    this.nav.present(modal);
+  }
+}
+
+
+@App({
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+class E2EApp {
+  root = Page1;
+}
+
+// Add platform cordova and platform ios so the status bar
+// padding will get added for each mode
+document.body.classList.add('platform-cordova');
+document.body.classList.add('platform-ios');

ionic/components/app/test/cordova/page1.html

@@ -0,0 +1,23 @@
+<ion-navbar *navbar primary>
+  <ion-segment [(ngModel)]="sort" light>
+    <ion-segment-button value="all">All</ion-segment-button>
+    <ion-segment-button value="favorites">Favorites</ion-segment-button>
+  </ion-segment>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-buttons end>
+    <button>
+      <ion-icon name="funnel"></ion-icon>
+    </button>
+  </ion-buttons>
+</ion-navbar>
+<ion-content padding>
+
+  <p>
+    The <code>platform-ios</code> and <code>platform-cordova</code> class is added to the body of this test.
+    This is to simulate how each mode will look on iOS with the iOS status bar padding.
+  </p>
+
+  <button [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
+</ion-content>

ionic/components/app/test/cordova/page2.html

@@ -0,0 +1,17 @@
+<ion-navbar *navbar>
+  <ion-title>Page 2</ion-title>
+  <button menuToggle>
+    <ion-icon name="menu"></ion-icon>
+  </button>
+  <ion-buttons end>
+    <button>
+      <ion-icon name="funnel"></ion-icon>
+    </button>
+  </ion-buttons>
+</ion-navbar>
+
+<ion-content padding>
+  <h1>This is Page 2</h1>
+
+  <button (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
+</ion-content>