Skip to content

test(drag-element, item-sliding): prevent full swipe #31097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thetaPC merged 12 commits into from
Apr 29, 2026
Merged

test(drag-element, item-sliding): prevent full swipe #31097

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f07a5e0
test(dragElementBy, item-sliding): prevent full swipe
thetaPC Apr 28, 2026
03a4a77
test(drag-element): add comments back
thetaPC Apr 28, 2026
fbd4983
test(item-sliding): break test down
thetaPC Apr 28, 2026
b1df2e2
test(item-sliding): use constant
thetaPC Apr 28, 2026
f6c4aee
test(item-sliding): cleanup
thetaPC Apr 28, 2026
b840229
test(drag-element): update comments
thetaPC Apr 28, 2026
c055092
test(drag-element): add JSDocs to dragElementBy
thetaPC Apr 28, 2026
ed95dac
docs(drag-element): grammar
thetaPC Apr 28, 2026
f7df147
test(item-sliding): create shared constants
thetaPC Apr 28, 2026
c763b6a
docs(item-sliding): add why steps were not increased
thetaPC Apr 28, 2026
27a8b6a
test(item-sliding): add waitForChanges
thetaPC Apr 28, 2026
92bcffe
Merge branch 'next' of github.com:ionic-team/ionic-framework into dra…
thetaPC Apr 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 18 additions & 12 deletions core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { expect } from '@playwright/test';
import { configs, dragElementBy, test } from '@utils/test/playwright';

/**
* Drag distances that reveal options without crossing the full swipe threshold
* (optsWidth + SWIPE_MARGIN). A narrower options panel requires a shorter drag.
*/
const DRAG_DISTANCE_ONE_OPTION = 100;
const DRAG_DISTANCE_TWO_OPTIONS = 150;

/**
* item-sliding doesn't have mode-specific styling,
* but the child components, item-options and item-option, do.
*
* It is important to test all modes to ensure that the
* child components are being rendered correctly.
*/
configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
configs().forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: basic'), () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/item-sliding/test/basic`, config);
Expand All @@ -23,10 +30,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
const dragByX = config.direction === 'rtl' ? -100 : 100;
const dragByX = config.direction === 'rtl' ? -DRAG_DISTANCE_ONE_OPTION : DRAG_DISTANCE_ONE_OPTION;

await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
await page.waitForChanges();
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);

await expect(item).toHaveScreenshot(screenshot('item-sliding-start'));
});
Expand All @@ -42,9 +48,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
const dragByX = config.direction === 'rtl' ? 150 : -150;
const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_TWO_OPTIONS : -DRAG_DISTANCE_TWO_OPTIONS;

await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);

await expect(item).toHaveScreenshot(screenshot('item-sliding-end'));
});
Expand All @@ -61,7 +67,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
await page.goto(`/src/components/item-sliding/test/basic`, config);
const item = page.locator('#item2');

await dragElementBy(item, page, -150, 0, undefined, undefined, true, 20);
await dragElementBy(item, page, -DRAG_DISTANCE_TWO_OPTIONS, 0, undefined, undefined, undefined, 15);
await page.waitForChanges();

