wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adds a11y testing and an interaction test on SiteHeader

Browse source
This commit is contained in:
hobbes7878 2025-04-19 19:18:39 +01:00
parent 55fd4399d3
commit d811a40485
Failed to extract signature
4 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.storybook/main.ts
View file

@ -7,6 +7,7 @@ const config: StorybookConfig = {
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
'@storybook/addon-a11y'
],
framework: {
name: '@storybook/sveltekit',

1
package.json
View file

@ -41,6 +41,7 @@
"@chromatic-com/storybook": "^3.2.6",
"@reuters-graphics/yaks-eslint": "^0.1.1",
"@reuters-graphics/yaks-prettier": "^0.1.1",
"@storybook/addon-a11y": "^8.6.12",
"@storybook/addon-essentials": "^8.6.12",
"@storybook/addon-interactions": "^8.6.12",
"@storybook/addon-svelte-csf": "5.0.0-next.28",

22
pnpm-lock.yaml
View file

@ -57,6 +57,9 @@ importers:
'@reuters-graphics/yaks-prettier':
specifier: ^0.1.1
version: 0.1.1(prettier@3.5.3)(svelte@5.28.1)(typescript@5.8.3)
'@storybook/addon-a11y':
specifier: ^8.6.12
version: 8.6.12(storybook@8.6.12(prettier@3.5.3))
'@storybook/addon-essentials':
specifier: ^8.6.12
version: 8.6.12(@types/react@18.3.20)(storybook@8.6.12(prettier@3.5.3))
@ -834,6 +837,11 @@ packages:
cpu: [x64]
os: [win32]
'@storybook/addon-a11y@8.6.12':
resolution: {integrity: sha512-H28zHiL8uuv29XsVNf9VjNWsCeht/l66GPYHT7aom1jh+f3fS9+sutrCGEBC/T7cnRpy8ZyuHCtihUqS+RI4pg==}
peerDependencies:
storybook: ^8.6.12
'@storybook/addon-actions@8.6.12':
resolution: {integrity: sha512-B5kfiRvi35oJ0NIo53CGH66H471A3XTzrfaa6SxXEJsgxxSeKScG5YeXcCvLiZfvANRQ7QDsmzPUgg0o3hdMXw==}
peerDependencies:
@ -1342,6 +1350,10 @@ packages:
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
engines: {node: '>= 0.4'}
axe-core@4.10.3:
resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
engines: {node: '>=4'}
axobject-query@4.1.0:
resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
engines: {node: '>= 0.4'}
@ -4698,6 +4710,14 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.40.0':
optional: true
'@storybook/addon-a11y@8.6.12(storybook@8.6.12(prettier@3.5.3))':
dependencies:
'@storybook/addon-highlight': 8.6.12(storybook@8.6.12(prettier@3.5.3))
'@storybook/global': 5.0.0
'@storybook/test': 8.6.12(storybook@8.6.12(prettier@3.5.3))
axe-core: 4.10.3
storybook: 8.6.12(prettier@3.5.3)
'@storybook/addon-actions@8.6.12(storybook@8.6.12(prettier@3.5.3))':
dependencies:
'@storybook/global': 5.0.0
@ -5377,6 +5397,8 @@ snapshots:
dependencies:
possible-typed-array-names: 1.1.0
axe-core@4.10.3: {}
axobject-query@4.1.0: {}
bail@2.0.2: {}

14
src/components/SiteHeader/SiteHeader.stories.svelte
View file

@ -1,5 +1,6 @@
<script module lang="ts">
import { defineMeta } from '@storybook/addon-svelte-csf';
import { expect, userEvent, within, waitFor } from '@storybook/test';
import SiteHeader from './SiteHeader.svelte';
import Theme from '../Theme/Theme.svelte';
@ -12,7 +13,18 @@
});
</script>
<Story name="Demo">
<Story
name="Demo"
play={async ({ canvasElement }) => {
const canvas = within(canvasElement);
await userEvent.click(canvas.getByText('More'));
await waitFor(() =>
expect(canvas.getByText('Graphics')).toBeInTheDocument()
);
await userEvent.click(canvas.getByText('World'));
await waitFor(() => expect(canvas.getByText('Europe')).toBeInTheDocument());
}}
>
<div>
<SiteHeader />
</div>