BraidTestProvider: Align mock with real IntersectionObserver API
BraidTestProvider: Use stubs instead of mocks to fill missing APIs in jsdom
This change allows the BraidTestProvider to be framework agnostic for tests and discourages testing the stubbed browser APIs directly.
BraidTestProvider: Provide ResizeObserver & IntersectionObserver stubs to jsdom
Fixes an issue where rendering certain Braid components within a test environment could throw errors due to missing APIs in jsdom, causing tests to fail with the following error:
ReferenceError: IntersectionObserver is not defined
BraidTestProvider: Provide scrollIntoView stub function for jsdom
Fixes an issue where scrollIntoView is not defined in jsdom, causing tests to fail with the following error:
Error: Uncaught [TypeError: highlightedItem?.scrollIntoView is not a function]
BraidTestProvider: Move to separate entry
By moving BraidTestProvider to it’s own entry, we can prevent importing all the themes at dev-time. This improves the developer experience when debugging the stylesheet that is output by the development server.
MIGRATION GUIDE
Migration can largely be automated by running the Braid upgrade command. You must provide a glob to target your project’s source files. For example:
yarn braid-upgrade v31 "**/*.{ts,tsx}"
It may be necessary to manually migrate code in some cases, here are the affected use cases:
- import { BraidTestProvider } from 'braid-design-system'; + import { BraidTestProvider } from 'braid-design-system/test';
Added support for refs on Link
Forwarding refs is necessary for certain accessibility patterns (e.g. managing focus states), but the Link component wasn't doing this correctly.
Please note that, if you're passing a custom linkComponent implementation to BraidProvider, you'll need to ensure that you're using the new makeLinkComponent helper function to forward refs, otherwise any attempt to pass a ref to Link will throw an error.
MIGRATION GUIDE
-import { BraidProvider, LinkComponent } from 'braid-design-system'; +import { BraidProvider, makeLinkComponent } from 'braid-design-system'; -const CustomLink: LinkComponent = ({ href, ...restProps }) => +const CustomLink = makeLinkComponent({ href, ...restProps }, ref) => href[0] === '/' ? ( - <ReactRouterLink to={href} {...restProps} /> + <ReactRouterLink to={href} {...restProps} ref={ref} /> ) : ( - <a href={href} {...restProps} /> + <a href={href} {...restProps} ref={ref} /> ); export const App = () => ( <BraidProvider linkComponent={CustomLink} {...rest}> ... </BraidProvider> );
Add BraidTestProvider component.
This is an alternative to BraidProvider for unit test environments. Note that, as the name implies, this should not be used in production code.
MIGRATION GUIDE
In your unit tests, you can replace usage of BraidProvider with BraidTestProvider, omitting the theme.
-<BraidProvider theme={wireframe}> +<BraidTestProvider>
If for whatever reason your tests are relying on the presence of a specific theme, you can pass the name of the desired theme.
-<BraidProvider theme={seekAnz}> +<BraidTestProvider themeName="seekAnz">