diff --git a/src/components/AutosuggestDeprecated/__tests__/__snapshots__/AutosuggestDeprecated.spec.js.snap b/src/components/AutosuggestDeprecated/__tests__/__snapshots__/AutosuggestDeprecated.spec.js.snap index 2b23a42ef..bd5bbfad0 100644 --- a/src/components/AutosuggestDeprecated/__tests__/__snapshots__/AutosuggestDeprecated.spec.js.snap +++ b/src/components/AutosuggestDeprecated/__tests__/__snapshots__/AutosuggestDeprecated.spec.js.snap @@ -239,7 +239,7 @@ exports[`AutosuggestDeprecated rendering should render all suggestions from the onClick={[Function]} onMouseDown={[Function]} onMouseMove={[Function]} - role="presentation" + role="option" >
  • { const mockOnDropdownStateChange = jest.fn(); let view; + const getInteractiveListItemAt = (index) => screen.getAllByRole('option')[index]; + beforeEach(() => { view = render( { it('should render correctly closed', () => { expect(view.container).toMatchSnapshot(); - expect(screen.queryAllByRole('presentation')).toHaveLength(0); + expect(screen.queryAllByRole('option')).toHaveLength(0); + expect(screen.queryAllByRole('listitem')).toHaveLength(0); }); it('should render correctly opened', async () => { - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); + const user = userEvent.setup(); + await user.click(screen.getByRole('button', { name: 'Click me!' })); + expect(view.container).toMatchSnapshot(); expect(screen.getAllByRole('listbox')).toHaveLength(1); - expect(screen.getAllByRole('presentation')).toHaveLength(2); + expect(screen.getAllByRole('option')).toHaveLength(1); + expect(screen.getAllByRole('listitem')).toHaveLength(1); }); - it('should downshift only by enabled items with value', async () => { - const { container } = render( + it('should access only enabled items with value during keyboard navigation', async () => { + const user = userEvent.setup(); + view.rerender( Click me!} onChange={mockOnChange} @@ -70,26 +77,29 @@ describe('Dropdown', () => { ); - await userEvent.click(screen.getAllByRole('button', { name: 'Click me!' })[1]); - expect(container).toMatchSnapshot(); - const keyDown = () => userEvent.click(screen.getAllByRole('listbox')[1]); + await user.click(screen.getByRole('button', { name: 'Click me!' })); + expect(view.container).toMatchSnapshot(); + // focus list + await user.click(screen.getByRole('listbox')); + const navigateDown = async () => user.keyboard('[ArrowDown]'); // 1 keydown - keyDown(); - expect(screen.getAllByRole('presentation')[1].getAttribute('aria-selected')).toBeTruthy(); - expect(screen.getAllByRole('presentation')[1]).toHaveTextContent('With value 1'); + await navigateDown(); + expect(getInteractiveListItemAt(0).getAttribute('aria-selected')).toBeTruthy(); + expect(getInteractiveListItemAt(0)).toHaveTextContent('With value 1'); // 2 keydown - keyDown(); - expect(screen.getAllByRole('presentation')[3].getAttribute('aria-selected')).toBeTruthy(); - expect(screen.getAllByRole('presentation')[3]).toHaveTextContent('With value 2'); + await navigateDown(); + expect(getInteractiveListItemAt(1).getAttribute('aria-selected')).toBeTruthy(); + expect(getInteractiveListItemAt(1)).toHaveTextContent('With value 2'); // 3 keydown. Should be again last not disabled with value item => 'With value 2' - keyDown(); - expect(screen.getAllByRole('presentation')[3].getAttribute('aria-selected')).toBeTruthy(); - expect(screen.getAllByRole('presentation')[3]).toHaveTextContent('With value 2'); + await navigateDown(); + expect(getInteractiveListItemAt(1).getAttribute('aria-selected')).toBeTruthy(); + expect(getInteractiveListItemAt(1)).toHaveTextContent('With value 2'); }); it('onChange should return passed value', async () => { - render( + const user = userEvent.setup(); + view.rerender( Click me!} onChange={mockOnChange} @@ -103,16 +113,17 @@ describe('Dropdown', () => { ); - await userEvent.click(screen.getAllByRole('button', { name: 'Click me!' })[1]); + await user.click(screen.getByRole('button', { name: 'Click me!' })); - await userEvent.keyboard('[ArrowDown]'); - await userEvent.keyboard('[Enter]'); + await user.keyboard('[ArrowDown]'); + await user.keyboard('[Enter]'); expect(mockOnChange).toBeCalledWith('testValue'); }); it('should render correctly with mixed children: array and single ListItem', async () => { - const { container } = render( + const user = userEvent.setup(); + view.rerender( Click me!} onChange={mockOnChange} @@ -128,49 +139,54 @@ describe('Dropdown', () => { ))} ); - await userEvent.click(screen.getAllByRole('button', { name: 'Click me!' })[1]); - expect(container).toMatchSnapshot(); - expect(screen.getAllByRole('presentation')).toHaveLength(3); + await user.click(screen.getByRole('button', { name: 'Click me!' })); + expect(view.container).toMatchSnapshot(); + expect(screen.getAllByRole('listitem')).toHaveLength(1); + expect(screen.getAllByRole('option')).toHaveLength(2); }); it('should call cb when button is clicked', async () => { - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); + const user = userEvent.setup(); + await user.click(screen.getByRole('button', { name: 'Click me!' })); expect(mockOnButtonClick).toHaveBeenCalledWith(false); - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); + await user.click(screen.getByRole('button', { name: 'Click me!' })); expect(mockOnButtonClick).toHaveBeenCalledWith(true); }); it('should call callback when menu is focused', async () => { - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); - await userEvent.click(screen.getByRole('listbox')); + const user = userEvent.setup(); + await user.click(screen.getByRole('button', { name: 'Click me!' })); + await user.click(screen.getByRole('listbox')); expect(mockOnMenuFocus).toHaveBeenCalled(); }); it('should call callback when menu is blurred', async () => { - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); - await userEvent.click(screen.getByRole('listbox')); - await userEvent.click(document.body); + const user = userEvent.setup(); + await user.click(screen.getByRole('button', { name: 'Click me!' })); + await user.click(screen.getByRole('listbox')); + await user.click(document.body); expect(mockOnMenuBlur).toHaveBeenCalled(); }); it('should call callback when menu state is changed', async () => { - await userEvent.click(screen.getByRole('button', { name: 'Click me!' })); + const user = userEvent.setup(); + await user.click(screen.getByRole('button', { name: 'Click me!' })); // Event for a successful mouse click on dropdown button expect(mockOnDropdownStateChange).toHaveBeenCalledWith({ isOpen: true, type: '__togglebutton_click__', }); - await userEvent.keyboard('[ArrowDown]'); + await user.keyboard('[ArrowDown]'); // Event for a successful arrow down press when menu is opened expect(mockOnDropdownStateChange).toHaveBeenCalledWith({ highlightedIndex: 0, type: '__menu_keydown_arrow_down__', }); - await userEvent.click(document.body); + await user.click(document.body); // Event for a successful dropdown blur expect(mockOnDropdownStateChange).toHaveBeenCalledWith({ highlightedIndex: -1, @@ -179,8 +195,8 @@ describe('Dropdown', () => { }); }); - it('should open dropdown by default if corresponding prop is set', () => { - render( + it('should open dropdown by default if corresponding prop is set', async () => { + view = render( Click me!} onChange={mockOnChange} @@ -199,13 +215,17 @@ describe('Dropdown', () => { ))} ); + // we need to wait for the popup state to finish updating + await waitFor(() => screen.getByRole('listitem')); - expect(screen.getAllByRole('presentation')).toHaveLength(3); + expect(screen.getAllByRole('listitem')).toHaveLength(1); + expect(screen.getAllByRole('option')).toHaveLength(2); }); it('should allow for conditional rendering of items', async () => { + const user = userEvent.setup(); const condition = false; - const { container } = render( + view.rerender( Click me!} onChange={mockOnChange} @@ -222,9 +242,9 @@ describe('Dropdown', () => { {condition ? should not render : null} ); - await userEvent.click(screen.getAllByRole('button', { name: 'Click me!' })[1]); + await user.click(screen.getAllByRole('button', { name: 'Click me!' })[1]); - expect(container).toMatchSnapshot(); + expect(view.container).toMatchSnapshot(); expect(screen.queryByText('false')).not.toBeInTheDocument(); }); }); diff --git a/src/components/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap b/src/components/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap index dc9cddb8e..6e3b05093 100644 --- a/src/components/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap +++ b/src/components/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap @@ -1,68 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Dropdown should allow for conditional rendering of items 1`] = ` +exports[`Dropdown should access only enabled items with value during keyboard navigation 1`] = `
      - -
    -
    -`; - -exports[`Dropdown should downshift only by enabled items with value 1`] = ` -
    - -
    `; +exports[`Dropdown should allow for conditional rendering of items 1`] = ` +
    + +
      +
    +`; + exports[`Dropdown should render correctly closed 1`] = `