Skip to content

Commit f5fe36e

Browse files
brandyscarneybrandyscarney
committed
test(textarea): add helper and error text to states
1 parent 96f0fd5 commit f5fe36e

File tree

2 files changed

+134
-6
lines changed

2 files changed

+134
-6
lines changed

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

Lines changed: 116 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,127 @@
4949
<div class="grid-item">
5050
<h2>Readonly</h2>
5151

52-
<ion-textarea label="Email" value="[email protected]" readonly="true"></ion-textarea>
52+
<ion-textarea
53+
label="Email"
54+
label-placement="stacked"
55+
value="[email protected]"
56+
counter="true"
57+
maxlength="99"
58+
helper-text="Helper text"
59+
error-text="Error text"
60+
readonly="true"
61+
></ion-textarea>
62+
</div>
63+
64+
<div class="grid-item">
65+
<h2>Readonly: Valid</h2>
66+
67+
<ion-textarea
68+
label="Email"
69+
label-placement="stacked"
70+
value="[email protected]"
71+
counter="true"
72+
maxlength="99"
73+
helper-text="Helper text"
74+
error-text="Error text"
75+
readonly="true"
76+
class="ion-valid has-focus"
77+
></ion-textarea>
78+
</div>
79+
80+
<div class="grid-item">
81+
<h2>Readonly: Invalid</h2>
82+
83+
<ion-textarea
84+
label="Email"
85+
label-placement="stacked"
86+
value="[email protected]"
87+
counter="true"
88+
maxlength="99"
89+
helper-text="Helper text"
90+
error-text="Error text"
91+
readonly="true"
92+
class="ion-invalid ion-touched"
93+
></ion-textarea>
94+
</div>
95+
96+
<div class="grid-item">
97+
<h2>Readonly: Color</h2>
98+
99+
<ion-textarea
100+
color="warning"
101+
label="Email"
102+
label-placement="stacked"
103+
value="[email protected]"
104+
counter="true"
105+
maxlength="99"
106+
helper-text="Helper text"
107+
error-text="Error text"
108+
readonly="true"
109+
></ion-textarea>
53110
</div>
54111

55112
<div class="grid-item">
56113
<h2>Disabled</h2>
57114

58-
<ion-textarea label="Email" value="[email protected]" disabled="true"></ion-textarea>
115+
<ion-textarea
116+
label="Email"
117+
label-placement="stacked"
118+
value="[email protected]"
119+
counter="true"
120+
maxlength="99"
121+
helper-text="Helper text"
122+
error-text="Error text"
123+
disabled="true"
124+
></ion-textarea>
125+
</div>
126+
127+
<div class="grid-item">
128+
<h2>Disabled: Valid</h2>
129+
130+
<ion-textarea
131+
label="Email"
132+
label-placement="stacked"
133+
value="[email protected]"
134+
counter="true"
135+
maxlength="99"
136+
helper-text="Helper text"
137+
error-text="Error text"
138+
disabled="true"
139+
class="ion-valid has-focus"
140+
></ion-textarea>
141+
</div>
142+
143+
<div class="grid-item">
144+
<h2>Disabled: Invalid</h2>
145+
146+
<ion-textarea
147+
label="Email"
148+
label-placement="stacked"
149+
value="[email protected]"
150+
counter="true"
151+
maxlength="99"
152+
helper-text="Helper text"
153+
error-text="Error text"
154+
disabled="true"
155+
class="ion-invalid ion-touched"
156+
></ion-textarea>
157+
</div>
158+
159+
<div class="grid-item">
160+
<h2>Disabled: Color</h2>
161+
162+
<ion-textarea
163+
color="warning"
164+
label="Email"
165+
label-placement="stacked"
166+
value="[email protected]"
167+
counter="true"
168+
maxlength="99"
169+
helper-text="Helper text"
170+
error-text="Error text"
171+
disabled="true"
172+
></ion-textarea>
59173
</div>
60174
</div>
61175
</ion-content>

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
66
test('should render readonly textarea correctly', async ({ page }) => {
77
await page.setContent(
88
`
9-
<ion-textarea label="Email" value="[email protected]" readonly="true"></ion-textarea>
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>
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" value="[email protected]" disabled="true"></ion-textarea>
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>
2222
`,
2323
config
2424
);
@@ -30,12 +30,12 @@ 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('focused'), () => {
33+
test.describe(title('textarea: focused'), () => {
3434
test('should render focused textarea correctly', async ({ page }) => {
3535
await page.setContent(
3636
`
3737
<div class="container ion-padding">
38-
<ion-textarea fill="outline" value="[email protected]" class="has-focus"></ion-textarea>
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>
3939
</div>
4040
`,
4141
config
@@ -44,5 +44,19 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
4444
const container = page.locator('.container');
4545
await expect(container).toHaveScreenshot(screenshot(`textarea-focused`));
4646
});
47+
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+
);
57+
58+
const container = page.locator('.container');
59+
await expect(container).toHaveScreenshot(screenshot(`textarea-focused-valid`));
60+
});
4761
});
4862
});

0 commit comments

Comments
 (0)