Upgrade user event #4426

snowystinger · 2023-04-22T00:23:13Z

Closes

Prep to help us with @LFDanLu's RFC

I've managed to completely replace typeText in our test utils. I think we can also replace triggerPress and instead just rely on userEvent. I think we'll also be able to expand on different kinds of users so that we can export those for people looking to test more than just their mouse workflows.

We'll also be able to finally stop doing the pattern keyDown followed by keyUp, we'll nearly always be able to call the keyboard press and it'll do the cleanup keyUp that we frequently forget.

Tips for after merge:
all user event interactions are now async, so userEvent.click has become await user.click
don’t forget to put async on the surrounding it if it doesn’t already have it

await user.tab implementation details have changed substantially, in general this is a no-op change for us, but some of our tests relied on some of the bugs the previous implementation had, reach out to me if you encounter one of these

await user.keyboard implementation details have changed substantially, the result is we could do away with our util function for typing

if you’ve written a new test file, please see other files for an example of new setup
docs are here https://testing-library.com/docs/user-event/intro/
i suggest reading through all of it, again, things are pretty different
for example user.keyboard does not take an element as it’s target in the first argument, instead it just types on whatever currently has focus, i recommend focusing by using tab or click or something other than focus directly so it’s more of a user-centric test

I also suggest looking through breaking changes from 12 -> 13 and 13 ->14 https://github.com/testing-library/user-event/releases

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

# Conflicts: # package.json # packages/@react-aria/color/test/useColorWheel.test.tsx # packages/@react-aria/grid/test/useGrid.test.js # packages/@react-aria/ssr/test/SSRProvider.test.js # packages/@react-spectrum/actiongroup/test/ActionGroup.test.js # packages/@react-spectrum/calendar/test/Calendar.test.js # packages/@react-spectrum/calendar/test/CalendarBase.test.js # packages/@react-spectrum/calendar/test/RangeCalendar.test.js # packages/@react-spectrum/card/test/CardView.test.js # packages/@react-spectrum/checkbox/package.json # packages/@react-spectrum/color/test/ColorField.test.js # packages/@react-spectrum/datepicker/test/DatePicker.test.js # packages/@react-spectrum/datepicker/test/DateRangePicker.test.js # packages/@react-spectrum/datepicker/test/TimeField.test.js # packages/@react-spectrum/dialog/test/DialogTrigger.test.js # packages/@react-spectrum/menu/test/ActionMenu.test.js # packages/@react-spectrum/searchwithin/test/SearchWithin.test.js # packages/@react-spectrum/tag/test/TagGroup.test.js # packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js # packages/@react-stately/utils/test/useControlledState.test.js # packages/dev/test-utils/package.json # packages/dev/test-utils/src/events.ts # packages/react-aria-components/test/ComboBox.test.js # packages/react-aria-components/test/GridList.test.js # packages/react-aria-components/test/ListBox.test.js # packages/react-aria-components/test/Tabs.test.js # yarn.lock

snowystinger · 2023-07-10T22:30:46Z

packages/@react-spectrum/list/test/ListView.test.js

