Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(component): add onOpen and onClose to Selects #549

Merged
merged 1 commit into from
Jun 10, 2021

Conversation

jorgemoya
Copy link
Contributor

What?

Add onOpen and onClose props to Selects.

Why?

For some interactions on the Worksheet component (and other uses), I need to know when the dropdown has been opened or closed.

Testing/Proof

Unit tests and locally

@jorgemoya jorgemoya requested review from a team as code owners June 10, 2021 18:47
@jorgemoya jorgemoya merged commit 233d8b7 into bigcommerce:master Jun 10, 2021

expect(onClose).toHaveBeenCalled();

await waitForElement(() => queryByRole('listbox'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

queryBy* should only be used for querying when the element is not present: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-query-variants-for-anything-except-checking-for-non-existence

in this case we should use findByRole which does the wait for you:

const listbox = await findByRole('listbox');

expect(listbox).toBeInTheDocument();

});

test('closing the MultiSelect triggers onClose', async () => {
const { getAllByRole, queryByRole } = render(MultiSelectMock);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is recommended to use screen instead of using the output of render.

render(MultiSelectMock);

const button = screen.getAllByRole('button')[2];


test('closing the MultiSelect triggers onClose', async () => {
const { getAllByRole, queryByRole } = render(MultiSelectMock);
const button = getAllByRole('button')[2];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is better to target the actual button as opposed to use [2]. Not sure if it is feasible in this case, but it is better to use getByRole('button', { name: /text of the button/i })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

3 participants