Combobox (v8): convert tests to use testing-library #22297
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 05f29c7:
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 31e8b97573aeba761d14b937378bb95d578c4c90 (build) |
📊 Bundle size report🤖 This report was generated against 31e8b97573aeba761d14b937378bb95d578c4c90 |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 968 | 943 | 5000 | |
| Breadcrumb | mount | 2804 | 2815 | 1000 | |
| Checkbox | mount | 1531 | 1542 | 5000 | |
| CheckboxBase | mount | 1310 | 1333 | 5000 | |
| ChoiceGroup | mount | 4909 | 4860 | 5000 | |
| ComboBox | mount | 1007 | 1004 | 1000 | |
| CommandBar | mount | 10809 | 10867 | 1000 | |
| ContextualMenu | mount | 11600 | 11881 | 1000 | |
| DefaultButton | mount | 1156 | 1216 | 5000 | |
| DetailsRow | mount | 4107 | 3991 | 5000 | |
| DetailsRowFast | mount | 3976 | 4156 | 5000 | |
| DetailsRowNoStyles | mount | 3776 | 3686 | 5000 | |
| Dialog | mount | 2314 | 2286 | 1000 | |
| DocumentCardTitle | mount | 164 | 193 | 1000 | |
| Dropdown | mount | 3401 | 3481 | 5000 | |
| FocusTrapZone | mount | 1838 | 1869 | 5000 | |
| FocusZone | mount | 1908 | 1877 | 5000 | |
| IconButton | mount | 1803 | 1823 | 5000 | |
| Label | mount | 358 | 352 | 5000 | |
| Layer | mount | 3024 | 3102 | 5000 | |
| Link | mount | 485 | 485 | 5000 | |
| MenuButton | mount | 1561 | 1519 | 5000 | |
| MessageBar | mount | 2262 | 2195 | 5000 | |
| Nav | mount | 3417 | 3452 | 1000 | |
| OverflowSet | mount | 1109 | 1146 | 5000 | |
| Panel | mount | 2169 | 2202 | 1000 | |
| Persona | mount | 1013 | 1051 | 1000 | |
| Pivot | mount | 1543 | 1515 | 1000 | |
| PrimaryButton | mount | 1400 | 1337 | 5000 | |
| Rating | mount | 7942 | 7944 | 5000 | |
| SearchBox | mount | 1365 | 1341 | 5000 | |
| Shimmer | mount | 2523 | 2540 | 5000 | |
| Slider | mount | 2021 | 2012 | 5000 | |
| SpinButton | mount | 5113 | 5165 | 5000 | |
| Spinner | mount | 459 | 447 | 5000 | |
| SplitButton | mount | 3351 | 3294 | 5000 | |
| Stack | mount | 531 | 573 | 5000 | |
| StackWithIntrinsicChildren | mount | 2347 | 2403 | 5000 | |
| StackWithTextChildren | mount | 5435 | 5411 | 5000 | |
| SwatchColorPicker | mount | 11899 | 12074 | 5000 | |
| TagPicker | mount | 2807 | 2698 | 5000 | |
| TeachingBubble | mount | 96303 | 95526 | 5000 | |
| Text | mount | 477 | 450 | 5000 | |
| TextField | mount | 1586 | 1544 | 5000 | |
| ThemeProvider | mount | 1256 | 1269 | 5000 | |
| ThemeProvider | virtual-rerender | 689 | 657 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 2042 | 2062 | 5000 | |
| Toggle | mount | 796 | 927 | 5000 | |
| buttonNative | mount | 155 | 142 | 5000 |
| const combobox = getByRole('combobox'); | ||
| // open combobox to select one option | ||
| userEvent.click(combobox); | ||
| userEvent.click(getAllByRole('option')[0], undefined, { skipPointerEventsCheck: true }); |
There was a problem hiding this comment.
What's skipPointerEventsCheck for?
There was a problem hiding this comment.
Was getting the error below where the element apparently has pointer-events: none :
|
|
||
| // open combobox to check options list | ||
| wrapper.find('button').simulate('click'); | ||
| const caretdownButton = getByRole('presentation', { hidden: true }); |
There was a problem hiding this comment.
Did finding it as a button not work? Finding "something with role presentation" seems not very reliable.
There was a problem hiding this comment.
I agree but I could not get it by role button since this element was explicitly set to role="presentation"
There was a problem hiding this comment.
Could you do getByRole('button', { hidden: true })?
There was a problem hiding this comment.
That doesn't work either since its implicit button role is overwritten by the explicit role=presentation
| <ComboBox multiSelect options={DEFAULT_OPTIONS} defaultSelectedKey={['1', '2', '3']} allowFreeform />, | ||
| wrapper => { | ||
| const inputElement = wrapper.find('input'); | ||
| _verifyStateVariables(wrapper, 'none', DEFAULT_OPTIONS, [0, 1, 2]); |
There was a problem hiding this comment.
It might be good if you could find some other way to verify the things this was testing (possibly based on the DOM instead of internal state?)
There was a problem hiding this comment.
Oops missed this before but this _verifyStateVariables function was basically testing for stuff like focus status, available options and currently selected options and I basically simplified the tests to only worry about the expected value of the combobox element should be depending on different scenarios like an input text being autoselected onBlur in a freeform combobox.
Current Behavior
Comboboxtests don't use testing-libraryNew Behavior
Comboboxto fully use testing-libraryRelated Issue(s)
part of #21663