From 248d0c1a9c13ae23787e03b8b324717a903bfc06 Mon Sep 17 00:00:00 2001
From: Dan Bucholtz <dan.bucholtz@gmail.com>
Date: Tue, 27 Sep 2016 16:48:27 -0500
Subject: [PATCH] chore(e2e): add css back to e2e tests where it was missing

add css back to e2e tests where it was missing
---
 demos/src/loading/app.component.ts            |  3 +-
 .../loading/test/basic/app-module.ts          | 76 ++++++++++++++++++-
 src/components/tabs/test/badges/app-module.ts | 19 ++++-
 src/components/tabs/test/colors/app-module.ts | 20 ++++-
 .../tabs/test/tab-bar-scenarios/app-module.ts | 19 ++++-
 5 files changed, 132 insertions(+), 5 deletions(-)

diff --git a/demos/src/loading/app.component.ts b/demos/src/loading/app.component.ts
index 978c7a9b2e..208eb78778 100644
--- a/demos/src/loading/app.component.ts
+++ b/demos/src/loading/app.component.ts
@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 import { LoadingController, NavController } from 'ionic-angular';
 
 @Component({
-  templateUrl: 'page.html'
+  templateUrl: 'page.html',
+  styleUrls: ['style.css']
 })
 export class Page1 {
   constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
diff --git a/src/components/loading/test/basic/app-module.ts b/src/components/loading/test/basic/app-module.ts
index f05a10fd3e..2a5bf713a9 100644
--- a/src/components/loading/test/basic/app-module.ts
+++ b/src/components/loading/test/basic/app-module.ts
@@ -3,7 +3,81 @@ import { IonicApp, IonicModule, LoadingController, NavController } from '../../.
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  styles: [
+    `
+    /* Fix the spinner used in e2e */
+    .fixed-spinner svg {
+      animation: none;
+    }
+    `,
+    `
+    .custom-spinner-container {
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+    }
+    `,
+    `
+    .custom-spinner-box {
+      position: relative;
+      box-sizing: border-box;
+      border: 4px solid #000;
+      width: 60px;
+      height: 60px;
+      animation: spin 3s infinite linear;
+    }
+    `,
+    `
+    .custom-spinner-box:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+      border: 4px solid #000;
+      width: 40px;
+      height: 40px;
+      animation: pulse 1.5s infinite ease;
+    }
+    `,
+    `
+    .wp .custom-spinner-box,
+    .wp .custom-spinner-box:before {
+      border-color: #fff;
+    }
+    `
+    ,
+    `
+    @-webkit-keyframes pulse {
+      50% {
+        border-width: 20px;
+      }
+    }
+    `,
+    `
+    @keyframes pulse {
+      50% {
+        border-width: 20px;
+      }
+    }
+    `,
+    `
+    @-webkit-keyframes spin {
+      100% {
+        -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+      }
+    }
+    `,
+    `@keyframes spin {
+      100% {
+        -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+      }
+    }`
+  ]
 })
 export class E2EPage {
   constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
diff --git a/src/components/tabs/test/badges/app-module.ts b/src/components/tabs/test/badges/app-module.ts
index 3e2fda7a78..7ceae67e32 100644
--- a/src/components/tabs/test/badges/app-module.ts
+++ b/src/components/tabs/test/badges/app-module.ts
@@ -7,7 +7,24 @@ export class E2EPage {}
 
 @Component({
   templateUrl: 'main.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+    ion-tabs {
+      margin-bottom: 20px;
+    }
+    `,
+    `
+    ion-tabs,
+    ion-tabs ion-tabbar {
+      position: relative;
+      top: auto;
+      height: auto;
+      visibility: visible;
+      opacity: 1;
+    }
+    `
+  ]
 })
 export class E2EApp {
   root = E2EPage;
diff --git a/src/components/tabs/test/colors/app-module.ts b/src/components/tabs/test/colors/app-module.ts
index a3e6e94d0d..be0eafc1b5 100644
--- a/src/components/tabs/test/colors/app-module.ts
+++ b/src/components/tabs/test/colors/app-module.ts
@@ -8,7 +8,25 @@ export class E2EPage {}
 
 @Component({
   templateUrl: 'main.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+      ion-tabs {
+        margin-bottom: 20px;
+      }
+    `,
+
+    `
+      ion-tabs,
+      ion-tabs ion-tabbar {
+        position: relative;
+        top: auto;
+        height: auto;
+        visibility: visible;
+        opacity: 1;
+      }
+    `
+  ]
 })
 export class E2EApp {
   root = E2EPage;
diff --git a/src/components/tabs/test/tab-bar-scenarios/app-module.ts b/src/components/tabs/test/tab-bar-scenarios/app-module.ts
index a3e6e94d0d..684f7a1dd9 100644
--- a/src/components/tabs/test/tab-bar-scenarios/app-module.ts
+++ b/src/components/tabs/test/tab-bar-scenarios/app-module.ts
@@ -8,7 +8,24 @@ export class E2EPage {}
 
 @Component({
   templateUrl: 'main.html',
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  styles: [
+    `
+    ion-tabs {
+      margin-bottom: 20px;
+    }
+    `,
+    `
+    ion-tabs,
+    ion-tabs ion-tabbar {
+      position: relative;
+      top: auto;
+      height: auto;
+      visibility: visible;
+      opacity: 1;
+    }
+    `
+  ]
 })
 export class E2EApp {
   root = E2EPage;