mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
test(e2e): add missing reorder and sliding tests for item
This commit is contained in:
Brandy Carney
19
packages/core/src/components/item/test/reorder/e2e.js
Normal file
19
packages/core/src/components/item/test/reorder/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/item/test/reorder?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('item/reorder', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
143
packages/core/src/components/item/test/reorder/index.html
Normal file
143
packages/core/src/components/item/test/reorder/index.html
Normal file
@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Item - Reorder</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Item Reorder</ion-title>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onclick="toggle()">Edit</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-reorder-group id="reorderGroup"></ion-reorder-group>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>start</ion-list-header>
|
||||
<ion-reorder-group id="startGroup"></ion-reorder-group>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>end</ion-list-header>
|
||||
<ion-reorder-group id="endGroup"></ion-reorder-group>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
|
||||
<style>
|
||||
.item {
|
||||
background-color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var isReordering = false;
|
||||
|
||||
var groups = [
|
||||
{
|
||||
id: 'reorderGroup',
|
||||
sliding: false
|
||||
}, {
|
||||
id: 'startGroup',
|
||||
sliding: true,
|
||||
side: 'start'
|
||||
}, {
|
||||
id: 'endGroup',
|
||||
sliding: true,
|
||||
side: 'end'
|
||||
}
|
||||
];
|
||||
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
initGroup(groups[i]);
|
||||
}
|
||||
|
||||
function clickedButton(number) {
|
||||
console.log('clicked', number);
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
isReordering = !isReordering;
|
||||
|
||||
for (var i = 0; i < groups.length; i++) {
|
||||
var groupEl = document.getElementById(groups[i].id);
|
||||
groupEl.enabled = isReordering;
|
||||
}
|
||||
}
|
||||
|
||||
// Reorder the items for a given list
|
||||
function reorder(list, items, indexes) {
|
||||
items = reorderArray(items, indexes);
|
||||
renderGroup(list, items);
|
||||
}
|
||||
|
||||
function initGroup(group) {
|
||||
var groupEl = document.getElementById(group.id);
|
||||
|
||||
groupEl.addEventListener('ionItemReorder', function(ev) {
|
||||
reorder(groupEl, groupItems, indexes);
|
||||
});
|
||||
|
||||
var groupItems = [];
|
||||
for (var i = 0; i < 5; i++) {
|
||||
groupItems.push(i);
|
||||
}
|
||||
|
||||
if (group.sliding) {
|
||||
groupEl.side = group.side;
|
||||
renderSlidingGroup(group, groupEl, groupItems);
|
||||
} else {
|
||||
renderGroup(group, groupEl, groupItems);
|
||||
}
|
||||
}
|
||||
|
||||
function renderGroup(group, groupEl, items) {
|
||||
groupEl.innerHTML = '';
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
groupEl.innerHTML += `
|
||||
<ion-item onClick="clickedButton(${i})"
|
||||
style="min-height: ${i * 2 + 35}px; background-color: rgb(${255 - i * 4}, ${255 - i * 4}, ${255 - i * 4})">
|
||||
${i}
|
||||
<ion-reorder slot="end"></ion-reorder>
|
||||
</ion-item>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderSlidingGroup(group, groupEl, items) {
|
||||
groupEl.innerHTML = '';
|
||||
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
groupEl.innerHTML += `
|
||||
<ion-item-sliding>
|
||||
<ion-item onclick="clickedButton(${i})">
|
||||
<ion-reorder slot="${group.side}"></ion-reorder>
|
||||
<ion-label>
|
||||
<h2>Sliding item ${i}</h2>
|
||||
</ion-label>
|
||||
<div slot="end">right</div>
|
||||
</ion-item>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option color="danger">
|
||||
<ion-icon name="trash" slot="start"></ion-icon>
|
||||
Remove
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
19
packages/core/src/components/item/test/sliding/e2e.js
Normal file
19
packages/core/src/components/item/test/sliding/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/item/test/sliding?ionicplatform=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('item/sliding', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate();
|
||||
});
|
||||
});
|
||||
});
|
||||
411
packages/core/src/components/item/test/sliding/index.html
Normal file
411
packages/core/src/components/item/test/sliding/index.html
Normal file
@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Item Sliding - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Item Sliding - Basic</ion-title>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button onclick="changeDynamicText()">Dynamic</ion-button>
|
||||
</ion-buttons>
|
||||
<ion-buttons slot="end">
|
||||
<ion-button onclick="reload()">Reload</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div padding>
|
||||
<ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
|
||||
<ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
|
||||
<ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
|
||||
</div>
|
||||
|
||||
<ion-list id="list">
|
||||
<div class="nested-div">
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
<h2>No Options</h2>
|
||||
<p>Should not error or swipe without options</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item6">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
One Line, dynamic option and text
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options class="show-options">
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
<span class="more-text"></span>
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary" onclick="archive('item6')">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
<span class="archive-text"></span>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item6">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
Two options, one dynamic option and text
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="left">
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon slot="icon-only" name="more"></ion-icon>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item-options side="right" class="show-options">
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
<span class="more-text"></span>
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary" onclick="archive('item6')">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
<span class="archive-text"></span>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item100">
|
||||
<ion-item href="#">
|
||||
<ion-label>
|
||||
<h2>HubStruck Notifications</h2>
|
||||
<p>A new message from a repo in your network</p>
|
||||
<p>Oceanic Next has joined your network</p>
|
||||
</ion-label>
|
||||
<ion-note slot="end">
|
||||
10:45 AM
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item-options side="left">
|
||||
<ion-item-option onclick="noclose('item100')">
|
||||
No close
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item-options side="right">
|
||||
<ion-item-option color="light" onclick="unread('item100')">
|
||||
<ion-icon slot="icon-only" name="trash"></ion-icon>
|
||||
</ion-item-option>
|
||||
<ion-item-option onclick="unread('item100')">
|
||||
<ion-icon slot="icon-only" name="star"></ion-icon>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item0">
|
||||
<ion-item text-wrap onclick="clickedItem('item0')">
|
||||
<ion-label>
|
||||
<h2>RIGHT side - no icons</h2>
|
||||
<p>Hey do you want to go to the game tonight?</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options class="sliding-enabled">
|
||||
<ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
|
||||
<ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item1">
|
||||
<ion-item text-wrap detail-push href="#" class="activated">
|
||||
<ion-label>
|
||||
<h2>LEFT side - no icons</h2>
|
||||
<p>I think I figured out how to get more Mountain Dew</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="left" class="sliding-enabled">
|
||||
<ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
|
||||
<ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
|
||||
<ion-item-sliding id="item2">
|
||||
<ion-item text-wrap detail-push>
|
||||
<ion-label>
|
||||
<h2>RIGHT/LEFT side - icons</h2>
|
||||
<p>I think I figured out how to get more Mountain Dew</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="left" class="sliding-enabled">
|
||||
<ion-item-option color="secondary" expandable onclick="unread('item2')">
|
||||
<ion-icon name="ios-checkmark"></ion-icon>Unread
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
|
||||
<ion-item-options side="right" class="sliding-enabled">
|
||||
<ion-item-option color="primary" onclick="archive('item2')">
|
||||
<ion-icon name="mail"></ion-icon>Archive
|
||||
</ion-item-option>
|
||||
<ion-item-option color="danger" onclick="del('item2')" expandable>
|
||||
<ion-icon name="trash"></ion-icon>Delete
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item3">
|
||||
<ion-item text-wrap detail-push>
|
||||
<ion-label>
|
||||
<h2>RIGHT/LEFT side - icons (slot="start")</h2>
|
||||
<p>I think I figured out how to get more Mountain Dew</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="left" icon-start class="sliding-enabled">
|
||||
<ion-item-option color="secondary" expandable onclick="unread('item3')">
|
||||
<ion-icon name="ios-checkmark"></ion-icon>Unread
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
|
||||
<ion-item-options icon-start>
|
||||
<ion-item-option color="primary" onclick="archive('item3')">
|
||||
<ion-icon name="mail"></ion-icon>Archive
|
||||
</ion-item-option>
|
||||
<ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
|
||||
<ion-icon name="trash"></ion-icon>Delete
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
|
||||
<ion-item-sliding id="item4">
|
||||
<ion-item>
|
||||
<ion-icon name="mail" slot="start"></ion-icon>
|
||||
<ion-label>
|
||||
One Line w/ Icon, div only text
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options icon-start>
|
||||
<ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
|
||||
<ion-icon name="archive"></ion-icon>Archive
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
|
||||
<ion-item-sliding id="item5" class="sliding-enabled">
|
||||
<ion-item>
|
||||
<ion-avatar slot="start">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-avatar>
|
||||
<ion-label>
|
||||
One Line w/ Avatar, div only text
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary" expandable>
|
||||
<ion-icon name="more"></ion-icon>More
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary" onclick="archive('item5')">
|
||||
<ion-icon name="archive"></ion-icon>Archive
|
||||
</ion-item-option>
|
||||
<ion-item-option color="light" onclick="del('item5')">
|
||||
<ion-icon name="trash"></ion-icon>Delete
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
|
||||
<ion-item-sliding id="item7">
|
||||
<ion-item>
|
||||
<ion-label>
|
||||
One Line, dynamic icon-start option
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options icon-start>
|
||||
<ion-item-option color="primary">
|
||||
<ion-icon name="more"></ion-icon>
|
||||
<span class="more-text"></span>
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary" onclick="archive('item7')">
|
||||
<ion-icon name="archive"></ion-icon>
|
||||
<span class="archive-text"></span>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item8">
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-thumbnail>
|
||||
<ion-label>
|
||||
<h2>DOWNLOAD</h2>
|
||||
<p>Paragraph text.</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options>
|
||||
<ion-item-option color="primary" onclick="archive('item8')">
|
||||
<ion-icon name="archive"></ion-icon>Archive
|
||||
</ion-item-option>
|
||||
<ion-item-option color="secondary" expandable onclick="download('item8')">
|
||||
<ion-icon name="download" class="download-hide"></ion-icon>
|
||||
<div class="download-hide">Download</div>
|
||||
|
||||
<ion-icon class="download-spinner" name="refresh"></ion-icon>
|
||||
<div class="download-spinner">Loading...</div>
|
||||
</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding id="item9">
|
||||
<ion-item>
|
||||
<ion-thumbnail slot="start">
|
||||
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
||||
</ion-thumbnail>
|
||||
<ion-label>
|
||||
<h2>ion-item-sliding without options (no sliding)</h2>
|
||||
<p>Paragraph text.</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item text-wrap>
|
||||
<ion-label>
|
||||
<h2>Normal ion-item (no sliding)</h2>
|
||||
<p>Paragraph text.</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item text-wrap onclick="clickedItem('item9')">
|
||||
<ion-label>
|
||||
<h2>Normal button (no sliding)</h2>
|
||||
<p>Hey do you want to go to the game tonight?</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<script>
|
||||
var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
|
||||
|
||||
// Toggle the dynamic options
|
||||
var dynamicShowOptions = document.getElementsByClassName('show-options');
|
||||
toggleDynamicOptions();
|
||||
|
||||
function toggleDynamicOptions() {
|
||||
// TODO the element needs to be removed / added to the DOM
|
||||
}
|
||||
|
||||
// Change the text for the more and archive buttons
|
||||
var dynamicText = true;
|
||||
var moreTextSpans = document.getElementsByClassName('more-text');
|
||||
var archiveTextSpans = document.getElementsByClassName('archive-text');
|
||||
changeDynamicText();
|
||||
|
||||
function changeDynamicText() {
|
||||
dynamicText = !dynamicText;
|
||||
|
||||
for (var i = 0; i < moreTextSpans.length; i++) {
|
||||
var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
|
||||
moreTextSpans[i].innerHTML = moreText;
|
||||
}
|
||||
|
||||
for (var i = 0; i < archiveTextSpans.length; i++) {
|
||||
var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
|
||||
archiveTextSpans[i].innerHTML = archiveText;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSliding() {
|
||||
// this.slidingEnabled = !this.slidingEnabled;
|
||||
}
|
||||
|
||||
function closeOpened() {
|
||||
var list = document.getElementById('list');
|
||||
list.closeSlidingItems();
|
||||
}
|
||||
|
||||
function noclose(item) {
|
||||
var itemEle = document.getElementById(item);
|
||||
console.log('no close', itemEle);
|
||||
}
|
||||
|
||||
function unread(item) {
|
||||
closeSlidingItem('UNREAD', item);
|
||||
}
|
||||
|
||||
function archive(item) {
|
||||
closeSlidingItem('ARCHIVE', item);
|
||||
}
|
||||
|
||||
function del(item) {
|
||||
closeSlidingItem('DELETE', item);
|
||||
}
|
||||
|
||||
function download(item) {
|
||||
var itemEle = document.getElementById(item);
|
||||
console.log(itemEle);
|
||||
itemEle.classList.add('downloading');
|
||||
setTimeout(() => {
|
||||
alert('Item was downloaded!');
|
||||
|
||||
itemEle.classList.remove('downloading');
|
||||
itemEle.close();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function closeSlidingItem(option, item) {
|
||||
var itemEle = document.getElementById(item);
|
||||
|
||||
// TODO open alert instead
|
||||
if (itemEle) {
|
||||
itemEle.close();
|
||||
}
|
||||
console.log(option, itemEle);
|
||||
}
|
||||
|
||||
function clickedItem(item) {
|
||||
var itemEle = document.getElementById(item);
|
||||
console.log('Clicked, ion-item', itemEle);
|
||||
}
|
||||
|
||||
function reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
document.addEventListener('ionSwipe', (ev)=> console.log('SWIPE!!', ev.detail));
|
||||
document.addEventListener('ionDrag', (ev)=> console.log('DRAG!!', ev.detail.getOpenAmount()));
|
||||
|
||||
</script>
|
||||
<style>
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.download-spinner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg circle {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
.downloading .download-spinner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.downloading .download-hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user