Choicegroup (v8): convert tests to use testing-library #22208
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 4f6ff43:
|
📊 Bundle size report🤖 This report was generated against 76476da509050cdbaf554da6ee45ed62fcc83332 |
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 0844caf318ae0c5ac484019a23cdf167c5ba25ae (build) |
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 786 | 783 | 5000 | |
| Breadcrumb | mount | 2362 | 2321 | 1000 | |
| Checkbox | mount | 1302 | 1284 | 5000 | |
| CheckboxBase | mount | 1087 | 1087 | 5000 | |
| ChoiceGroup | mount | 4104 | 4038 | 5000 | |
| ComboBox | mount | 831 | 887 | 1000 | |
| CommandBar | mount | 9387 | 9054 | 1000 | |
| ContextualMenu | mount | 10008 | 10025 | 1000 | |
| DefaultButton | mount | 990 | 966 | 5000 | |
| DetailsRow | mount | 3251 | 3334 | 5000 | |
| DetailsRowFast | mount | 3316 | 3231 | 5000 | |
| DetailsRowNoStyles | mount | 3143 | 3088 | 5000 | |
| Dialog | mount | 1891 | 1891 | 1000 | |
| DocumentCardTitle | mount | 156 | 140 | 1000 | |
| Dropdown | mount | 2853 | 2852 | 5000 | |
| FocusTrapZone | mount | 1570 | 1583 | 5000 | |
| FocusZone | mount | 1562 | 1528 | 5000 | |
| IconButton | mount | 1528 | 1525 | 5000 | |
| Label | mount | 300 | 302 | 5000 | |
| Layer | mount | 2516 | 2531 | 5000 | |
| Link | mount | 407 | 403 | 5000 | |
| MenuButton | mount | 1273 | 1265 | 5000 | |
| MessageBar | mount | 1876 | 1771 | 5000 | |
| Nav | mount | 2832 | 2820 | 1000 | |
| OverflowSet | mount | 948 | 940 | 5000 | |
| Panel | mount | 1823 | 1844 | 1000 | |
| Persona | mount | 878 | 887 | 1000 | |
| Pivot | mount | 1247 | 1247 | 1000 | |
| PrimaryButton | mount | 1137 | 1117 | 5000 | |
| Rating | mount | 6691 | 6705 | 5000 | |
| SearchBox | mount | 1126 | 1111 | 5000 | |
| Shimmer | mount | 2157 | 2151 | 5000 | |
| Slider | mount | 1683 | 1677 | 5000 | |
| SpinButton | mount | 4404 | 4367 | 5000 | |
| Spinner | mount | 367 | 374 | 5000 | |
| SplitButton | mount | 2730 | 2712 | 5000 | |
| Stack | mount | 446 | 447 | 5000 | |
| StackWithIntrinsicChildren | mount | 1991 | 2001 | 5000 | |
| StackWithTextChildren | mount | 4512 | 4522 | 5000 | |
| SwatchColorPicker | mount | 10013 | 10007 | 5000 | |
| TagPicker | mount | 2336 | 2334 | 5000 | |
| TeachingBubble | mount | 81888 | 82010 | 5000 | |
| Text | mount | 371 | 375 | 5000 | |
| TextField | mount | 1203 | 1224 | 5000 | |
| ThemeProvider | mount | 987 | 1012 | 5000 | |
| ThemeProvider | virtual-rerender | 552 | 563 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1543 | 1574 | 5000 | |
| Toggle | mount | 685 | 689 | 5000 | |
| buttonNative | mount | 110 | 115 | 5000 |
|
|
||
| expect(choiceGroupRef.current!.checkedOption).toBeUndefined(); | ||
| ReactTestUtils.Simulate.change(choiceOptions[0]); | ||
| userEvent.click(choiceOptions[0]); | ||
| expect(choiceGroupRef.current!.checkedOption).toEqual(TEST_OPTIONS[0]); |
There was a problem hiding this comment.
Not a new issue but we really ought to verify that the checked state is updated in the DOM, not just in the component state
There was a problem hiding this comment.
I've noticed that whenever the selected element is changed, the checked attribute in the DOM never actually changes; it stays on the element that was initially selected on page load. Codepen here
There was a problem hiding this comment.
I tried this too and it looks like what's checked in the actual DOM does get updated, though that may not happen until after a re-render. (The option object doesn't get updated, which is expected.)
https://codepen.io/ecraig12345/pen/mdpMyWO?editors=0011
Current Behavior
Choicegrouptests don't use testing-libraryNew Behavior
Choicegroupto fully use testing-libraryRelated Issue(s)
part of #21663