mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
test(fab-button): migrate tests to Playwright (#25988)
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Amanda Johnston
16
core/src/components/fab-button/test/a11y/fab-button.e2e.ts
Normal file
16
core/src/components/fab-button/test/a11y/fab-button.e2e.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
test.describe('fab-button: aria attributes', () => {
|
||||||
|
test('should inherit aria attributes to inner button', async ({ page, skip }) => {
|
||||||
|
skip.rtl();
|
||||||
|
skip.mode('ios');
|
||||||
|
|
||||||
|
await page.setContent(`
|
||||||
|
<ion-fab-button aria-label="Hello World">My Button</ion-fab-button>
|
||||||
|
`);
|
||||||
|
|
||||||
|
const nativeButton = page.locator('ion-fab-button button');
|
||||||
|
await expect(nativeButton).toHaveAttribute('aria-label', 'Hello World');
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { newSpecPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
import { FabButton } from '../fab-button';
|
|
||||||
|
|
||||||
describe('fab-button: aria attributes', () => {
|
|
||||||
it('should inherit aria attributes to inner <button>', async () => {
|
|
||||||
const page = await newSpecPage({
|
|
||||||
components: [FabButton],
|
|
||||||
html: `
|
|
||||||
<ion-fab-button aria-label="Hello World">My Button</ion-fab-button>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
const fabButton = page.body.querySelector('ion-fab-button');
|
|
||||||
const root = fabButton.shadowRoot;
|
|
||||||
const nativeButton = root.querySelector('button');
|
|
||||||
expect(nativeButton.getAttribute('aria-label')).toEqual('Hello World');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import { newE2EPage } from '@stencil/core/testing';
|
|
||||||
|
|
||||||
test('fab-button: standalone', async () => {
|
|
||||||
const page = await newE2EPage({
|
|
||||||
url: '/src/components/fab-button/test/standalone?ionic:_testing=true',
|
|
||||||
});
|
|
||||||
|
|
||||||
const compare = await page.compareScreenshot();
|
|
||||||
expect(compare).toMatchScreenshot();
|
|
||||||
});
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en" dir="ltr">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>Floating Action Button - 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>
|
|
||||||
<h3>Default</h3>
|
|
||||||
<p>
|
|
||||||
<ion-fab-button>Default</ion-fab-button>
|
|
||||||
<ion-fab-button><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button size="small">Mini</ion-fab-button>
|
|
||||||
<ion-fab-button size="small"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list">In List</ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button size="small" class="fab-button-in-list"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list ion-activated"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button size="small" class="fab-button-in-list ion-activated"
|
|
||||||
><ion-icon name="star"></ion-icon
|
|
||||||
></ion-fab-button>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Colors</h3>
|
|
||||||
<p>
|
|
||||||
<ion-fab-button color="primary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="secondary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="tertiary"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="success"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="warning"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="danger"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="light"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="medium"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="dark"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<ion-fab-button color="primary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="secondary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="tertiary" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="success" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="warning" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="danger" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="light" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="medium" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="dark" class="ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<h3>Custom</h3>
|
|
||||||
|
|
||||||
<!-- Custom Font -->
|
|
||||||
<ion-fab-button class="large">large</ion-fab-button>
|
|
||||||
|
|
||||||
<!-- Custom Colors -->
|
|
||||||
<ion-fab-button class="custom"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="custom ion-activated"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button color="secondary" class="custom"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
|
|
||||||
<!-- Custom Colors Fab In List -->
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-white">White</ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated">White</ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-white"><ion-icon name="heart"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-white ion-activated"
|
|
||||||
><ion-icon name="heart"></ion-icon
|
|
||||||
></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-blue"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-blue ion-activated"
|
|
||||||
><ion-icon name="star"></ion-icon
|
|
||||||
></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-border">Border</ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated">Border</ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-border"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
<ion-fab-button class="fab-button-in-list custom-border ion-activated"
|
|
||||||
><ion-icon name="star"></ion-icon
|
|
||||||
></ion-fab-button>
|
|
||||||
|
|
||||||
<ion-fab slot="fixed" horizontal="center" vertical="bottom">
|
|
||||||
<ion-fab-button class="custom-close"><ion-icon name="star"></ion-icon></ion-fab-button>
|
|
||||||
|
|
||||||
<ion-fab-list side="top">
|
|
||||||
<ion-fab-button>
|
|
||||||
<ion-icon name="heart"></ion-icon>
|
|
||||||
</ion-fab-button>
|
|
||||||
<ion-fab-button>
|
|
||||||
<ion-icon name="square"></ion-icon>
|
|
||||||
</ion-fab-button>
|
|
||||||
<ion-fab-button>
|
|
||||||
<ion-icon name="triangle"></ion-icon>
|
|
||||||
</ion-fab-button>
|
|
||||||
</ion-fab-list>
|
|
||||||
</ion-fab>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
ion-fab-button {
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.large {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom {
|
|
||||||
--background: lightpink;
|
|
||||||
--background-activated: green;
|
|
||||||
--color: blue;
|
|
||||||
--color-activated: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-white {
|
|
||||||
--background: white;
|
|
||||||
--background-activated: #f6f6f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-blue {
|
|
||||||
--background: #add8e6;
|
|
||||||
--background-activated: #7cb2c4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-border {
|
|
||||||
--border-radius: 10px;
|
|
||||||
--border-width: 2px;
|
|
||||||
--border-style: dashed;
|
|
||||||
--border-color: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
.custom-close::part(close-icon) {
|
|
||||||
color: red;
|
|
||||||
|
|
||||||
font-size: 44px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user