chore(e2e): add css back to e2e tests where it was missing

add css back to e2e tests where it was missing

Author: danbucholtz

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) {}

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) {}

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;

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;

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;