Task Description
In the tests for ui-components, we use a variety of methods to simulate user clicks. All of these are valid, but represent different approaches and at-the-time best practices:
| Approach |
Occurrences |
Files |
userEvent.click |
124 |
19 |
Direct element.click() |
50 |
15 |
fireEvent.click |
22 |
6 |
userEvent.pointer |
0 |
0 |
Most test suites are consitent internally, and some (Pagination, Tooltip) even mix approaches in a single file:
| File |
Current method(s) |
SideNavigationItem/SideNavigationItem.test.tsx |
fireEvent.click |
SideNavigationGroup/SideNavigationGroup.test.tsx |
fireEvent.click |
SideNavigation/SideNavigation.test.tsx |
fireEvent.click |
Card/Card.test.tsx |
fireEvent.click |
StyleProvider/StyleProvider.test.tsx |
fireEvent.click |
Switch/Switch.test.tsx |
element.click() |
ModalFooter/ModalFooter.test.tsx |
element.click() |
Radio/Radio.test.tsx |
element.click() |
BreadcrumbItem/BreadcrumbItem.test.tsx |
element.click() |
Checkbox/Checkbox.test.tsx |
element.click() |
Pill/Pill.test.tsx |
element.click() |
NativeSelect/NativeSelect.test.tsx |
element.click() |
Icon/Icon.test.tsx |
element.click() |
TopNavigation/TopNavigation.test.tsx |
element.click() |
Button/Button.test.tsx |
element.click() |
TabNavigationItem/TabNavigationItem.test.tsx |
element.click() |
TextInput/TextInput.test.tsx |
element.click() |
Textarea/Textarea.test.tsx |
element.click() |
Pagination/Pagination.test.tsx |
fireEvent.click + userEvent.click + element.click() |
Tooltip/Tooltip.test.tsx |
userEvent.click + element.click() |
We should standardize here in favour of userEvent.click as it is the most modern, idiomatic and already most used approach.
Task Description
In the tests for ui-components, we use a variety of methods to simulate user clicks. All of these are valid, but represent different approaches and at-the-time best practices:
userEvent.clickelement.click()fireEvent.clickuserEvent.pointerMost test suites are consitent internally, and some (
Pagination,Tooltip) even mix approaches in a single file:SideNavigationItem/SideNavigationItem.test.tsxfireEvent.clickSideNavigationGroup/SideNavigationGroup.test.tsxfireEvent.clickSideNavigation/SideNavigation.test.tsxfireEvent.clickCard/Card.test.tsxfireEvent.clickStyleProvider/StyleProvider.test.tsxfireEvent.clickSwitch/Switch.test.tsxelement.click()ModalFooter/ModalFooter.test.tsxelement.click()Radio/Radio.test.tsxelement.click()BreadcrumbItem/BreadcrumbItem.test.tsxelement.click()Checkbox/Checkbox.test.tsxelement.click()Pill/Pill.test.tsxelement.click()NativeSelect/NativeSelect.test.tsxelement.click()Icon/Icon.test.tsxelement.click()TopNavigation/TopNavigation.test.tsxelement.click()Button/Button.test.tsxelement.click()TabNavigationItem/TabNavigationItem.test.tsxelement.click()TextInput/TextInput.test.tsxelement.click()Textarea/Textarea.test.tsxelement.click()Pagination/Pagination.test.tsxfireEvent.click+userEvent.click+element.click()Tooltip/Tooltip.test.tsxuserEvent.click+element.click()We should standardize here in favour of
userEvent.clickas it is the most modern, idiomatic and already most used approach.