mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-03-01 12:44:28 +00:00
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import { AxeBuilder } from '@axe-core/playwright'
|
|
import { expect, test } from '@playwright/test'
|
|
|
|
import type { Page } from '@playwright/test'
|
|
|
|
/**
|
|
* Visual regression tests for OsIcon component
|
|
*
|
|
* These tests capture screenshots of Storybook stories and compare them
|
|
* against baseline images to detect unintended visual changes.
|
|
* Each test also runs accessibility checks using axe-core.
|
|
*/
|
|
|
|
const STORY_URL = '/iframe.html?id=components-osicon'
|
|
const STORY_ROOT = '#storybook-root'
|
|
|
|
/**
|
|
* Wait for all fonts to be loaded before taking screenshots
|
|
*/
|
|
async function waitForFonts(page: Page) {
|
|
await page.evaluate(async () => document.fonts.ready)
|
|
}
|
|
|
|
/**
|
|
* Helper to run accessibility check on the current page
|
|
*/
|
|
async function checkA11y(page: Page) {
|
|
const results = await new AxeBuilder({ page }).include(STORY_ROOT).analyze()
|
|
|
|
expect(results.violations).toEqual([])
|
|
}
|
|
|
|
test.describe('OsIcon keyboard accessibility', () => {
|
|
test('decorative icons are not focusable', async ({ page }) => {
|
|
await page.goto(`${STORY_URL}--all-icons&viewMode=story`)
|
|
const root = page.locator(STORY_ROOT)
|
|
await root.waitFor()
|
|
|
|
const icons = root.locator('.os-icon')
|
|
const count = await icons.count()
|
|
|
|
expect(count).toBeGreaterThan(0)
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const icon = icons.nth(i)
|
|
|
|
await expect(icon).toHaveAttribute('aria-hidden', 'true')
|
|
}
|
|
})
|
|
})
|
|
|
|
test.describe('OsIcon visual regression', () => {
|
|
test('all icons', async ({ page }) => {
|
|
await page.goto(`${STORY_URL}--all-icons&viewMode=story`)
|
|
const root = page.locator(STORY_ROOT)
|
|
await root.waitFor()
|
|
await waitForFonts(page)
|
|
|
|
await expect(root.locator('.grid')).toHaveScreenshot('all-icons.png')
|
|
|
|
await checkA11y(page)
|
|
})
|
|
|
|
test('all sizes', async ({ page }) => {
|
|
await page.goto(`${STORY_URL}--all-sizes&viewMode=story`)
|
|
const root = page.locator(STORY_ROOT)
|
|
await root.waitFor()
|
|
await waitForFonts(page)
|
|
|
|
await expect(root.locator('[data-testid="all-sizes"]')).toHaveScreenshot('all-sizes.png')
|
|
|
|
await checkA11y(page)
|
|
})
|
|
|
|
test('custom component', async ({ page }) => {
|
|
await page.goto(`${STORY_URL}--custom-component&viewMode=story`)
|
|
const root = page.locator(STORY_ROOT)
|
|
await root.waitFor()
|
|
await waitForFonts(page)
|
|
|
|
await expect(root.locator('[data-testid="custom-component"]')).toHaveScreenshot(
|
|
'custom-component.png',
|
|
)
|
|
|
|
await checkA11y(page)
|
|
})
|
|
|
|
test('inherit color', async ({ page }) => {
|
|
await page.goto(`${STORY_URL}--inherit-color&viewMode=story`)
|
|
const root = page.locator(STORY_ROOT)
|
|
await root.waitFor()
|
|
await waitForFonts(page)
|
|
|
|
await expect(root.locator('[data-testid="inherit-color"]')).toHaveScreenshot(
|
|
'inherit-color.png',
|
|
)
|
|
|
|
await checkA11y(page)
|
|
})
|
|
})
|