javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Adding tests

Browse Source
This commit is contained in:
rug
2026-02-16 10:25:58 +01:00
parent 8e44a84090
commit 6d2cf2f277
2 changed files with 351 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
core/src/components/textarea/test/rows/index.html Normal file
View File

@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Textarea - Rows</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(250px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 20px;
}
h2 {
font-size: 12px;
font-weight: normal;
color: #6f7378;
margin-top: 10px;
}
@media screen and (max-width: 800px) {
.grid {
grid-template-columns: 1fr;
padding: 0;
}
}
</style>
</head>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Textarea - Rows</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" class="ion-padding">
<div class="grid">
<div class="grid-item">
<h2>Rows: 3</h2>
<ion-textarea
rows="3"
label="Comments"
label-placement="stacked"
helper-text="rows=3, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 2</h2>
<ion-textarea
rows="2"
label="Small"
label-placement="stacked"
helper-text="rows=2, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 5</h2>
<ion-textarea
rows="5"
label="Medium"
label-placement="stacked"
helper-text="rows=5, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 8</h2>
<ion-textarea
rows="8"
label="Large"
label-placement="stacked"
helper-text="rows=8, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 3, Size Small</h2>
<ion-textarea
rows="3"
size="small"
label="Small Size"
label-placement="stacked"
helper-text="rows=3, size=small, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 3, Size Medium</h2>
<ion-textarea
rows="3"
size="medium"
label="Medium Size"
label-placement="stacked"
helper-text="rows=3, size=medium, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 3, Size Large</h2>
<ion-textarea
rows="3"
size="large"
label="Large Size"
label-placement="stacked"
helper-text="rows=3, size=large, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
<div class="grid-item">
<h2>Rows: 3, Auto-grow</h2>
<ion-textarea
rows="3"
auto-grow="true"
label="Comments"
label-placement="stacked"
helper-text="rows=3, auto-grow=true, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
</div>
</ion-content>
</ion-app>
</body>
</html>

207
core/src/components/textarea/test/rows/textarea.e2e.ts Normal file
View File

@@ -0,0 +1,207 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
/**
* Rows attribute is only available in the Ionic theme.
* When set, it increases the container min-height to accommodate the number of rows.
*/
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('textarea: rows'), () => {
test('should respect rows attribute and set min-height', async ({ page }) => {
await page.setContent(
`
<ion-textarea
rows="3"
label="Comments"
label-placement="stacked"
helper-text="rows=3, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
`,
config
);
const textarea = page.locator('ion-textarea');
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3`));
});
test('should respect rows attribute with different values', async ({ page }) => {
await page.setContent(
`
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
<ion-textarea
rows="1"
label="Small"
label-placement="stacked"
helper-text="rows=2, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="1"
label="Medium"
label-placement="stacked"
helper-text="rows=5, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="1"
label="Large"
label-placement="stacked"
helper-text="rows=8, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="3"
label="Small"
label-placement="stacked"
helper-text="rows=2, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="3"
label="Medium"
label-placement="stacked"
helper-text="rows=5, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="3"
label="Large"
label-placement="stacked"
helper-text="rows=8, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="5"
label="Small"
label-placement="stacked"
helper-text="rows=2, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="5"
label="Medium"
label-placement="stacked"
helper-text="rows=5, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="5"
label="Large"
label-placement="stacked"
helper-text="rows=8, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
`,
config
);
const container = page.locator('#container');
await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`));
});
test('should respect rows attribute with fill outline and solid', async ({ page }) => {
await page.setContent(
`
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
<ion-textarea
rows="4"
fill="outline"
label="Outline"
label-placement="stacked"
helper-text="rows=4, fill=outline, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="4"
fill="solid"
label="Solid"
label-placement="stacked"
helper-text="rows=4, fill=solid, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
`,
config
);
const container = page.locator('#container');
await expect(container).toHaveScreenshot(screenshot(`textarea-rows-4-fill`));
});
test('should respect rows attribute with different sizes', async ({ page }) => {
await page.setContent(
`
<div id="container" style="display: flex; flex-direction: column; gap: 20px;">
<ion-textarea
rows="3"
size="small"
label="Small Size"
label-placement="stacked"
helper-text="rows=3, size=small, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="3"
size="medium"
label="Medium Size"
label-placement="stacked"
helper-text="rows=3, size=medium, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
<ion-textarea
rows="3"
size="large"
label="Large Size"
label-placement="stacked"
helper-text="rows=3, size=large, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
</div>
`,
config
);
const container = page.locator('#container');
await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-sizes`));
});
test('should respect rows attribute with value content', async ({ page }) => {
await page.setContent(
`
<ion-textarea
rows="3"
label="Comments"
label-placement="stacked"
helper-text="rows=3, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
`,
config
);
const textarea = page.locator('ion-textarea');
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-with-value`));
});
test('should respect rows when auto-grow is enabled', async ({ page }) => {
await page.setContent(
`
<ion-textarea
rows="3"
auto-grow="true"
label="Comments"
label-placement="stacked"
helper-text="rows=3, auto-grow=true, label-placement=stacked"
value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
></ion-textarea>
`,
config
);
const textarea = page.locator('ion-textarea');
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
});
});
});