javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-24 06:22:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-sliding): Sliding no longer breaks after removing an item (#17492)

Browse Source 
* fix(item-sliding): Sliding no longer breaks after removing an item

* run linter
This commit is contained in:
Liam DeBeasi
2019-02-14 14:52:36 -05:00
committed by GitHub
parent 1c9c18b5ea
commit 08fe8e470a
3 changed files with 106 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/item-sliding/item-sliding.tsx
View File

@ -66,7 +66,6 @@ export class ItemSliding implements ComponentInterface {
async componentDidLoad() {
this.item = this.el.querySelector('ion-item');
await this.updateOptions();
this.gesture = (await import('../../utils/gesture')).createGesture({
@ -91,6 +90,7 @@ export class ItemSliding implements ComponentInterface {
this.item = null;
this.leftOptions = this.rightOptions = undefined;
this.closeOpened();
}
/**
@ -128,6 +128,7 @@ export class ItemSliding implements ComponentInterface {
async closeOpened(): Promise<boolean> {
if (openSlidingItem !== undefined) {
openSlidingItem.close();
openSlidingItem = undefined;
return true;
}
return false;
@ -162,6 +163,7 @@ export class ItemSliding implements ComponentInterface {
this.closeOpened();
return false;
}
return !!(this.rightOptions || this.leftOptions);
}

49
core/src/components/item-sliding/test/interactive/e2e.ts Normal file
View File

@ -0,0 +1,49 @@
import { newE2EPage } from '@stencil/core/testing';
test('item-sliding: interactive', async () => {
const page = await newE2EPage({
url: '/src/components/item-sliding/test/interactive?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
const items = await page.$$('ion-item-sliding');
expect(items.length).toEqual(3);
await slideAndDelete(items[0], page);
const itemsAfterFirstSlide = await page.$$('ion-item-sliding');
expect(itemsAfterFirstSlide.length).toEqual(2);
await slideAndDelete(items[1], page);
const itemsAfterSecondSlide = await page.$$('ion-item-sliding');
expect(itemsAfterSecondSlide.length).toEqual(1);
});
async function slideAndDelete(item: any, page: any) {
try {
// Get the element's ID
const id = await(await item.getProperty('id')).jsonValue();
// Simulate a drag
const boundingBox = await item.boundingBox();
const centerX = parseFloat(boundingBox.x + boundingBox.width / 2);
const centerY = parseFloat(boundingBox.y + boundingBox.height / 2);
await page.mouse.move(centerX, centerY);
await page.mouse.down();
await page.mouse.move(0, centerY);
await page.mouse.up();
// Click the "delete" option
const options = await item.$$('ion-item-option');
await options[0].click();
// Wait for element to be removed from DOM
await page.waitForSelector(id, { hidden: true });
} catch (err) {
throw err;
}
}

54
core/src/components/item-sliding/test/interactive/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Item Sliding - Standalone</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../../../../../css/core.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<ion-list></ion-list>
<script>
let lists = document.getElementsByTagName('ion-list');
for (var i = 0; i < lists.length; i++) {
for (var j = 0; j < 3; j++) {
addSlidingItem(lists[i]);
}
}
function addSlidingItem(list) {
const slidingItem = document.createElement('ion-item-sliding');
slidingItem.innerHTML = `
<ion-item>
<ion-label>
<h2>Item Options Both Sides</h2>
</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option color="danger" expandable onclick="remove(this)">
<ion-icon name="trash"></ion-icon>
Delete
</ion-item-option>
</ion-item-options>
`;
slidingItem.id = `item-${list.childElementCount}`;
list.appendChild(slidingItem);
}
function remove(optionElement) {
const slidingElement = optionElement.parentNode.parentNode;
lists[0].removeChild(slidingElement);
}
</script>
</body>
</html>