Skip to content

Commit 18e0f70

Browse files
brandyscarneybrandyscarney
committed
test(input-otp): simplify basic test with helper function to verify values
1 parent a46322b commit 18e0f70

File tree

1 file changed

+66
-117
lines changed

1 file changed

+66
-117
lines changed

‎core/src/components/input-otp/test/basic/input-otp.e2e.ts‎

Lines changed: 66 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { expect } from '@playwright/test';
2+
import type { Locator } from '@playwright/test';
23
import { configs, test } from '@utils/test/playwright';
34

45
/**
@@ -18,6 +19,21 @@ async function simulatePaste(input: any, value: string) {
1819
}, value);
1920
}
2021

22+
/**
23+
* Helper function to verify input values in both the input
24+
* boxes and the input-otp component's value property
25+
*/
26+
async function verifyInputValues(inputOtp: Locator, expectedValues: string[]) {
27+
const inputBoxes = inputOtp.locator('input');
28+
for (let i = 0; i < expectedValues.length; i++) {
29+
await expect(inputBoxes.nth(i)).toHaveValue(expectedValues[i]);
30+
}
31+
32+
// Concatenate the expected values and check the JS property
33+
const concatenatedValue = expectedValues.join('');
34+
await expect(inputOtp).toHaveJSProperty('value', concatenatedValue);
35+
}
36+
2137
/**
2238
* Functionality is the same across modes
2339
*/
@@ -26,93 +42,75 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
2642
test('should render with 4 input boxes and a default value', async ({ page }) => {
2743
await page.setContent(`<ion-input-otp value="12">Description</ion-input-otp>`, config);
2844

45+
const inputOtp = page.locator('ion-input-otp');
46+
2947
const inputBoxes = page.locator('ion-input-otp input');
3048
await expect(inputBoxes).toHaveCount(4);
3149

32-
await expect(inputBoxes.nth(0)).toHaveValue('1');
33-
await expect(inputBoxes.nth(1)).toHaveValue('2');
34-
35-
const inputOtp = page.locator('ion-input-otp');
36-
await expect(inputOtp).toHaveAttribute('value', '12');
50+
await verifyInputValues(inputOtp, ['1', '2', '', '']);
3751
});
3852

3953
test('should render with 8 input boxes when length is set to 8 and a default value', async ({ page }) => {
4054
await page.setContent(`<ion-input-otp length="8" value="12345678">Description</ion-input-otp>`, config);
4155

56+
const inputOtp = page.locator('ion-input-otp');
57+
4258
const inputBoxes = page.locator('ion-input-otp input');
4359
await expect(inputBoxes).toHaveCount(8);
4460

45-
await expect(inputBoxes.nth(0)).toHaveValue('1');
46-
await expect(inputBoxes.nth(1)).toHaveValue('2');
47-
await expect(inputBoxes.nth(2)).toHaveValue('3');
48-
await expect(inputBoxes.nth(3)).toHaveValue('4');
49-
await expect(inputBoxes.nth(4)).toHaveValue('5');
50-
await expect(inputBoxes.nth(5)).toHaveValue('6');
51-
await expect(inputBoxes.nth(6)).toHaveValue('7');
52-
await expect(inputBoxes.nth(7)).toHaveValue('8');
53-
54-
const inputOtp = page.locator('ion-input-otp');
55-
await expect(inputOtp).toHaveAttribute('value', '12345678');
61+
await verifyInputValues(inputOtp, ['1', '2', '3', '4', '5', '6', '7', '8']);
5662
});
5763

5864
test('should accept numbers only by default', async ({ page }) => {
5965
await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
6066

67+
const inputOtp = page.locator('ion-input-otp');
68+
6169
const firstInput = page.locator('ion-input-otp input').first();
6270
await firstInput.focus();
6371

6472
await page.keyboard.type('A2e468');
6573

66-
const inputBoxes = page.locator('ion-input-otp input');
67-
await expect(inputBoxes.nth(0)).toHaveValue('2');
68-
await expect(inputBoxes.nth(1)).toHaveValue('4');
69-
await expect(inputBoxes.nth(2)).toHaveValue('6');
70-
await expect(inputBoxes.nth(3)).toHaveValue('8');
74+
await verifyInputValues(inputOtp, ['2', '4', '6', '8']);
7175
});
7276

