test(clickblock): adds e2e test for click block

This commit is contained in:
Manu Mtz.-Almeida
2016-12-07 12:56:16 +01:00
parent bc7925b367
commit d70d03588c
3 changed files with 267 additions and 0 deletions

View File

@ -0,0 +1,171 @@
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { IonicApp, IonicModule, Menu, MenuController, ModalController, NavController, NavParams, ToastController, ViewController } from '../../../..';
@Component({
templateUrl: 'modal.html'
})
export class ModalPage {
constructor(public viewCtrl: ViewController) {}
close() {
this.viewCtrl.dismiss();
}
}
@Component({
templateUrl: 'main.html',
encapsulation: ViewEncapsulation.None
})
export class SearchPage {
items: string[];
anyPop: boolean = false;
index: number = 1;
constructor(
public navCtrl: NavController,
public modalCtrl: ModalController,
public toastCtrl: ToastController,
public menuCtrl: MenuController,
params: NavParams,
) {
let index = params.get('index');
if (index) {
this.index = index;
} else {
this.index = 1;
}
}
showToast(message) {
this.toastCtrl.create({
message: 'Clicked: ' + message,
duration: 800
}).present();
if (this.anyPop) {
this.navCtrl.pop().catch(() => {
console.debug('impossible to pop()');
});
return false;
}
return true;
}
push() {
if (this.showToast('push')) {
this.navCtrl.push(SearchPage, {
index: this.index + 1
});
}
}
openModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
openMenu() {
if (this.showToast('menu')) {
this.menuCtrl.open();
}
}
}
@Component({
template: `
<ion-menu [content]="content" type="overlay" #menu>
<ion-header>
<ion-toolbar color="danger">
<ion-title>Left Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
<button ion-item (click)="fastClose(menu)" detail-none>
Close Menu (instant)
</button>
<button ion-item menuClose detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="root" #content></ion-nav>`
})
export class E2EApp {
root = SearchPage;
fastClose(menu: Menu) {
menu.setOpen(false, false);
}
}
@NgModule({
declarations: [
E2EApp,
SearchPage,
ModalPage,
],
imports: [
IonicModule.forRoot(E2EApp)
],
bootstrap: [IonicApp],
entryComponents: [
E2EApp,
SearchPage,
ModalPage,
]
})
export class AppModule {}

View File

@ -0,0 +1,54 @@
<style>
.click-block {
background: red;
opacity: .3;
}
</style>
<ion-header>
<ion-navbar no-border-bottom>
<ion-searchbar color="primary" placeholder="Filter Schedules">
</ion-searchbar>
</ion-navbar>
<ion-toolbar no-border-top>
<ion-title>ClickBlock ( {{index}} )</ion-title>
<ion-buttons end>
<button ion-button (click)="showToast('long button')">Long Long Button</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Input:</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-list>
<button ion-item (click)="showToast('detail Amsterdam')">Amsterdam</button>
<button ion-item (click)="showToast('detail Bogota')">Bogota</button>
<ion-item>
<ion-label>Any button will nav.pop()</ion-label>
<ion-toggle [(ngModel)]="anyPop"></ion-toggle>
</ion-item>
</ion-list>
<button ion-button full (click)="push()">Push itself</button>
<p padding>Opening/closing a modal, alert or actionsheet and pushing a new page should show a red overlay</p>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-buttons start>
<button ion-button (click)="openModal()">Open modal</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="openMenu()">Open menu</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>

View File

@ -0,0 +1,42 @@
<ion-header>
<ion-toolbar>
<ion-buttons start>
<button ion-button >
Does nothing
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="close()">
Close
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button ion-button >
Does nothing
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button (click)="close()">
Close
</button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<button ion-button full (click)="close()">
Close (behind input)
</button>
<ion-list>
<button ion-item (click)="close()">
Close (list item)
</button>
<button ion-item (click)="close()">
Close (list item 2)
</button>
</ion-list>
</ion-content>