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

[core] Update tooling to run with React 18 #4155

Merged
merged 10 commits into from
Aug 4, 2022
Merged

[core] Update tooling to run with React 18 #4155

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
23abe64
Init
m4theushw Jul 22, 2022
c7bf6be
Simplify waiting for promises
m4theushw Jul 23, 2022
40bf6bc
Remove duplicated Promise.resolve
m4theushw Jul 23, 2022
8f87854
Merge branch 'master' into react-18
m4theushw Aug 1, 2022
7c55d12
Merge branch 'master' into react-18
m4theushw Aug 3, 2022
1f48233
Add back removed test
m4theushw Aug 3, 2022
9bd9ec2
Delete unnecessary updateRows call
m4theushw Aug 3, 2022
24f2763
Remove useless .filter
m4theushw Aug 3, 2022
2bf51b5
Reduce diff
m4theushw Aug 4, 2022
51e5822
Merge branch 'master' into react-18
m4theushw Aug 4, 2022
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
4 changes: 2 additions & 2 deletions benchmark/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"html-webpack-plugin": "^5.5.0",
"mui-plus": "^0.0.15",
"playwright": "^1.21.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-spring": "^9.2.4",
"react-virtualized": "^9.22.3",
"serve-handler": "^6.1.3",
Expand Down
6 changes: 3 additions & 3 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,11 @@
"prismjs": "^1.28.0",
"prop-types": "^15.8.1",
"raw-loader": "^1.0.0",
"react": "^17.0.2",
"react": "^18.2.0",
"react-docgen": "^5.4.3",
"react-dom": "^17.0.2",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-is": "^17.0.2",
"react-is": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-text-mask": "^5.4.3",
Expand Down
11 changes: 7 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,15 @@
"@emotion/cache": "^11.9.3",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@eps1lon/enzyme-adapter-react-17": "^0.1.0",
"@mnajdova/enzyme-adapter-react-18": "^0.2.0",
"@mui/icons-material": "^5.8.0",
"@mui/material": "^5.8.0",
"@mui/monorepo": "https://github.com/mui/material-ui.git#master",
"@mui/utils": "^5.8.0",
"@octokit/plugin-retry": "^3.0.9",
"@octokit/rest": "^18.12.0",
"@playwright/test": "1.21.1",
"@testing-library/react": "^12.1.5",
"@testing-library/react": "^13.3.0",
"@types/babel__core": "^7.1.19",
"@types/chai": "^4.3.1",
"@types/chai-dom": "^0.0.13",
Expand Down Expand Up @@ -150,8 +150,8 @@
"nyc": "^15.1.0",
"playwright": "^1.21.1",
"prettier": "^2.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"serve": "^13.0.4",
"sinon": "^14.0.0",
"stream-browserify": "^3.0.0",
Expand All @@ -178,5 +178,8 @@
},
"dependencies": {
"html-webpack-plugin": "^5.5.0"
},
"resolutions": {
"**/react-is": "^18.2.0"
}
}
16 changes: 9 additions & 7 deletions packages/grid/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,6 +1,6 @@
import * as React from 'react';
// @ts-ignore Remove once the test utils are typed
import { createRenderer, screen, userEvent, within } from '@mui/monorepo/test/utils';
import { createRenderer, screen, userEvent, within, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import { getColumnValues } from 'test/utils/helperFn';
import { SinonSpy, spy } from 'sinon';
Expand Down Expand Up @@ -282,7 +282,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
it('should render select on aggregable column', () => {
render(<Test />);

apiRef.current.showColumnMenu('id');
act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();

expect(screen.queryByLabelText('Aggregation')).not.to.equal(null);
Expand All @@ -293,7 +293,7 @@ describe('<DataGridPremium /> - Aggregation', () => {

expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']);

apiRef.current.showColumnMenu('id');
act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();
userEvent.mousePress(screen.queryByLabelText('Aggregation'));
userEvent.mousePress(
Expand Down Expand Up @@ -430,7 +430,7 @@ describe('<DataGridPremium /> - Aggregation', () => {
/>,
);

apiRef.current.showColumnMenu('id');
act(() => apiRef.current.showColumnMenu('id'));
clock.runToLast();

expect(screen.queryAllByLabelText('Aggregation')).to.have.length(0);
Expand Down Expand Up @@ -469,9 +469,11 @@ describe('<DataGridPremium /> - Aggregation', () => {
);
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']);

apiRef.current.updateColumns([
{ field: 'id', availableAggregationFunctions: ['min', 'max'] },
]);
act(() =>
apiRef.current.updateColumns([
{ field: 'id', availableAggregationFunctions: ['min', 'max'] },
]),
);
expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5', '5' /* Agg */]);
});
});
Expand Down
16 changes: 8 additions & 8 deletions packages/grid/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ import {
GridActionsCellItem,
} from '@mui/x-data-grid-premium';
// @ts-ignore Remove once the test utils are typed
import { createRenderer, screen, fireEvent } from '@mui/monorepo/test/utils';
import { createRenderer, screen, fireEvent, act } from '@mui/monorepo/test/utils';
import { expect } from 'chai';
import Excel from 'exceljs';

const isJSDOM = /jsdom/.test(window.navigator.userAgent);

describe('<DataGridPremium /> - Export Excel', () => {
const { render } = createRenderer();
const { render } = createRenderer({ clock: 'fake' });

let apiRef: React.MutableRefObject<GridApi>;

Expand Down Expand Up @@ -51,9 +51,9 @@ describe('<DataGridPremium /> - Export Excel', () => {
};

describe('export interface', () => {
it('should generate a file', () => {
it('should generate a file', async () => {
render(<TestCaseExcelExport />);
expect(apiRef.current.getDataAsExcel()).not.to.equal(null);
expect(await act(() => apiRef.current.getDataAsExcel())).not.to.equal(null);
});

it('should display export option', () => {
Expand Down Expand Up @@ -98,7 +98,7 @@ describe('<DataGridPremium /> - Export Excel', () => {
};
render(<Test />);

const workbook = await apiRef.current.getDataAsExcel();
const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];

expect(worksheet.getCell('A1').value).to.equal('str');
Expand Down Expand Up @@ -142,7 +142,7 @@ describe('<DataGridPremium /> - Export Excel', () => {
};
render(<Test />);

const workbook = await apiRef.current.getDataAsExcel();
const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];

expect(worksheet.getCell('A1').value).to.equal('option');
Expand Down Expand Up @@ -180,7 +180,7 @@ describe('<DataGridPremium /> - Export Excel', () => {
};
render(<Test />);

const workbook = await apiRef.current.getDataAsExcel();
const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];

expect(worksheet.getCell('A1').value).to.equal('str');
Expand Down Expand Up @@ -218,7 +218,7 @@ describe('<DataGridPremium /> - Export Excel', () => {
};
render(<Test />);

const workbook = await apiRef.current.getDataAsExcel();
const workbook = await act(() => apiRef.current.getDataAsExcel());
const worksheet = workbook!.worksheets[0];

// 1-based index + 1 for column header row
Expand Down
76 changes: 42 additions & 34 deletions packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -494,19 +494,19 @@ describe('<DataGridPremium /> - Row Grouping', () => {
expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'category1', 'category2']);

// No menu item on column menu to add / remove grouping criteria
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const category1Menuitem = screen.queryByRole('menuitem', {
name: 'Stop grouping by category1',
});
expect(category1Menuitem).to.equal(null);

apiRef.current.hideColumnMenu();
act(() => apiRef.current.hideColumnMenu());
clock.runToLast();
expect(screen.queryByRole('menu')).to.equal(null);

apiRef.current.showColumnMenu('category2');
act(() => apiRef.current.showColumnMenu('category2'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const category2Menuitem = screen.queryByRole('menuitem', { name: 'Group by category2' });
Expand Down Expand Up @@ -715,16 +715,20 @@ describe('<DataGridPremium /> - Row Grouping', () => {
);

expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' });
apiRef.current.updateColumns([
{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 100 },
]);
act(() =>
apiRef.current.updateColumns([
{ field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 100 },
]),
);
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
apiRef.current.updateColumns([
{
field: 'id',
headerName: 'New id',
},
]);
act(() =>
apiRef.current.updateColumns([
{
field: 'id',
headerName: 'New id',
},
]),
);
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
});

Expand Down Expand Up @@ -1043,17 +1047,21 @@ describe('<DataGridPremium /> - Row Grouping', () => {

expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
apiRef.current.updateColumns([
{ field: getRowGroupingFieldFromGroupingCriteria('category1'), width: 100 },
]);
act(() =>
apiRef.current.updateColumns([
{ field: getRowGroupingFieldFromGroupingCriteria('category1'), width: 100 },
]),
);
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
apiRef.current.updateColumns([
{
field: 'id',
headerName: 'New id',
},
]);
act(() =>
apiRef.current.updateColumns([
{
field: 'id',
headerName: 'New id',
},
]),
);
expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' });
expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' });
});
Expand Down Expand Up @@ -1524,7 +1532,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
]}
/>,
);
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItem = screen.queryByRole('menuitem', { name: 'Group by category1' });
Expand All @@ -1546,7 +1554,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
]}
/>,
);
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Group by category1' })).to.equal(null);
Expand All @@ -1570,7 +1578,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
}}
/>,
);
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItem = screen.queryByRole('menuitem', { name: 'Stop grouping by category1' });
Expand Down Expand Up @@ -1601,7 +1609,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
/>,
);

apiRef.current.showColumnMenu('__row_group_by_columns_group_category1__');
act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category1__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory1 = screen.queryByRole('menuitem', {
Expand All @@ -1610,11 +1618,11 @@ describe('<DataGridPremium /> - Row Grouping', () => {
fireEvent.click(menuItemCategory1);
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2']);

apiRef.current.hideColumnMenu();
act(() => apiRef.current.hideColumnMenu());
clock.runToLast();
expect(screen.queryByRole('menu')).to.equal(null);

apiRef.current.showColumnMenu('__row_group_by_columns_group_category2__');
act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group_category2__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory2 = screen.queryByRole('menuitem', {
Expand Down Expand Up @@ -1647,7 +1655,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
/>,
);

apiRef.current.showColumnMenu('__row_group_by_columns_group__');
act(() => apiRef.current.showColumnMenu('__row_group_by_columns_group__'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
const menuItemCategory1 = screen.queryByRole('menuitem', {
Expand Down Expand Up @@ -1676,7 +1684,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
]}
/>,
);
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Group by Category 1' })).not.to.equal(null);
Expand All @@ -1701,7 +1709,7 @@ describe('<DataGridPremium /> - Row Grouping', () => {
}}
/>,
);
apiRef.current.showColumnMenu('category1');
act(() => apiRef.current.showColumnMenu('category1'));
clock.runToLast();
expect(screen.queryByRole('menu')).not.to.equal(null);
expect(screen.queryByRole('menuitem', { name: 'Stop grouping by Category 1' })).not.to.equal(
Expand Down Expand Up @@ -2270,29 +2278,29 @@ describe('<DataGridPremium /> - Row Grouping', () => {
describe('apiRef: addRowGroupingCriteria', () => {
it('should add grouping criteria to model', () => {
render(<Test initialState={{ rowGrouping: { model: ['category1'] } }} />);
apiRef.current.addRowGroupingCriteria('category2');
act(() => apiRef.current.addRowGroupingCriteria('category2'));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category1', 'category2']);
});

it('should add grouping criteria to model at the right position', () => {
render(<Test initialState={{ rowGrouping: { model: ['category1'] } }} />);
apiRef.current.addRowGroupingCriteria('category2', 0);
act(() => apiRef.current.addRowGroupingCriteria('category2', 0));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']);
});
});

describe('apiRef: removeRowGroupingCriteria', () => {
it('should remove field from model', () => {
render(<Test initialState={{ rowGrouping: { model: ['category1'] } }} />);
apiRef.current.removeRowGroupingCriteria('category1');
act(() => apiRef.current.removeRowGroupingCriteria('category1'));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]);
});
});

describe('apiRef: setRowGroupingCriteriaIndex', () => {
it('should change the grouping criteria order', () => {
render(<Test initialState={{ rowGrouping: { model: ['category1', 'category2'] } }} />);
apiRef.current.setRowGroupingCriteriaIndex('category1', 1);
act(() => apiRef.current.setRowGroupingCriteriaIndex('category1', 1));
expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']);
});
});
Expand Down
Loading