Skip to content

Commit 52d240a

Browse files
committed
Fix errors
1 parent 5f04e1d commit 52d240a

File tree

47 files changed

+361
-318
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+361
-318
lines changed

packages-internal/test-utils/src/mochaHooks.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ describe('mochaHooks', () => {
8383
// not wrapped in act()
8484
unsafeSetState(1);
8585
// make sure effects are flushed
86+
// eslint-disable-next-line testing-library/no-unnecessary-act
8687
act(() => {});
8788
});
8889

packages/mui-base/src/Button/Button.test.tsx

+14-18
Original file line numberDiff line numberDiff line change
@@ -63,46 +63,44 @@ describe('<Button />', () => {
6363
expect(button).not.to.have.attribute('disabled');
6464
});
6565

66-
it('can receive focus when focusableWhenDisabled is set', () => {
66+
it('can receive focus when focusableWhenDisabled is set', async () => {
6767
const { getByRole } = render(<Button focusableWhenDisabled disabled />);
6868

6969
const button = getByRole('button');
70-
act(() => {
70+
await act(async () => {
7171
button.focus();
7272
});
7373

7474
expect(document.activeElement).to.equal(button);
7575
});
7676

77-
it('does not respond to user actions when disabled and focused', () => {
77+
it('does not respond to user actions when disabled and focused', async () => {
7878
const handleClick = spy();
7979
const { getByRole } = render(
8080
<Button focusableWhenDisabled disabled onClick={handleClick} />,
8181
);
8282

8383
const button = getByRole('button');
84-
act(() => {
84+
await act(async () => {
8585
button.focus();
86-
});
87-
88-
act(() => {
8986
button.click();
90-
fireEvent.keyDown(button, { key: 'Enter' });
91-
fireEvent.keyUp(button, { key: ' ' });
9287
});
9388

89+
fireEvent.keyDown(button, { key: 'Enter' });
90+
fireEvent.keyUp(button, { key: ' ' });
91+
9492
expect(handleClick.callCount).to.equal(0);
9593
});
9694
});
9795

9896
describe('as non-button element', () => {
99-
it('can receive focus when focusableWhenDisabled is set', () => {
97+
it('can receive focus when focusableWhenDisabled is set', async () => {
10098
const { getByRole } = render(
10199
<Button slots={{ root: 'span' }} focusableWhenDisabled disabled />,
102100
);
103101

104102
const button = getByRole('button');
105-
act(() => {
103+
await act(async () => {
106104
button.focus();
107105
});
108106

@@ -120,23 +118,21 @@ describe('<Button />', () => {
120118
expect(button).to.have.attribute('tabindex', '0');
121119
});
122120

123-
it('does not respond to user actions when disabled and focused', () => {
121+
it('does not respond to user actions when disabled and focused', async () => {
124122
const handleClick = spy();
125123
const { getByRole } = render(
126124
<Button slots={{ root: 'span' }} focusableWhenDisabled disabled onClick={handleClick} />,
127125
);
128126

129127
const button = getByRole('button');
130-
act(() => {
128+
await act(async () => {
131129
button.focus();
132-
});
133-
134-
act(() => {
135130
button.click();
136-
fireEvent.keyDown(button, { key: 'Enter' });
137-
fireEvent.keyUp(button, { key: ' ' });
138131
});
139132

133+
fireEvent.keyDown(button, { key: 'Enter' });
134+
fireEvent.keyUp(button, { key: ' ' });
135+
140136
expect(handleClick.callCount).to.equal(0);
141137
});
142138
});

packages/mui-base/src/ClickAwayListener/ClickAwayListener.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ describe('<ClickAwayListener />', () => {
2525
* React bug: https://github.com/facebook/react/issues/20074
2626
*/
2727
function render(...args) {
28+
// eslint-disable-next-line testing-library/render-result-naming-convention
2829
const result = clientRender(...args);
2930
clock.tick(0);
3031
return result;

packages/mui-base/src/Dropdown/Dropdown.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ describe('<Dropdown />', () => {
2222
element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
2323
options?: RenderOptions,
2424
): Promise<MuiRenderResult> {
25+
// eslint-disable-next-line testing-library/render-result-naming-convention
2526
const rendered = internalRender(element, options);
2627
await flushMicrotasks();
2728
return rendered;

packages/mui-base/src/Menu/Menu.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ describe('<Menu />', () => {
3232
element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
3333
options?: RenderOptions,
3434
): Promise<MuiRenderResult> {
35+
// eslint-disable-next-line testing-library/render-result-naming-convention
3536
const rendered = internalRender(element, options);
3637
await flushMicrotasks();
3738
return rendered;

packages/mui-base/src/MenuButton/MenuButton.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ describe('<MenuButton />', () => {
9898
button.focus();
9999
});
100100

101-
expect(document.activeElement).to.equal(button);
101+
expect(button).toHaveFocus();
102102
});
103103
});
104104

packages/mui-base/src/Select/Select.test.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
MuiRenderResult,
1010
RenderOptions,
1111
flushMicrotasks,
12+
within,
1213
} from '@mui/internal-test-utils';
1314
import userEvent from '@testing-library/user-event';
1415
import { Select, SelectListboxSlotProps, selectClasses } from '@mui/base/Select';
@@ -28,6 +29,7 @@ describe('<Select />', () => {
2829
element: React.ReactElement<any, string | React.JSXElementConstructor<any>>,
2930
options?: RenderOptions,
3031
): Promise<MuiRenderResult> {
32+
// eslint-disable-next-line testing-library/render-result-naming-convention
3133
const rendered = internalRender(element, options);
3234
await flushMicrotasks();
3335
return rendered;
@@ -918,15 +920,15 @@ describe('<Select />', () => {
918920
});
919921

920922
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(
922924
<Select>
923925
<Option value={1}>One</Option>
924926
<Option value={2}>Two</Option>
925927
</Select>,
926928
);
927929

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
930932

931933
expect(zws).not.to.equal(null);
932934
});
@@ -1160,7 +1162,7 @@ describe('<Select />', () => {
11601162
);
11611163

11621164
const input = getAllByRole('textbox')[0];
1163-
expect(document.activeElement).to.equal(input);
1165+
expect(input).toHaveFocus();
11641166
});
11651167

11661168
it('scrolls to initially highlighted option after opening', async function test() {
@@ -1219,7 +1221,7 @@ describe('<Select />', () => {
12191221
);
12201222

12211223
const select = getByRole('combobox');
1222-
expect(document.activeElement).to.equal(select);
1224+
expect(select).toHaveFocus();
12231225
});
12241226
});
12251227

@@ -1346,15 +1348,15 @@ describe('<Select />', () => {
13461348
describe('browser autofill', () => {
13471349
it('sets value and calls external onChange when browser autofills', async () => {
13481350
const onChangeHandler = spy();
1349-
const { container } = await render(
1351+
await render(
13501352
<Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
13511353
<Option value="france">France</Option>
13521354
<Option value="germany">Germany</Option>
13531355
<Option value="china">China</Option>
13541356
</Select>,
13551357
);
13561358

1357-
const hiddenInput = container.querySelector('[autocomplete="country"]');
1359+
const hiddenInput = screen.getByRole('textbox');
13581360

13591361
expect(hiddenInput).not.to.eq(null);
13601362
expect(hiddenInput).to.have.value('germany');
@@ -1372,15 +1374,15 @@ describe('<Select />', () => {
13721374

13731375
it('does not set value when browser autofills invalid value', async () => {
13741376
const onChangeHandler = spy();
1375-
const { container } = await render(
1377+
await render(
13761378
<Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
13771379
<Option value="france">France</Option>
13781380
<Option value="germany">Germany</Option>
13791381
<Option value="china">China</Option>
13801382
</Select>,
13811383
);
13821384

1383-
const hiddenInput = container.querySelector('[autocomplete="country"]');
1385+
const hiddenInput = screen.getByRole('textbox');
13841386

13851387
expect(hiddenInput).not.to.eq(null);
13861388
expect(hiddenInput).to.have.value('germany');
@@ -1397,15 +1399,15 @@ describe('<Select />', () => {
13971399

13981400
it('clears value and calls external onChange when browser clears autofill', async () => {
13991401
const onChangeHandler = spy();
1400-
const { container } = await render(
1402+
await render(
14011403
<Select onChange={onChangeHandler} defaultValue="germany" autoComplete="country">
14021404
<Option value="france">France</Option>
14031405
<Option value="germany">Germany</Option>
14041406
<Option value="china">China</Option>
14051407
</Select>,
14061408
);
14071409

1408-
const hiddenInput = container.querySelector('[autocomplete="country"]');
1410+
const hiddenInput = screen.getByRole('textbox');
14091411

14101412
expect(hiddenInput).not.to.eq(null);
14111413
expect(hiddenInput).to.have.value('germany');

packages/mui-base/src/Snackbar/Snackbar.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ describe('<Snackbar />', () => {
1818
* React bug: https://github.com/facebook/react/issues/20074
1919
*/
2020
function render(...args: [React.ReactElement<any>]) {
21+
// eslint-disable-next-line testing-library/render-result-naming-convention
2122
const result = clientRender(...args);
2223
clock.tick(0);
2324
return result;

packages/mui-base/src/Unstable_NumberInput/NumberInput.test.tsx

+9-11
Original file line numberDiff line numberDiff line change
@@ -357,21 +357,21 @@ describe('<NumberInput />', () => {
357357
const incrementButton = getByTestId('increment-btn');
358358
const decrementButton = getByTestId('decrement-btn');
359359

360-
expect(document.activeElement).to.equal(document.body);
360+
expect(document.body).toHaveFocus();
361361

362362
await userEvent.click(incrementButton);
363363

364-
expect(document.activeElement).to.equal(input);
364+
expect(input).toHaveFocus();
365365

366-
act(() => {
366+
await act(async () => {
367367
input.blur();
368368
});
369369

370-
expect(document.activeElement).to.equal(document.body);
370+
expect(document.body).toHaveFocus();
371371

372372
await userEvent.click(decrementButton);
373373

374-
expect(document.activeElement).to.equal(input);
374+
expect(input).toHaveFocus();
375375
});
376376
});
377377

@@ -554,13 +554,13 @@ describe('<NumberInput />', () => {
554554
const { getByRole } = render(<NumberInput />);
555555

556556
const input = getByRole('textbox') as HTMLInputElement;
557-
expect(document.activeElement).to.equal(document.body);
557+
expect(document.body).toHaveFocus();
558558

559559
await userEvent.keyboard('[Tab]');
560-
expect(document.activeElement).to.equal(input);
560+
expect(input).toHaveFocus();
561561

562562
await userEvent.keyboard('[Tab]');
563-
expect(document.activeElement).to.equal(document.body);
563+
expect(document.body).toHaveFocus();
564564
});
565565
});
566566

@@ -600,9 +600,7 @@ describe('<NumberInput />', () => {
600600
const input = getByRole('textbox') as HTMLInputElement;
601601
const button = getByTestId('button') as HTMLButtonElement;
602602

603-
act(() => {
604-
fireEvent.click(button);
605-
});
603+
fireEvent.click(button);
606604

607605
await userEvent.click(input);
608606
expect(input.value).to.equal('20');

packages/mui-base/src/Unstable_Popup/Popup.test.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ describe('<Popup />', () => {
5252
describeConformanceUnstyled(<Popup {...defaultProps} />, () => ({
5353
inheritComponent: 'div',
5454
render: async (...renderArgs) => {
55+
// eslint-disable-next-line testing-library/render-result-naming-convention
5556
const result = render(...renderArgs);
5657
await waitForPosition();
5758

packages/mui-base/src/unstable_useNumberInput/useNumberInput.test.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ describe('useNumberInput', () => {
132132
expect(handleChange.callCount).to.equal(0);
133133

134134
await userEvent.keyboard('[Tab]');
135-
expect(document.activeElement).to.equal(document.body);
135+
expect(document.body).toHaveFocus();
136136

137137
expect(handleChange.callCount).to.equal(1);
138138
expect(handleChange.args[0][1]).to.equal(34);
@@ -180,7 +180,7 @@ describe('useNumberInput', () => {
180180
await userEvent.keyboard('9');
181181

182182
await userEvent.keyboard('[Tab]');
183-
expect(document.activeElement).to.equal(document.body);
183+
expect(document.body).toHaveFocus();
184184

185185
expect(handleChange.args[0][1]).to.equal(5);
186186
});
@@ -204,7 +204,7 @@ describe('useNumberInput', () => {
204204
await userEvent.keyboard('-9');
205205

206206
await userEvent.keyboard('[Tab]');
207-
expect(document.activeElement).to.equal(document.body);
207+
expect(document.body).toHaveFocus();
208208

209209
expect(handleChange.args[0][1]).to.equal(5);
210210
});
@@ -229,7 +229,7 @@ describe('useNumberInput', () => {
229229
await userEvent.keyboard('4');
230230

231231
await userEvent.keyboard('[Tab]');
232-
expect(document.activeElement).to.equal(document.body);
232+
expect(document.body).toHaveFocus();
233233

234234
expect(handleChange.args[0][1]).to.equal(5);
235235
});
@@ -254,7 +254,7 @@ describe('useNumberInput', () => {
254254
expect(input.value).to.equal('');
255255

256256
await userEvent.keyboard('[Tab]');
257-
expect(document.activeElement).to.equal(document.body);
257+
expect(document.body).toHaveFocus();
258258

259259
expect(handleChange.callCount).to.equal(1);
260260
expect(handleChange.args[0][1]).to.equal(null);
@@ -280,7 +280,7 @@ describe('useNumberInput', () => {
280280
expect(input.value).to.equal('-');
281281

282282
await userEvent.keyboard('[Tab]');
283-
expect(document.activeElement).to.equal(document.body);
283+
expect(document.body).toHaveFocus();
284284

285285
expect(handleChange.callCount).to.equal(1);
286286
expect(handleChange.args[0][1]).to.equal(null);

packages/mui-base/src/useAutocomplete/useAutocomplete.test.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { expect } from 'chai';
3-
import { createRenderer, screen, ErrorBoundary, act, fireEvent } from '@mui/internal-test-utils';
3+
import { createRenderer, screen, ErrorBoundary, fireEvent } from '@mui/internal-test-utils';
44
import { spy } from 'sinon';
55
import { useAutocomplete, createFilterOptions } from '@mui/base/useAutocomplete';
66

@@ -319,10 +319,8 @@ describe('useAutocomplete', () => {
319319
render(<Test options={['foo', 'bar']} />);
320320
const input = screen.getByRole('combobox');
321321

322-
act(() => {
323-
fireEvent.change(input, { target: { value: 'free' } });
324-
input.blur();
325-
});
322+
fireEvent.change(input, { target: { value: 'free' } });
323+
fireEvent.blur(input);
326324

327325
expect(input.value).to.equal('free');
328326
});

packages/mui-joy/src/Accordion/Accordion.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -121,13 +121,13 @@ describe('<Accordion />', () => {
121121
});
122122

123123
it('should warn when switching from controlled to uncontrolled', () => {
124-
const wrapper = render(
124+
const { setProps } = render(
125125
<Accordion expanded>
126126
<AccordionSummary>Header</AccordionSummary>
127127
</Accordion>,
128128
);
129129

130-
expect(() => wrapper.setProps({ expanded: undefined })).to.toErrorDev(
130+
expect(() => setProps({ expanded: undefined })).to.toErrorDev(
131131
'MUI: A component is changing the controlled expanded state of Accordion to be uncontrolled.',
132132
);
133133
});

0 commit comments

Comments
 (0)