5024375e20
Some checks failed
Build, Test, and Publish (to Private NPM Registry) UI Components Library / publish (push) Failing after 52m26s
73 lines
No EOL
2.8 KiB
TypeScript
73 lines
No EOL
2.8 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { AxeBuilder } from '@axe-core/playwright';
|
|
|
|
test.describe('Accessible Drawer Component', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Navigate to the test harness view for the drawer
|
|
await page.goto('/test/drawer');
|
|
});
|
|
|
|
test('should pass AAA accessibility audits', async ({ page }) => {
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const accessibilityScanResults = await new AxeBuilder({ page })
|
|
.withTags(['wcag2a', 'wcag2aa', 'wcag2aaa', 'best-practice'])
|
|
.analyze();
|
|
|
|
expect(accessibilityScanResults.violations).toEqual([]);
|
|
});
|
|
|
|
test('should toggle content visibility and ARIA states via mouse click', async ({ page }) => {
|
|
const drawerHeader = page.locator('#example-drawer-drawer-header');
|
|
const drawerContent = page.locator('#example-drawer-drawer-contents');
|
|
|
|
// Assert Initial State
|
|
await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
|
|
await expect(drawerContent).toHaveClass(/hidden/);
|
|
|
|
// Interact (Open)
|
|
await drawerHeader.click();
|
|
|
|
// Assert Open State
|
|
await expect(drawerHeader).toHaveAttribute('aria-expanded', 'true');
|
|
await expect(drawerContent).not.toHaveClass(/hidden/);
|
|
|
|
// Interact (Close)
|
|
await drawerHeader.click();
|
|
|
|
// Assert Closed State
|
|
await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
|
|
await expect(drawerContent).toHaveClass(/hidden/);
|
|
});
|
|
|
|
test('should toggle content visibility via keyboard navigation', async ({ page }) => {
|
|
const drawerHeader = page.locator('#example-drawer-drawer-header');
|
|
const drawerContent = page.locator('#example-drawer-drawer-contents');
|
|
|
|
// Focus the drawer header using the keyboard
|
|
await page.keyboard.press('Tab');
|
|
await expect(drawerHeader).toBeFocused();
|
|
|
|
// Open with Space
|
|
await page.keyboard.press(' ');
|
|
await expect(drawerHeader).toHaveAttribute('aria-expanded', 'true');
|
|
await expect(drawerContent).not.toHaveClass(/hidden/);
|
|
|
|
// Close with Enter
|
|
await page.keyboard.press('Enter');
|
|
await expect(drawerHeader).toHaveAttribute('aria-expanded', 'false');
|
|
await expect(drawerContent).toHaveClass(/hidden/);
|
|
});
|
|
|
|
test('visual regression: component renders correctly', async ({ page }) => {
|
|
const drawerContainer = page.locator('#example-drawer');
|
|
const drawerHeader = page.locator('#example-drawer-drawer-header');
|
|
|
|
// Snapshot the closed state
|
|
await expect(drawerContainer).toHaveScreenshot('drawer-closed.png');
|
|
|
|
// Snapshot the open state
|
|
await drawerHeader.click();
|
|
await expect(drawerContainer).toHaveScreenshot('drawer-open.png');
|
|
});
|
|
}); |