mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
test(clickblock): adds e2e test for click block
This commit is contained in:
171
src/components/tap-click/test/click-block/app-module.ts
Normal file
171
src/components/tap-click/test/click-block/app-module.ts
Normal 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 {}
|
54
src/components/tap-click/test/click-block/main.html
Normal file
54
src/components/tap-click/test/click-block/main.html
Normal 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>
|
||||
|
42
src/components/tap-click/test/click-block/modal.html
Normal file
42
src/components/tap-click/test/click-block/modal.html
Normal 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>
|
Reference in New Issue
Block a user