Skip to content

Commit 6878f74

Browse files
test(input): add test to check input height
1 parent 1c00f3c commit 6878f74

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

core/src/components/input/test/states/input.e2e.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,66 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
2626
const input = page.locator('ion-input');
2727
await expect(input).toHaveScreenshot(screenshot(`input-disabled`));
2828
});
29+
30+
test('should maintain consistent height when password toggle is hidden on disabled input', async ({ page }, testInfo) => {
31+
testInfo.annotations.push({
32+
type: 'issue',
33+
description: 'https://github.com/ionic-team/ionic-framework/issues/29562',
34+
});
35+
await page.setContent(
36+
`
37+
<ion-input label="Password" type="password" value="password123">
38+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
39+
</ion-input>
40+
`,
41+
config
42+
);
43+
44+
const input = page.locator('ion-input');
45+
46+
// Get the height when input is enabled
47+
const enabledHeight = await input.boundingBox().then(box => box?.height);
48+
49+
// Disable the input
50+
await input.evaluate(el => el.setAttribute('disabled', 'true'));
51+
await page.waitForChanges();
52+
53+
// Get the height when input is disabled
54+
const disabledHeight = await input.boundingBox().then(box => box?.height);
55+
56+
// Verify heights are the same
57+
expect(enabledHeight).toBe(disabledHeight);
58+
});
59+
60+
61+
test('should maintain consistent height when password toggle is hidden on readonly input', async ({ page }, testInfo) => {
62+
testInfo.annotations.push({
63+
type: 'issue',
64+
description: 'https://github.com/ionic-team/ionic-framework/issues/29562',
65+
});
66+
await page.setContent(
67+
`
68+
<ion-input label="Password" type="password" value="password123">
69+
<ion-input-password-toggle slot="end"></ion-input-password-toggle>
70+
</ion-input>
71+
`,
72+
config
73+
);
74+
75+
const input = page.locator('ion-input');
76+
77+
// Get the height when input is enabled
78+
const enabledHeight = await input.boundingBox().then(box => box?.height);
79+
80+
// Make the input readonly
81+
await input.evaluate(el => el.setAttribute('readonly', 'true'));
82+
await page.waitForChanges();
83+
84+
// Get the height when input is readonly
85+
const readonlyHeight = await input.boundingBox().then(box => box?.height);
86+
87+
// Verify heights are the same
88+
expect(enabledHeight).toBe(readonlyHeight);
89+
});
2990
});
3091
});

0 commit comments

Comments
 (0)