5024375e20
Some checks failed
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Failing after 52m26s
56 lines
No EOL
2.4 KiB
TypeScript
56 lines
No EOL
2.4 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { AxeBuilder } from '@axe-core/playwright';
|
|
|
|
test.describe('Accessible Tooltip Component', () => {
|
|
// Before each test, navigate to the specific EJS view serving the tooltip
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/test/tooltip'); // Resolves to http://localhost:3080/test/tooltip
|
|
});
|
|
|
|
test('should pass AAA accessibility audits', async ({ page }) => {
|
|
// Wait for the component to be fully hydrated
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Run the Axe-core engine against the page
|
|
const accessibilityScanResults = await new AxeBuilder({ page })
|
|
.withTags(['wcag2a', 'wcag2aa', 'wcag2aaa', 'best-practice'])
|
|
.analyze();
|
|
|
|
// If there are violations, the test fails and prints them in the console
|
|
expect(accessibilityScanResults.violations).toEqual([]);
|
|
});
|
|
|
|
test('should toggle the popover content natively', async ({ page }) => {
|
|
// Locate the button and the content div
|
|
// Notice how we don't care about the shadow boundary, we just use standard CSS selectors
|
|
const tooltipBtn = page.locator('.popover-btn');
|
|
const tooltipContent = page.locator('.tool-tip-content');
|
|
|
|
// Assert initial state (Popover should be hidden)
|
|
await expect(tooltipContent).not.toBeVisible();
|
|
|
|
// Interact
|
|
await tooltipBtn.click();
|
|
|
|
// Assert new state (Popover should be visible)
|
|
await expect(tooltipContent).toBeVisible();
|
|
|
|
// Test native accessibility behavior (Esc key to dismiss Popover)
|
|
await page.keyboard.press('Escape');
|
|
await expect(tooltipContent).not.toBeVisible();
|
|
});
|
|
|
|
test('visual regression: component renders correctly', async ({ page }) => {
|
|
const tooltipBtn = page.locator('.popover-btn');
|
|
const tooltipContent = page.locator('.tool-tip-content');
|
|
|
|
// Take a snapshot of just the button element
|
|
await expect(tooltipBtn).toHaveScreenshot('tooltip-button-closed.png');
|
|
|
|
// Open it and take a snapshot of the whole component area to catch layout shifts
|
|
await tooltipBtn.click();
|
|
await expect(tooltipContent).toBeVisible();
|
|
|
|
await expect(page.locator('.tool-tip-icon')).toHaveScreenshot('tooltip-container-open.png');
|
|
});
|
|
}); |