Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[code-infra] Set up eslint-plugin-testing-library #14232

Merged
merged 18 commits into from
Aug 20, 2024
Merged

[code-infra] Set up eslint-plugin-testing-library #14232

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
dc7c01e
Install plugin
LukasTy Aug 15, 2024
57d8952
setup plugin
LukasTy Aug 15, 2024
38e937b
Address plugin errors
LukasTy Aug 16, 2024
aab1ee5
Ignore `no-container` error
LukasTy Aug 16, 2024
7190437
Use `test-utils` with renamed `fireUserEvent` export
LukasTy Aug 16, 2024
b92ffad
Rename `userEvent` usages to `fireUserEvent`
LukasTy Aug 16, 2024
a233de5
Remove unnecessary `act`
LukasTy Aug 16, 2024
7012133
Wrap `paste` event dispatch in `act`
LukasTy Aug 16, 2024
8be38a6
Apply suggestions from code review
LukasTy Aug 16, 2024
791044b
Use internal `fireUserEvent`
LukasTy Aug 16, 2024
9ef5ba7
Install package with removed `userEvent` export to test
LukasTy Aug 16, 2024
6cad254
Revert `@mui/internal-test-utils` install
LukasTy Aug 16, 2024
71bf3bf
Merge branch 'master' into setup-eslint-plugin-testing-library
cherniavskii Aug 19, 2024
63e364a
fix merge
cherniavskii Aug 19, 2024
c99765e
Use `root` alias for directly imported queries
LukasTy Aug 20, 2024
83e9b65
Deprecate `fireUserEvent` exports
LukasTy Aug 20, 2024
973a534
Simplify assertion
LukasTy Aug 20, 2024
c90c2e6
Use `within` instead of root getters
LukasTy Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,19 @@ module.exports = {
},
overrides: [
...baseline.overrides,
{
files: [
// matching the pattern of the test runner
'*.test.js',
'*.test.ts',
'*.test.tsx',
],
excludedFiles: ['test/e2e/**/*', 'test/regressions/**/*'],
extends: ['plugin:testing-library/react'],
rules: {
'testing-library/no-container': 'off',
},
},
{
files: [
// matching the pattern of the test runner
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
"@emotion/styled": "^11.13.0",
"@mui/icons-material": "^5.16.5",
"@mui/internal-markdown": "^1.0.9",
"@mui/internal-test-utils": "^1.0.7",
"@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/de30a2ad/@mui/internal-test-utils",
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
"@mui/material": "^5.16.5",
"@mui/monorepo": "github:mui/material-ui#0acfe665034fdf4578156ebaf4372713cf23bce4",
"@mui/utils": "^5.16.5",
Expand Down Expand Up @@ -149,6 +149,7 @@
"eslint-plugin-react": "^7.35.0",
"eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-testing-library": "^6.3.0",
"fast-glob": "^3.3.2",
"format-util": "^1.0.5",
"fs-extra": "^11.2.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ describe('<ResponsiveChartContainerPro /> - License', () => {
render(<ResponsiveChartContainerPro series={[]} width={100} height={100} />),
).toErrorDev(['MUI X: Missing license key.']);

await waitFor(() => {
expect(screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
await waitFor(async () => {
expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null);
});
LukasTy marked this conversation as resolved.
Show resolved Hide resolved
});
});
2 changes: 1 addition & 1 deletion packages/x-charts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}
},
"devDependencies": {
"@mui/internal-test-utils": "^1.0.7",
"@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/de30a2ad/@mui/internal-test-utils",
"@react-spring/core": "^9.7.4",
"@react-spring/shared": "^9.7.4",
"@types/prop-types": "^15.7.12",
Expand Down
6 changes: 3 additions & 3 deletions packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
import { useHighlighted } from './useHighlighted';
import { HighlightedProvider } from './HighlightedProvider';
import { SeriesProvider } from '../SeriesProvider';
Expand Down Expand Up @@ -42,7 +42,7 @@ describe('useHighlighted', () => {
});

it('should not throw an error when parent context is present', () => {
const { getByText } = render(
render(
<PluginProvider>
<SeriesProvider series={[]}>
<HighlightedProvider highlightedItem={{ seriesId: 'test-id' }}>
Expand All @@ -52,6 +52,6 @@ describe('useHighlighted', () => {
</PluginProvider>,
);

expect(getByText('test-id')).toBeVisible();
expect(screen.getByText('test-id')).toBeVisible();
});
});
6 changes: 3 additions & 3 deletions packages/x-charts/src/hooks/useSeries.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
import { useSeries } from './useSeries';
import { SeriesProvider } from '../context/SeriesProvider';
import { PluginProvider } from '../internals';
Expand Down Expand Up @@ -41,14 +41,14 @@ describe('useSeries', () => {
});

it('should not throw an error when parent context is present', () => {
const { getByText } = render(
render(
<PluginProvider>
<SeriesProvider series={[{ type: 'bar', id: 'test-id', data: [1, 2] }]}>
<UseSeries />
</SeriesProvider>
</PluginProvider>,
);

expect(getByText('test-id')).toBeVisible();
expect(screen.getByText('test-id')).toBeVisible();
});
});
6 changes: 3 additions & 3 deletions packages/x-charts/src/hooks/useSvgRef.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { expect } from 'chai';
import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils';
import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils';
import { useSvgRef } from './useSvgRef';
import { DrawingProvider } from '../context/DrawingProvider';

Expand Down Expand Up @@ -52,11 +52,11 @@ describe('useSvgRef', () => {
);
}

const { findByText, forceUpdate } = render(<RenderDrawingProvider />);
const { forceUpdate } = render(<RenderDrawingProvider />);

// Ref is not available on first render.
forceUpdate();

expect(await findByText('test-id')).toBeVisible();
expect(await screen.findByText('test-id')).toBeVisible();
});
});
2 changes: 1 addition & 1 deletion packages/x-data-grid-premium/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
}
},
"devDependencies": {
"@mui/internal-test-utils": "^1.0.7",
"@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/de30a2ad/@mui/internal-test-utils",
"@types/prop-types": "^15.7.12",
"date-fns": "^2.30.0",
"rimraf": "^5.0.10"
Expand Down
16 changes: 5 additions & 11 deletions packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import * as React from 'react';
import {
createRenderer,
screen,
userEvent,
within,
act,
fireEvent,
} from '@mui/internal-test-utils';
import { createRenderer, screen, within, act, fireEvent } from '@mui/internal-test-utils';
import { expect } from 'chai';
import { getCell, getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn';
import { fireUserEvent } from 'test/utils/fireUserEvent';
import { SinonSpy, spy } from 'sinon';
import {
DataGridPremium,
Expand Down Expand Up @@ -177,7 +171,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
setProps({ columns: [{ ...column, editable: true }] });
fireEvent.doubleClick(cell);
expect(cell.querySelector('input')).not.to.equal(null);
userEvent.mousePress(getCell(1, 0));
fireUserEvent.mousePress(getCell(1, 0));

setProps({ columns: [column] });
fireEvent.doubleClick(cell);
Expand Down Expand Up @@ -409,8 +403,8 @@ describe('<DataGridPremium /> - Aggregation', () => {

act(() => apiRef.current.showColumnMenu('id'));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Turning these async can also be done in follow up.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean adding an await before act?
The plugin didn't complain about this. 🙈 🤷

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you mean adding an await before act?

also making the function async

The plugin didn't complain about this. 🙈 🤷

...yet 😄 testing-library/eslint-plugin-testing-library#915

More info in this issue

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... Well, it looks like it would be great to get the rule and then update the tests with that rule in action. 🙈

clock.runToLast();
userEvent.mousePress(screen.getByLabelText('Aggregation'));
userEvent.mousePress(
fireUserEvent.mousePress(screen.getByLabelText('Aggregation'));
fireUserEvent.mousePress(
within(
screen.getByRole('listbox', {
name: 'Aggregation',
Expand Down
27 changes: 14 additions & 13 deletions packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { stub, SinonStub } from 'sinon';
import { expect } from 'chai';
import { spyApi, getCell, grid } from 'test/utils/helperFn';
import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils';
import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils';
import {
DataGridPremium,
DataGridPremiumProps,
Expand All @@ -11,6 +11,7 @@ import {
gridClasses,
} from '@mui/x-data-grid-premium';
import { getBasicGridData } from '@mui/x-data-grid-generator';
import { fireUserEvent } from 'test/utils/fireUserEvent';

describe('<DataGridPremium /> - Cell selection', () => {
const { render } = createRenderer();
Expand Down Expand Up @@ -116,9 +117,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
expect(document.querySelector('.Mui-selected')).to.equal(null);
const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
userEvent.mousePress(getCell(2, 1), { shiftKey: true });
fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
expect(document.querySelectorAll('.Mui-selected')).to.have.length(3 * 2); // 3 rows with 2 cells each
});

Expand All @@ -128,9 +129,9 @@ describe('<DataGridPremium /> - Cell selection', () => {

const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
userEvent.mousePress(getCell(2, 1), { shiftKey: true });
fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true });
expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({
id: 2,
Expand All @@ -142,9 +143,9 @@ describe('<DataGridPremium /> - Cell selection', () => {
render(<TestDataGridSelection />);
const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
userEvent.mousePress(getCell(2, 2), { shiftKey: true });
fireUserEvent.mousePress(getCell(2, 2), { shiftKey: true });

expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeTop']);
expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeLeft']);
Expand All @@ -167,7 +168,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
const cell = getCell(0, 0);
cell.focus();
expect(cell).toHaveFocus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.click(getCell(2, 1), { shiftKey: true });
expect(cell).toHaveFocus();
});
Expand All @@ -179,7 +180,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
Expand All @@ -191,7 +192,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
const cell = getCell(1, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
fireEvent.keyDown(cell, { key: 'ArrowUp', shiftKey: true });
expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 1, field: 'id' });
Expand All @@ -203,7 +204,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
const cell = getCell(0, 1);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
fireEvent.keyDown(cell, { key: 'ArrowLeft', shiftKey: true });
expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({
Expand All @@ -218,7 +219,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange');
const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
fireEvent.keyDown(cell, { key: 'ArrowRight', shiftKey: true });
expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' });
Expand All @@ -232,7 +233,7 @@ describe('<DataGridPremium /> - Cell selection', () => {
render(<TestDataGridSelection />);
const cell = getCell(0, 0);
cell.focus();
userEvent.mousePress(cell);
fireUserEvent.mousePress(cell);
fireEvent.keyDown(cell, { key: 'Shift' });
fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true });
expect(cell).toHaveFocus();
Expand Down
Loading