7377
test('should accept text and numbers when type is set to text', async ({ page }) => {
7478
await page.setContent(`<ion-input-otp type="text">Description</ion-input-otp>`, config);
7579

80+
const inputOtp = page.locator('ion-input-otp');
81+
7682
const firstInput = page.locator('ion-input-otp input').first();
7783
await firstInput.focus();
7884

7985
await page.keyboard.type('A2-B5');
8086

81-
const inputBoxes = page.locator('ion-input-otp input');
82-
await expect(inputBoxes.nth(0)).toHaveValue('A');
83-
await expect(inputBoxes.nth(1)).toHaveValue('2');
84-
await expect(inputBoxes.nth(2)).toHaveValue('B');
85-
await expect(inputBoxes.nth(3)).toHaveValue('5');
87+
await verifyInputValues(inputOtp, ['A', '2', 'B', '5']);
8688
});
8789

8890
test('should accept custom pattern of lowercase and uppercase letters when pattern is set', async ({ page }) => {
8991
await page.setContent(`<ion-input-otp type="text" pattern="[a-fA-F]">Description</ion-input-otp>`, config);
9092

93+
const inputOtp = page.locator('ion-input-otp');
94+
9195
const firstInput = page.locator('ion-input-otp input').first();
9296
await firstInput.focus();
9397

9498
await page.keyboard.type('aGBZfD');
9599

96-
const inputBoxes = page.locator('ion-input-otp input');
97-
await expect(inputBoxes.nth(0)).toHaveValue('a');
98-
await expect(inputBoxes.nth(1)).toHaveValue('B');
99-
await expect(inputBoxes.nth(2)).toHaveValue('f');
100-
await expect(inputBoxes.nth(3)).toHaveValue('D');
100+
await verifyInputValues(inputOtp, ['a', 'B', 'f', 'D']);
101101
});
102102

103103
test('should accept custom pattern of uppercase letters only when pattern is set', async ({ page }) => {
104104
await page.setContent(`<ion-input-otp type="text" pattern="[D-L]">Description</ion-input-otp>`, config);
105105

106+
const inputOtp = page.locator('ion-input-otp');
107+
106108
const firstInput = page.locator('ion-input-otp input').first();
107109
await firstInput.focus();
108110

109111
await page.keyboard.type('abcdABCDEFG');
110112

111-
const inputBoxes = page.locator('ion-input-otp input');
112-
await expect(inputBoxes.nth(0)).toHaveValue('D');
113-
await expect(inputBoxes.nth(1)).toHaveValue('E');
114-
await expect(inputBoxes.nth(2)).toHaveValue('F');
115-
await expect(inputBoxes.nth(3)).toHaveValue('G');
113+
await verifyInputValues(inputOtp, ['D', 'E', 'F', 'G']);
116114
});
117115
});
118116

@@ -124,29 +122,16 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
124122
await firstInput.focus();
125123

126124
const inputOtp = page.locator('ion-input-otp');
127-
const inputBoxes = page.locator('ion-input-otp input');
128125

129-
await expect(inputOtp).toHaveJSProperty('value', '');
130-
await expect(inputBoxes.nth(0)).toHaveValue('');
131-
await expect(inputBoxes.nth(1)).toHaveValue('');
132-
await expect(inputBoxes.nth(2)).toHaveValue('');
133-
await expect(inputBoxes.nth(3)).toHaveValue('');
126+
await verifyInputValues(inputOtp, ['', '', '', '']);
134127

135128
await page.keyboard.type('12');
136129

137-
await expect(inputOtp).toHaveJSProperty('value', '12');
138-
await expect(inputBoxes.nth(0)).toHaveValue('1');
139-
await expect(inputBoxes.nth(1)).toHaveValue('2');
140-
await expect(inputBoxes.nth(2)).toHaveValue('');
141-
await expect(inputBoxes.nth(3)).toHaveValue('');
130+
await verifyInputValues(inputOtp, ['1', '2', '', '']);
142131

143132
await page.keyboard.type('34');
144133

145-
await expect(inputOtp).toHaveJSProperty('value', '1234');
146-
await expect(inputBoxes.nth(0)).toHaveValue('1');
147-
await expect(inputBoxes.nth(1)).toHaveValue('2');
148-
await expect(inputBoxes.nth(2)).toHaveValue('3');
149-
await expect(inputBoxes.nth(3)).toHaveValue('4');
134+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
150135
});
151136

