test(cordova): update cordova tests to include tabs and use the config

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

@@ -1,4 +1,4 @@
-import {App, NavController, Page, IonicApp, Modal} from 'ionic-angular';
+import {App, NavController, Page, IonicApp, Modal, ViewController} from 'ionic-angular';
 
 
 @Page({
@@ -14,14 +14,20 @@ import {App, NavController, Page, IonicApp, Modal} from 'ionic-angular';
       </button>
     </ion-buttons>
   </ion-toolbar>
-  <ion-content>
-    The modal should have status bar padding, too because it is a toolbar.
+  <ion-content padding>
+    <p>The modal toolbar should have status bar padding.</p>
+    <button block (click)="dismissModal()">Close modal</button>
   </ion-content>
-
   `
 })
 class MyModal {
+  constructor(private viewCtrl: ViewController) {
 
+  }
+
+  dismissModal() {
+    this.viewCtrl.dismiss();
+  }
 }
 
 
@@ -31,6 +37,12 @@ class MyModal {
 class Page1 {
   page2 = Page2;
   sort: string = 'all';
+
+  constructor(private nav: NavController) {}
+
+  goToTabs() {
+    this.nav.push(TabsPage);
+  }
 }
 
 
@@ -55,6 +67,23 @@ class Page2 {
   templateUrl: 'page3.html'
 })
 class Page3 {
+  constructor(private nav: NavController) {
+
+  }
+
+  goBack() {
+    this.nav.pop();
+  }
+}
+
+
+@Page({
+  templateUrl: 'tabs.html'
+})
+class TabsPage {
+  tab1Root = Page1;
+  tab2Root = Page2;
+  tab3Root = Page3;
 
   constructor(private nav: NavController) {
 
@@ -67,13 +96,9 @@ class Page3 {
 
 
 @App({
-  templateUrl: `./app.html`
+  templateUrl: `./app.html`,
+  config: { statusbarPadding: true }
 })
 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

@@ -15,12 +15,13 @@
     <ion-icon name="menu"></ion-icon>
   </button>
 </ion-navbar>
+<ion-toolbar>
+  <ion-title>I'm a toolbar</ion-title>
+</ion-toolbar>
+
 <ion-content padding>
+  <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <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>
+  <button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
+  <button block secondary (click)="goToTabs()">Go to Tabs</button>
 </ion-content>

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

@@ -12,10 +12,13 @@
     <ion-icon name="menu"></ion-icon>
   </button>
 </ion-navbar>
+<ion-toolbar>
+  <ion-title>I'm a toolbar</ion-title>
+</ion-toolbar>
 
 <ion-content padding>
-  <h1>This is Page 2</h1>
+  <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
-  <button [navPush]="page3">Go to Page 3</button>
+  <button block [navPush]="page3">Go to Page 3</button>
+  <button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
 </ion-content>

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

@@ -1,6 +1,10 @@
 <ion-content padding>
-  <h1>This is Page 3</h1>
-  <p>No navbar should still have space on the top for the status bar.</p>
+  <h2>Page 3</h2>
+  <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button (click)="goBack()">Go Back</button>
+  <button block (click)="goBack()">Go Back</button>
 </ion-content>
+
+<ion-toolbar position="bottom">
+  <ion-title>I'm a bottom toolbar</ion-title>
+</ion-toolbar>

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

@@ -0,0 +1,5 @@
+<ion-tabs>
+  <ion-tab [root]="tab1Root" tabTitle="Page 1" tabIcon="chatbubbles"></ion-tab>
+  <ion-tab [root]="tab2Root" tabTitle="Page 2" tabIcon="map"></ion-tab>
+  <ion-tab [root]="tab3Root" tabTitle="Page 3" tabIcon="person"></ion-tab>
+</ion-tabs>