Skip to content

Commit

Permalink
Upgrade @testing-library/user-event to latest ^14.5.2 (elastic#18…
Browse files Browse the repository at this point in the history 
…9949)

## Summary

Upgrades `@testing-library/user-event` to `^14.5.2`. See the release
notes for `v14` for breaking changes:
https://github.com/testing-library/user-event/releases/tag/v14.0.0

I was facing an
[issue](testing-library/user-event#662) with
`v13.5.0` with `userEvent.click()` in a PR
(elastic#189729) and was able to verify
that `v14.4.3` onwards fixes it so I decided to update that package.
What a rabbit hole 😅 !

- In `user-event` `v14` events return a promise, so this PR updates
usage of the likes of `userEvent.click` with `await userEvent.click`.
Regex to search for `userEvent` calls that miss `await` except `.setup`:
`(?<!await\s)userEvent\.(?!setup\b)`
- The way to handle pointer events needed changing from `, undefined, {
skipPointerEventsCheck: true });` to `, { pointerEventsCheck: 0 });`.
- I tried a bit to do the refactor with codemods, but there were quite
some edge cases so it ended up being done manually.
- I looked into all failing tests and tried my best to update them, but
for some of them I lacked the context to make them work again. If you're
a code owner and find a skipped test in this PR please give it a try to
fix and push in this PR or let me know if it's fine for you to fix in
follow ups.

List of files where I had to skip tests (`git diff main...HEAD
-G'\.skip' --name-only`):

### `packages/kbn-dom-drag-drop`

- `packages/kbn-dom-drag-drop/src/droppable.test.tsx`

### `x-pack/plugins/cases`

- `x-pack/plugins/cases/public/components/templates/form.test.tsx`
-
`x-pack/plugins/cases/public/components/user_actions/user_actions_list.test.tsx`

### `x-pack/plugins/cloud_security_posture`

-
`x-pack/plugins/cloud_security_posture/public/components/fleet_extensions/policy_template_form.test.tsx`

### `x-pack/plugins/lens`

-
`x-pack/plugins/lens/public/datasources/form_based/dimension_panel/format_selector.test.tsx`

### `x-pack/plugins/observability_solution`

-
`x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/request_body_field.test.tsx`

### `x-pack/plugins/security_solution`

-
`x-pack/plugins/security_solution/public/management/components/console/components/command_input/integration_tests/command_input.test.tsx`
-
`x-pack/plugins/security_solution/public/management/components/endpoint_responder/command_render_components/integration_tests/kill_process_action.test.tsx`
-
`x-pack/plugins/security_solution/public/management/components/endpoint_responder/command_render_components/integration_tests/release_action.test.tsx`
-
`x-pack/plugins/security_solution/public/management/components/endpoint_responder/command_render_components/integration_tests/status_action.test.tsx`
-
`x-pack/plugins/security_solution/public/management/components/endpoint_responder/command_render_components/integration_tests/upload_action.test.tsx`
-
`x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/integration_tests/response_actions_log.test.tsx`
-
`x-pack/plugins/security_solution/public/management/pages/event_filters/view/components/event_filters_flyout.test.tsx`
-
`x-pack/plugins/security_solution/public/management/pages/response_actions/view/response_actions_list_page.test.tsx`

----

I plan to do a talk on Kibana Demo Days to walk through some of the
breaking changes and learnings.

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
  • Loading branch information
@walterra
walterra authored Sep 10, 2024
1 parent 7e52c4e commit 6a270cf
Show file tree
Hide file tree
Showing 401 changed files with 5,695 additions and 4,719 deletions.
20 changes: 11 additions & 9 deletions examples/content_management_examples/public/examples/todos/stories/todo.stories.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import React from 'react';
import { render, screen, within, waitForElementToBeRemoved } from '@testing-library/react';
import { render, screen, within, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { SimpleTodoApp } from './todo.stories';

Expand All @@ -29,7 +29,7 @@ test('SimpleTodoApp works', async () => {
// apply "completed" filter
let todoFilters = screen.getByRole('group', { name: 'Todo filters' });
let completedFilter = within(todoFilters).getByTestId('completed');
userEvent.click(completedFilter);
await userEvent.click(completedFilter);

// check only completed todos are shown
todos = await screen.findAllByRole('listitem');
Expand All @@ -40,7 +40,7 @@ test('SimpleTodoApp works', async () => {
// apply "todo" filter
todoFilters = screen.getByRole('group', { name: 'Todo filters' });
const todoFilter = within(todoFilters).getByTestId('todo');
userEvent.click(todoFilter);
await userEvent.click(todoFilter);

// check only todo todos are shown
todos = await screen.findAllByRole('listitem');
Expand All @@ -51,7 +51,7 @@ test('SimpleTodoApp works', async () => {
// apply "all" filter
todoFilters = screen.getByRole('group', { name: 'Todo filters' });
const allFilter = within(todoFilters).getByTestId('all');
userEvent.click(allFilter);
await userEvent.click(allFilter);

// check all todos are shown
todos = await screen.findAllByRole('listitem');
Expand All @@ -60,7 +60,7 @@ test('SimpleTodoApp works', async () => {

// add new todo
const newTodoInput = screen.getByTestId('newTodo');
userEvent.type(newTodoInput, 'Learn React{enter}');
await userEvent.type(newTodoInput, 'Learn React{enter}');

// wait for new todo to be added
await screen.findByText('Learn React');
Expand All @@ -69,12 +69,12 @@ test('SimpleTodoApp works', async () => {
let newTodo = todos[2];

// mark new todo as completed
userEvent.click(within(newTodo).getByRole('checkbox'));
await userEvent.click(within(newTodo).getByRole('checkbox'));

// apply "completed" filter again
todoFilters = screen.getByRole('group', { name: 'Todo filters' });
completedFilter = within(todoFilters).getByTestId('completed');
userEvent.click(completedFilter);
await userEvent.click(completedFilter);

// check only completed todos are shown and a new todo is there
await screen.findByText('Learn React'); // wait for new todo to be there
Expand All @@ -84,8 +84,10 @@ test('SimpleTodoApp works', async () => {
expect(newTodo).toHaveTextContent('Learn React');

// remove new todo
userEvent.click(within(newTodo).getByLabelText('Delete'));
await userEvent.click(within(newTodo).getByLabelText('Delete'));

// wait for new todo to be removed
await waitForElementToBeRemoved(() => screen.getByText('Learn React'));
await waitFor(() => {
expect(screen.queryByText('Learn React')).not.toBeInTheDocument();
});
});
5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1484,10 +1484,10 @@
"@storybook/testing-react": "^1.3.0",
"@storybook/theming": "^6.5.16",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^12.1.5",
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^13.5.0",
"@testing-library/user-event": "^14.5.2",
"@types/adm-zip": "^0.5.0",
"@types/archiver": "^5.3.1",
"@types/async": "^3.2.3",
Expand Down Expand Up @@ -1613,7 +1613,6 @@
"@types/styled-components": "^5.1.0",
"@types/supertest": "^6.0.2",
"@types/tapable": "^1.0.6",
"@types/testing-library__jest-dom": "^5.14.7",
"@types/textarea-caret": "^3.0.1",
"@types/tinycolor2": "^1.4.1",
"@types/tough-cookie": "^4.0.5",
Expand Down
18 changes: 9 additions & 9 deletions packages/content-management/table_list_view_table/src/__jest__/created_by_filter.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { render, screen, within, waitForElementToBeRemoved } from '@testing-library/react';
import { render, screen, within } from '@testing-library/react';
import { I18nProvider } from '@kbn/i18n-react';
import { WithServices } from './tests.helpers';
import { TableListViewTable, type TableListViewTableProps } from '../table_list_view_table';
Expand Down Expand Up @@ -125,18 +125,18 @@ describe('created_by filter', () => {
// 5 items in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(4);

userEvent.click(screen.getByTestId('userFilterPopoverButton'));
await userEvent.click(screen.getByTestId('userFilterPopoverButton'));

const userSelectablePopover = screen.getByTestId('userSelectableList');
const popover = within(userSelectablePopover);
expect(await popover.findAllByTestId(/userProfileSelectableOption/)).toHaveLength(3);

userEvent.click(popover.getByTestId('userProfileSelectableOption-user1'));
await userEvent.click(popover.getByTestId('userProfileSelectableOption-user1'));

// 1 item in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);

userEvent.click(popover.getByTestId('userProfileSelectableOption-user2'));
await userEvent.click(popover.getByTestId('userProfileSelectableOption-user2'));

// 2 items in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(2);
Expand All @@ -151,11 +151,11 @@ describe('created_by filter', () => {
// 4 items in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(4);

userEvent.click(screen.getByTestId('userFilterPopoverButton'));
await userEvent.click(screen.getByTestId('userFilterPopoverButton'));

const userSelectablePopover = screen.getByTestId('userSelectableList');
const popover = within(userSelectablePopover);
userEvent.click(await popover.findByTestId('userProfileSelectableOption-null'));
await userEvent.click(await popover.findByTestId('userProfileSelectableOption-null'));

// just 1 item in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);
Expand All @@ -178,7 +178,7 @@ describe('created_by filter', () => {
// 3 items in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(3);

userEvent.click(screen.getByTestId('userFilterPopoverButton'));
await userEvent.click(screen.getByTestId('userFilterPopoverButton'));

const userSelectablePopover = screen.getByTestId('userSelectableList');
const popover = within(userSelectablePopover);
Expand All @@ -203,11 +203,11 @@ describe('created_by filter', () => {
// 1 item in the list
expect(screen.getAllByTestId(/userContentListingTitleLink/)).toHaveLength(1);

userEvent.click(screen.getByTestId('userFilterPopoverButton'));
await userEvent.click(screen.getByTestId('userFilterPopoverButton'));

const userSelectablePopover = screen.getByTestId('userSelectableList');
const popover = within(userSelectablePopover);
await waitForElementToBeRemoved(() => popover.getByRole('progressbar'));
expect(popover.queryByRole('progressbar')).not.toBeInTheDocument();
expect(popover.getAllByTestId('userFilterEmptyMessage')[1]).toBeVisible();
});
});
82 changes: 41 additions & 41 deletions packages/kbn-alerts-grouping/src/components/alerts_grouping.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* Adapted from x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_grouping.test.tsx
*/
import React from 'react';
import { render, within, screen, waitFor } from '@testing-library/react';
import { render, within, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import type { Filter } from '@kbn/es-query';

Expand Down Expand Up @@ -121,14 +121,14 @@ describe('AlertsGrouping', () => {
expect(screen.getByTestId('empty-results-panel')).toBeInTheDocument();
});

it('renders grouping table in first accordion level when single group is selected', () => {
it('renders grouping table in first accordion level when single group is selected', async () => {
render(
<TestProviders>
<AlertsGrouping {...mockGroupingProps}>{renderChildComponent}</AlertsGrouping>
</TestProviders>
);

userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);
expect(
Expand Down Expand Up @@ -173,7 +173,7 @@ describe('AlertsGrouping', () => {
);
});

it('renders grouping table in second accordion level when 2 groups are selected', () => {
it('renders grouping table in second accordion level when 2 groups are selected', async () => {
mockUseAlertsGroupingState.mockReturnValue({
...mockAlertsGroupingState,
grouping: {
Expand All @@ -186,13 +186,13 @@ describe('AlertsGrouping', () => {
<AlertsGrouping {...mockGroupingProps}>{renderChildComponent}</AlertsGrouping>
</TestProviders>
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);
expect(
within(screen.getByTestId('level-0-group-0')).queryByTestId('alerts-table')
).not.toBeInTheDocument();
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);
expect(
Expand All @@ -214,19 +214,19 @@ describe('AlertsGrouping', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('pagination-button-1'));
userEvent.click(
await userEvent.click(screen.getByTestId('pagination-button-1'));
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);

userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);

userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
);

Expand All @@ -243,9 +243,9 @@ describe('AlertsGrouping', () => {
).toEqual('true');
});

userEvent.click(screen.getAllByTestId('group-selector-dropdown')[0]);
await userEvent.click(screen.getAllByTestId('group-selector-dropdown')[0]);
// Wait for element to have pointer events enabled
await waitFor(() => userEvent.click(screen.getAllByTestId('panel-user.name')[0]));
await userEvent.click(screen.getAllByTestId('panel-user.name')[0]);

[
screen.getByTestId('grouping-level-0-pagination'),
Expand All @@ -261,7 +261,7 @@ describe('AlertsGrouping', () => {
});
});

it('resets all levels pagination when global query updates', () => {
it('resets all levels pagination when global query updates', async () => {
mockUseAlertsGroupingState.mockReturnValue({
...mockAlertsGroupingState,
grouping: {
Expand All @@ -276,17 +276,17 @@ describe('AlertsGrouping', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('pagination-button-1'));
userEvent.click(
await userEvent.click(screen.getByTestId('pagination-button-1'));
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
);

Expand Down Expand Up @@ -314,7 +314,7 @@ describe('AlertsGrouping', () => {
});
});

it('resets only most inner group pagination when its parent groups open/close', () => {
it('resets only most inner group pagination when its parent groups open/close', async () => {
mockUseAlertsGroupingState.mockReturnValue({
...mockAlertsGroupingState,
grouping: {
Expand All @@ -330,31 +330,31 @@ describe('AlertsGrouping', () => {
);

// set level 0 page to 2
userEvent.click(screen.getByTestId('pagination-button-1'));
userEvent.click(
await userEvent.click(screen.getByTestId('pagination-button-1'));
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);

// set level 1 page to 2
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-0-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);

// set level 2 page to 2
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-2-group-0')).getByTestId('group-panel-toggle')
);

// open different level 1 group

// level 0, 1 pagination is the same
userEvent.click(
await userEvent.click(
within(screen.getByTestId('level-1-group-1')).getByTestId('group-panel-toggle')
);
[
Expand Down Expand Up @@ -397,26 +397,26 @@ describe('AlertsGrouping', () => {
</TestProviders>
);

userEvent.click(await screen.findByTestId('pagination-button-1'));
userEvent.click(
await userEvent.click(await screen.findByTestId('pagination-button-1'));
await userEvent.click(
within(await screen.findByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);
userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-0-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);

userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-1-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(await screen.findByTestId('grouping-level-2')).getByTestId(
'tablePaginationPopoverButton'
)
);
userEvent.click(await screen.findByTestId('tablePagination-100-rows'));
await userEvent.click(await screen.findByTestId('tablePagination-100-rows'));

[
await screen.findByTestId('grouping-level-0-pagination'),
Expand Down Expand Up @@ -454,24 +454,24 @@ describe('AlertsGrouping', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('pagination-button-1'));
userEvent.click(
await userEvent.click(screen.getByTestId('pagination-button-1'));
await userEvent.click(
within(await screen.findByTestId('level-0-group-0')).getByTestId('group-panel-toggle')
);

userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-0-group-0')).getByTestId('pagination-button-1')
);
userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-1-group-0')).getByTestId('group-panel-toggle')
);

userEvent.click(
await userEvent.click(
within(await screen.findByTestId('level-1-group-0')).getByTestId('pagination-button-1')
);
const tablePaginations = await screen.findAllByTestId('tablePaginationPopoverButton');
userEvent.click(tablePaginations[tablePaginations.length - 1]);
await waitFor(() => userEvent.click(screen.getByTestId('tablePagination-100-rows')));
await userEvent.click(tablePaginations[tablePaginations.length - 1]);
await userEvent.click(screen.getByTestId('tablePagination-100-rows'));

[
screen.getByTestId('grouping-level-0-pagination'),
Expand Down
Loading

0 comments on commit 6a270cf

Please sign in to comment.