Skip to content

Commit 4de01b0

Browse files
ShaneKShaneK
committed
tests(picker): fixing new tests for multi-column select to make them use multi-column select
1 parent b868098 commit 4de01b0

File tree

1 file changed

+88
-26
lines changed

1 file changed

+88
-26
lines changed

‎core/src/components/picker/test/keyboard-entry/picker.e2e.ts‎

Lines changed: 88 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -174,13 +174,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
174174
await page.setContent(
175175
`
176176
<ion-picker>
177-
<ion-picker-column></ion-picker-column>
177+
<ion-picker-column id="hours"></ion-picker-column>
178+
<ion-picker-column id="minutes"></ion-picker-column>
178179
</ion-picker>
179180
180181
<script>
181-
const column = document.querySelector('ion-picker-column');
182-
column.numericInput = true;
183-
const items = [
182+
const hoursColumn = document.querySelector('ion-picker-column#hours');
183+
hoursColumn.numericInput = true;
184+
const hourItems = [
184185
{ text: '01', value: 1 },
185186
{ text: '02', value: 2},
186187
{ text: '20', value: 20 },
@@ -189,29 +190,59 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
189190
{ text: '23', value: 23 }
190191
];
191192
192-
items.forEach((item) => {
193+
hourItems.forEach((item) => {
193194
const option = document.createElement('ion-picker-column-option');
194195
option.value = item.value;
195196
option.textContent = item.text;
196197
197-
column.appendChild(option);
198+
hoursColumn.appendChild(option);
199+
});
200+
201+
const minutesColumn = document.querySelector('ion-picker-column#minutes');
202+
minutesColumn.numericInput = true;
203+
const minuteItems = [
204+
{ text: '00', value: 0 },
205+
{ text: '15', value: 15 },
206+
{ text: '30', value: 30 },
207+
{ text: '45', value: 45 }
208+
];
209+
210+
minuteItems.forEach((item) => {
211+
const option = document.createElement('ion-picker-column-option');
212+
option.value = item.value;
213+
option.textContent = item.text;
214+
215+
minutesColumn.appendChild(option);
198216
});
199217
</script>
200218
`,
201219
config
202220
);
203221

204-
const column = page.locator('ion-picker-column');
205-
const ionChange = await page.spyOnEvent('ionChange');
206-
await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
222+
const hoursColumn = page.locator('ion-picker-column#hours');
223+
const minutesColumn = page.locator('ion-picker-column#minutes');
224+
const hoursIonChange = await (hoursColumn as E2ELocator).spyOnEvent('ionChange');
225+
const minutesIonChange = await (minutesColumn as E2ELocator).spyOnEvent('ionChange');
226+
const highlight = page.locator('ion-picker .picker-highlight');
227+
228+
const box = await highlight.boundingBox();
229+
if (box !== null) {
230+
await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
231+
}
207232

208-
// Simulate typing '22'
233+
// Simulate typing '2230' (22 hours, 30 minutes)
209234
await page.keyboard.press('Digit2');
210235
await page.keyboard.press('Digit2');
236+
await page.keyboard.press('Digit3');
237+
await page.keyboard.press('Digit0');
211238

212-
// Ensure the column value is updated to 22
213-
await expect(ionChange).toHaveReceivedEventDetail({ value: 22 });
214-
await expect(column).toHaveJSProperty('value', 22);
239+
// Ensure the hours column is set to 22
240+
await expect(hoursIonChange).toHaveReceivedEventDetail({ value: 22 });
241+
await expect(hoursColumn).toHaveJSProperty('value', 22);
242+
243+
// Ensure the minutes column is set to 30
244+
await expect(minutesIonChange).toHaveReceivedEventDetail({ value: 30 });
245+
await expect(minutesColumn).toHaveJSProperty('value', 30);
215246
});
216247

217248
test('should set value to 2 and not wait for another digit when max value is 12', async ({ page }, testInfo) => {
@@ -222,13 +253,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
222253
await page.setContent(
223254
`
224255
<ion-picker>
225-
<ion-picker-column></ion-picker-column>
256+
<ion-picker-column id="hours"></ion-picker-column>
257+
<ion-picker-column id="minutes"></ion-picker-column>
226258
</ion-picker>
227259
228260
<script>
229-
const column = document.querySelector('ion-picker-column');
230-
column.numericInput = true;
231-
const items = [
261+
const hoursColumn = document.querySelector('ion-picker-column#hours');
262+
hoursColumn.numericInput = true;
263+
const hourItems = [
232264
{ text: '01', value: 1 },
233265
{ text: '02', value: 2 },
234266
{ text: '03', value: 3 },
@@ -243,28 +275,58 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
243275
{ text: '12', value: 12 }
244276
];
245277
246-
items.forEach((item) => {
278+
hourItems.forEach((item) => {
247279
const option = document.createElement('ion-picker-column-option');
248280
option.value = item.value;
249281
option.textContent = item.text;
250282
251-
column.appendChild(option);
283+
hoursColumn.appendChild(option);
284+
});
285+
286+
const minutesColumn = document.querySelector('ion-picker-column#minutes');
287+
minutesColumn.numericInput = true;
288+
const minuteItems = [
289+
{ text: '00', value: 0 },
290+
{ text: '15', value: 15 },
291+
{ text: '30', value: 30 },
292+
{ text: '45', value: 45 }
293+
];
294+
295+
minuteItems.forEach((item) => {
296+
const option = document.createElement('ion-picker-column-option');
297+
option.value = item.value;
298+
option.textContent = item.text;
299+
300+
minutesColumn.appendChild(option);
252301
});
253302
</script>
254303
`,
255304
config
256305
);
257306

258-
const column = page.locator('ion-picker-column');
259-
const ionChange = await page.spyOnEvent('ionChange');
260-
await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());
307+
const hoursColumn = page.locator('ion-picker-column#hours');
308+
const minutesColumn = page.locator('ion-picker-column#minutes');
309+
const hoursIonChange = await (hoursColumn as E2ELocator).spyOnEvent('ionChange');
310+
const minutesIonChange = await (minutesColumn as E2ELocator).spyOnEvent('ionChange');
311+
const highlight = page.locator('ion-picker .picker-highlight');
261312

262-
// Simulate typing '2'
313+
const box = await highlight.boundingBox();
314+
if (box !== null) {
315+
await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
316+
}
317+
318+
// Simulate typing '245' (2 hours, 45 minutes)
263319
await page.keyboard.press('Digit2');
320+
await page.keyboard.press('Digit4');
321+
await page.keyboard.press('Digit5');
264322

265-
// Ensure the value is immediately set to 2
266-
await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
267-
await expect(column).toHaveJSProperty('value', 2);
323+
// Ensure the hours column is set to 2
324+
await expect(hoursIonChange).toHaveReceivedEventDetail({ value: 2 });
325+
await expect(hoursColumn).toHaveJSProperty('value', 2);
326+
327+
// Ensure the minutes column is set to 45
328+
await expect(minutesIonChange).toHaveReceivedEventDetail({ value: 45 });
329+
await expect(minutesColumn).toHaveJSProperty('value', 45);
268330
});
269331

270332
test('pressing Enter should dismiss the keyboard', async ({ page }) => {

0 commit comments

Comments
 (0)