-        let onAction = jest.fn();
-        let tree = renderSelectionList({onSelectionChange, selectionMode: 'multiple', onAction});
-        userEvent.click(document.body);
+      describe('still needs pointer events install', function () {


blocks like this aren't quite compatible with new User Events
this may reflect on our code or may be a bug in User Event, until that's resolved though, I've broken down some of the single calls to their actual event makeup that we rely on

jsdom still doesn't support pointer events, jsdom/jsdom#2527
we may be able to move the call to install back to where it originally came from, didn't have time to check before sabbatical. it's useful where it is because it tells us where we are actively using it and there is a bug in User Event that I've addressed here testing-library/user-event#1121

bit of a shame that we can't get rid of the installPointerEvent, but we can handle setting that up + performing the requisite events calls via our triggerLongPress util I guess

yeah, it'd be good to just enable pointerEvents everywhere, i don't think any browser is still using the mouse/touch alternate code paths that we are primarily testing anymore anyways. but I decided that was a separate PR as well.

I'd also love to delete those code paths, haha

# Conflicts: # packages/@react-spectrum/color/test/ColorArea.test.tsx # packages/@react-spectrum/combobox/test/ComboBox.test.js # packages/@react-spectrum/datepicker/test/DateField.test.js # packages/@react-spectrum/datepicker/test/DatePicker.test.js # packages/@react-spectrum/slider/test/RangeSlider.test.tsx # packages/@react-spectrum/switch/test/Switch.test.js # packages/@react-stately/datepicker/src/useTimeFieldState.ts # packages/react-aria-components/test/DropZone.test.js # packages/react-aria-components/test/FileTrigger.test.js # packages/react-aria-components/test/RadioGroup.test.js # packages/react-aria-components/test/Table.test.js # packages/react-aria-components/test/TextField.test.js # yarn.lock

rspbot · 2023-08-22T05:50:35Z

Build successful! 🎉

rspbot · 2023-08-22T07:14:11Z

Build successful! 🎉

snowystinger · 2023-08-24T05:28:10Z

packages/@react-spectrum/actiongroup/test/ActionGroup.test.js

@@ -213,24 +199,26 @@ describe('ActionGroup', function () {

    let buttons = tree.getAllByRole('button');

-    orders.forEach(({action, result}, index) => {
-      action(document.activeElement);
+    let index = 0;


this is the same loop as before, just is able to do async now

rspbot · 2023-08-24T20:53:06Z

Build successful! 🎉

rspbot · 2023-08-28T02:09:47Z

Build successful! 🎉

LFDanLu

Just some small questions but otherwise looks great! Thanks for doing this upgrade, I'll need to think on how users will affect the test util api, your comment from #4835 (review) makes sense to me, just weighing the pros and cons between the PageObject classes vs util functions. As for allowing the user to pass in their user object, that makes complete sense.

What do you think about enforcing user-event 14 in our test utils vs making the user object optional for user-event 13 backwards compatibility?

packages/dev/test-utils/src/userEventMaps.ts

LFDanLu · 2023-08-28T17:50:40Z

packages/@react-aria/checkbox/test/useCheckboxGroup.test.tsx

-  it('handles defaults', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});


wonder if we can handle this setup in the global beforeAll step or do this setup + return the user object via a util function call. Would make it easier for external users to do the same setup when we eventually expose these test-utils.

I thought about that, decided it was better to do it individually to make it easier to swap out users if we need to. Not saying this couldn't be improved, I'm just not sure setting up one globally beforeAll is the best way to go about it. A util function call seems fine, I was thinking something like

import {keyboardUser, mixedPointerKeyboardUser...} from 'whatever-util'

One interesting thing we could possibly do with this is enforce a specific interaction type for a set of tests. I think I we don't supply pointers to the pointerMap, then the user can't user mouse, so they would have to either use touch or keyboard only. But I haven't tried it yet.

packages/@react-spectrum/actiongroup/test/ActionGroup.test.js

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

LFDanLu · 2023-08-28T18:09:47Z

packages/@react-spectrum/list/test/ListView.test.js

-        let onAction = jest.fn();
-        let tree = renderSelectionList({onSelectionChange, selectionMode: 'multiple', onAction});
-        userEvent.click(document.body);
+      describe('still needs pointer events install', function () {


bit of a shame that we can't get rid of the installPointerEvent, but we can handle setting that up + performing the requisite events calls via our triggerLongPress util I guess

snowystinger · 2023-08-29T03:45:51Z

What do you think about enforcing user-event 14 in our test utils vs making the user object optional for user-event 13 backwards compatibility?

I would be open to enforcing user-event ^14, I think it'd be difficult to support both.

LFDanLu

LGTM, looks like there is a conflict now, but will approve after that is updated

snowystinger · 2023-08-29T23:29:52Z

LGTM, looks like there is a conflict now, but will approve after that is updated

yeah, you'll probably have to do this a number of times, we are constantly updating tests, so this constantly has conflicts. it's why I want to get it in sooner rather than later

rspbot · 2023-08-30T08:17:19Z

Build successful! 🎉

rspbot · 2023-09-04T02:13:08Z

Build successful! 🎉

# Conflicts: # packages/react-aria-components/test/Select.test.js

rspbot · 2023-09-06T08:51:15Z

Build successful! 🎉

# Conflicts: # packages/react-aria-components/test/Select.test.js

rspbot · 2023-09-08T07:13:26Z

Build successful! 🎉

rspbot · 2023-09-08T07:13:28Z

## API Changes

unknown top level export { type: 'identifier', name: 'Column' }
unknown top level export { type: 'identifier', name: 'Column' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }
unknown type { type: 'link' }

devongovett

Saw a few remaining TODO comments added. Do you have a plan/ticket to address those?

devongovett · 2023-09-08T20:41:06Z

packages/@react-aria/dnd/test/useDraggableCollection.test.js

@@ -1043,11 +1048,11 @@ describe('useDraggableCollection', () => {
      expect(options).toHaveLength(3);

      fireEvent.focus(options[0]);
-      act(() => userEvent.click(options[0], {pointerType: 'touch'}));
+      await user.pointer({target: options[0], keys: '[TouchA]'});


wonder why there is no userEvent.tap helper similar to click...

devongovett · 2023-09-08T20:46:05Z

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -227,25 +236,28 @@ describe('SearchAutocomplete', function () {
    expect(onOpenChange).not.toHaveBeenCalled();
    expect(onFocus).toHaveBeenCalled();

+    fireEvent.keyDown(searchAutocomplete, {key: 'ArrowDown', code: 40, charCode: 40});
+    fireEvent.keyUp(searchAutocomplete, {key: 'ArrowDown', code: 40, charCode: 40});


should use user event?

devongovett · 2023-09-08T20:54:58Z

packages/@react-spectrum/list/test/ListView.test.js

+        await user.keyboard('[MetaLeft>]');
+        fireEvent.pointerDown(getRow(tree, 'Bar'), {pointerType: 'mouse', metaKey: true});
+        fireEvent.pointerUp(getRow(tree, 'Bar'), {pointerType: 'mouse', metaKey: true});
+        fireEvent.click(getRow(tree, 'Bar'), {metaKey: true});


user.click?

devongovett · 2023-09-08T21:02:39Z

packages/dev/test-utils/src/userEventMaps.ts

+  {name: 'MouseMiddle', pointerType: 'mouse', button: 'auxiliary'},
+  {name: 'TouchA', pointerType: 'touch', height: 1, width: 1},
+  {name: 'TouchB', pointerType: 'touch'},
+  {name: 'TouchC', pointerType: 'touch'}


should they all have height/width? More descriptive names if they are actually supposed to be different?

snowystinger added 12 commits April 18, 2023 14:42

Upgrade testing tools

25c5edd

fix alphabetical order

b8aa4ba

remove all legacy timers

35a31af

fix lint

e972690

fix lint for real

cbf086f

fix test

030e4a9

fix snapshot tests

ac7dec8

Fix 16 and 17 tests

543e19b

fix some alphabet

587ae76

Upgrade user event

b6cf711

Merge branch 'main' into upgrade-jest

599f183

Merge branch 'upgrade-jest' into upgrade-user-event

685a3bc

Base automatically changed from upgrade-jest to main May 8, 2023 22:35

snowystinger added 2 commits July 10, 2023 15:23

Merge branch 'main' into upgrade-user-event

cf09d5d

snowystinger commented Jul 10, 2023

View reviewed changes

snowystinger mentioned this pull request Aug 17, 2023

Testing documentation and util RFC #4835

Merged

snowystinger added 2 commits August 17, 2023 14:45

Fix react 17 tests

55bdb71

Merge branch 'main' into upgrade-user-event

1c2b5c8

snowystinger marked this pull request as ready for review August 22, 2023 07:20

snowystinger commented Aug 24, 2023

View reviewed changes

remove extra code

d2f735f

Merge branch 'main' into upgrade-user-event

5bb4fec

LFDanLu reviewed Aug 28, 2023

View reviewed changes

LFDanLu reviewed Aug 29, 2023

View reviewed changes

snowystinger added 2 commits August 30, 2023 09:30

Merge branch 'main' into upgrade-user-event

bf353e2

fix new test

4412507

LFDanLu previously approved these changes Aug 30, 2023

View reviewed changes

Merge branch 'main' into upgrade-user-event

2a5058d

Merge branch 'main' into upgrade-user-event

587d31b

# Conflicts: # packages/react-aria-components/test/Select.test.js

snowystinger dismissed LFDanLu’s stale review via 587d31b September 6, 2023 08:40

Merge branch 'main' into upgrade-user-event

870eb8d

# Conflicts: # packages/react-aria-components/test/Select.test.js

LFDanLu approved these changes Sep 8, 2023

View reviewed changes

devongovett approved these changes Sep 8, 2023

View reviewed changes

snowystinger merged commit 0b5321d into main Sep 8, 2023
26 checks passed

snowystinger deleted the upgrade-user-event branch September 8, 2023 22:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade user event #4426

Upgrade user event #4426

snowystinger commented Apr 22, 2023 •

edited

snowystinger Jul 10, 2023

LFDanLu Aug 28, 2023

snowystinger Aug 29, 2023 •

edited

rspbot commented Aug 22, 2023

rspbot commented Aug 22, 2023

snowystinger Aug 24, 2023

rspbot commented Aug 24, 2023

rspbot commented Aug 28, 2023

LFDanLu left a comment

LFDanLu Aug 28, 2023

snowystinger Aug 29, 2023

LFDanLu Aug 28, 2023

snowystinger commented Aug 29, 2023

LFDanLu left a comment

snowystinger commented Aug 29, 2023 •

edited

rspbot commented Aug 30, 2023

rspbot commented Sep 4, 2023

rspbot commented Sep 6, 2023

rspbot commented Sep 8, 2023

rspbot commented Sep 8, 2023

devongovett left a comment

devongovett Sep 8, 2023

devongovett Sep 8, 2023

devongovett Sep 8, 2023

devongovett Sep 8, 2023

Upgrade user event #4426

Upgrade user event #4426

Conversation

snowystinger commented Apr 22, 2023 • edited

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger Aug 29, 2023 • edited

Choose a reason for hiding this comment

rspbot commented Aug 22, 2023

rspbot commented Aug 22, 2023

Choose a reason for hiding this comment

rspbot commented Aug 24, 2023

rspbot commented Aug 28, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger commented Aug 29, 2023

LFDanLu left a comment

Choose a reason for hiding this comment

snowystinger commented Aug 29, 2023 • edited

rspbot commented Aug 30, 2023

rspbot commented Sep 4, 2023

rspbot commented Sep 6, 2023

rspbot commented Sep 8, 2023

rspbot commented Sep 8, 2023

devongovett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

snowystinger commented Apr 22, 2023 •

edited

snowystinger Aug 29, 2023 •

edited

snowystinger commented Aug 29, 2023 •

edited