9
9
MuiRenderResult ,
10
10
RenderOptions ,
11
11
flushMicrotasks ,
12
+ within ,
12
13
} from '@mui/internal-test-utils' ;
13
14
import userEvent from '@testing-library/user-event' ;
14
15
import { Select , SelectListboxSlotProps , selectClasses } from '@mui/base/Select' ;
@@ -28,6 +29,7 @@ describe('<Select />', () => {
28
29
element : React . ReactElement < any , string | React . JSXElementConstructor < any > > ,
29
30
options ?: RenderOptions ,
30
31
) : Promise < MuiRenderResult > {
32
+ // eslint-disable-next-line testing-library/render-result-naming-convention
31
33
const rendered = internalRender ( element , options ) ;
32
34
await flushMicrotasks ( ) ;
33
35
return rendered ;
@@ -918,15 +920,15 @@ describe('<Select />', () => {
918
920
} ) ;
919
921
920
922
it ( 'renders a zero-width space when there is no selected value nor placeholder and renderValue is not provided' , async ( ) => {
921
- const { getByRole } = await render (
923
+ await render (
922
924
< Select >
923
925
< Option value = { 1 } > One</ Option >
924
926
< Option value = { 2 } > Two</ Option >
925
927
</ Select > ,
926
928
) ;
927
929
928
- const select = getByRole ( 'combobox' ) ;
929
- const zws = select . querySelector ( '.notranslate ') ;
930
+ const select = screen . getByRole ( 'combobox' ) ;
931
+ const zws = within ( select ) . getByText ( ' ') ; // zero-width space
930
932
931
933
expect ( zws ) . not . to . equal ( null ) ;
932
934
} ) ;
@@ -1160,7 +1162,7 @@ describe('<Select />', () => {
1160
1162
) ;
1161
1163
1162
1164
const input = getAllByRole ( 'textbox' ) [ 0 ] ;
1163
- expect ( document . activeElement ) . to . equal ( input ) ;
1165
+ expect ( input ) . toHaveFocus ( ) ;
1164
1166
} ) ;
1165
1167
1166
1168
it ( 'scrolls to initially highlighted option after opening' , async function test ( ) {
@@ -1219,7 +1221,7 @@ describe('<Select />', () => {
1219
1221
) ;
1220
1222
1221
1223
const select = getByRole ( 'combobox' ) ;
1222
- expect ( document . activeElement ) . to . equal ( select ) ;
1224
+ expect ( select ) . toHaveFocus ( ) ;
1223
1225
} ) ;
1224
1226
} ) ;
1225
1227
@@ -1346,15 +1348,15 @@ describe('<Select />', () => {
1346
1348
describe ( 'browser autofill' , ( ) => {
1347
1349
it ( 'sets value and calls external onChange when browser autofills' , async ( ) => {
1348
1350
const onChangeHandler = spy ( ) ;
1349
- const { container } = await render (
1351
+ await render (
1350
1352
< Select onChange = { onChangeHandler } defaultValue = "germany" autoComplete = "country" >
1351
1353
< Option value = "france" > France</ Option >
1352
1354
< Option value = "germany" > Germany</ Option >
1353
1355
< Option value = "china" > China</ Option >
1354
1356
</ Select > ,
1355
1357
) ;
1356
1358
1357
- const hiddenInput = container . querySelector ( '[autocomplete="country"] ') ;
1359
+ const hiddenInput = screen . getByRole ( 'textbox ') ;
1358
1360
1359
1361
expect ( hiddenInput ) . not . to . eq ( null ) ;
1360
1362
expect ( hiddenInput ) . to . have . value ( 'germany' ) ;
@@ -1372,15 +1374,15 @@ describe('<Select />', () => {
1372
1374
1373
1375
it ( 'does not set value when browser autofills invalid value' , async ( ) => {
1374
1376
const onChangeHandler = spy ( ) ;
1375
- const { container } = await render (
1377
+ await render (
1376
1378
< Select onChange = { onChangeHandler } defaultValue = "germany" autoComplete = "country" >
1377
1379
< Option value = "france" > France</ Option >
1378
1380
< Option value = "germany" > Germany</ Option >
1379
1381
< Option value = "china" > China</ Option >
1380
1382
</ Select > ,
1381
1383
) ;
1382
1384
1383
- const hiddenInput = container . querySelector ( '[autocomplete="country"] ') ;
1385
+ const hiddenInput = screen . getByRole ( 'textbox ') ;
1384
1386
1385
1387
expect ( hiddenInput ) . not . to . eq ( null ) ;
1386
1388
expect ( hiddenInput ) . to . have . value ( 'germany' ) ;
@@ -1397,15 +1399,15 @@ describe('<Select />', () => {
1397
1399
1398
1400
it ( 'clears value and calls external onChange when browser clears autofill' , async ( ) => {
1399
1401
const onChangeHandler = spy ( ) ;
1400
- const { container } = await render (
1402
+ await render (
1401
1403
< Select onChange = { onChangeHandler } defaultValue = "germany" autoComplete = "country" >
1402
1404
< Option value = "france" > France</ Option >
1403
1405
< Option value = "germany" > Germany</ Option >
1404
1406
< Option value = "china" > China</ Option >
1405
1407
</ Select > ,
1406
1408
) ;
1407
1409
1408
- const hiddenInput = container . querySelector ( '[autocomplete="country"] ') ;
1410
+ const hiddenInput = screen . getByRole ( 'textbox ') ;
1409
1411
1410
1412
expect ( hiddenInput ) . not . to . eq ( null ) ;
1411
1413
expect ( hiddenInput ) . to . have . value ( 'germany' ) ;
0 commit comments