Dropdown and Panel: convert tests to use testing-library

[ecraig12345]

Current Behavior

v8 tests do not use testing-library

New Behavior

Convert Dropdown and Panel tests to fully use testing-library

Related Issue(s)

part of #21663

[codesandbox-ci]

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 d18af03:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: ca82054c048eb323514bfed5b6f9428f7decfe3a (build)

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against ca82054c048eb323514bfed5b6f9428f7decfe3a}

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	925	879	5000
BaseButton	mount	1007	991	5000
Breadcrumb	mount	2845	2681	1000
ButtonNext	mount	532	527	5000
Checkbox	mount	1593	1576	5000
CheckboxBase	mount	1372	1370	5000
ChoiceGroup	mount	5034	4973	5000
ComboBox	mount	1027	1015	1000
CommandBar	mount	10747	10795	1000
ContextualMenu	mount	8946	8852	1000
DefaultButton	mount	1179	1194	5000
DetailsRow	mount	3918	3824	5000
DetailsRowFast	mount	3846	3983	5000
DetailsRowNoStyles	mount	3628	3687	5000
Dialog	mount	2720	2700	1000
DocumentCardTitle	mount	203	180	1000
Dropdown	mount	3341	3308	5000
FluentProviderNext	mount	1920	1948	5000
FluentProviderWithTheme	mount	166	170	10
FluentProviderWithTheme	virtual-rerender	120	118	10
FluentProviderWithTheme	virtual-rerender-with-unmount	208	196	10
FocusTrapZone	mount	1932	1941	5000
FocusZone	mount	1855	1917	5000
IconButton	mount	1832	1855	5000
Label	mount	389	383	5000
Layer	mount	3091	3057	5000
Link	mount	517	528	5000
MakeStyles	mount	1742	1714	50000
MenuButton	mount	1609	1494	5000
MessageBar	mount	2061	2094	5000
Nav	mount	3366	3448	1000
OverflowSet	mount	1166	1151	5000
Panel	mount	2551	2638	1000
Persona	mount	871	859	1000
Pivot	mount	1486	1519	1000
PrimaryButton	mount	1347	1352	5000
Rating	mount	8074	8061	5000
SearchBox	mount	1468	1434	5000
Shimmer	mount	2673	2644	5000
Slider	mount	2121	2103	5000
SpinButton	mount	5228	5185	5000
Spinner	mount	526	476	5000
SplitButton	mount	3275	3367	5000
Stack	mount	588	545	5000
StackWithIntrinsicChildren	mount	2399	2300	5000
StackWithTextChildren	mount	5539	5441	5000
SwatchColorPicker	mount	11818	11865	5000
TagPicker	mount	2730	2695	5000
TeachingBubble	mount	13630	13687	5000
Text	mount	453	464	5000
TextField	mount	1498	1544	5000
ThemeProvider	mount	1242	1257	5000
ThemeProvider	virtual-rerender	657	646	5000
ThemeProvider	virtual-rerender-with-unmount	2027	2002	5000
Toggle	mount	901	909	5000
buttonNative	mount	162	173	5000

Perf Analysis (@fluentui/react-northstar)

⚠️ No perf measurements available

[spmonahan]

Nit: You could use queryByRole, as that will return null rather than throw, here to avoid using the arrow function. I find that easier to read but that's 100% subjective :)

[ecraig12345]

Oh nice, apparently I didn't read the docs well enough. 😆 I switched to that in a few different places--ones like this where it's expected not to be found, as well as some places where I was checking for the element's existence at the end of the test (and doing getByText/Role with an unnecessary expect.toBeTruthy() afterwards because not expect-ing anything seemed weird).

Before:

const foo = getByText('whatever');
// silly because getByText would have thrown if the thing was missing
expect(foo).toBeTruthy();

After:

const foo = queryByText('whatever');
expect(foo).toBeTruthy();

I still don't love this because the inconsistency about using getBy vs. queryBy bugs me, but at least it gets rid of the redundant assertions. Or I'm open to other suggestions.

[spmonahan]

Do you think it might be better to use baseElement rather than document.body for these cases?

[ecraig12345]

The layer for the options would still get attached to document.body, so unless I bring back the code mocking createPortal (which I'd prefer not to) that wouldn't help.