test(tabs): clean up tabs badges e2e test so it works

This commit is contained in:
Brandy Carney
2016-07-08 17:14:41 -04:00
parent d675d39a62
commit d3be0af46d
3 changed files with 33 additions and 28 deletions

View File

@ -1,6 +1,9 @@
import {Component, ViewEncapsulation} from '@angular/core'; import {Component, ViewEncapsulation} from '@angular/core';
import {ionicBootstrap} from '../../../../../src'; import {ionicBootstrap} from '../../../../../src';
@Component({template:'hi'})
class E2EPage{}
@Component({ @Component({
templateUrl: 'main.html', templateUrl: 'main.html',
@ -8,7 +11,8 @@ import {ionicBootstrap} from '../../../../../src';
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
class E2EApp { class E2EApp {
myBadge:number = 55; root = E2EPage;
myBadge: number = 55;
} }
ionicBootstrap(E2EApp); ionicBootstrap(E2EApp);

View File

@ -1,68 +1,68 @@
<!-- Text --> <!-- Text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Recents"></ion-tab> <ion-tab [root]="root" tabTitle="Recents"></ion-tab>
<ion-tab tabTitle="Favorites" tabBadge="32"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabBadge="32"></ion-tab>
<ion-tab tabTitle="Settings"></ion-tab> <ion-tab [root]="root" tabTitle="Settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons --> <!-- Icons -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabIcon="call"></ion-tab> <ion-tab [root]="root" tabIcon="call"></ion-tab>
<ion-tab tabIcon="heart"></ion-tab> <ion-tab [root]="root" tabIcon="heart"></ion-tab>
<ion-tab tabIcon="settings" tabBadge="all" tabBadgeStyle="primary"></ion-tab> <ion-tab [root]="root" tabIcon="settings" tabBadge="all" tabBadgeStyle="primary"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons on top of text --> <!-- Icons on top of text -->
<ion-tabs no-navbar> <ion-tabs no-navbar>
<ion-tab tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></ion-tab> <ion-tab [root]="root" tabTitle="Location" tabIcon="navigate" tabBadge="11" tabBadgeStyle="secondary"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="star"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="star"></ion-tab>
<ion-tab tabTitle="Radio" tabIcon="musical-notes"></ion-tab> <ion-tab [root]="root" tabTitle="Radio" tabIcon="musical-notes"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons below text --> <!-- Icons below text -->
<ion-tabs tabsLayout="icon-bottom" no-navbar> <ion-tabs tabsLayout="icon-bottom" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons right of text --> <!-- Icons right of text -->
<ion-tabs tabsLayout="icon-right" primary no-navbar> <ion-tabs tabsLayout="icon-right" primary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Icons left of text --> <!-- Icons left of text -->
<ion-tabs tabsLayout="icon-left" no-navbar> <ion-tabs tabsLayout="icon-left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No icons --> <!-- No icons -->
<ion-tabs no-navbar tabsLayout="icon-hide"> <ion-tabs no-navbar tabsLayout="icon-hide">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart" tabBadge="4"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- No title --> <!-- No title -->
<ion-tabs tabsLayout="title-hide" secondary no-navbar> <ion-tabs tabsLayout="title-hide" secondary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call" tabBadge="7" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs> </ion-tabs>
<!-- Dynamic Badge --> <!-- Dynamic Badge -->
<ion-tabs tabsLayout="icon-left" no-navbar> <ion-tabs tabsLayout="icon-left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab> <ion-tab [root]="root" tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab> <ion-tab [root]="root" tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab> <ion-tab [root]="root" tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>
</ion-tabs> </ion-tabs>

View File

@ -8,4 +8,5 @@ ion-tabs ion-tabbar {
top: auto; top: auto;
height: auto; height: auto;
visibility: visible; visibility: visible;
opacity: 1;
} }