Skip to content
Permalink
Browse files

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

…17492)

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

* run linter
  • Loading branch information...
liamdebeasi authored and jthoms1 committed Feb 14, 2019
1 parent f9f1775 commit e27bb2e8629b92774e13f3444fc8228785d63822
@@ -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);
}

@@ -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;
}
}
@@ -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>

0 comments on commit e27bb2e

Please sign in to comment.
You can’t perform that action at this time.