test(label): migrate e2e tests to playwright (#25932)
Liam DeBeasi
49
core/src/components/label/test/basic/label.e2e.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('label: rendering', () => {
|
||||
test('should not have visual regressions', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-label>My Label</ion-label>
|
||||
`);
|
||||
|
||||
const labelEl = page.locator('ion-label');
|
||||
|
||||
expect(await labelEl.screenshot()).toMatchSnapshot(`label-basic-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should not have visual regressions with fixed label', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-item>
|
||||
<ion-label>My Label</ion-label>
|
||||
</ion-item>
|
||||
`);
|
||||
|
||||
const itemEl = page.locator('ion-item');
|
||||
|
||||
expect(await itemEl.screenshot()).toMatchSnapshot(`label-fixed-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should not have visual regressions with stacked label', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-item>
|
||||
<ion-label position="stacked">My Label</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
`);
|
||||
|
||||
const itemEl = page.locator('ion-item');
|
||||
|
||||
expect(await itemEl.screenshot()).toMatchSnapshot(`label-stacked-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should not have visual regressions with floating label', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-item>
|
||||
<ion-label position="floating">My Label</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
`);
|
||||
|
||||
const itemEl = page.locator('ion-item');
|
||||
|
||||
expect(await itemEl.screenshot()).toMatchSnapshot(`label-floating-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.1 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: color', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/color?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
46
core/src/components/label/test/color/label.e2e.ts
Normal file
@ -0,0 +1,46 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('label: rendering', () => {
|
||||
test.beforeEach(({ skip }) => {
|
||||
skip.rtl();
|
||||
});
|
||||
test('should not inherit color from content', async ({ page }) => {
|
||||
await page.goto(`/src/components/label/test/color`);
|
||||
|
||||
const item = page.locator('ion-item');
|
||||
|
||||
expect(await item.screenshot()).toMatchSnapshot(`item-color-inherit-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should set color directly', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-label color="danger">Label Text</ion-label>
|
||||
`);
|
||||
|
||||
const labelEl = page.locator('ion-label');
|
||||
|
||||
expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should use contrast color when color is set on item', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-item color="danger">
|
||||
<ion-label>Label Text</ion-label>
|
||||
</ion-item>
|
||||
`);
|
||||
|
||||
const labelEl = page.locator('ion-label');
|
||||
|
||||
expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-contrast-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
test('should override color even if color set on item', async ({ page }) => {
|
||||
await page.setContent(`
|
||||
<ion-item color="danger">
|
||||
<ion-label color="dark">Label Text</ion-label>
|
||||
</ion-item>
|
||||
`);
|
||||
|
||||
const labelEl = page.locator('ion-label');
|
||||
|
||||
expect(await labelEl.screenshot()).toMatchSnapshot(`label-color-override-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,122 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Floating</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
|
||||
/>
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Label - Floating</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Placeholders</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input placeholder="Placeholder Text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea placeholder="Placeholder Text"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime placeholder="Placeholder Text"></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select placeholder="Placeholder Text">
|
||||
<ion-select-option>Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>Values</ion-label>
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Input</ion-label>
|
||||
<ion-input value="Input Value"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Textarea</ion-label>
|
||||
<ion-textarea value="Textarea Value"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Datetime</ion-label>
|
||||
<ion-datetime value="2020-03-04"></ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Select</ion-label>
|
||||
<ion-select value="option">
|
||||
<ion-select-option value="option">Option</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
ion-content {
|
||||
--background: #f6f6f6;
|
||||
}
|
||||
|
||||
ion-list {
|
||||
background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: headings', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/headings?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
13
core/src/components/label/test/headings/label.e2e.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { expect } from '@playwright/test';
|
||||
import { test } from '@utils/test/playwright';
|
||||
|
||||
test.describe('label: rendering', () => {
|
||||
test.beforeEach(({ skip }) => {
|
||||
skip.rtl();
|
||||
});
|
||||
test('should inherit text overflow for headings', async ({ page }) => {
|
||||
await page.goto(`/src/components/label/test/headings`);
|
||||
|
||||
expect(await page.screenshot()).toMatchSnapshot(`item-headings-inherit-${page.getSnapshotSettings()}.png`);
|
||||
});
|
||||
});
|
||||
|
After Width: | Height: | Size: 144 KiB |
|
After Width: | Height: | Size: 59 KiB |
|
After Width: | Height: | Size: 140 KiB |
|
After Width: | Height: | Size: 137 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 129 KiB |
@ -1,10 +0,0 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('label: standalone', async () => {
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/label/test/standalone?ionic:_testing=true',
|
||||
});
|
||||
|
||||
const compare = await page.compareScreenshot();
|
||||
expect(compare).toMatchScreenshot();
|
||||
});
|
||||
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Label - Standalone</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/core.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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Default</h1>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-label>Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-label position="floating" style="margin-bottom: 30px">Floating</ion-label>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
|
||||
<h1>Colors</h1>
|
||||
<ion-label color="primary">Primary</ion-label>
|
||||
<ion-label color="secondary">Secondary</ion-label>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-label color="success">Success</ion-label>
|
||||
<ion-label color="warning">Warning</ion-label>
|
||||
<ion-label color="danger">Danger</ion-label>
|
||||
<ion-label color="light">Light</ion-label>
|
||||
<ion-label color="medium">Medium</ion-label>
|
||||
<ion-label color="dark" class="custom">Dark</ion-label>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
|
||||
<style>
|
||||
.custom {
|
||||
--color: hotpink;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||