mocking & accessibility

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Button component ariaLabel prop for accessibility

The Button component requires an ariaLabel prop for accessibility to provide a label for screen readers. When the button's text content already conveys meaning, ariaLabel can be set to false to indicate the content is already readable by screen readers.

Icon-only buttons require ariaLabel

When creating icon-only buttons, the ariaLabel prop is mandatory to ensure accessibility. The ariaLabel should describe the action performed when the button is clicked, such as 'Like' or 'Delete'. The Button will automatically display a tooltip based on the ariaLabel content when hovered.

Mock external dependencies in preview file

To mock external dependencies in Storybook, use `sb.mock()` from 'storybook/test' in the .storybook/preview.ts file. Use file extensions when mocking relative files. Example: `sb.mock(import('some-library'), { spy: true })` or `sb.mock(import('./relative/module.ts'), { spy: true })`.

Override mock values per-story with beforeEach

Override mock behavior per-story using `beforeEach` and the `mocked()` type function from 'storybook/test'. Example: In meta, set `beforeEach: async () => { mocked(library).mockResolvedValue({ user: 'data' }); }` to configure mock behavior for specific stories.

GraphQL mocking with MSW addon requires Vue Apollo Composable

When working with Vue 3 and Storybook's MSW addon for mocking GraphQL queries, you must install @vue/apollo-composable.

Svelte GraphQL mocking requires @rollup/plugin-replace configuration

With Svelte and MSW addon for GraphQL mocking, install @rollup/plugin-replace and configure rollup.config.js to replace process.env.NODE_ENV with 'development' to allow GraphQL queries to work properly.

Angular GraphQL mocking mockServiceWorker.js file placement

With Angular and MSW addon, the most common issue is incorrect placement of the mockServiceWorker.js file. Refer to the MSW examples repository at https://github.com/mswjs/examples/tree/main/examples/with-angular as a point of reference.

MSW addon supports other GraphQL providers

Multiple GraphQL providers can be used with Storybook's MSW addon. Examples for integrating different providers are available in the addon's examples repository.

MSW addon does not support GraphQL mutations

The MSW addon currently only has support for GraphQL queries, not mutations. Feature requests should be opened in the MSW addon repository.

Give your agent this brain