-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
♻️ [open-formulieren/open-forms#5016] Replace react-select-event with…
… custom helper selectEvent from react-select-event was causing issues when used with a storybook production build
- Loading branch information
Showing
11 changed files
with
56 additions
and
126 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,17 @@ | ||
| declare module '@/utils/storybookTestHelpers' { | ||
| import {Screen} from '@testing-library/react'; | ||
| import {within} from '@storybook/test'; | ||
|
|
||
| /** | ||
| * Wrapper around selectEvent.select to ensure the portal option is used. | ||
| * | ||
| * @param canvas - The canvas where the input is present. | ||
| * @param input - The input element associated with the react-select component. | ||
| * @param optionOrOptions - The option or options to select. | ||
| * @returns A promise that resolves when the select event is triggered. | ||
| */ | ||
| export function rsSelect(input: HTMLElement, optionOrOptions: string | string[]): Promise<void>; | ||
|
|
||
| /** | ||
| * From the input field (retrieved by accessible queries), find the react-select container. | ||
| * | ||
| * Usage: | ||
| * | ||
| * const dropdown = canvas.getByLabelText('My dropdown'); | ||
| * const container = getReactSelectContainer(dropdown); | ||
| * const options = within(container).queryByRole('option'); | ||
| * | ||
| * @param comboboxInput - The combobox input element. | ||
| * @returns The react-select container element or null if not found. | ||
| */ | ||
| export function getReactSelectContainer(comboboxInput: HTMLElement): HTMLElement | null; | ||
|
|
||
| /** | ||
| * Get the (portaled) opened react-select menu. | ||
| * | ||
| * @param canvas - The canvas object from Storybook's testing-library. | ||
| * @returns A promise that resolves to the listbox element. | ||
| */ | ||
| export function findReactSelectMenu(canvas: Screen): Promise<HTMLElement>; | ||
| export function rsSelect( | ||
| canvas: ReturnType<typeof within>, | ||
| input: HTMLElement, | ||
| optionOrOptions: string | string[] | ||
| ): Promise<void>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,19 @@ | ||
| import {ByRoleOptions, Screen} from '@testing-library/react'; | ||
| import selectEvent from 'react-select-event'; | ||
|
|
||
| const SB_ROOT: HTMLElement | null = document.getElementById('storybook-root'); | ||
| import {userEvent, within} from '@storybook/test'; | ||
|
|
||
| /** | ||
| * Wrapper around selectEvent.select to ensure the portal option is used. | ||
| * Wrapper to select an option in a react-select component | ||
| * | ||
| * @param canvas - The canvas where the input is present. | ||
| * @param input - The input element associated with the react-select component. | ||
| * @param optionOrOptions - The option or options to select. | ||
| */ | ||
| const rsSelect = async (input: HTMLElement, optionOrOptions: string | string[]): Promise<void> => { | ||
| if (!SB_ROOT) { | ||
| throw new Error('storybook-root element not found in the DOM.'); | ||
| } | ||
| await selectEvent.select(input, optionOrOptions, {container: SB_ROOT}); | ||
| }; | ||
|
|
||
| /** | ||
| * From the input field (retrieved by accessible queries), find the react-select container. | ||
| * | ||
| * Usage: | ||
| * | ||
| * const dropdown = canvas.getByLabelText('My dropdown'); | ||
| * const container = getReactSelectContainer(dropdown); | ||
| * const options = within(container).queryByRole('option'); | ||
| * | ||
| * @param comboboxInput - The combobox input element. | ||
| * @returns The react-select container element or null if not found. | ||
| */ | ||
| const getReactSelectContainer = (comboboxInput: HTMLElement): HTMLElement | null => { | ||
| return comboboxInput.closest('.admin-react-select'); | ||
| }; | ||
|
|
||
| /** | ||
| * Get the (portaled) opened react-select menu. | ||
| * | ||
| * @param canvas - The canvas object from Storybook's testing-library. | ||
| * @param options - Optional options for querying the listbox. | ||
| * @returns A promise that resolves to the listbox element. | ||
| */ | ||
| const findReactSelectMenu = async ( | ||
| canvas: Screen, | ||
| options?: ByRoleOptions | ||
| ): Promise<HTMLElement> => { | ||
| return await canvas.findByRole('listbox', options); | ||
| const rsSelect = async ( | ||
| canvas: ReturnType<typeof within>, | ||
| input: HTMLElement, | ||
| optionOrOptions: string | string[] | ||
| ): Promise<void> => { | ||
| await userEvent.click(input); | ||
| await userEvent.click(await canvas.findByText(optionOrOptions)); | ||
| }; | ||
|
|
||
| export {rsSelect, getReactSelectContainer, findReactSelectMenu}; | ||
| export {rsSelect}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters