Skip to content

Commit 6d887b9

Browse files
brandyscarneybrandyscarney
committed
test(reorder-group): add an e2e test that covers all reorder events
1 parent 1499525 commit 6d887b9

1 file changed

Lines changed: 289 additions & 0 deletions

File tree

‎core/src/components/reorder-group/test/reorder-group-events.e2e.ts‎

Lines changed: 289 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,289 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, dragElementBy, test } from '@utils/test/playwright';
3+
4+
/**
5+
* This behavior does not vary across modes/directions.
6+
*/
7+
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
8+
test.describe(title('reorder-group: events:'), () => {
9+
test.describe('ionReorderStart', () => {
10+
test('should emit when the reorder operation starts', async ({ page }) => {
11+
await page.setContent(
12+
`
13+
<ion-reorder-group disabled="false">
14+
<ion-item>
15+
<ion-label>Item 1</ion-label>
16+
<ion-reorder slot="end"></ion-reorder>
17+
</ion-item>
18+
<ion-item>
19+
<ion-label>Item 2</ion-label>
20+
<ion-reorder slot="end"></ion-reorder>
21+
</ion-item>
22+
<ion-item>
23+
<ion-label>Item 3</ion-label>
24+
<ion-reorder slot="end"></ion-reorder>
25+
</ion-item>
26+
</ion-reorder-group>
27+
`,
28+
config
29+
);
30+
31+
const reorderGroup = page.locator('ion-reorder-group');
32+
const ionReorderStart = await page.spyOnEvent('ionReorderStart');
33+
34+
await expect(ionReorderStart).toHaveReceivedEventTimes(0);
35+
36+
// Start the drag to verify it emits the event without having to
37+
// actually move the item. Do not release the drag here.
38+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 0, undefined, undefined, false);
39+
40+
await page.waitForChanges();
41+
42+
await expect(ionReorderStart).toHaveReceivedEventTimes(1);
43+
44+
// Drag the reorder item further to verify it does
45+
// not emit the event again
46+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300);
47+
48+
await page.waitForChanges();
49+
50+
await expect(ionReorderStart).toHaveReceivedEventTimes(1);
51+
});
52+
});
53+
54+
test.describe('ionReorderMove', () => {
55+
test('should emit when the reorder operation does not move the item position', async ({ page }) => {
56+
await page.setContent(
57+
`
58+
<ion-reorder-group disabled="false">
59+
<ion-item>
60+
<ion-label>Item 1</ion-label>
61+
<ion-reorder slot="end"></ion-reorder>
62+
</ion-item>
63+
<ion-item>
64+
<ion-label>Item 2</ion-label>
65+
<ion-reorder slot="end"></ion-reorder>
66+
</ion-item>
67+
<ion-item>
68+
<ion-label>Item 3</ion-label>
69+
<ion-reorder slot="end"></ion-reorder>
70+
</ion-item>
71+
</ion-reorder-group>
72+
`,
73+
config
74+
);
75+
76+
const reorderGroup = page.locator('ion-reorder-group');
77+
const ionReorderMove = await page.spyOnEvent('ionReorderMove');
78+
79+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 0);
80+
81+
await page.waitForChanges();
82+
83+
expect(ionReorderMove.events.length).toBeGreaterThan(0);
84+
85+
// Grab the last event to verify that it is emitting
86+
// the correct from and to positions
87+
const lastEvent = ionReorderMove.events[ionReorderMove.events.length - 1];
88+
expect(lastEvent?.detail.from).toBe(0);
89+
expect(lastEvent?.detail.to).toBe(0);
90+
});
91+
92+
test('should emit when the reorder operation moves the item by multiple positions', async ({ page }) => {
93+
await page.setContent(
94+
`
95+
<ion-reorder-group disabled="false">
96+
<ion-item>
97+
<ion-label>Item 1</ion-label>
98+
<ion-reorder slot="end"></ion-reorder>
99+
</ion-item>
100+
<ion-item>
101+
<ion-label>Item 2</ion-label>
102+
<ion-reorder slot="end"></ion-reorder>
103+
</ion-item>
104+
<ion-item>
105+
<ion-label>Item 3</ion-label>
106+
<ion-reorder slot="end"></ion-reorder>
107+
</ion-item>
108+
</ion-reorder-group>
109+
`,
110+
config
111+
);
112+
113+
const reorderGroup = page.locator('ion-reorder-group');
114+
const ionReorderMove = await page.spyOnEvent('ionReorderMove');
115+
116+
// Drag the reorder item by a lot to verify it emits the event
117+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300);
118+
119+
await page.waitForChanges();
120+
121+
expect(ionReorderMove.events.length).toBeGreaterThan(0);
122+
123+
// Grab the last event where the from and to are different to
124+
// verify that it is not using the gesture start position as the from
125+
const lastDifferentEvent = ionReorderMove.events
126+
.reverse()
127+
.find((event) => event.detail.from !== event.detail.to);
128+
expect(lastDifferentEvent?.detail.from).toBe(1);
129+
expect(lastDifferentEvent?.detail.to).toBe(2);
130+
});
131+
});
132+
133+
test.describe('ionReorderEnd', () => {
134+
test('should emit without details when the reorder operation ends without moving the item position', async ({
135+
page,
136+
}) => {
137+
await page.setContent(
138+
`
139+
<ion-reorder-group disabled="false">
140+
<ion-item>
141+
<ion-label>Item 1</ion-label>
142+
<ion-reorder slot="end"></ion-reorder>
143+
</ion-item>
144+
<ion-item>
145+
<ion-label>Item 2</ion-label>
146+
<ion-reorder slot="end"></ion-reorder>
147+
</ion-item>
148+
<ion-item>
149+
<ion-label>Item 3</ion-label>
150+
<ion-reorder slot="end"></ion-reorder>
151+
</ion-item>
152+
</ion-reorder-group>
153+
`,
154+
config
155+
);
156+
157+
const reorderGroup = page.locator('ion-reorder-group');
158+
const ionReorderEnd = await page.spyOnEvent('ionReorderEnd');
159+
160+
// Drag the reorder item a little bit but not enough to
161+
// make it switch to a different position
162+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 20);
163+
164+
await page.waitForChanges();
165+
166+
await expect(ionReorderEnd).toHaveReceivedEventTimes(1);
167+
await expect(ionReorderEnd).toHaveReceivedEventDetail({ complete: undefined });
168+
});
169+
170+
test('should emit with details when the reorder operation ends and the item has moved', async ({ page }) => {
171+
await page.setContent(
172+
`
173+
<ion-reorder-group disabled="false">
174+
<ion-item>
175+
<ion-label>Item 1</ion-label>
176+
<ion-reorder slot="end"></ion-reorder>
177+
</ion-item>
178+
<ion-item>
179+
<ion-label>Item 2</ion-label>
180+
<ion-reorder slot="end"></ion-reorder>
181+
</ion-item>
182+
<ion-item>
183+
<ion-label>Item 3</ion-label>
184+
<ion-reorder slot="end"></ion-reorder>
185+
</ion-item>
186+
</ion-reorder-group>
187+
`,
188+
config
189+
);
190+
191+
const reorderGroup = page.locator('ion-reorder-group');
192+
const ionReorderEnd = await page.spyOnEvent('ionReorderEnd');
193+
194+
// Start the drag to verify it does not emit the event at the start
195+
// of the drag or during the drag. Do not release the drag here.
196+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 100, undefined, undefined, false);
197+
198+
await page.waitForChanges();
199+
200+
await expect(ionReorderEnd).toHaveReceivedEventTimes(0);
201+
202+
// Drag the reorder item further and release the drag to verify it emits the event
203+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300);
204+
205+
await page.waitForChanges();
206+
207+
await expect(ionReorderEnd).toHaveReceivedEventTimes(1);
208+
await expect(ionReorderEnd).toHaveReceivedEventDetail({ from: 0, to: 2, complete: undefined });
209+
});
210+
});
211+
212+
// TODO(FW-6590): Remove this once the deprecated event is removed
213+
test.describe('ionItemReorder', () => {
214+
test('should not emit when the reorder operation ends without moving the item position', async ({ page }) => {
215+
await page.setContent(
216+
`
217+
<ion-reorder-group disabled="false">
218+
<ion-item>
219+
<ion-label>Item 1</ion-label>
220+
<ion-reorder slot="end"></ion-reorder>
221+
</ion-item>
222+
<ion-item>
223+
<ion-label>Item 2</ion-label>
224+
<ion-reorder slot="end"></ion-reorder>
225+
</ion-item>
226+
<ion-item>
227+
<ion-label>Item 3</ion-label>
228+
<ion-reorder slot="end"></ion-reorder>
229+
</ion-item>
230+
</ion-reorder-group>
231+
`,
232+
config
233+
);
234+
235+
const reorderGroup = page.locator('ion-reorder-group');
236+
const ionItemReorder = await page.spyOnEvent('ionItemReorder');
237+
238+
// Drag the reorder item a little bit but not enough to
239+
// make it switch to a different position
240+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 20);
241+
242+
await page.waitForChanges();
243+
244+
await expect(ionItemReorder).toHaveReceivedEventTimes(0);
245+
});
246+
247+
test('should emit when the reorder operation ends and the item has moved', async ({ page }) => {
248+
await page.setContent(
249+
`
250+
<ion-reorder-group disabled="false">
251+
<ion-item>
252+
<ion-label>Item 1</ion-label>
253+
<ion-reorder slot="end"></ion-reorder>
254+
</ion-item>
255+
<ion-item>
256+
<ion-label>Item 2</ion-label>
257+
<ion-reorder slot="end"></ion-reorder>
258+
</ion-item>
259+
<ion-item>
260+
<ion-label>Item 3</ion-label>
261+
<ion-reorder slot="end"></ion-reorder>
262+
</ion-item>
263+
</ion-reorder-group>
264+
`,
265+
config
266+
);
267+
268+
const reorderGroup = page.locator('ion-reorder-group');
269+
const ionItemReorder = await page.spyOnEvent('ionItemReorder');
270+
271+
// Start the drag to verify it does not emit the event at the start
272+
// of the drag or during the drag. Do not release the drag here.
273+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 100, undefined, undefined, false);
274+
275+
await page.waitForChanges();
276+
277+
await expect(ionItemReorder).toHaveReceivedEventTimes(0);
278+
279+
// Drag the reorder item further and release the drag to verify it emits the event
280+
await dragElementBy(reorderGroup.locator('ion-reorder').first(), page, 0, 300);
281+
282+
await page.waitForChanges();
283+
284+
await expect(ionItemReorder).toHaveReceivedEventTimes(1);
285+
await expect(ionItemReorder).toHaveReceivedEventDetail({ from: 0, to: 2, complete: undefined });
286+
});
287+
});
288+
});
289+
});

0 commit comments

Comments
 (0)