Skip to content

Commit 76940df

Browse files
brandyscarneybrandyscarney
committed
test(textarea): update e2e test to match input
1 parent 44de814 commit 76940df

File tree

2 files changed

+118
-27
lines changed

2 files changed

+118
-27
lines changed

‎core/src/components/textarea/test/states/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Textarea - Disabled</title>
5+
<title>Textarea - States</title>
66
<meta
77
name="viewport"
88
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

‎core/src/components/textarea/test/states/textarea.e2e.ts‎

Lines changed: 117 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { expect } from '@playwright/test';
22
import { configs, test } from '@utils/test/playwright';
33

4-
configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
4+
configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
55
test.describe(title('textarea: states'), () => {
66
test('should render readonly textarea correctly', async ({ page }) => {
77
await page.setContent(
88
`
9-
<ion-textarea label="Email" label-placement="stacked" value="[email protected]" helper-text="Helper text" error-text="Error text" counter="true" maxlength="99" readonly="true"></ion-textarea>
9+
<ion-textarea label="Email" value="[email protected]" readonly="true"></ion-textarea>
1010
`,
1111
config
1212
);
@@ -18,7 +18,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
1818
test('should render disabled textarea correctly', async ({ page }) => {
1919
await page.setContent(
2020
`
21-
<ion-textarea label="Email" label-placement="stacked" value="[email protected]" helper-text="Helper text" error-text="Error text" counter="true" maxlength="99" disabled="true"></ion-textarea>
21+
<ion-textarea label="Email" value="[email protected]" disabled="true"></ion-textarea>
2222
`,
2323
config
2424
);
@@ -30,33 +30,124 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
3030
});
3131

3232
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
33-
test.describe(title('textarea: focused'), () => {
34-
test('should render focused textarea correctly', async ({ page }) => {
35-
await page.setContent(
36-
`
37-
<div class="container ion-padding">
38-
<ion-textarea label="Label" label-placement="stacked" fill="outline" value="[email protected]" helper-text="Helper text" error-text="Error text" counter="true" maxlength="99" class="has-focus"></ion-textarea>
39-
</div>
40-
`,
41-
config
42-
);
33+
test.describe(title('textarea: states'), () => {
34+
test.describe(title('disabled'), () => {
35+
test.describe(title('no fill'), () => {
36+
test('should render disabled textarea correctly', async ({ page }) => {
37+
await page.setContent(
38+
`
39+
<div class="container">
40+
<ion-textarea
41+
label="Email"
42+
label-placement="stacked"
43+
value="[email protected]"
44+
helper-text="Enter an email"
45+
counter="true"
46+
maxlength="20"
47+
disabled="true"
48+
></ion-textarea>
49+
50+
<ion-textarea
51+
label="Email"
52+
label-placement="stacked"
53+
value="[email protected]"
54+
helper-text="Enter an email"
55+
counter="true"
56+
maxlength="20"
57+
class="ion-valid has-focus"
58+
disabled="true"
59+
></ion-textarea>
60+
61+
<ion-textarea
62+
label="Email"
63+
label-placement="stacked"
64+
value="[email protected]"
65+
error-text="Please enter a valid email"
66+
counter="true"
67+
maxlength="20"
68+
class="ion-touched ion-invalid"
69+
disabled="true"
70+
></ion-textarea>
71+
72+
<ion-textarea
73+
label="Email"
74+
label-placement="stacked"
75+
value="[email protected]"
76+
helper-text="Enter an email"
77+
counter="true"
78+
maxlength="20"
79+
disabled="true"
80+
color="warning"
81+
></ion-textarea>
82+
</div>
83+
`,
84+
config
85+
);
4386

44-
const container = page.locator('.container');
45-
await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
87+
const container = page.locator('.container');
88+
await expect(container).toHaveScreenshot(screenshot(`textarea-disabled-no-fill`));
89+
});
90+
});
4691
});
4792

48-
test('should render focused valid textarea correctly', async ({ page }) => {
49-
await page.setContent(
50-
`
51-
<div class="container ion-padding">
52-
<ion-textarea label="Label" label-placement="stacked" fill="outline" value="[email protected]" helper-text="Helper text" error-text="Error text" counter="true" maxlength="99" class="ion-valid has-focus"></ion-textarea>
53-
</div>
54-
`,
55-
config
56-
);
93+
test.describe(title('focused'), () => {
94+
test('should render focused textarea correctly', async ({ page }) => {
95+
await page.setContent(
96+
`
97+
<div class="container">
98+
<ion-textarea
99+
label="Email"
100+
value="[email protected]"
101+
helper-text="Enter an email"
102+
counter="true"
103+
maxlength="20"
104+
class="has-focus"
105+
></ion-textarea>
106+
107+
<ion-textarea
108+
fill="outline"
109+
label="Email"
110+
label-placement="stacked"
111+
value="[email protected]"
112+
helper-text="Enter an email"
113+
counter="true"
114+
maxlength="20"
115+
class="has-focus"
116+
></ion-textarea>
117+
</div>
118+
`,
119+
config
120+
);
121+
122+
const container = page.locator('.container');
123+
await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
124+
});
125+
});
126+
127+
test.describe(title('readonly'), () => {
128+
test.describe(title('no fill'), () => {
129+
test('should render readonly textarea correctly', async ({ page }) => {
130+
await page.setContent(
131+
`
132+
<div class="container">
133+
<ion-textarea
134+
label="Email"
135+
label-placement="stacked"
136+
value="[email protected]"
137+
helper-text="Enter an email"
138+
counter="true"
139+
maxlength="20"
140+
readonly="true"
141+
></ion-textarea>
142+
</div>
143+
`,
144+
config
145+
);
57146

58-
const container = page.locator('.container');
59-
await expect(container).toHaveScreenshot(screenshot(`textarea-focused-valid`));
147+
const container = page.locator('.container');
148+
await expect(container).toHaveScreenshot(screenshot(`textarea-readonly-no-fill`));
149+
});
150+
});
60151
});
61152
});
62153
});

0 commit comments

Comments
 (0)