Skip to content

Commit b68a30e

Browse files
rugoncalvesrugoncalves
committed
Simplifying tests for rows
1 parent 3fb17c6 commit b68a30e

File tree

2 files changed

+28
-118
lines changed

2 files changed

+28
-118
lines changed

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

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -43,29 +43,21 @@
4343

4444
<ion-content id="content" class="ion-padding">
4545
<div class="grid">
46+
<!-- Different row values -->
4647
<div class="grid-item">
47-
<h2>Rows: 3</h2>
48-
<ion-textarea
49-
rows="3"
50-
label="Comments"
51-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
52-
></ion-textarea>
53-
</div>
54-
55-
<div class="grid-item">
56-
<h2>Rows: 2</h2>
48+
<h2>Rows: 1</h2>
5749
<ion-textarea
58-
rows="2"
59-
label="Text Area"
50+
rows="1"
51+
label="Small"
6052
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
6153
></ion-textarea>
6254
</div>
6355

6456
<div class="grid-item">
65-
<h2>Rows: 5</h2>
57+
<h2>Rows: 3</h2>
6658
<ion-textarea
67-
rows="5"
68-
label="Text Area"
59+
rows="3"
60+
label="Medium"
6961
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
7062
></ion-textarea>
7163
</div>
@@ -74,11 +66,12 @@ <h2>Rows: 5</h2>
7466
<h2>Rows: 8</h2>
7567
<ion-textarea
7668
rows="8"
77-
label="Text Area"
69+
label="Large"
7870
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
7971
></ion-textarea>
8072
</div>
8173

74+
<!-- Different sizes -->
8275
<div class="grid-item">
8376
<h2>Rows: 3, Size Small</h2>
8477
<ion-textarea
@@ -109,6 +102,7 @@ <h2>Rows: 3, Size Large</h2>
109102
></ion-textarea>
110103
</div>
111104

105+
<!-- Auto-grow -->
112106
<div class="grid-item">
113107
<h2>Rows: 3, Auto-grow</h2>
114108
<ion-textarea
@@ -118,18 +112,6 @@ <h2>Rows: 3, Auto-grow</h2>
118112
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
119113
></ion-textarea>
120114
</div>
121-
122-
<div class="grid-item">
123-
<h2>Rows: 3, Start and End Slot Icons</h2>
124-
<ion-textarea
125-
rows="3"
126-
label="Comments"
127-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
128-
>
129-
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
130-
<ion-icon slot="end" name="square-outline" aria-hidden="true"></ion-icon>
131-
</ion-textarea>
132-
</div>
133115
</div>
134116
</ion-content>
135117
</ion-app>

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

Lines changed: 18 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,25 @@ import { configs, test } from '@utils/test/playwright';
77
*/
88
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
99
test.describe(title('textarea: rows'), () => {
10-
test('should respect rows attribute', async ({ page }) => {
11-
await page.setContent(
12-
`
13-
<ion-textarea
14-
rows="3"
15-
label="Comments"
16-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
17-
></ion-textarea>
18-
`,
19-
config
20-
);
21-
22-
const textarea = page.locator('ion-textarea');
23-
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3`));
24-
});
25-
2610
test('should respect rows attribute with different values', async ({ page }) => {
2711
await page.setContent(
2812
`
2913
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
14+
<h2>Rows: 1</h2>
3015
<ion-textarea
3116
rows="1"
3217
label="Small"
3318
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
3419
></ion-textarea>
35-
<ion-textarea
36-
rows="1"
37-
label="Medium"
38-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
39-
></ion-textarea>
40-
<ion-textarea
41-
rows="1"
42-
label="Large"
43-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
44-
></ion-textarea>
45-
<ion-textarea
46-
rows="3"
47-
label="Small"
48-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
49-
></ion-textarea>
20+
<h2>Rows: 3</h2>
5021
<ion-textarea
5122
rows="3"
5223
label="Medium"
5324
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
5425
></ion-textarea>
26+
<h2>Rows: 8</h2>
5527
<ion-textarea
56-
rows="3"
57-
label="Large"
58-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
59-
></ion-textarea>
60-
<ion-textarea
61-
rows="5"
62-
label="Small"
63-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
64-
></ion-textarea>
65-
<ion-textarea
66-
rows="5"
67-
label="Medium"
68-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
69-
></ion-textarea>
70-
<ion-textarea
71-
rows="5"
28+
rows="8"
7229
label="Large"
7330
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
7431
></ion-textarea>
@@ -85,18 +42,21 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
8542
await page.setContent(
8643
`
8744
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
45+
<h2>Rows: 3, Size Small</h2>
8846
<ion-textarea
8947
rows="3"
9048
size="small"
9149
label="Small Size"
9250
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
9351
></ion-textarea>
52+
<h2>Rows: 3, Size Medium</h2>
9453
<ion-textarea
9554
rows="3"
9655
size="medium"
9756
label="Medium Size"
9857
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
9958
></ion-textarea>
59+
<h2>Rows: 3, Size Large</h2>
10060
<ion-textarea
10161
rows="3"
10262
size="large"
@@ -112,56 +72,24 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
11272
await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
11373
});
11474

115-
test('should respect rows attribute with value content', async ({ page }) => {
116-
await page.setContent(
117-
`
118-
<ion-textarea
119-
rows="3"
120-
label="Comments"
121-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
122-
></ion-textarea>
123-
`,
124-
config
125-
);
126-
127-
const textarea = page.locator('ion-textarea');
128-
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-with-value`));
129-
});
130-
13175
test('should respect rows when auto-grow is enabled', async ({ page }) => {
13276
await page.setContent(
13377
`
134-
<ion-textarea
135-
rows="3"
136-
auto-grow="true"
137-
label="Comments"
138-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
139-
></ion-textarea>
140-
`,
141-
config
142-
);
143-
144-
const textarea = page.locator('ion-textarea');
145-
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
146-
});
147-
148-
test('should respect rows with start and end slot icons', async ({ page }) => {
149-
await page.setContent(
150-
`
151-
<ion-textarea
152-
rows="3"
153-
label="Comments"
154-
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
155-
>
156-
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
157-
<ion-icon slot="end" name="square-outline" aria-hidden="true"></ion-icon>
158-
</ion-textarea>
78+
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
79+
<h2>Rows: 3, Auto-grow</h2>
80+
<ion-textarea
81+
rows="3"
82+
auto-grow="true"
83+
label="Comments"
84+
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
85+
></ion-textarea>
86+
</div>
15987
`,
16088
config
16189
);
16290

163-
const textarea = page.locator('ion-textarea');
164-
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-end-slot-icon`));
91+
const container = page.locator('#container');
92+
await expect(container).toHaveScreenshot(screenshot(`textarea-rows-autogrow`));
16593
});
16694
});
16795
});

0 commit comments

Comments
 (0)