152137
test('should update the 1st input value when typing in the 3rd box', async ({ page }) => {
@@ -160,11 +145,7 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
160145

161146
await page.keyboard.type('1');
162147

163-
await expect(inputBoxes.nth(0)).toHaveValue('1');
164-
await expect(inputBoxes.nth(1)).toHaveValue('');
165-
await expect(inputBoxes.nth(2)).toHaveValue('');
166-
await expect(inputBoxes.nth(3)).toHaveValue('');
167-
await expect(inputOtp).toHaveJSProperty('value', '1');
148+
await verifyInputValues(inputOtp, ['1', '', '', '']);
168149

169150
// Focus should be on the 2nd input box
170151
await expect(inputBoxes.nth(1)).toBeFocused();
@@ -183,11 +164,7 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
183164

184165
await page.keyboard.type('9');
185166

186-
await expect(inputBoxes.nth(0)).toHaveValue('1');
187-
await expect(inputBoxes.nth(1)).toHaveValue('2');
188-
await expect(inputBoxes.nth(2)).toHaveValue('9');
189-
await expect(inputBoxes.nth(3)).toHaveValue('3');
190-
await expect(inputOtp).toHaveJSProperty('value', '1293');
167+
await verifyInputValues(inputOtp, ['1', '2', '9', '3']);
191168

192169
// Focus should remain on the 3rd input box
193170
await expect(inputBoxes.nth(2)).toBeFocused();
@@ -204,11 +181,7 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
204181

205182
await page.keyboard.type('9');
206183

207-
await expect(inputBoxes.nth(0)).toHaveValue('1');
208-
await expect(inputBoxes.nth(1)).toHaveValue('9');
209-
await expect(inputBoxes.nth(2)).toHaveValue('3');
210-
await expect(inputBoxes.nth(3)).toHaveValue('4');
211-
await expect(inputOtp).toHaveJSProperty('value', '1934');
184+
await verifyInputValues(inputOtp, ['1', '9', '3', '4']);
212185

213186
// Focus should remain on the 2nd input box
214187
await expect(inputBoxes.nth(1)).toBeFocused();
@@ -222,15 +195,10 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
222195
await secondInput.selectText();
223196

224197
const inputOtp = page.locator('ion-input-otp');
225-
const inputBoxes = page.locator('ion-input-otp input');
226198

227199
await page.keyboard.type('9');
228200

229-
await expect(inputBoxes.nth(0)).toHaveValue('1');
230-
await expect(inputBoxes.nth(1)).toHaveValue('9');
231-
await expect(inputBoxes.nth(2)).toHaveValue('3');
232-
await expect(inputBoxes.nth(3)).toHaveValue('');
233-
await expect(inputOtp).toHaveJSProperty('value', '193');
201+
await verifyInputValues(inputOtp, ['1', '9', '3', '']);
234202
});
235203
});
236204

@@ -296,30 +264,26 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
296264
}) => {
297265
await page.setContent(`<ion-input-otp value="1">Description</ion-input-otp>`, config);
298266

267+
const inputOtp = page.locator('ion-input-otp');
268+
299269
await page.keyboard.press('Tab');
300270
await page.keyboard.press('Backspace');
301271
await page.keyboard.press('Backspace');
302272

303-
const inputBoxes = page.locator('ion-input-otp input');
304-
await expect(inputBoxes.nth(0)).toHaveValue('');
305-
await expect(inputBoxes.nth(1)).toHaveValue('');
306-
await expect(inputBoxes.nth(2)).toHaveValue('');
307-
await expect(inputBoxes.nth(3)).toHaveValue('');
273+
await verifyInputValues(inputOtp, ['', '', '', '']);
308274
});
309275

310276
test('should backspace the last input box when backspace is pressed and all values are filled', async ({
311277
page,
312278
}) => {
313279
await page.setContent(`<ion-input-otp value="1234">Description</ion-input-otp>`, config);
314280

281+
const inputOtp = page.locator('ion-input-otp');
282+
315283
await page.keyboard.press('Tab');
316284
await page.keyboard.press('Backspace');
317285

318-
const inputBoxes = page.locator('ion-input-otp input');
319-
await expect(inputBoxes.nth(0)).toHaveValue('1');
320-
await expect(inputBoxes.nth(1)).toHaveValue('2');
321-
await expect(inputBoxes.nth(2)).toHaveValue('3');
322-
await expect(inputBoxes.nth(3)).toHaveValue('');
286+
await verifyInputValues(inputOtp, ['1', '2', '3', '']);
323287
});
324288

325289
test('should backspace the 2nd input box and fill it with the 3rd value when backspace is pressed and 3 values are filled', async ({
@@ -339,11 +303,8 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
339303
}
340304
await page.keyboard.press('Backspace');
341305

342-
const inputBoxes = page.locator('ion-input-otp input');
343-
await expect(inputBoxes.nth(0)).toHaveValue('1');
344-
await expect(inputBoxes.nth(1)).toHaveValue('3');
345-
await expect(inputBoxes.nth(2)).toHaveValue('');
346-
await expect(inputBoxes.nth(3)).toHaveValue('');
306+
const inputOtp = page.locator('ion-input-otp');
307+
await verifyInputValues(inputOtp, ['1', '3', '', '']);
347308
});
348309
});
349310

@@ -355,11 +316,10 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
355316
await firstInput.focus();
356317
await simulatePaste(firstInput, '12');
357318