// item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
Expand Down Expand Up @@ -105,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
* make sure the safe area padding is applied only to that side
* regardless of direction
*/
configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, config }) => {
configs().forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: basic'), () => {
test.describe('safe area left', () => {
test('should have padding on the left only', async ({ page }) => {
Expand Down Expand Up @@ -140,8 +146,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
const direction = config.direction;
const item = page.locator('ion-item-sliding');

const dragByX = direction == 'rtl' ? -150 : 150;
await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
const dragByX = direction == 'rtl' ? -DRAG_DISTANCE_TWO_OPTIONS : DRAG_DISTANCE_TWO_OPTIONS;
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);
await page.waitForChanges();

await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-left`));
Expand Down Expand Up @@ -181,8 +187,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
const direction = config.direction;
const item = page.locator('ion-item-sliding');

const dragByX = direction == 'rtl' ? 150 : -150;
await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
const dragByX = direction == 'rtl' ? DRAG_DISTANCE_TWO_OPTIONS : -DRAG_DISTANCE_TWO_OPTIONS;
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);
await page.waitForChanges();

await expect(item).toHaveScreenshot(screenshot(`item-sliding-safe-area-right`));
Expand Down
10 changes: 5 additions & 5 deletions core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
<ion-item-option expandable="true">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
`,
`,
config
);

Expand All @@ -52,7 +52,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
<ion-item-option expandable="true">Archive</ion-item-option>
</ion-item-options>
</ion-item-sliding>
`,
`,
config
);

Expand All @@ -77,7 +77,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
<ion-item-option expandable="true">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
`,
`,
config
);

Expand Down Expand Up @@ -132,7 +132,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
<ion-item-option>Edit</ion-item-option>
</ion-item-options>
</ion-item-sliding>
`,
`,
config
);

Expand Down Expand Up @@ -166,7 +166,7 @@ configs({ modes: ['md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config
<ion-item-option expandable="true">Delete</ion-item-option>
</ion-item-options>
</ion-item-sliding>
`,
`,
config
);

Expand Down
25 changes: 16 additions & 9 deletions core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';

/**
* Drag distances that reveal options without crossing the full swipe threshold
* (optsWidth + SWIPE_MARGIN). A narrower options panel requires a shorter drag.
*/
const DRAG_DISTANCE_TWO_OPTIONS = 150;

/**
* item-sliding doesn't have mode-specific styling,
* but the child components, item-options and item-option, do.
Expand All @@ -10,28 +16,29 @@ import { configs, test, dragElementBy } from '@utils/test/playwright';
*/
configs({ modes: ['ionic-md', 'ios', 'md'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: icons'), () => {
test('should not have visual regressions', async ({ page }) => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/item-sliding/test/icons`, config);
});

const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
for (const itemID of itemIDs) {
const item = page.locator(`#${itemID}`);
['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'].forEach((position) => {
Copy link
Copy Markdown
Member

@ShaneK ShaneK Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Big upgrade from the old for loop! Nice work!

test(`${position} - should not have visual regressions`, async ({ page }) => {
Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By breaking it apart, it's easier to determine which test failed.

const item = page.locator(`#${position}`);

/**
* Negative dragByX value to drag element from the right to the left
* to reveal the options on the right side.
* Positive dragByX value to drag element from the left to the right
* to reveal the options on the left side.
*/
const dragByX = config.direction === 'rtl' ? 150 : -150;
const dragByX = config.direction === 'rtl' ? DRAG_DISTANCE_TWO_OPTIONS : -DRAG_DISTANCE_TWO_OPTIONS;

await dragElementBy(item, page, dragByX, 0, undefined, undefined, true, 20);
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);
await page.waitForChanges();

// Convert camelCase ids to kebab-case for screenshot file names
const itemIDKebab = itemID.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemIDKebab}`));
}
const positionKebab = position.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
await expect(item).toHaveScreenshot(screenshot(`item-sliding-${positionKebab}`));
});
});
});
});
9 changes: 8 additions & 1 deletion core/src/components/item-sliding/test/scroll-target/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';

/**
* Drag distances that reveal options without crossing the full swipe threshold
* (optsWidth + SWIPE_MARGIN). A narrower options panel requires a shorter drag.
*/
const DRAG_DISTANCE_TWO_OPTIONS = 150;

/**
* This behavior does not vary across modes/directions
*/
Expand All @@ -15,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>

expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);

await dragElementBy(itemSlidingEl, page, -150, 0, undefined, undefined, false);
await dragElementBy(itemSlidingEl, page, -DRAG_DISTANCE_TWO_OPTIONS, 0, undefined, undefined, false);

/**
* Do not use scrollToBottom() or other scrolling methods
Expand Down
23 changes: 15 additions & 8 deletions core/src/components/item-sliding/test/shapes/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';

/**
* Drag distances that reveal options without crossing the full swipe threshold
* (optsWidth + SWIPE_MARGIN). A narrower options panel requires a shorter drag.
*/
const DRAG_DISTANCE_TWO_OPTIONS = 150;

/**
* The shapes on the `item-option` do not vary by direction
* when they are not being dragged.
*/
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('item-sliding: shapes'), () => {
test('should not have visual regressions when not expanded', async ({ page }) => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/item-sliding/test/shapes`, config);
});

const itemIDs = ['round', 'soft', 'rectangular'];
for (const itemID of itemIDs) {
const item = page.locator(`#${itemID}`);
['round', 'soft', 'rectangular'].forEach((shape) => {
Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By breaking it apart, it's easier to determine which test failed.

test(`${shape} - should not have visual regressions when not expanded`, async ({ page }) => {
const item = page.locator(`#${shape}`);

/**
* Negative dragByX value to drag element from the right to the left
* to reveal the options on the right side.
*/
const dragByX = -150;
const dragByX = -DRAG_DISTANCE_TWO_OPTIONS;

await dragElementBy(item, page, dragByX);
await dragElementBy(item, page, dragByX, 0, undefined, undefined, undefined, 15);
await page.waitForChanges();

await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemID}`));
}
await expect(item).toHaveScreenshot(screenshot(`item-sliding-${shape}`));
});
});
});
});
Binary file modified ....e2e.ts-snapshots/item-sliding-round-ionic-md-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...g.e2e.ts-snapshots/item-sliding-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion core/src/components/item-sliding/test/states/item-sliding.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { expect } from '@playwright/test';
import { configs, test, dragElementBy } from '@utils/test/playwright';

/**
* Drag distances that reveal options without crossing the full swipe threshold
* (optsWidth + SWIPE_MARGIN). A narrower options panel requires a shorter drag.
*/
const DRAG_DISTANCE_TWO_OPTIONS = 150;

/**
* This behavior does not vary across modes
*/
Expand All @@ -16,7 +22,7 @@ configs({ modes: ['ionic-md', 'md', 'ios'], directions: ['ltr'] }).forEach(({ ti
* Negative dragByX value to drag element from the right to the left
* to reveal the options on the right side.
*/
const dragByX = -150;
const dragByX = -DRAG_DISTANCE_TWO_OPTIONS;

await dragElementBy(item, page, dragByX);
Copy link
Copy Markdown
Member

@ShaneK ShaneK Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still uses the default steps (10), but the equivalent 150px drags in basic, icons, and shapes all pass steps=15. scroll-target is in the same boat. Is disabled-options exempt from the full-swipe threshold (and is releaseDrag=false enough for scroll-target), or did these get missed? A one-liner about why would help the next person figure out which value to use.

Copy link
Copy Markdown
Contributor Author

@thetaPC thetaPC Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added the reason why as comments: c763b6a

await page.waitForChanges();
Expand Down
Loading