test(popover): fix popover e2e test to use the shared css

scripts/e2e/e2e.shared.css

@@ -134,81 +134,76 @@ ion-tab:nth-of-type(3) div[f],
 
 
 /********************
- e2e-loading
+ e2e-popover
 *********************/
-.e2e-popover-basic {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
 
-.e2e-popover-basic .text-to-change div {
+e2e-popover-basic .text-to-change div {
   margin: 10px auto;
 }
 
-.e2e-popover-basic ion-row,
-.e2e-popover-basic ion-col {
+e2e-popover-basic ion-row,
+e2e-popover-basic ion-col {
   padding: 0;
 }
 
-.e2e-popover-basic .text-button {
+e2e-popover-basic .text-button {
   padding-left: 0;
   text-align: center;
   min-height: 20px;
   line-height: 18px;
 }
 
-.e2e-popover-basic .text-button .item-inner {
+e2e-popover-basic .text-button .item-inner {
   padding-right: 0;
 }
 
-.e2e-popover-basic .text-smaller {
+e2e-popover-basic .text-smaller {
   font-size: 12px;
 }
 
-.e2e-popover-basic .ios .text-smaller {
+.popover-ios e2e-popover-basic .text-smaller {
   border-right: 1px solid #c8c7cc;
 }
 
-.md.e2e-popover-basic  .text-smaller {
+.popover-md e2e-popover-basic  .text-smaller {
   border-right: 1px solid #dedede;
 }
 
-.e2e-popover-basic .text-larger {
+e2e-popover-basic .text-larger {
   font-size: 16px;
 }
 
-.e2e-popover-basic .row-dots {
+e2e-popover-basic .row-dots {
   text-align: center;
 }
 
-.ios .e2e-popover-basic .row-dots {
+.popover-ios e2e-popover-basic .row-dots {
   border-bottom: 1px solid #c8c7cc;
 }
 
-.md .e2e-popover-basic .row-dots {
+.popover-md e2e-popover-basic .row-dots {
   border-bottom: 1px solid #dedede;
 }
 
-.ios .e2e-popover-basic .dot {
+e2e-popover-basic .dot-ios {
   border: 1px solid #c8c7cc;
 }
 
-.md .e2e-popover-basic .dot {
+e2e-popover-basic .dot-md {
   border: 1px solid #dedede;
 }
 
-.wp .e2e-popover-basic .dot {
+e2e-popover-basic .dot-wp {
   border: 2px solid #ccc;
 }
 
-.hairlines .e2e-popover-basic .text-smaller,
-.hairlines .e2e-popover-basic .row-dots,
-.hairlines .e2e-popover-basic .dot {
+.hairlines e2e-popover-basic .text-smaller,
+.hairlines e2e-popover-basic .row-dots,
+.hairlines e2e-popover-basic .dot {
   border-width: 0.55px;
 }
 
-.e2e-popover-basic .row-dots .dot {
+e2e-popover-basic .row-dots .dot {
   height: 30px;
   width: 30px;
   border-radius: 50%;
@@ -216,51 +211,51 @@ ion-tab:nth-of-type(3) div[f],
   position: relative;
 }
 
-.e2e-popover-basic .dot-white {
+e2e-popover-basic .dot-white {
   background-color: rgb(255,255,255);
 }
 
-.e2e-popover-basic .dot-tan {
+e2e-popover-basic .dot-tan {
   background-color: rgb(249,241,228);
 }
 
-.e2e-popover-basic .dot-grey {
+e2e-popover-basic .dot-grey {
   background-color: rgb(76,75,80);
 }
 
-.e2e-popover-basic .dot-black {
+e2e-popover-basic .dot-black {
   background-color: rgb(0,0,0);
 }
 
-.e2e-popover-basic .dot.selected {
+e2e-popover-basic .dot.selected {
   border-width: 2px;
   border-color: #327eff;
 }
 
-.e2e-popover-basic .text-athelas {
+e2e-popover-basic .text-athelas {
   font-family: "Athelas";
 }
 
-.e2e-popover-basic .text-charter {
+e2e-popover-basic .text-charter {
   font-family: "Charter";
 }
 
-.e2e-popover-basic .text-iowan {
+e2e-popover-basic .text-iowan {
   font-family: "Iowan";
 }
 
-.e2e-popover-basic .text-palatino {
+e2e-popover-basic .text-palatino {
   font-family: "Palatino";
 }
 
-.e2e-popover-basic .text-san-francisco {
+e2e-popover-basic .text-san-francisco {
   font-family: "San Francisco";
 }
 
-.e2e-popover-basic .text-seravek {
+e2e-popover-basic .text-seravek {
   font-family: "Seravek";
 }
 
-.e2e-popover-basic .text-times-new-roman {
+e2e-popover-basic .text-times-new-roman {
   font-family: "Times New Roman";
 }

src/components/popover/test/basic/app-module.ts

@@ -28,6 +28,9 @@ import { IonicApp, IonicModule, PopoverController, NavParams, ViewController } f
             <button ion-button="dot" (click)="changeBackground('black')" class="dot-black" [class.selected]="background == 'black'"></button>
           </ion-col>
         </ion-row>
+        <ion-item-divider color="dark">
+          <ion-label>Font Family</ion-label>
+        </ion-item-divider>
         <ion-item class="text-athelas">
           <ion-label>Athelas</ion-label>
           <ion-radio value="Athelas"></ion-radio>
@@ -59,6 +62,7 @@ import { IonicApp, IonicModule, PopoverController, NavParams, ViewController } f
       </ion-list>
     </ion-content>
   `,
+  selector: 'e2e-popover-basic'
 })
 export class PopoverRadioPage {
   background: string;
@@ -173,7 +177,8 @@ export class PopoverLongListPage {
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  selector: 'e2e-popover-basic'
 })
 export class E2EPage {
   @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;

src/components/popover/test/basic/main.html

@@ -1,5 +1,3 @@
-<div class="e2e-popover-basic">
-
 <ion-header>
 
   <ion-navbar color="primary">
@@ -81,6 +79,4 @@
     </ion-buttons>
   </ion-toolbar>
 
-</ion-footer>
-
-</div>
+</ion-footer>