mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Adding tests
This commit is contained in:
rug
144
core/src/components/textarea/test/rows/index.html
Normal file
144
core/src/components/textarea/test/rows/index.html
Normal 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-content>
|
||||||
|
</ion-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
207
core/src/components/textarea/test/rows/textarea.e2e.ts
Normal file
207
core/src/components/textarea/test/rows/textarea.e2e.ts
Normal 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="1"
|
||||||
|
label="Medium"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=5, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="1"
|
||||||
|
label="Large"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=8, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="3"
|
||||||
|
label="Small"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=2, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="3"
|
||||||
|
label="Medium"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=5, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="3"
|
||||||
|
label="Large"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=8, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="5"
|
||||||
|
label="Small"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=2, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="5"
|
||||||
|
label="Medium"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=5, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
<ion-textarea
|
||||||
|
rows="5"
|
||||||
|
label="Large"
|
||||||
|
label-placement="stacked"
|
||||||
|
helper-text="rows=8, label-placement=stacked"
|
||||||
|
value="1 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 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 2 3 4 5 6 7 8 9 0"
|
||||||
|
></ion-textarea>
|
||||||
|
`,
|
||||||
|
config
|
||||||
|
);
|
||||||
|
|
||||||
|
const textarea = page.locator('ion-textarea');
|
||||||
|
await expect(textarea).toHaveScreenshot(screenshot(`textarea-rows-3-autogrow`));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user