319+
const inputOtp = page.locator('ion-input-otp');
320+
358321
const inputBoxes = page.locator('ion-input-otp input');
359-
await expect(inputBoxes.nth(0)).toHaveValue('1');
360-
await expect(inputBoxes.nth(1)).toHaveValue('2');
361-
await expect(inputBoxes.nth(2)).toHaveValue('');
362-
await expect(inputBoxes.nth(3)).toHaveValue('');
322+
await verifyInputValues(inputOtp, ['1', '2', '', '']);
363323

364324
// Focus should be on the 3rd input box
365325
await expect(inputBoxes.nth(2)).toBeFocused();
@@ -372,11 +332,9 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
372332
await firstInput.focus();
373333
await simulatePaste(firstInput, '1234');
374334

335+
const inputOtp = page.locator('ion-input-otp');
375336
const inputBoxes = page.locator('ion-input-otp input');
376-
await expect(inputBoxes.nth(0)).toHaveValue('1');
377-
await expect(inputBoxes.nth(1)).toHaveValue('2');
378-
await expect(inputBoxes.nth(2)).toHaveValue('3');
379-
await expect(inputBoxes.nth(3)).toHaveValue('4');
337+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
380338

381339
// Focus should be on the 4th input box
382340
await expect(inputBoxes.nth(3)).toBeFocused();
@@ -391,11 +349,10 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
391349
await thirdInput.focus();
392350
await simulatePaste(thirdInput, '12');
393351

352+
const inputOtp = page.locator('ion-input-otp');
353+
394354
const inputBoxes = page.locator('ion-input-otp input');
395-
await expect(inputBoxes.nth(0)).toHaveValue('1');
396-
await expect(inputBoxes.nth(1)).toHaveValue('2');
397-
await expect(inputBoxes.nth(2)).toHaveValue('');
398-
await expect(inputBoxes.nth(3)).toHaveValue('');
355+
await verifyInputValues(inputOtp, ['1', '2', '', '']);
399356

400357
// Focus should be on the 3rd input box
401358
await expect(inputBoxes.nth(2)).toBeFocused();
@@ -411,11 +368,9 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
411368
await page.keyboard.type('12');
412369
await simulatePaste(firstInput, '34');
413370

414-
const inputBoxes = page.locator('ion-input-otp input');
415-
await expect(inputBoxes.nth(0)).toHaveValue('1');
416-
await expect(inputBoxes.nth(1)).toHaveValue('2');
417-
await expect(inputBoxes.nth(2)).toHaveValue('3');
418-
await expect(inputBoxes.nth(3)).toHaveValue('4');
371+
const inputOtp = page.locator('ion-input-otp');
372+
373+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
419374
});
420375

421376
test('should paste text into all input boxes when pasting 4 digits after typing 4 digits', async ({ page }) => {
@@ -426,11 +381,9 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
426381
await page.keyboard.type('9999');
427382
await simulatePaste(firstInput, '1234');
428383

429-
const inputBoxes = page.locator('ion-input-otp input');
430-
await expect(inputBoxes.nth(0)).toHaveValue('1');
431-
await expect(inputBoxes.nth(1)).toHaveValue('2');
432-
await expect(inputBoxes.nth(2)).toHaveValue('3');
433-
await expect(inputBoxes.nth(3)).toHaveValue('4');
384+
const inputOtp = page.locator('ion-input-otp');
385+
386+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
434387
});
435388
});
436389
});
@@ -520,7 +473,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
520473
await inputOtp.evaluate((el: HTMLIonInputOtpElement) => {
521474
el.value = '1234';
522475
});
523-
await expect(inputOtp).toHaveJSProperty('value', '1234');
476+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
524477

525478
await expect(ionInput).not.toHaveReceivedEvent();
526479
});
@@ -602,7 +555,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
602555
await inputOtp.evaluate((el: HTMLIonInputOtpElement) => {
603556
el.value = '1234';
604557
});
605-
await expect(inputOtp).toHaveJSProperty('value', '1234');
558+
await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
606559

607560
await expect(ionChange).not.toHaveReceivedEvent();
608561
});
@@ -780,11 +733,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
780733
});
781734

782735
// Check that values are cleared
783-
await expect(inputOtp).toHaveJSProperty('value', '');
784-
await expect(inputBoxes.nth(0)).toHaveValue('');
785-
await expect(inputBoxes.nth(1)).toHaveValue('');
786-
await expect(inputBoxes.nth(2)).toHaveValue('');
787-
await expect(inputBoxes.nth(3)).toHaveValue('');
736+
await verifyInputValues(inputOtp, ['', '', '', '']);
788737

789738
// Check that focus is removed
790739
await expect(inputBoxes.nth(2)).not.toBeFocused();

0 commit comments

Comments
 (0)