mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +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