From 4ebe54a63aeedfa05673cd99d0735f1e6d200a0e Mon Sep 17 00:00:00 2001 From: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> Date: Mon, 27 Jan 2025 20:06:05 +0100 Subject: [PATCH] [DataGrid] Add possibility of `null` in the return type of the `useGridApiRef()` hook (#16353) Signed-off-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com> --- .../AccessDisabledColumnFeatures.js | 6 +- .../AccessDisabledColumnFeatures.tsx | 6 +- .../AccessDisabledColumnFeatures.tsx.preview | 6 +- .../data-grid/api-object/UseGridApiRef.js | 2 +- .../data-grid/api-object/UseGridApiRef.tsx | 2 +- .../CellSelectionFormulaField.js | 8 +- .../CellSelectionFormulaField.tsx | 8 +- .../column-dimensions/ColumnAutosizing.js | 2 +- .../column-dimensions/ColumnAutosizing.tsx | 2 +- .../ColumnAutosizingAsync.js | 4 +- .../ColumnAutosizingAsync.tsx | 4 +- .../ColumnAutosizingDynamicRowHeight.js | 2 +- .../ColumnAutosizingDynamicRowHeight.tsx | 2 +- .../ColumnAutosizingGroupedRows.js | 4 +- .../ColumnAutosizingGroupedRows.tsx | 4 +- .../column-menu/ColumnMenuGridPremiumSnap.js | 2 +- .../column-menu/ColumnMenuGridPremiumSnap.tsx | 2 +- .../ColumnPinningDynamicRowHeight.js | 2 +- .../ColumnPinningDynamicRowHeight.tsx | 2 +- .../ColumnSizingPersistWidthOrder.tsx | 2 +- .../ColumnSelectorGridSnap.js | 2 +- .../ColumnSelectorGridSnap.tsx | 2 +- .../data-grid/components/CustomColumnMenu.js | 2 +- .../data-grid/components/CustomColumnMenu.tsx | 2 +- .../data-grid/demo/PopularFeaturesDemo.js | 9 +- .../data-grid/demo/PopularFeaturesDemo.tsx | 9 +- .../events/SubscribeToEventsApiRef.js | 2 +- .../events/SubscribeToEventsApiRef.tsx | 2 +- .../filtering-recipes/FilteredRowCount.js | 9 +- .../filtering-recipes/FilteredRowCount.tsx | 9 +- .../filtering/MultiFilteringPanelSnap.js | 2 +- .../filtering/MultiFilteringPanelSnap.tsx | 2 +- .../data-grid/list-view/ListViewAdvanced.js | 8 +- .../data-grid/list-view/ListViewAdvanced.tsx | 8 +- .../ServerPaginationGridEstimated.js | 4 +- .../ServerPaginationGridEstimated.tsx | 4 +- .../ServerPaginationGridEstimated.tsx.preview | 16 - .../data-grid/recipes-editing/BulkEditing.js | 8 +- .../data-grid/recipes-editing/BulkEditing.tsx | 8 +- .../BulkEditingPremiumNoSnap.js | 8 +- .../BulkEditingPremiumNoSnap.tsx | 8 +- .../RowGroupingExpandOnRowClick.js | 7 +- .../RowGroupingExpandOnRowClick.tsx | 7 +- ...RowGroupingCustomGroupingColDefCallback.js | 8 +- ...owGroupingCustomGroupingColDefCallback.tsx | 8 +- .../RowGroupingGetRowGroupChildren.js | 2 +- .../RowGroupingGetRowGroupChildren.tsx | 4 +- .../RowGroupingSetChildrenExpansion.js | 8 +- .../RowGroupingSetChildrenExpansion.tsx | 8 +- .../DetailPanelExpandOnRowClick.js | 2 +- .../DetailPanelExpandOnRowClick.tsx | 2 +- .../data-grid/row-updates/LazyLoadingGrid.js | 2 +- .../data-grid/row-updates/LazyLoadingGrid.tsx | 2 +- .../row-updates/ThrottledRowsGrid.js | 2 +- .../row-updates/ThrottledRowsGrid.tsx | 2 +- .../data-grid/row-updates/UpdateRowsApiRef.js | 14 +- .../row-updates/UpdateRowsApiRef.tsx | 14 +- .../data-grid/scrolling/ScrollPlayground.js | 4 +- .../data-grid/scrolling/ScrollPlayground.tsx | 4 +- .../data-grid/scrolling/ScrollRestoration.js | 4 +- .../data-grid/scrolling/ScrollRestoration.tsx | 4 +- .../ServerSideLazyLoadingErrorHandling.js | 2 +- .../ServerSideLazyLoadingErrorHandling.tsx | 2 +- .../ServerSideRowGroupingDataGrid.js | 2 +- .../ServerSideRowGroupingDataGrid.tsx | 2 +- .../ServerSideRowGroupingDataGrid.tsx.preview | 2 +- .../ServerSideRowGroupingErrorHandling.js | 2 +- .../ServerSideRowGroupingErrorHandling.tsx | 2 +- .../ServerSideRowGroupingGroupExpansion.js | 2 +- .../ServerSideRowGroupingGroupExpansion.tsx | 2 +- .../server-side-data/ServerSideTreeData.js | 2 +- .../server-side-data/ServerSideTreeData.tsx | 2 +- .../ServerSideTreeData.tsx.preview | 2 +- .../ServerSideTreeDataErrorHandling.js | 2 +- .../ServerSideTreeDataErrorHandling.tsx | 2 +- .../ServerSideTreeDataGroupExpansion.js | 2 +- .../ServerSideTreeDataGroupExpansion.tsx | 2 +- .../data-grid/sorting/ReadOnlySortingGrid.js | 6 +- .../data-grid/sorting/ReadOnlySortingGrid.tsx | 6 +- docs/data/data-grid/state/DirectSelector.js | 2 +- docs/data/data-grid/state/DirectSelector.tsx | 2 +- .../migration-data-grid-v7.md | 11 + .../x/api/data-grid/data-grid-premium.json | 2 +- docs/pages/x/api/data-grid/data-grid-pro.json | 2 +- docs/pages/x/api/data-grid/data-grid.json | 2 +- .../src/DataGridPremium/DataGridPremium.tsx | 2 +- .../useDataGridPremiumComponent.tsx | 2 +- .../src/hooks/utils/useGridApiRef.ts | 5 +- .../utils/useKeepGroupedColumnsHidden.ts | 6 +- .../src/models/dataGridPremiumProps.ts | 2 +- .../src/tests/DataGridPremium.spec.tsx | 14 +- .../src/tests/DataGridPremium.test.tsx | 4 +- .../aggregation.DataGridPremium.test.tsx | 10 +- .../cellSelection.DataGridPremium.test.tsx | 20 +- .../tests/clipboard.DataGridPremium.test.tsx | 6 +- ...SourceAggregation.DataGridPremium.test.tsx | 14 +- .../exportExcel.DataGridPremium.test.tsx | 28 +- .../rowGrouping.DataGridPremium.test.tsx | 146 +++++---- .../rowSelection.DataGridPremium.test.tsx | 26 +- .../statePersistence.DataGridPremium.test.tsx | 40 +-- .../src/DataGridPro/DataGridPro.tsx | 2 +- .../DataGridPro/useDataGridProComponent.tsx | 2 +- .../src/hooks/utils/useGridApiRef.ts | 2 +- .../src/models/dataGridProProps.ts | 2 +- .../src/tests/DataGridPro.spec.tsx | 14 +- .../tests/cellEditing.DataGridPro.test.tsx | 272 ++++++++--------- .../src/tests/clipboard.DataGridPro.test.tsx | 6 +- .../tests/columnPinning.DataGridPro.test.tsx | 40 +-- .../tests/columnReorder.DataGridPro.test.tsx | 51 +--- .../tests/columnSpanning.DataGridPro.test.tsx | 12 +- .../src/tests/columns.DataGridPro.test.tsx | 32 +- .../columnsVisibility.DataGridPro.test.tsx | 14 +- .../src/tests/components.DataGridPro.test.tsx | 8 +- .../src/tests/dataSource.DataGridPro.test.tsx | 14 +- .../dataSourceLazyLoader.DataGridPro.test.tsx | 30 +- .../dataSourceTreeData.DataGridPro.test.tsx | 29 +- .../tests/detailPanel.DataGridPro.test.tsx | 14 +- .../tests/editComponents.DataGridPro.test.tsx | 32 +- .../src/tests/events.DataGridPro.test.tsx | 14 +- .../src/tests/export.DataGridPro.test.tsx | 40 +-- .../tests/filterPanel.DataGridPro.test.tsx | 4 +- .../src/tests/filtering.DataGridPro.test.tsx | 34 +-- .../src/tests/layout.DataGridPro.test.tsx | 4 +- .../src/tests/lazyLoader.DataGridPro.test.tsx | 24 +- .../src/tests/pagination.DataGridPro.test.tsx | 12 +- .../src/tests/printExport.DataGrid.test.tsx | 12 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 278 +++++++++--------- .../src/tests/rowPinning.DataGridPro.test.tsx | 39 +-- .../src/tests/rowReorder.DataGridPro.test.tsx | 29 +- .../tests/rowSelection.DataGridPro.test.tsx | 186 ++++++------ .../src/tests/rows.DataGridPro.test.tsx | 96 +++--- .../src/tests/sorting.DataGridPro.test.tsx | 22 +- .../src/tests/state.DataGridPro.test.tsx | 8 +- .../statePersistence.DataGridPro.test.tsx | 40 +-- .../src/tests/treeData.DataGridPro.test.tsx | 24 +- .../x-data-grid/src/DataGrid/DataGrid.tsx | 2 +- .../src/DataGrid/useDataGridComponent.tsx | 2 +- .../src/components/panel/GridPanel.test.tsx | 10 +- .../hooks/core/useGridApiInitialization.ts | 2 +- .../src/hooks/core/useGridInitialization.ts | 2 +- .../src/hooks/utils/useGridApiRef.ts | 3 +- .../src/models/props/DataGridProps.ts | 2 +- .../x-data-grid/src/tests/DataGrid.spec.tsx | 2 +- .../src/tests/layout.DataGrid.test.tsx | 8 +- .../src/tests/pagination.DataGrid.test.tsx | 4 +- .../src/tests/rowSelection.DataGrid.test.tsx | 8 +- .../src/tests/rowSpanning.DataGrid.test.tsx | 40 ++- .../src/tests/rows.DataGrid.test.tsx | 26 +- .../src/tests/sorting.DataGrid.test.tsx | 24 +- .../x-data-grid/src/utils/createSelector.ts | 5 +- 150 files changed, 1161 insertions(+), 1115 deletions(-) delete mode 100644 docs/data/data-grid/pagination/ServerPaginationGridEstimated.tsx.preview diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js index bfbb68bd2d8eb..7e2f5d0d91be5 100644 --- a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js +++ b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.js @@ -38,13 +38,13 @@ export default function AccessDisabledColumnFeatures() { return (
- - - diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx index c79a168f10855..db2e86427435e 100644 --- a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx +++ b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx @@ -38,13 +38,13 @@ export default function AccessDisabledColumnFeatures() { return (
- - - diff --git a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview index df0ab15daa591..f35a6d3ee5150 100644 --- a/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview +++ b/docs/data/data-grid/api-object/AccessDisabledColumnFeatures.tsx.preview @@ -1,10 +1,10 @@ - - - diff --git a/docs/data/data-grid/api-object/UseGridApiRef.js b/docs/data/data-grid/api-object/UseGridApiRef.js index 17b7e1aac96d9..7ad276488a188 100644 --- a/docs/data/data-grid/api-object/UseGridApiRef.js +++ b/docs/data/data-grid/api-object/UseGridApiRef.js @@ -19,7 +19,7 @@ export default function UseGridApiRef() { const apiRef = useGridApiRef(); - const handleGoToPage1 = () => apiRef.current.setPage(1); + const handleGoToPage1 = () => apiRef.current?.setPage(1); return ( diff --git a/docs/data/data-grid/api-object/UseGridApiRef.tsx b/docs/data/data-grid/api-object/UseGridApiRef.tsx index 17b7e1aac96d9..7ad276488a188 100644 --- a/docs/data/data-grid/api-object/UseGridApiRef.tsx +++ b/docs/data/data-grid/api-object/UseGridApiRef.tsx @@ -19,7 +19,7 @@ export default function UseGridApiRef() { const apiRef = useGridApiRef(); - const handleGoToPage1 = () => apiRef.current.setPage(1); + const handleGoToPage1 = () => apiRef.current?.setPage(1); return ( diff --git a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.js b/docs/data/data-grid/cell-selection/CellSelectionFormulaField.js index a92165f129a42..b8c4c26996c76 100644 --- a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.js +++ b/docs/data/data-grid/cell-selection/CellSelectionFormulaField.js @@ -29,7 +29,7 @@ export default function CellSelectionFormulaField() { const updates = []; Object.entries(cellSelectionModel).forEach(([id, fields]) => { - const updatedRow = { ...apiRef.current.getRow(id) }; + const updatedRow = { ...apiRef.current?.getRow(id) }; Object.entries(fields).forEach(([field, isSelected]) => { if (isSelected) { @@ -40,10 +40,14 @@ export default function CellSelectionFormulaField() { updates.push(updatedRow); }); - apiRef.current.updateRows(updates); + apiRef.current?.updateRows(updates); }, [apiRef, cellSelectionModel, value]); React.useEffect(() => { + if (apiRef.current === null) { + return; + } + const selectedCells = apiRef.current.getSelectedCellsAsArray(); setNumberOfSelectedCells(selectedCells.length); diff --git a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx b/docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx index 9dc4730e8c77a..da8b7a3574702 100644 --- a/docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx +++ b/docs/data/data-grid/cell-selection/CellSelectionFormulaField.tsx @@ -41,7 +41,7 @@ export default function CellSelectionFormulaField() { const updates: GridRowModelUpdate[] = []; Object.entries(cellSelectionModel).forEach(([id, fields]) => { - const updatedRow = { ...apiRef.current.getRow(id) }; + const updatedRow = { ...apiRef.current?.getRow(id) }; Object.entries(fields).forEach(([field, isSelected]) => { if (isSelected) { @@ -52,10 +52,14 @@ export default function CellSelectionFormulaField() { updates.push(updatedRow); }); - apiRef.current.updateRows(updates); + apiRef.current?.updateRows(updates); }, [apiRef, cellSelectionModel, value]); React.useEffect(() => { + if (apiRef.current === null) { + return; + } + const selectedCells = apiRef.current.getSelectedCellsAsArray(); setNumberOfSelectedCells(selectedCells.length); diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js index 05f0c627be1f0..0779aa817f0fe 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js @@ -87,7 +87,7 @@ export default function ColumnAutosizing() { > diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx index c917a8e1086e7..3b0bf43a063ca 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx @@ -86,7 +86,7 @@ export default function ColumnAutosizing() { > diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js index 06da1d5d56555..15b7255bb8c1a 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js @@ -62,14 +62,14 @@ export default function ColumnAutosizingAsync() { .then((data) => { ReactDOM.flushSync(() => { setIsLoading(false); - apiRef.current.updateRows(data.rows); + apiRef.current?.updateRows(data.rows); }); }) // `sleep`/`setTimeout` is required because `.updateRows` is an // async function throttled to avoid choking on frequent changes. .then(() => sleep(0)) .then(() => - apiRef.current.autosizeColumns({ + apiRef.current?.autosizeColumns({ includeHeaders: true, includeOutliers: true, }), diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx index 650f0e1bced9e..c80902f3b48fb 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx @@ -62,14 +62,14 @@ export default function ColumnAutosizingAsync() { .then((data) => { ReactDOM.flushSync(() => { setIsLoading(false); - apiRef.current.updateRows(data.rows); + apiRef.current?.updateRows(data.rows); }); }) // `sleep`/`setTimeout` is required because `.updateRows` is an // async function throttled to avoid choking on frequent changes. .then(() => sleep(0)) .then(() => - apiRef.current.autosizeColumns({ + apiRef.current?.autosizeColumns({ includeHeaders: true, includeOutliers: true, }), diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js index fd239b3db5a2e..651148e7895d8 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.js @@ -42,7 +42,7 @@ export default function ColumnAutosizingDynamicRowHeight() { return (
-
diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx index 31c7c770c9c96..4de6376ae5a82 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingDynamicRowHeight.tsx @@ -48,7 +48,7 @@ export default function ColumnAutosizingDynamicRowHeight() { return (
-
diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js index f3f84feeb385f..d31942001dcc7 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js @@ -20,9 +20,9 @@ export default function ColumnAutosizingGroupedRows() { }); React.useEffect(() => { - return apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + return apiRef.current?.subscribeEvent('rowExpansionChange', (params) => { if (params.childrenExpanded) { - apiRef.current.autosizeColumns({ includeOutliers: true }); + apiRef.current?.autosizeColumns({ includeOutliers: true }); } }); }, [apiRef]); diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx index f3f84feeb385f..d31942001dcc7 100644 --- a/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx +++ b/docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx @@ -20,9 +20,9 @@ export default function ColumnAutosizingGroupedRows() { }); React.useEffect(() => { - return apiRef.current.subscribeEvent('rowExpansionChange', (params) => { + return apiRef.current?.subscribeEvent('rowExpansionChange', (params) => { if (params.childrenExpanded) { - apiRef.current.autosizeColumns({ includeOutliers: true }); + apiRef.current?.autosizeColumns({ includeOutliers: true }); } }); }, [apiRef]); diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js b/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js index 8fcabe12685fc..774b8aafde589 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js @@ -34,7 +34,7 @@ export default function ColumnMenuGridPremiumSnap() { React.useEffect(() => { // To avoid an issue around Popper being open before the ref is set. Promise.resolve().then(() => { - apiRef.current.showColumnMenu('gross'); + apiRef.current?.showColumnMenu('gross'); console.log('after showColumnMenu'); }); }, [apiRef]); diff --git a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx b/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx index 8fcabe12685fc..774b8aafde589 100644 --- a/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx +++ b/docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx @@ -34,7 +34,7 @@ export default function ColumnMenuGridPremiumSnap() { React.useEffect(() => { // To avoid an issue around Popper being open before the ref is set. Promise.resolve().then(() => { - apiRef.current.showColumnMenu('gross'); + apiRef.current?.showColumnMenu('gross'); console.log('after showColumnMenu'); }); }, [apiRef]); diff --git a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js b/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js index 30ef6c800feeb..70161e5042210 100644 --- a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js +++ b/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.js @@ -66,7 +66,7 @@ export default function ColumnPinningDynamicRowHeight() { }, []); React.useLayoutEffect(() => { - apiRef.current.resetRowHeights(); + apiRef.current?.resetRowHeights(); }, [apiRef, showEditDelete]); return ( diff --git a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx b/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx index a11beca2f55f5..12df03e703696 100644 --- a/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx +++ b/docs/data/data-grid/column-pinning/ColumnPinningDynamicRowHeight.tsx @@ -71,7 +71,7 @@ export default function ColumnPinningDynamicRowHeight() { }, []); React.useLayoutEffect(() => { - apiRef.current.resetRowHeights(); + apiRef.current?.resetRowHeights(); }, [apiRef, showEditDelete]); return ( diff --git a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx index ab02705eecc86..13e84bc26b11f 100644 --- a/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx +++ b/docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx @@ -50,7 +50,7 @@ export default function ColumnSizingPersistWidthOrder() { } const useColumnsState = ( - apiRef: React.RefObject, + apiRef: React.RefObject, columns: GridColDef[], ) => { const [widths, setWidths] = React.useState>( diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js index 67b7eed794c35..2f45d0dbec3ef 100644 --- a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js +++ b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.js @@ -17,7 +17,7 @@ export default function ColumnSelectorGridSnap() { const apiRef = useGridApiRef(); React.useEffect(() => { - apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + apiRef.current?.showPreferences(GridPreferencePanelsValue.columns); }, [apiRef]); return ( diff --git a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx index 67b7eed794c35..2f45d0dbec3ef 100644 --- a/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx +++ b/docs/data/data-grid/column-visibility/ColumnSelectorGridSnap.tsx @@ -17,7 +17,7 @@ export default function ColumnSelectorGridSnap() { const apiRef = useGridApiRef(); React.useEffect(() => { - apiRef.current.showPreferences(GridPreferencePanelsValue.columns); + apiRef.current?.showPreferences(GridPreferencePanelsValue.columns); }, [apiRef]); return ( diff --git a/docs/data/data-grid/components/CustomColumnMenu.js b/docs/data/data-grid/components/CustomColumnMenu.js index 6f16e3267d1f0..dedbe7fa3e807 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.js +++ b/docs/data/data-grid/components/CustomColumnMenu.js @@ -83,7 +83,7 @@ export default function CustomColumnMenu() { onClick={(event) => { event.stopPropagation(); setColor((current) => (current === 'primary' ? 'secondary' : 'primary')); - apiRef.current.showColumnMenu('default'); + apiRef.current?.showColumnMenu('default'); }} > Toggle menu background diff --git a/docs/data/data-grid/components/CustomColumnMenu.tsx b/docs/data/data-grid/components/CustomColumnMenu.tsx index 9a0a7fa8d4f3e..398d88e26bc4a 100644 --- a/docs/data/data-grid/components/CustomColumnMenu.tsx +++ b/docs/data/data-grid/components/CustomColumnMenu.tsx @@ -92,7 +92,7 @@ export default function CustomColumnMenu() { onClick={(event) => { event.stopPropagation(); setColor((current) => (current === 'primary' ? 'secondary' : 'primary')); - apiRef.current.showColumnMenu('default'); + apiRef.current?.showColumnMenu('default'); }} > Toggle menu background diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js index 9c057dd2115a1..5fc08a3c767ec 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.js +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js @@ -453,11 +453,14 @@ export default function PopularFeaturesDemo() { const onRowClick = React.useCallback( (params) => { - const rowNode = apiRef.current.getRowNode(params.id); + const rowNode = apiRef.current?.getRowNode(params.id); if (rowNode && rowNode.type === 'group') { - apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded); + apiRef.current?.setRowChildrenExpansion( + params.id, + !rowNode.childrenExpanded, + ); } else { - apiRef.current.toggleDetailPanel(params.id); + apiRef.current?.toggleDetailPanel(params.id); } }, [apiRef], diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx index c19ce91642127..7126c0b049531 100644 --- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx +++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx @@ -474,11 +474,14 @@ export default function PopularFeaturesDemo() { const onRowClick = React.useCallback>( (params) => { - const rowNode = apiRef.current.getRowNode(params.id); + const rowNode = apiRef.current?.getRowNode(params.id); if (rowNode && rowNode.type === 'group') { - apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded); + apiRef.current?.setRowChildrenExpansion( + params.id, + !rowNode.childrenExpanded, + ); } else { - apiRef.current.toggleDetailPanel(params.id); + apiRef.current?.toggleDetailPanel(params.id); } }, [apiRef], diff --git a/docs/data/data-grid/events/SubscribeToEventsApiRef.js b/docs/data/data-grid/events/SubscribeToEventsApiRef.js index b974362438268..f578031917099 100644 --- a/docs/data/data-grid/events/SubscribeToEventsApiRef.js +++ b/docs/data/data-grid/events/SubscribeToEventsApiRef.js @@ -16,7 +16,7 @@ export default function SubscribeToEventsApiRef() { }; // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`. - return apiRef.current.subscribeEvent('rowClick', handleRowClick); + return apiRef.current?.subscribeEvent('rowClick', handleRowClick); }, [apiRef]); return ( diff --git a/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx b/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx index 3da681d79f88c..9d4d82261adc1 100644 --- a/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx +++ b/docs/data/data-grid/events/SubscribeToEventsApiRef.tsx @@ -16,7 +16,7 @@ export default function SubscribeToEventsApiRef() { }; // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`. - return apiRef.current.subscribeEvent('rowClick', handleRowClick); + return apiRef.current?.subscribeEvent('rowClick', handleRowClick); }, [apiRef]); return ( diff --git a/docs/data/data-grid/filtering-recipes/FilteredRowCount.js b/docs/data/data-grid/filtering-recipes/FilteredRowCount.js index ce723ee414503..ddfcfdee406c8 100644 --- a/docs/data/data-grid/filtering-recipes/FilteredRowCount.js +++ b/docs/data/data-grid/filtering-recipes/FilteredRowCount.js @@ -45,7 +45,12 @@ export default function FilteredRowCount() { const getFilteredRowsCount = React.useCallback( (filterModel) => { - const { filteredRowsLookup } = apiRef.current.getFilterState(filterModel); + const filterState = apiRef.current?.getFilterState(filterModel); + if (!filterState) { + return 0; + } + + const { filteredRowsLookup } = filterState; return Object.keys(filteredRowsLookup).filter( (rowId) => filteredRowsLookup[rowId] === true, ).length; @@ -72,7 +77,7 @@ export default function FilteredRowCount() { return ( +
- +
apiRef.current.setRowCount(1000)}>Set Row Count -
- -
\ No newline at end of file diff --git a/docs/data/data-grid/recipes-editing/BulkEditing.js b/docs/data/data-grid/recipes-editing/BulkEditing.js index 742431ab92b5d..7c2971818f7e7 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditing.js +++ b/docs/data/data-grid/recipes-editing/BulkEditing.js @@ -53,7 +53,7 @@ export default function BulkEditing() { label="Discard changes" disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} onClick={() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ unsavedChangesRef.current.rowsBeforeChange[id], ]); delete unsavedChangesRef.current.rowsBeforeChange[id]; @@ -75,7 +75,7 @@ export default function BulkEditing() { unsavedChangesRef.current.rowsBeforeChange[id] = row; } setHasUnsavedRows(true); - apiRef.current.updateRows([row]); // to trigger row render + apiRef.current?.updateRows([row]); // to trigger row render }} />, ]; @@ -99,7 +99,7 @@ export default function BulkEditing() { const discardChanges = React.useCallback(() => { setHasUnsavedRows(false); Object.values(unsavedChangesRef.current.rowsBeforeChange).forEach((row) => { - apiRef.current.updateRows([row]); + apiRef.current?.updateRows([row]); }); unsavedChangesRef.current = { unsavedRows: {}, @@ -121,7 +121,7 @@ export default function BulkEditing() { ).filter((row) => row._action === 'delete'); if (rowsToDelete.length > 0) { rowsToDelete.forEach((row) => { - apiRef.current.updateRows([row]); + apiRef.current?.updateRows([row]); }); } diff --git a/docs/data/data-grid/recipes-editing/BulkEditing.tsx b/docs/data/data-grid/recipes-editing/BulkEditing.tsx index eaa13ebbc21e5..82fece397ef5f 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditing.tsx +++ b/docs/data/data-grid/recipes-editing/BulkEditing.tsx @@ -60,7 +60,7 @@ export default function BulkEditing() { label="Discard changes" disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} onClick={() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ unsavedChangesRef.current.rowsBeforeChange[id], ]); delete unsavedChangesRef.current.rowsBeforeChange[id]; @@ -82,7 +82,7 @@ export default function BulkEditing() { unsavedChangesRef.current.rowsBeforeChange[id] = row; } setHasUnsavedRows(true); - apiRef.current.updateRows([row]); // to trigger row render + apiRef.current?.updateRows([row]); // to trigger row render }} />, ]; @@ -108,7 +108,7 @@ export default function BulkEditing() { const discardChanges = React.useCallback(() => { setHasUnsavedRows(false); Object.values(unsavedChangesRef.current.rowsBeforeChange).forEach((row) => { - apiRef.current.updateRows([row]); + apiRef.current?.updateRows([row]); }); unsavedChangesRef.current = { unsavedRows: {}, @@ -130,7 +130,7 @@ export default function BulkEditing() { ).filter((row) => row._action === 'delete'); if (rowsToDelete.length > 0) { rowsToDelete.forEach((row) => { - apiRef.current.updateRows([row]); + apiRef.current?.updateRows([row]); }); } diff --git a/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.js b/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.js index 45e1e126a335f..3ac3b20d00506 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.js +++ b/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.js @@ -53,7 +53,7 @@ export default function BulkEditingPremiumNoSnap() { label="Discard changes" disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} onClick={() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ unsavedChangesRef.current.rowsBeforeChange[id], ]); delete unsavedChangesRef.current.rowsBeforeChange[id]; @@ -75,7 +75,7 @@ export default function BulkEditingPremiumNoSnap() { unsavedChangesRef.current.rowsBeforeChange[id] = row; } setHasUnsavedRows(true); - apiRef.current.updateRows([row]); // to trigger row render + apiRef.current?.updateRows([row]); // to trigger row render }} />, ]; @@ -98,7 +98,7 @@ export default function BulkEditingPremiumNoSnap() { const discardChanges = React.useCallback(() => { setHasUnsavedRows(false); - apiRef.current.updateRows( + apiRef.current?.updateRows( Object.values(unsavedChangesRef.current.rowsBeforeChange), ); unsavedChangesRef.current = { @@ -120,7 +120,7 @@ export default function BulkEditingPremiumNoSnap() { unsavedChangesRef.current.unsavedRows, ).filter((row) => row._action === 'delete'); if (rowsToDelete.length > 0) { - apiRef.current.updateRows(rowsToDelete); + apiRef.current?.updateRows(rowsToDelete); } setHasUnsavedRows(false); diff --git a/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.tsx b/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.tsx index 4e031b90de6e7..6ee20a0202138 100644 --- a/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.tsx +++ b/docs/data/data-grid/recipes-editing/BulkEditingPremiumNoSnap.tsx @@ -60,7 +60,7 @@ export default function BulkEditingPremiumNoSnap() { label="Discard changes" disabled={unsavedChangesRef.current.unsavedRows[id] === undefined} onClick={() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ unsavedChangesRef.current.rowsBeforeChange[id], ]); delete unsavedChangesRef.current.rowsBeforeChange[id]; @@ -82,7 +82,7 @@ export default function BulkEditingPremiumNoSnap() { unsavedChangesRef.current.rowsBeforeChange[id] = row; } setHasUnsavedRows(true); - apiRef.current.updateRows([row]); // to trigger row render + apiRef.current?.updateRows([row]); // to trigger row render }} />, ]; @@ -107,7 +107,7 @@ export default function BulkEditingPremiumNoSnap() { const discardChanges = React.useCallback(() => { setHasUnsavedRows(false); - apiRef.current.updateRows( + apiRef.current?.updateRows( Object.values(unsavedChangesRef.current.rowsBeforeChange), ); unsavedChangesRef.current = { @@ -129,7 +129,7 @@ export default function BulkEditingPremiumNoSnap() { unsavedChangesRef.current.unsavedRows, ).filter((row) => row._action === 'delete'); if (rowsToDelete.length > 0) { - apiRef.current.updateRows(rowsToDelete); + apiRef.current?.updateRows(rowsToDelete); } setHasUnsavedRows(false); diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.js b/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.js index 8cdb49e0161e9..48e30c14d2dfd 100644 --- a/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.js +++ b/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.js @@ -21,9 +21,12 @@ export default function RowGroupingExpandOnRowClick() { const onRowClick = React.useCallback( (params) => { - const rowNode = apiRef.current.getRowNode(params.id); + const rowNode = apiRef.current?.getRowNode(params.id); if (rowNode && rowNode.type === 'group') { - apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded); + apiRef.current?.setRowChildrenExpansion( + params.id, + !rowNode.childrenExpanded, + ); } }, [apiRef], diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.tsx b/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.tsx index 87410df0830e9..eb4e4588f1e97 100644 --- a/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.tsx +++ b/docs/data/data-grid/recipes-row-grouping/RowGroupingExpandOnRowClick.tsx @@ -22,9 +22,12 @@ export default function RowGroupingExpandOnRowClick() { const onRowClick = React.useCallback>( (params) => { - const rowNode = apiRef.current.getRowNode(params.id); + const rowNode = apiRef.current?.getRowNode(params.id); if (rowNode && rowNode.type === 'group') { - apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded); + apiRef.current?.setRowChildrenExpansion( + params.id, + !rowNode.childrenExpanded, + ); } }, [apiRef], diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js index 0d09526ce08d2..a79f8a6f378db 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js @@ -59,8 +59,12 @@ export default function RowGroupingCustomGroupingColDefCallback() { return { headerName: 'Director', valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const rowNode = apiRef.current.getRowNode(rowId); + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return undefined; + } + + const rowNode = apiRef.current?.getRowNode(rowId); if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx index e8c4da9dab49f..2b6095eaba3f9 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx @@ -60,8 +60,12 @@ export default function RowGroupingCustomGroupingColDefCallback() { return { headerName: 'Director', valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const rowNode = apiRef.current.getRowNode(rowId); + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return undefined; + } + + const rowNode = apiRef.current?.getRowNode(rowId); if ( rowNode?.type === 'group' && rowNode?.groupingField === 'director' diff --git a/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.js b/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.js index 73d5f7fa7b4a6..cdef4ad18850f 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.js +++ b/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.js @@ -26,7 +26,7 @@ export default function RowGroupingGetRowGroupChildren() { const handleRowClick = React.useCallback( (params) => { // Only log groups - if (apiRef.current.getRowNode(params.id)?.type !== 'group') { + if (apiRef.current?.getRowNode(params.id)?.type !== 'group') { return; } diff --git a/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.tsx b/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.tsx index 7d43a69eb1f57..93f3e7087c1de 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingGetRowGroupChildren.tsx @@ -28,7 +28,7 @@ export default function RowGroupingGetRowGroupChildren() { const handleRowClick = React.useCallback>( (params) => { // Only log groups - if (apiRef.current.getRowNode(params.id)?.type !== 'group') { + if (apiRef.current?.getRowNode(params.id)?.type !== 'group') { return; } @@ -37,7 +37,7 @@ export default function RowGroupingGetRowGroupChildren() { }); const rowTitles = rowIds.map( - (rowId) => apiRef.current.getRow(rowId)!.title, + (rowId) => apiRef.current!.getRow(rowId)!.title, ); setLastGroupClickedChildren(rowTitles); diff --git a/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.js b/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.js index b823e8af8c78d..b1bcfcc1acb05 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.js +++ b/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.js @@ -16,7 +16,7 @@ export default function RowGroupingSetChildrenExpansion() { const apiRef = useGridApiRef(); React.useEffect(() => { - apiRef.current.subscribeEvent('rowExpansionChange', debug); + apiRef.current?.subscribeEvent('rowExpansionChange', debug); }, [apiRef]); const initialState = useKeepGroupedColumnsHidden({ @@ -29,11 +29,11 @@ export default function RowGroupingSetChildrenExpansion() { }); const toggle2ndGroup = () => { - const groups = apiRef.current.getRowNode(GRID_ROOT_GROUP_ID).children; + const groups = apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID).children; - if (groups.length > 1) { + if (groups && groups.length > 1) { const groupId = groups[1]; - apiRef.current.setRowChildrenExpansion( + apiRef.current?.setRowChildrenExpansion( groupId, !apiRef.current.getRowNode(groupId).childrenExpanded, ); diff --git a/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.tsx b/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.tsx index 5212054412dc1..dd9260ed91bb6 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingSetChildrenExpansion.tsx @@ -18,7 +18,7 @@ export default function RowGroupingSetChildrenExpansion() { const apiRef = useGridApiRef(); React.useEffect(() => { - apiRef.current.subscribeEvent('rowExpansionChange', debug); + apiRef.current?.subscribeEvent('rowExpansionChange', debug); }, [apiRef]); const initialState = useKeepGroupedColumnsHidden({ @@ -32,11 +32,11 @@ export default function RowGroupingSetChildrenExpansion() { const toggle2ndGroup = () => { const groups = - apiRef.current.getRowNode(GRID_ROOT_GROUP_ID)!.children; + apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID)!.children; - if (groups.length > 1) { + if (groups && groups.length > 1) { const groupId = groups[1]; - apiRef.current.setRowChildrenExpansion( + apiRef.current?.setRowChildrenExpansion( groupId, !apiRef.current.getRowNode(groupId)!.childrenExpanded, ); diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js index 3c9bdfd9c37ee..f448d93c4d413 100644 --- a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js +++ b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.js @@ -174,7 +174,7 @@ export default function DetailPanelExpandOnRowClick() { const onRowClick = React.useCallback( (params) => { - apiRef.current.toggleDetailPanel(params.id); + apiRef.current?.toggleDetailPanel(params.id); }, [apiRef], ); diff --git a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx index dc5df4e819e97..81ae3e945e354 100644 --- a/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx +++ b/docs/data/data-grid/row-recipes/DetailPanelExpandOnRowClick.tsx @@ -182,7 +182,7 @@ export default function DetailPanelExpandOnRowClick() { const onRowClick = React.useCallback>( (params) => { - apiRef.current.toggleDetailPanel(params.id); + apiRef.current?.toggleDetailPanel(params.id); }, [apiRef], ); diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.js b/docs/data/data-grid/row-updates/LazyLoadingGrid.js index 7acc1a654e547..0ece938c494f3 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.js +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.js @@ -74,7 +74,7 @@ export default function LazyLoadingGrid() { async (params) => { const { slice, total } = await fetchRow(params); - apiRef.current.unstable_replaceRows(params.firstRowToRender, slice); + apiRef.current?.unstable_replaceRows(params.firstRowToRender, slice); setRowCount(total); }, [apiRef, fetchRow], diff --git a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx index 16d46719cb03a..0fc9c0dfa954d 100644 --- a/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx +++ b/docs/data/data-grid/row-updates/LazyLoadingGrid.tsx @@ -82,7 +82,7 @@ export default function LazyLoadingGrid() { async (params: GridFetchRowsParams) => { const { slice, total } = await fetchRow(params); - apiRef.current.unstable_replaceRows(params.firstRowToRender, slice); + apiRef.current?.unstable_replaceRows(params.firstRowToRender, slice); setRowCount(total); }, [apiRef, fetchRow], diff --git a/docs/data/data-grid/row-updates/ThrottledRowsGrid.js b/docs/data/data-grid/row-updates/ThrottledRowsGrid.js index 2cd18fcba8974..e10a7c0befa6b 100644 --- a/docs/data/data-grid/row-updates/ThrottledRowsGrid.js +++ b/docs/data/data-grid/row-updates/ThrottledRowsGrid.js @@ -21,7 +21,7 @@ export default function ThrottledRowsGrid() { React.useEffect(() => { const subscription = interval(10).subscribe(() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: randomInt(1, 4), username: randomUserName(), diff --git a/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx b/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx index e552695260236..a141f89d44d71 100644 --- a/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx +++ b/docs/data/data-grid/row-updates/ThrottledRowsGrid.tsx @@ -21,7 +21,7 @@ export default function ThrottledRowsGrid() { React.useEffect(() => { const subscription = interval(10).subscribe(() => { - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: randomInt(1, 4), username: randomUserName(), diff --git a/docs/data/data-grid/row-updates/UpdateRowsApiRef.js b/docs/data/data-grid/row-updates/UpdateRowsApiRef.js index d3adf44052f92..a2b81e039cf63 100644 --- a/docs/data/data-grid/row-updates/UpdateRowsApiRef.js +++ b/docs/data/data-grid/row-updates/UpdateRowsApiRef.js @@ -32,29 +32,29 @@ export default function UpdateRowsApiRef() { const apiRef = useGridApiRef(); const handleUpdateRow = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; const rowId = randomArrayItem(rowIds); - apiRef.current.updateRows([{ id: rowId, username: randomUserName() }]); + apiRef.current?.updateRows([{ id: rowId, username: randomUserName() }]); }; const handleUpdateAllRows = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; - apiRef.current.updateRows( + apiRef.current?.updateRows( rowIds.map((rowId) => ({ id: rowId, username: randomUserName() })), ); }; const handleDeleteRow = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; const rowId = randomArrayItem(rowIds); - apiRef.current.updateRows([{ id: rowId, _action: 'delete' }]); + apiRef.current?.updateRows([{ id: rowId, _action: 'delete' }]); }; const handleAddRow = () => { - apiRef.current.updateRows([createRandomRow()]); + apiRef.current?.updateRows([createRandomRow()]); }; return ( diff --git a/docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx b/docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx index 47a4baafd25f8..684b7474d83c8 100644 --- a/docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx +++ b/docs/data/data-grid/row-updates/UpdateRowsApiRef.tsx @@ -32,29 +32,29 @@ export default function UpdateRowsApiRef() { const apiRef = useGridApiRef(); const handleUpdateRow = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; const rowId = randomArrayItem(rowIds); - apiRef.current.updateRows([{ id: rowId, username: randomUserName() }]); + apiRef.current?.updateRows([{ id: rowId, username: randomUserName() }]); }; const handleUpdateAllRows = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; - apiRef.current.updateRows( + apiRef.current?.updateRows( rowIds.map((rowId) => ({ id: rowId, username: randomUserName() })), ); }; const handleDeleteRow = () => { - const rowIds = apiRef.current.getAllRowIds(); + const rowIds = apiRef.current?.getAllRowIds() || []; const rowId = randomArrayItem(rowIds); - apiRef.current.updateRows([{ id: rowId, _action: 'delete' }]); + apiRef.current?.updateRows([{ id: rowId, _action: 'delete' }]); }; const handleAddRow = () => { - apiRef.current.updateRows([createRandomRow()]); + apiRef.current?.updateRows([createRandomRow()]); }; return ( diff --git a/docs/data/data-grid/scrolling/ScrollPlayground.js b/docs/data/data-grid/scrolling/ScrollPlayground.js index b39feaf86e8a2..bc3bb2d39b5a6 100644 --- a/docs/data/data-grid/scrolling/ScrollPlayground.js +++ b/docs/data/data-grid/scrolling/ScrollPlayground.js @@ -28,10 +28,10 @@ export default function ScrollPlayground() { React.useEffect(() => { const { rowIndex, colIndex } = coordinates; - apiRef.current.scrollToIndexes(coordinates); + apiRef.current?.scrollToIndexes(coordinates); const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex]; const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex]; - apiRef.current.setCellFocus(id, column.field); + apiRef.current?.setCellFocus(id, column.field); }, [apiRef, coordinates]); const handleClick = (position) => () => { diff --git a/docs/data/data-grid/scrolling/ScrollPlayground.tsx b/docs/data/data-grid/scrolling/ScrollPlayground.tsx index 80fee8a95b18a..bac2dd53b9424 100644 --- a/docs/data/data-grid/scrolling/ScrollPlayground.tsx +++ b/docs/data/data-grid/scrolling/ScrollPlayground.tsx @@ -29,10 +29,10 @@ export default function ScrollPlayground() { React.useEffect(() => { const { rowIndex, colIndex } = coordinates; - apiRef.current.scrollToIndexes(coordinates); + apiRef.current?.scrollToIndexes(coordinates); const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex]; const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex]; - apiRef.current.setCellFocus(id, column.field); + apiRef.current?.setCellFocus(id, column.field); }, [apiRef, coordinates]); const handleClick = (position: string) => () => { diff --git a/docs/data/data-grid/scrolling/ScrollRestoration.js b/docs/data/data-grid/scrolling/ScrollRestoration.js index 0a23fda683868..209ab70d20f5a 100644 --- a/docs/data/data-grid/scrolling/ScrollRestoration.js +++ b/docs/data/data-grid/scrolling/ScrollRestoration.js @@ -23,10 +23,10 @@ export default function ScrollRestoration() { React.useEffect(() => { const { rowIndex, colIndex } = coordinates; - apiRef.current.scrollToIndexes(coordinates); + apiRef.current?.scrollToIndexes(coordinates); const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex]; const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex]; - apiRef.current.setCellFocus(id, column.field); + apiRef.current?.setCellFocus(id, column.field); }, [apiRef, coordinates]); const handleCellClick = (params) => { diff --git a/docs/data/data-grid/scrolling/ScrollRestoration.tsx b/docs/data/data-grid/scrolling/ScrollRestoration.tsx index 580bc397bfb94..0823c9998f4d5 100644 --- a/docs/data/data-grid/scrolling/ScrollRestoration.tsx +++ b/docs/data/data-grid/scrolling/ScrollRestoration.tsx @@ -24,10 +24,10 @@ export default function ScrollRestoration() { React.useEffect(() => { const { rowIndex, colIndex } = coordinates; - apiRef.current.scrollToIndexes(coordinates); + apiRef.current?.scrollToIndexes(coordinates); const id = gridExpandedSortedRowIdsSelector(apiRef)[rowIndex]; const column = gridVisibleColumnDefinitionsSelector(apiRef)[colIndex]; - apiRef.current.setCellFocus(id, column.field); + apiRef.current?.setCellFocus(id, column.field); }, [apiRef, coordinates]); const handleCellClick = (params: GridCellParams) => { diff --git a/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js index 4f890e86fe5ee..58f2215001c60 100644 --- a/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js +++ b/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.js @@ -83,7 +83,7 @@ function ServerSideLazyLoadingErrorHandling() { { - apiRef.current.unstable_dataSource.fetchRows( + apiRef.current?.unstable_dataSource.fetchRows( GRID_ROOT_GROUP_ID, retryParams, ); diff --git a/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.tsx b/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.tsx index 53d4519d1fa2b..f28dca4306525 100644 --- a/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideLazyLoadingErrorHandling.tsx @@ -87,7 +87,7 @@ function ServerSideLazyLoadingErrorHandling() { { - apiRef.current.unstable_dataSource.fetchRows( + apiRef.current?.unstable_dataSource.fetchRows( GRID_ROOT_GROUP_ID, retryParams, ); diff --git a/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js index fc75932d136bc..4df5c0a673155 100644 --- a/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js +++ b/docs/data/data-grid/server-side-data/ServerSideRowGroupingDataGrid.js @@ -50,7 +50,7 @@ export default function ServerSideRowGroupingDataGrid() {
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx b/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx index 2d0d1cfdea39c..c213ffbc84572 100644 --- a/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx @@ -59,7 +59,7 @@ export default function ServerSideTreeData() { return (
-
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx.preview b/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx.preview index 4a508197000b9..b1b085f9ed693 100644 --- a/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx.preview +++ b/docs/data/data-grid/server-side-data/ServerSideTreeData.tsx.preview @@ -1,4 +1,4 @@ -
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js index 1b93b99e8ebfd..1d96b15ef3ac6 100644 --- a/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js +++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataErrorHandling.js @@ -69,7 +69,7 @@ export default function ServerSideTreeDataErrorHandling() {
diff --git a/docs/data/data-grid/server-side-data/ServerSideTreeDataGroupExpansion.tsx b/docs/data/data-grid/server-side-data/ServerSideTreeDataGroupExpansion.tsx index f52c73fe470ae..50364952da107 100644 --- a/docs/data/data-grid/server-side-data/ServerSideTreeDataGroupExpansion.tsx +++ b/docs/data/data-grid/server-side-data/ServerSideTreeDataGroupExpansion.tsx @@ -61,7 +61,7 @@ export default function ServerSideTreeDataGroupExpansion() { return (
-
diff --git a/docs/data/data-grid/sorting/ReadOnlySortingGrid.js b/docs/data/data-grid/sorting/ReadOnlySortingGrid.js index 8e9274c7e13f7..1b9974fb9ed29 100644 --- a/docs/data/data-grid/sorting/ReadOnlySortingGrid.js +++ b/docs/data/data-grid/sorting/ReadOnlySortingGrid.js @@ -43,13 +43,13 @@ export default function ReadOnlySortingGrid() { return (
- - - diff --git a/docs/data/data-grid/sorting/ReadOnlySortingGrid.tsx b/docs/data/data-grid/sorting/ReadOnlySortingGrid.tsx index 9439100ff489b..534be0316035a 100644 --- a/docs/data/data-grid/sorting/ReadOnlySortingGrid.tsx +++ b/docs/data/data-grid/sorting/ReadOnlySortingGrid.tsx @@ -43,13 +43,13 @@ export default function ReadOnlySortingGrid() { return (
- - - diff --git a/docs/data/data-grid/state/DirectSelector.js b/docs/data/data-grid/state/DirectSelector.js index 08186da5a0f29..78400cc2ae825 100644 --- a/docs/data/data-grid/state/DirectSelector.js +++ b/docs/data/data-grid/state/DirectSelector.js @@ -23,7 +23,7 @@ export default function DirectSelector() { return; } - apiRef.current.selectRow( + apiRef.current?.selectRow( visibleRows[0], !apiRef.current.isRowSelected(visibleRows[0]), ); diff --git a/docs/data/data-grid/state/DirectSelector.tsx b/docs/data/data-grid/state/DirectSelector.tsx index 08186da5a0f29..78400cc2ae825 100644 --- a/docs/data/data-grid/state/DirectSelector.tsx +++ b/docs/data/data-grid/state/DirectSelector.tsx @@ -23,7 +23,7 @@ export default function DirectSelector() { return; } - apiRef.current.selectRow( + apiRef.current?.selectRow( visibleRows[0], !apiRef.current.isRowSelected(visibleRows[0]), ); diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index 2ecfcdefb7386..3fda7cd6c6f83 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -71,6 +71,17 @@ Below are described the steps you need to make to migrate from v7 to v8. /> ``` +- Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`. + + Only the initial value and the type are updated. Logic that initializes the API and its availability remained the same, which means that if you could access API in a particular line of your code before, you are able to access it as well after this change. + + Depending on the context in which the API is being used, you can decide what is the best way to deal with `null` value. Some options are: + + - Use optional chaining + - Use non-null assertion operator if you are sure your code is always executed when the `apiRef` is not `null` + - Return early if `apiRef` is `null` + - Throw an error if `apiRef` is `null` + ### Localization - If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination). diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index af5816851a0e0..fd1c221ab7c85 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -13,7 +13,7 @@ "type": { "name": "enum", "description": "'all'
| 'filtered'" }, "default": "\"filtered\"" }, - "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, + "apiRef": { "type": { "name": "shape", "description": "{ current?: object }" } }, "aria-label": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index c57b6d2feb2b3..a368dc0354de0 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -4,7 +4,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "required": true }, - "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, + "apiRef": { "type": { "name": "shape", "description": "{ current?: object }" } }, "aria-label": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index dea2d9a362a7b..4cb28016be058 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -4,7 +4,7 @@ "type": { "name": "arrayOf", "description": "Array<object>" }, "required": true }, - "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, + "apiRef": { "type": { "name": "shape", "description": "{ current?: object }" } }, "aria-label": { "type": { "name": "string" } }, "aria-labelledby": { "type": { "name": "string" } }, "autoHeight": { diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index c744c98726147..5fa2f15565440 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -87,7 +87,7 @@ DataGridPremiumRaw.propTypes = { * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`. */ apiRef: PropTypes.shape({ - current: PropTypes.object.isRequired, + current: PropTypes.object, }), /** * The label of the Data Grid. diff --git a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx index 375dd735943ac..440379f1033d1 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx @@ -96,7 +96,7 @@ import { import { useGridClipboardImport } from '../hooks/features/clipboard/useGridClipboardImport'; export const useDataGridPremiumComponent = ( - inputApiRef: RefObject | undefined, + inputApiRef: RefObject | undefined, props: DataGridPremiumProcessedProps, ) => { const apiRef = useGridInitialization(inputApiRef, props); diff --git a/packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts index 708fc36b459ed..5a52bc0accba2 100644 --- a/packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts +++ b/packages/x-data-grid-premium/src/hooks/utils/useGridApiRef.ts @@ -2,5 +2,6 @@ import { RefObject } from '@mui/x-internals/types'; import { GridApiCommon, useGridApiRef as useCommunityGridApiRef } from '@mui/x-data-grid'; import { GridApiPremium } from '../../models/gridApiPremium'; -export const useGridApiRef: () => RefObject = - useCommunityGridApiRef; +export const useGridApiRef: < + Api extends GridApiCommon = GridApiPremium, +>() => RefObject = useCommunityGridApiRef; diff --git a/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts b/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts index eb8ad0d415d21..848ee5c63cbcd 100644 --- a/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts +++ b/packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts @@ -37,7 +37,7 @@ const updateColumnVisibilityModel = ( */ export const useKeepGroupedColumnsHidden = ( props: { - apiRef: RefObject; + apiRef: RefObject; } & Pick, ) => { const initialProps = React.useRef(props); @@ -46,13 +46,13 @@ export const useKeepGroupedColumnsHidden = ( ); React.useEffect(() => { - props.apiRef.current.subscribeEvent('rowGroupingModelChange', (newModel) => { + props.apiRef.current?.subscribeEvent('rowGroupingModelChange', (newModel) => { const columnVisibilityModel = updateColumnVisibilityModel( gridColumnVisibilityModelSelector(props.apiRef), newModel, rowGroupingModel.current, ); - props.apiRef.current.setColumnVisibilityModel(columnVisibilityModel); + props.apiRef.current?.setColumnVisibilityModel(columnVisibilityModel); rowGroupingModel.current = newModel; }); }, [props.apiRef]); diff --git a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts index 008230737b159..d6d7c4a6d108b 100644 --- a/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts +++ b/packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts @@ -129,7 +129,7 @@ export interface DataGridPremiumPropsWithoutDefaultValue; + apiRef?: RefObject; /** * The initial state of the DataGridPremium. * The data in it is set in the state on initialization but isn't controlled. diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx index e3b99769ec9ba..7f85f49f19485 100644 --- a/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx +++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.spec.tsx @@ -112,7 +112,7 @@ function ApiRefPrivateMethods() { function ApiRefPublicMethods() { const apiRef = useGridApiRef(); - apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {}); + apiRef.current!.unstable_applyPipeProcessors('exportMenu', [], {}); } function ApiRefProMethods() { @@ -120,12 +120,12 @@ function ApiRefProMethods() { React.useEffect(() => { // available in Pro and Premium - apiRef.current.selectRows([]); - apiRef.current.selectRowRange({ startId: 0, endId: 1 }); - apiRef.current.setColumnIndex; - apiRef.current.setRowIndex; - apiRef.current.setRowChildrenExpansion; - apiRef.current.getRowGroupChildren; + apiRef.current!.selectRows([]); + apiRef.current!.selectRowRange({ startId: 0, endId: 1 }); + apiRef.current!.setColumnIndex; + apiRef.current!.setRowIndex; + apiRef.current!.setRowChildrenExpansion; + apiRef.current!.getRowGroupChildren; }); return null; diff --git a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx index 2fc1d67f33d17..512fa6ad52be8 100644 --- a/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx @@ -36,7 +36,7 @@ describe(' - Quick filter', () => { columns: [{ field: 'brand' }], }; - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -95,7 +95,7 @@ describe(' - Quick filter', () => { />, ); - await act(() => apiRef.current.addRowGroupingCriteria('year')); + await act(() => apiRef.current?.addRowGroupingCriteria('year')); setProps({ filterModel: { diff --git a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx index 55b46b981fa0c..ea19381b60268 100644 --- a/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx @@ -47,7 +47,7 @@ const baselineProps: DataGridPremiumProps = { describe(' - Aggregation', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); @@ -391,7 +391,7 @@ describe(' - Aggregation', () => { it('should render select on aggregable column', () => { render(); - act(() => apiRef.current.showColumnMenu('id')); + act(() => apiRef.current?.showColumnMenu('id')); clock.runToLast(); expect(screen.queryByLabelText('Aggregation')).not.to.equal(null); @@ -402,7 +402,7 @@ describe(' - Aggregation', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']); - act(() => apiRef.current.showColumnMenu('id')); + act(() => apiRef.current?.showColumnMenu('id')); clock.runToLast(); fireUserEvent.mousePress(screen.getByLabelText('Aggregation')); fireUserEvent.mousePress( @@ -556,7 +556,7 @@ describe(' - Aggregation', () => { />, ); - act(() => apiRef.current.showColumnMenu('id')); + act(() => apiRef.current?.showColumnMenu('id')); clock.runToLast(); expect(screen.queryAllByLabelText('Aggregation')).to.have.length(0); @@ -596,7 +596,7 @@ describe(' - Aggregation', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4', '5']); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: 'id', availableAggregationFunctions: ['min', 'max'] }, ]), ); diff --git a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx index 143777d1f2d3f..c108280435c7a 100644 --- a/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx @@ -18,7 +18,7 @@ import { isJSDOM, describeSkipIf } from 'test/utils/skipIf'; describe(' - Cell selection', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestDataGridSelection({ rowLength = 4, @@ -129,7 +129,7 @@ describe(' - Cell selection', () => { it('should call selectCellRange', () => { render(); - const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); + const spiedSelectCellsBetweenRange = spyApi(apiRef.current!, 'selectCellRange'); const cell = getCell(0, 0); cell.focus(); @@ -181,7 +181,7 @@ describe(' - Cell selection', () => { describe('Shift + arrow keys', () => { it('should call selectCellRange when ArrowDown is pressed', () => { render(); - const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); + const spiedSelectCellsBetweenRange = spyApi(apiRef.current!, 'selectCellRange'); const cell = getCell(0, 0); cell.focus(); fireUserEvent.mousePress(cell); @@ -193,7 +193,7 @@ describe(' - Cell selection', () => { it('should call selectCellRange when ArrowUp is pressed', async () => { const { user } = render(); - const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); + const spiedSelectCellsBetweenRange = spyApi(apiRef.current!, 'selectCellRange'); const cell = getCell(1, 0); await act(() => { cell.focus(); @@ -206,7 +206,7 @@ describe(' - Cell selection', () => { it('should call selectCellRange when ArrowLeft is pressed', () => { render(); - const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); + const spiedSelectCellsBetweenRange = spyApi(apiRef.current!, 'selectCellRange'); const cell = getCell(0, 1); cell.focus(); fireUserEvent.mousePress(cell); @@ -221,7 +221,7 @@ describe(' - Cell selection', () => { it('should call selectCellRange when ArrowRight is pressed', () => { render(); - const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); + const spiedSelectCellsBetweenRange = spyApi(apiRef.current!, 'selectCellRange'); const cell = getCell(0, 0); cell.focus(); fireUserEvent.mousePress(cell); @@ -287,7 +287,7 @@ describe(' - Cell selection', () => { it('should select all cells within the given arguments if end > start', () => { render(); act(() => - apiRef.current.selectCellRange({ id: 0, field: 'id' }, { id: 2, field: 'price1M' }), + apiRef.current?.selectCellRange({ id: 0, field: 'id' }, { id: 2, field: 'price1M' }), ); expect(getCell(0, 0)).to.have.class('Mui-selected'); @@ -306,7 +306,7 @@ describe(' - Cell selection', () => { it('should select all cells within the given arguments if start > end', async () => { render(); await act(() => - apiRef.current.selectCellRange({ id: 0, field: 'id' }, { id: 2, field: 'price1M' }), + apiRef.current?.selectCellRange({ id: 0, field: 'id' }, { id: 2, field: 'price1M' }), ); expect(getCell(0, 0)).to.have.class('Mui-selected'); @@ -334,7 +334,7 @@ describe(' - Cell selection', () => { expect(getCell(0, 2)).to.have.class('Mui-selected'); act(() => - apiRef.current.selectCellRange({ id: 1, field: 'id' }, { id: 2, field: 'price1M' }), + apiRef.current?.selectCellRange({ id: 1, field: 'id' }, { id: 2, field: 'price1M' }), ); expect(getCell(0, 0)).not.to.have.class('Mui-selected'); @@ -358,7 +358,7 @@ describe(' - Cell selection', () => { cellSelectionModel={{ 0: { id: true, currencyPair: true, price1M: false } }} />, ); - expect(apiRef.current.getSelectedCellsAsArray()).to.deep.equal([ + expect(apiRef.current?.getSelectedCellsAsArray()).to.deep.equal([ { id: 0, field: 'id' }, { id: 0, field: 'currencyPair' }, ]); diff --git a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx index 7f030c7bfc7da..26e6b7a063473 100644 --- a/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx @@ -18,7 +18,7 @@ import { isJSDOM, describeSkipIf } from 'test/utils/skipIf'; describe(' - Clipboard', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function Test({ rowLength = 4, @@ -189,7 +189,7 @@ describe(' - Clipboard', () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', keyCode: 86, [key]: true }); // Ctrl+V @@ -202,7 +202,7 @@ describe(' - Clipboard', () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', keyCode: 86, [key]: true }); // Ctrl+V diff --git a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx index f7065916f2363..8a67f0acf0957 100644 --- a/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/dataSourceAggregation.DataGridPremium.test.tsx @@ -21,7 +21,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Data source aggregation', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; let getRowsSpy: SinonSpy; let mockServer: ReturnType; @@ -138,11 +138,11 @@ describe(' - Data source aggregation', () => { />, ); await waitFor(() => { - expect(Object.keys(apiRef.current.state.aggregation.lookup).length).to.be.greaterThan(0); + expect(Object.keys(apiRef.current!.state.aggregation.lookup).length).to.be.greaterThan(0); }); - expect(apiRef.current.state.rows.tree[GRID_AGGREGATION_ROOT_FOOTER_ROW_ID]).not.to.equal(null); - const footerRow = apiRef.current.state.aggregation.lookup[GRID_ROOT_GROUP_ID]; - expect(footerRow.id).to.deep.equal({ position: 'footer', value: 10 }); + expect(apiRef.current?.state.rows.tree[GRID_AGGREGATION_ROOT_FOOTER_ROW_ID]).not.to.equal(null); + const footerRow = apiRef.current?.state.aggregation.lookup[GRID_ROOT_GROUP_ID]; + expect(footerRow?.id).to.deep.equal({ position: 'footer', value: 10 }); }); it('should derive the aggregation values using `dataSource.getAggregatedValue`', async () => { @@ -155,9 +155,9 @@ describe(' - Data source aggregation', () => { />, ); await waitFor(() => { - expect(Object.keys(apiRef.current.state.aggregation.lookup).length).to.be.greaterThan(0); + expect(Object.keys(apiRef.current!.state.aggregation.lookup).length).to.be.greaterThan(0); }); - expect(apiRef.current.state.aggregation.lookup[GRID_ROOT_GROUP_ID].id.value).to.equal( + expect(apiRef.current?.state.aggregation.lookup[GRID_ROOT_GROUP_ID].id.value).to.equal( 'Agg value', ); }); diff --git a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx index e8edf003b3184..c97dbb2a98b71 100644 --- a/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx @@ -20,7 +20,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Export Excel', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const columns: GridColDef[] = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; const rows = [ @@ -55,7 +55,7 @@ describe(' - Export Excel', () => { describe('export interface', () => { it('should generate a file', async () => { render(); - expect(await act(() => apiRef.current.getDataAsExcel())).not.to.equal(null); + expect(await act(() => apiRef.current?.getDataAsExcel())).not.to.equal(null); }); it('should display export option', async () => { @@ -100,7 +100,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await apiRef.current.getDataAsExcel(); + const workbook = await apiRef.current?.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('str'); @@ -144,7 +144,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await apiRef.current.getDataAsExcel(); + const workbook = await apiRef.current?.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('option'); @@ -184,7 +184,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await apiRef.current.getDataAsExcel(); + const workbook = await apiRef.current?.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('str'); @@ -222,9 +222,9 @@ describe(' - Export Excel', () => { } render(); - let workbook: Excel.Workbook | null = null; + let workbook: Excel.Workbook | null | undefined = null; await act(async () => { - workbook = await apiRef.current.getDataAsExcel(); + workbook = await apiRef.current?.getDataAsExcel(); }); const worksheet = workbook!.worksheets[0]; @@ -278,7 +278,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await apiRef.current.getDataAsExcel({ + const workbook = await apiRef.current?.getDataAsExcel({ allColumns: true, }); const worksheet = workbook!.worksheets[0]; @@ -326,7 +326,7 @@ describe(' - Export Excel', () => { } render(); - const workbook = await apiRef.current.getDataAsExcel(); + const workbook = await apiRef.current?.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; // line 1: | group1 | group23 | @@ -383,7 +383,7 @@ describe(' - Export Excel', () => { render(); - const workbook = await apiRef.current.getDataAsExcel(); + const workbook = await apiRef.current?.getDataAsExcel(); const worksheet = workbook!.worksheets[0]; expect(worksheet.getCell('A1').value).to.equal('name'); @@ -409,14 +409,14 @@ describe(' - Export Excel', () => { it('should not call getDataAsExcel', async () => { render(); - const getDataAsExcelSpy = spyApi(apiRef.current, 'getDataAsExcel'); - await act(() => apiRef.current.exportDataAsExcel({ worker: () => workerMock as any })); + const getDataAsExcelSpy = spyApi(apiRef.current!, 'getDataAsExcel'); + await act(() => apiRef.current?.exportDataAsExcel({ worker: () => workerMock as any })); expect(getDataAsExcelSpy.calledOnce).to.equal(false); }); it('should post a message to the web worker with the serialized columns', async () => { render(); - await act(() => apiRef.current.exportDataAsExcel({ worker: () => workerMock as any })); + await act(() => apiRef.current?.exportDataAsExcel({ worker: () => workerMock as any })); expect(workerMock.postMessage.lastCall.args[0].serializedColumns).to.deep.equal([ { key: 'id', headerText: 'id', style: {}, width: 100 / 7.5 }, { key: 'brand', headerText: 'Brand', style: {}, width: 100 / 7.5 }, @@ -425,7 +425,7 @@ describe(' - Export Excel', () => { it('should post a message to the web worker with the serialized rows', async () => { render(); - await act(() => apiRef.current.exportDataAsExcel({ worker: () => workerMock as any })); + await act(() => apiRef.current?.exportDataAsExcel({ worker: () => workerMock as any })); expect(workerMock.postMessage.lastCall.args[0].serializedRows).to.deep.equal([ { dataValidation: {}, diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 2e6eea0885b1a..79e7b2ced4eb1 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -79,7 +79,7 @@ const baselineProps: BaselineProps = { describe(' - Row grouping', () => { const { render, clock } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); @@ -561,14 +561,14 @@ describe(' - Row grouping', () => { ); // No grouping applied on rows - expect(apiRef.current.state.rows.groupingName).to.equal('none'); + expect(apiRef.current?.state.rows.groupingName).to.equal('none'); expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); // No grouping column rendered expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'category1', 'category2']); // No menu item on column menu to add / remove grouping criteria - act(() => apiRef.current.showColumnMenu('category1')); + act(() => apiRef.current?.showColumnMenu('category1')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); const category1Menuitem = screen.queryByRole('menuitem', { @@ -576,11 +576,11 @@ describe(' - Row grouping', () => { }); expect(category1Menuitem).to.equal(null); - act(() => apiRef.current.hideColumnMenu()); + act(() => apiRef.current?.hideColumnMenu()); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); - act(() => 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' }); @@ -668,7 +668,7 @@ describe(' - Row grouping', () => { ); expect(getColumnValues(0)).to.deep.equal(['Cat A (3)', 'Cat B (2)']); act(() => { - apiRef.current.setRowChildrenExpansion('auto-generated-row-category1/Cat B', true); + apiRef.current?.setRowChildrenExpansion('auto-generated-row-category1/Cat B', true); }); expect(getColumnValues(0)).to.deep.equal([ 'Cat A (3)', @@ -701,7 +701,7 @@ describe(' - Row grouping', () => { />, ); expect(isGroupExpandedByDefault.callCount).to.equal(reactMajor >= 19 ? 6 : 12); // Should not be called on leaves - const { childrenExpanded, ...node } = apiRef.current.state.rows.tree.A as GridGroupNode; + const { childrenExpanded, ...node } = apiRef.current?.state.rows.tree.A as GridGroupNode; const callForNodeA = isGroupExpandedByDefault .getCalls() .find( @@ -751,7 +751,7 @@ describe(' - Row grouping', () => { />, ); - expect(apiRef.current.getAllColumns()[0].field).to.equal('__row_group_by_columns_group__'); + expect(apiRef.current?.getAllColumns()[0].field).to.equal('__row_group_by_columns_group__'); }); it('should react to groupingColDef update', () => { @@ -789,13 +789,13 @@ describe(' - Row grouping', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' }); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD, width: 100 }, ]), ); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' }); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: 'id', headerName: 'New id', @@ -972,8 +972,12 @@ describe(' - Row grouping', () => { defaultGroupingExpansionDepth={1} groupingColDef={{ valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const node = apiRef.current.getRowNode(rowId)!; + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return ''; + } + + const node = apiRef.current?.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1001,8 +1005,12 @@ describe(' - Row grouping', () => { defaultGroupingExpansionDepth={1} groupingColDef={() => ({ valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const node = apiRef.current.getRowNode(rowId)!; + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return ''; + } + + const node = apiRef.current?.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1090,7 +1098,7 @@ describe(' - Row grouping', () => { />, ); - expect(apiRef.current.getAllColumns()[0].field).to.equal( + expect(apiRef.current?.getAllColumns()[0].field).to.equal( '__row_group_by_columns_group_category1__', ); }); @@ -1149,14 +1157,14 @@ describe(' - Row grouping', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' }); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: getRowGroupingFieldFromGroupingCriteria('category1'), width: 100 }, ]), ); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '300px' }); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: 'id', headerName: 'New id', @@ -1389,8 +1397,12 @@ describe(' - Row grouping', () => { defaultGroupingExpansionDepth={1} groupingColDef={{ valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const node = apiRef.current.getRowNode(rowId)!; + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return ''; + } + + const node = apiRef.current?.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1432,8 +1444,12 @@ describe(' - Row grouping', () => { return { valueFormatter: (value, row) => { - const rowId = apiRef.current.getRowId(row); - const node = apiRef.current.getRowNode(rowId)!; + const rowId = apiRef.current?.getRowId(row); + if (!rowId) { + return ''; + } + + const node = apiRef.current?.getRowNode(rowId)!; if (node.type !== 'group') { return ''; } @@ -1594,7 +1610,7 @@ describe(' - Row grouping', () => { expect(getColumnValues(1)).to.deep.equal(['', '0', '2', '4', '', '1', '3']); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: 'modulo', groupingValueGetter: (value, row) => row.id % 3, @@ -1675,12 +1691,12 @@ describe(' - Row grouping', () => { ]} />, ); - act(() => apiRef.current.showColumnMenu('category1')); + act(() => apiRef.current?.showColumnMenu('category1')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); const menuItem = screen.getByRole('menuitem', { name: 'Group by category1' }); fireEvent.click(menuItem); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category1']); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal(['category1']); }); it('should not add a "Group by {field}" menu item on ungrouped columns when coLDef.groupable = false', () => { @@ -1697,7 +1713,7 @@ describe(' - Row grouping', () => { ]} />, ); - act(() => 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); @@ -1721,12 +1737,12 @@ describe(' - Row grouping', () => { }} />, ); - act(() => apiRef.current.showColumnMenu('category1')); + act(() => apiRef.current?.showColumnMenu('category1')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); const menuItem = screen.getByRole('menuitem', { name: 'Stop grouping by category1' }); fireEvent.click(menuItem); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]); }); it('should add a "Stop grouping by {field} menu item on each grouping column when prop.rowGroupingColumnMode = "multiple"', () => { @@ -1752,27 +1768,27 @@ describe(' - Row grouping', () => { />, ); - act(() => 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.getByRole('menuitem', { name: 'Stop grouping by category1', }); fireEvent.click(menuItemCategory1); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2']); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal(['category2']); - act(() => apiRef.current.hideColumnMenu()); + act(() => apiRef.current?.hideColumnMenu()); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); - act(() => 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.getByRole('menuitem', { name: 'Stop grouping by category2', }); fireEvent.click(menuItemCategory2); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]); }); it('should add a "Stop grouping {field}" menu item for each grouping criteria on the grouping column when prop.rowGroupingColumnMode = "single"', () => { @@ -1797,19 +1813,19 @@ describe(' - Row grouping', () => { />, ); - act(() => 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.getByRole('menuitem', { name: 'Stop grouping by category1', }); fireEvent.click(menuItemCategory1); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2']); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal(['category2']); const menuItemCategory2 = screen.getByRole('menuitem', { name: 'Stop grouping by category2', }); fireEvent.click(menuItemCategory2); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]); }); it('should add a "Stop grouping {field}" menu item for each grouping criteria with colDef.groupable = false but it should be disabled', () => { @@ -1836,7 +1852,7 @@ describe(' - Row grouping', () => { />, ); - act(() => 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.getByRole('menuitem', { @@ -1863,7 +1879,7 @@ describe(' - Row grouping', () => { ]} />, ); - act(() => 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); @@ -1888,7 +1904,7 @@ describe(' - Row grouping', () => { }} />, ); - act(() => 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( @@ -2437,7 +2453,7 @@ describe(' - Row grouping', () => { ); const { filteredChildrenCountLookup, filteredDescendantCountLookup } = - apiRef.current.state.filter; + apiRef.current!.state.filter; expect(filteredChildrenCountLookup['auto-generated-row-category1/Cat A']).to.equal(2); expect(filteredDescendantCountLookup['auto-generated-row-category1/Cat A']).to.equal(5); @@ -2609,7 +2625,7 @@ describe(' - Row grouping', () => { ); const onFilteredRowsSet = spy(); - apiRef.current.subscribeEvent('filteredRowsSet', onFilteredRowsSet); + apiRef.current?.subscribeEvent('filteredRowsSet', onFilteredRowsSet); fireEvent.click(getCell(0, 0).querySelector('button')!); expect(onFilteredRowsSet.callCount).to.equal(0); @@ -2626,7 +2642,7 @@ describe(' - Row grouping', () => { ); const onFilteredRowsSet = spy(); - apiRef.current.subscribeEvent('filteredRowsSet', onFilteredRowsSet); + apiRef.current?.subscribeEvent('filteredRowsSet', onFilteredRowsSet); fireEvent.click(getCell(0, 0).querySelector('button')!); expect(onFilteredRowsSet.callCount).to.equal(0); @@ -2690,14 +2706,14 @@ describe(' - Row grouping', () => { it('should add grouping criteria to model', () => { render(); - act(() => apiRef.current.addRowGroupingCriteria('category2')); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category1', '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(); - act(() => apiRef.current.addRowGroupingCriteria('category2', 0)); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']); + act(() => apiRef.current?.addRowGroupingCriteria('category2', 0)); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal(['category2', 'category1']); }); }); @@ -2706,8 +2722,8 @@ describe(' - Row grouping', () => { it('should remove field from model', () => { render(); - act(() => apiRef.current.removeRowGroupingCriteria('category1')); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal([]); + act(() => apiRef.current?.removeRowGroupingCriteria('category1')); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal([]); }); }); @@ -2716,8 +2732,8 @@ describe(' - Row grouping', () => { it('should change the grouping criteria order', () => { render(); - act(() => apiRef.current.setRowGroupingCriteriaIndex('category1', 1)); - expect(apiRef.current.state.rowGrouping.model).to.deep.equal(['category2', 'category1']); + act(() => apiRef.current?.setRowGroupingCriteriaIndex('category1', 1)); + expect(apiRef.current?.state.rowGrouping.model).to.deep.equal(['category2', 'category1']); }); }); @@ -2742,15 +2758,15 @@ describe(' - Row grouping', () => { ); const groupId = getGroupRowIdFromPath([{ field: 'category1', key: 'Cat A' }]); - expect(apiRef.current.getRowGroupChildren({ groupId })).to.deep.equal([0, 1, 2]); - expect(apiRef.current.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId })).to.deep.equal([0, 1, 2]); + expect(apiRef.current?.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ 2, 1, 0, ]); - expect(apiRef.current.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ 1, 2, ]); expect( - apiRef.current.getRowGroupChildren({ + apiRef.current?.getRowGroupChildren({ groupId, applySorting: true, applyFiltering: true, @@ -2776,22 +2792,22 @@ describe(' - Row grouping', () => { ); const groupId = getGroupRowIdFromPath([{ field: 'category1', key: 'Cat A' }]); - expect(apiRef.current.getRowGroupChildren({ groupId })).to.deep.equal([0, 1, 2]); - expect(apiRef.current.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId })).to.deep.equal([0, 1, 2]); + expect(apiRef.current?.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ 0, 2, 1, ]); - expect(apiRef.current.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ 1, 2, ]); expect( - apiRef.current.getRowGroupChildren({ + apiRef.current?.getRowGroupChildren({ groupId, applySorting: true, applyFiltering: true, }), ).to.deep.equal([2, 1]); expect( - apiRef.current.getRowGroupChildren({ + apiRef.current?.getRowGroupChildren({ groupId, skipAutoGeneratedRows: false, }), @@ -2803,7 +2819,7 @@ describe(' - Row grouping', () => { 2, ]); expect( - apiRef.current.getRowGroupChildren({ + apiRef.current?.getRowGroupChildren({ groupId, skipAutoGeneratedRows: false, applySorting: true, @@ -2833,11 +2849,11 @@ describe(' - Row grouping', () => { { field: 'category1', key: 'Cat A' }, { field: 'category2', key: 'Cat 2' }, ]); - expect(apiRef.current.getRowGroupChildren({ groupId })).to.deep.equal([1, 2]); - expect(apiRef.current.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId })).to.deep.equal([1, 2]); + expect(apiRef.current?.getRowGroupChildren({ groupId, applySorting: true })).to.deep.equal([ 2, 1, ]); - expect(apiRef.current.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ + expect(apiRef.current?.getRowGroupChildren({ groupId, applyFiltering: true })).to.deep.equal([ 2, ]); }); @@ -2875,7 +2891,7 @@ describe(' - Row grouping', () => { />, ); - act(() => apiRef.current.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); + act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); await waitFor(() => expect(getCell(1, 3).textContent).to.equal('username 2')); }); @@ -2892,7 +2908,7 @@ describe(' - Row grouping', () => { fireEvent.click(screen.getByRole('button', { name: 'see children' })); - act(() => apiRef.current.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); + act(() => apiRef.current?.updateRows([{ id: 1, group: 'A', username: 'username 2' }])); await waitFor(() => { expect(screen.getByRole('button', { name: 'hide children' })).toBeVisible(); @@ -2917,7 +2933,7 @@ describe(' - Row grouping', () => { expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']); // trigger row update without any changes in row data - act(() => apiRef.current.updateRows([{ id: 1 }])); + act(() => apiRef.current?.updateRows([{ id: 1 }])); await waitFor(() => { expect(getColumnValues(3)).to.deep.equal(['', 'username1', 'username2']); diff --git a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx index 1c3771cc68708..7d44478cc1dbf 100644 --- a/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx @@ -48,7 +48,7 @@ describe(' - Row selection', () => { const { render } = createRenderer(); describe('props: rowSelectionPropagation = { descendants: true, parents: true }', () => { - let apiRef: RefObject; + let apiRef: RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); @@ -87,7 +87,7 @@ describe(' - Row selection', () => { render(); fireEvent.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([ + expect(apiRef.current?.getSelectedRows()).to.have.keys([ 'auto-generated-row-category1/Cat B', 3, 4, @@ -98,13 +98,13 @@ describe(' - Row selection', () => { render(); fireEvent.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([ + expect(apiRef.current?.getSelectedRows()).to.have.keys([ 'auto-generated-row-category1/Cat B', 3, 4, ]); fireEvent.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); it('should auto select the parent if all the children are selected', () => { @@ -113,7 +113,7 @@ describe(' - Row selection', () => { fireEvent.click(getCell(1, 0).querySelector('input')!); fireEvent.click(getCell(2, 0).querySelector('input')!); fireEvent.click(getCell(3, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([ + expect(apiRef.current?.getSelectedRows()).to.have.keys([ 0, 1, 2, @@ -127,14 +127,14 @@ describe(' - Row selection', () => { await user.click(getCell(1, 0).querySelector('input')!); await user.click(getCell(2, 0).querySelector('input')!); await user.click(getCell(3, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([ + expect(apiRef.current?.getSelectedRows()).to.have.keys([ 0, 1, 2, 'auto-generated-row-category1/Cat A', ]); await user.click(getCell(2, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 2]); }); // Context: https://github.com/mui/mui-x/issues/15206 @@ -145,14 +145,14 @@ describe(' - Row selection', () => { const expectedCount = 3; fireEvent.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys(expectedKeys); - expect(apiRef.current.state.rowSelection.length).to.equal(expectedCount); + expect(apiRef.current?.getSelectedRows()).to.have.keys(expectedKeys); + expect(apiRef.current?.state.rowSelection.length).to.equal(expectedCount); act(() => { - apiRef.current.updateRows([...rows]); + apiRef.current?.updateRows([...rows]); }); - expect(apiRef.current.getSelectedRows()).to.have.keys(expectedKeys); - expect(apiRef.current.state.rowSelection.length).to.equal(expectedCount); + expect(apiRef.current?.getSelectedRows()).to.have.keys(expectedKeys); + expect(apiRef.current?.state.rowSelection.length).to.equal(expectedCount); }); it('should select all the children when selecting an indeterminate parent', () => { @@ -161,7 +161,7 @@ describe(' - Row selection', () => { fireEvent.click(getCell(2, 0).querySelector('input')!); expect(getCell(0, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true'); fireEvent.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([ + expect(apiRef.current?.getSelectedRows()).to.have.keys([ 0, 1, 2, diff --git a/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx index eff5386fc3a41..ec2dd3c408802 100644 --- a/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/statePersistence.DataGridPremium.test.tsx @@ -51,7 +51,7 @@ const FULL_INITIAL_STATE: GridInitialState = { describe(' - State persistence', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Omit) { apiRef = useGridApiRef(); @@ -77,14 +77,14 @@ describe(' - State persistence', () => { it('should export the initial values of the models', () => { render(); - const exportedState = apiRef.current.exportState(); - expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); - expect(exportedState.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); + const exportedState = apiRef.current?.exportState(); + expect(exportedState?.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); + expect(exportedState?.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); }); it('should not export the default values of the models when using exportOnlyDirtyModels', () => { render(); - expect(apiRef.current.exportState({ exportOnlyDirtyModels: true })).to.deep.equal({ + expect(apiRef.current?.exportState({ exportOnlyDirtyModels: true })).to.deep.equal({ columns: { orderedFields: ['id', 'category'], }, @@ -94,33 +94,33 @@ describe(' - State persistence', () => { it('should export the current version of the exportable state', async () => { render(); await act(() => { - apiRef.current.setRowGroupingModel(['category']); + apiRef.current?.setRowGroupingModel(['category']); }); await act(() => { - apiRef.current.setAggregationModel({ + apiRef.current?.setAggregationModel({ id: 'size', }); }); - const exportedState = apiRef.current.exportState(); - expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); - expect(exportedState.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); + const exportedState = apiRef.current?.exportState(); + expect(exportedState?.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); + expect(exportedState?.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); }); it('should export the current version of the exportable state when using exportOnlyDirtyModels', async () => { render(); await act(() => { - apiRef.current.setRowGroupingModel(['category']); + apiRef.current?.setRowGroupingModel(['category']); }); await act(() => { - apiRef.current.setAggregationModel({ + apiRef.current?.setAggregationModel({ id: 'size', }); }); - const exportedState = apiRef.current.exportState({ exportOnlyDirtyModels: true }); - expect(exportedState.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); - expect(exportedState.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); + const exportedState = apiRef.current?.exportState({ exportOnlyDirtyModels: true }); + expect(exportedState?.rowGrouping).to.deep.equal(FULL_INITIAL_STATE.rowGrouping); + expect(exportedState?.aggregation).to.deep.equal(FULL_INITIAL_STATE.aggregation); }); it('should export the controlled values of the models', () => { @@ -130,10 +130,10 @@ describe(' - State persistence', () => { aggregationModel={FULL_INITIAL_STATE.aggregation?.model} />, ); - expect(apiRef.current.exportState().rowGrouping).to.deep.equal( + expect(apiRef.current?.exportState().rowGrouping).to.deep.equal( FULL_INITIAL_STATE.rowGrouping, ); - expect(apiRef.current.exportState().aggregation).to.deep.equal( + expect(apiRef.current?.exportState().aggregation).to.deep.equal( FULL_INITIAL_STATE.aggregation, ); }); @@ -145,10 +145,10 @@ describe(' - State persistence', () => { aggregationModel={FULL_INITIAL_STATE.aggregation?.model} />, ); - expect(apiRef.current.exportState().rowGrouping).to.deep.equal( + expect(apiRef.current?.exportState().rowGrouping).to.deep.equal( FULL_INITIAL_STATE.rowGrouping, ); - expect(apiRef.current.exportState().aggregation).to.deep.equal( + expect(apiRef.current?.exportState().aggregation).to.deep.equal( FULL_INITIAL_STATE.aggregation, ); }); @@ -158,7 +158,7 @@ describe(' - State persistence', () => { it('should restore the whole exportable state', () => { render(); - act(() => apiRef.current.restoreState(FULL_INITIAL_STATE)); + act(() => apiRef.current?.restoreState(FULL_INITIAL_STATE)); expect(getColumnValues(0)).to.deep.equal([ 'Cat A (3)', '', diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 206136b43bc68..37d8c05460ed9 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -74,7 +74,7 @@ DataGridProRaw.propTypes = { * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`. */ apiRef: PropTypes.shape({ - current: PropTypes.object.isRequired, + current: PropTypes.object, }), /** * The label of the Data Grid. diff --git a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx index 1f66716fdb3f0..27b1a5bed4d07 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx @@ -87,7 +87,7 @@ import { dataSourceStateInitializer } from '../hooks/features/dataSource/useGrid import { useGridDataSourceLazyLoader } from '../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader'; export const useDataGridProComponent = ( - inputApiRef: RefObject | undefined, + inputApiRef: RefObject | undefined, props: DataGridProProcessedProps, ) => { const apiRef = useGridInitialization(inputApiRef, props); diff --git a/packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts index 0828c9a98bddb..2737a9989d1ef 100644 --- a/packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts +++ b/packages/x-data-grid-pro/src/hooks/utils/useGridApiRef.ts @@ -2,5 +2,5 @@ import { RefObject } from '@mui/x-internals/types'; import { GridApiCommon, useGridApiRef as useCommunityGridApiRef } from '@mui/x-data-grid'; import { GridApiPro } from '../../models/gridApiPro'; -export const useGridApiRef: () => RefObject = +export const useGridApiRef: () => RefObject = useCommunityGridApiRef; diff --git a/packages/x-data-grid-pro/src/models/dataGridProProps.ts b/packages/x-data-grid-pro/src/models/dataGridProProps.ts index b0b1c9b3c4706..216f65bf55601 100644 --- a/packages/x-data-grid-pro/src/models/dataGridProProps.ts +++ b/packages/x-data-grid-pro/src/models/dataGridProProps.ts @@ -187,7 +187,7 @@ export interface DataGridProPropsWithoutDefaultValue; + apiRef?: RefObject; /** * The initial state of the DataGridPro. * The data in it will be set in the state on initialization but will not be controlled. diff --git a/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx b/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx index 593ae07a0fbc1..4d8f4381f6be0 100644 --- a/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx +++ b/packages/x-data-grid-pro/src/tests/DataGridPro.spec.tsx @@ -116,7 +116,7 @@ function ApiRefPrivateMethods() { function ApiRefPublicMethods() { const apiRef = useGridApiRef(); - apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {}); + apiRef.current!.unstable_applyPipeProcessors('exportMenu', [], {}); } function ApiRefProMethods() { @@ -124,12 +124,12 @@ function ApiRefProMethods() { React.useEffect(() => { // available in Pro and Premium - apiRef.current.selectRows([]); - apiRef.current.selectRowRange({ startId: 0, endId: 1 }); - apiRef.current.setColumnIndex; - apiRef.current.setRowIndex; - apiRef.current.setRowChildrenExpansion; - apiRef.current.getRowGroupChildren; + apiRef.current!.selectRows([]); + apiRef.current!.selectRowRange({ startId: 0, endId: 1 }); + apiRef.current!.setColumnIndex; + apiRef.current!.setRowIndex; + apiRef.current!.setRowChildrenExpansion; + apiRef.current!.getRowGroupChildren; }); return null; diff --git a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx index 7878dbf52e4f3..4e4d5624dab66 100644 --- a/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx @@ -21,7 +21,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Cell editing', () => { const { render, clock } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const defaultData = getBasicGridData(4, 2); @@ -57,16 +57,16 @@ describe(' - Cell editing', () => { describe('startCellEditMode', () => { it('should throw when the cell is already in edit mode', async () => { render(); - await act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + await act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(() => { - apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }); + apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' }); }).to.throw('MUI X: The cell with id=0 and field=currencyPair is not in view mode.'); }); it('should update the CSS class of the cell', () => { render(); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); }); @@ -75,7 +75,7 @@ describe(' - Cell editing', () => { render(); expect(renderEditCell.callCount).to.equal(0); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.callCount).not.to.equal(0); }); @@ -84,7 +84,7 @@ describe(' - Cell editing', () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); expect(renderEditCell.lastCall.args[0].error).to.equal(false); expect(renderEditCell.lastCall.args[0].isProcessingProps).to.equal(false); @@ -96,7 +96,7 @@ describe(' - Cell editing', () => { render(); act(() => - apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair', deleteValue: true }), + apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair', deleteValue: true }), ); expect(renderEditCell.lastCall.args[0].value).to.equal(''); expect(renderEditCell.lastCall.args[0].error).to.equal(false); @@ -110,10 +110,10 @@ describe(' - Cell editing', () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' }), ); expect(renderEditCell.lastCall.args[0].value).to.equal('usdgbp'); }); @@ -127,10 +127,10 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }), ); expect(renderEditCell.lastCall.args[0].row).to.deep.equal({ ...defaultData.rows[0], @@ -144,10 +144,10 @@ describe(' - Cell editing', () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(valueParser.callCount).to.equal(0); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(valueParser.callCount).to.equal(1); expect(renderEditCell.lastCall.args[0].value).to.equal('usd gbp'); @@ -155,10 +155,10 @@ describe(' - Cell editing', () => { it('should return true if no preProcessEditCellProps is defined', async () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect( await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ), ).to.equal(true); }); @@ -168,11 +168,11 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); let promise: Promise | null = null; // We want to flush updates before preProcessEditCellProps resolves act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -185,9 +185,9 @@ describe(' - Cell editing', () => { it('should call preProcessEditCellProps with the correct params', async () => { const preProcessEditCellProps = spy(({ props }: GridPreProcessEditCellProps) => props); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -219,9 +219,9 @@ describe(' - Cell editing', () => { columnProps={{ preProcessEditCellProps }} />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -243,10 +243,10 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(renderEditCell.lastCall.args[0].foo).to.equal('bar'); }); @@ -259,10 +259,10 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP'); }); @@ -272,11 +272,11 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); let promise: Promise | null = null; // We want to flush updates before preProcessEditCellProps resolves act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -293,10 +293,10 @@ describe(' - Cell editing', () => { error: true, }); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect( await act(() => - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -312,11 +312,11 @@ describe(' - Cell editing', () => { resolveCallback = () => resolve(props); }); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); let promise: Promise; act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -324,7 +324,7 @@ describe(' - Cell editing', () => { }); act(() => - apiRef.current.stopCellEditMode({ + apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair', ignoreModifications: true, @@ -345,17 +345,17 @@ describe(' - Cell editing', () => { ) => React.ReactNode); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); renderEditCell.resetHistory(); - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD', debounceMs: 100, }); expect(renderEditCell.callCount).to.equal(0); - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -382,29 +382,29 @@ describe(' - Cell editing', () => { it('should throw an error when the cell is not in edit mode', () => { render(); - expect(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })).to.throw( + expect(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })).to.throw( 'MUI X: The cell with id=0 and field=currencyPair is not in edit mode.', ); }); it('should update the row with the new value stored', async () => { render(); - await act(async () => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + await act(async () => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(async () => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - await act(async () => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + await act(async () => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1).textContent).to.equal('USD GBP'); }); it('should not update the row if ignoreModifications=true', async () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); act(() => - apiRef.current.stopCellEditMode({ + apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair', ignoreModifications: true, @@ -420,18 +420,18 @@ describe(' - Cell editing', () => { resolveCallback = () => resolve(props); }); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); let promise: Promise; act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', }) as Promise; }); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); @@ -446,11 +446,11 @@ describe(' - Cell editing', () => { error: true, }); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); }); @@ -466,11 +466,11 @@ describe(' - Cell editing', () => { columnProps={{ preProcessEditCellProps }} />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(onCellModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'edit' } }, }); @@ -482,40 +482,40 @@ describe(' - Cell editing', () => { error: props.value.length === 0, }); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); }); it('should update the CSS class of the cell', async () => { render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); }); it('should call processRowUpdate before updating the row', async () => { const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' })); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => Promise.resolve()); expect(processRowUpdate.callCount).to.equal(1); expect(getCell(0, 1).textContent).to.equal('USD-GBP'); @@ -524,11 +524,11 @@ describe(' - Cell editing', () => { it('should call processRowUpdate with the new and old row', async () => { const processRowUpdate = spy((newRow, oldRow) => ({ ...oldRow, ...newRow })); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => Promise.resolve()); expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ ...defaultData.rows[0], @@ -542,9 +542,9 @@ describe(' - Cell editing', () => { throw new Error('Something went wrong'); }; render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(() => - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })), + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })), ).toErrorDev( 'MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', ); @@ -563,8 +563,8 @@ describe(' - Cell editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error); }); @@ -580,8 +580,8 @@ describe(' - Cell editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => Promise.resolve()); expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error); }); @@ -600,11 +600,11 @@ describe(' - Cell editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(onCellModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'edit' } }, }); @@ -617,11 +617,11 @@ describe(' - Cell editing', () => { })); const processRowUpdate = spy(() => new Promise(() => {})); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect((processRowUpdate.lastCall as any).args[0]).to.deep.equal({ ...defaultData.rows[0], currencyPair: 'USDGBP', @@ -637,10 +637,10 @@ describe(' - Cell editing', () => { ); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopCellEditMode({ + apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair', cellToFocusAfter: 'below', @@ -665,10 +665,10 @@ describe(' - Cell editing', () => { />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(getCell(0, 1).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopCellEditMode({ + apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair', cellToFocusAfter: 'right', @@ -693,10 +693,10 @@ describe(' - Cell editing', () => { />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'price1M' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'price1M' })); expect(getCell(0, 2).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopCellEditMode({ + apiRef.current?.stopCellEditMode({ id: 0, field: 'price1M', cellToFocusAfter: 'left', @@ -710,11 +710,11 @@ describe(' - Cell editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act( () => new Promise((resolve) => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -723,7 +723,7 @@ describe(' - Cell editing', () => { resolve(); }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP'); expect((processRowUpdate.lastCall as any).args[0].currencyPair).to.equal('USD GBP'); }); @@ -742,16 +742,16 @@ describe(' - Cell editing', () => { />, ); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(onCellModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'view' } }, }); - act(() => apiRef.current.startCellEditMode({ id: 1, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 1, field: 'currencyPair' })); expect(onCellModesModelChange.lastCall.args[0]).to.have.keys('0', '1'); expect(onCellModesModelChange.lastCall.args[0][1]).to.deep.equal({ currencyPair: { mode: 'edit' }, @@ -771,7 +771,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=cellDoubleClick`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.lastCall.args[0].reason).to.equal('cellDoubleClick'); @@ -780,7 +780,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); @@ -788,7 +788,7 @@ describe(' - Cell editing', () => { it('should call startCellEditMode', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(spiedStartCellEditMode.callCount).to.equal(1); @@ -799,7 +799,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=printableKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: '$' }); @@ -809,7 +809,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if space is pressed`, async () => { const { user } = render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); await user.click(cell); await user.keyboard('[Space]'); @@ -821,7 +821,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=printableKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: '1' }); @@ -833,7 +833,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=enterKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -843,7 +843,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -852,7 +852,7 @@ describe(' - Cell editing', () => { it('should call startCellEditMode', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -864,7 +864,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=deleteKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -874,7 +874,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -883,7 +883,7 @@ describe(' - Cell editing', () => { it('should call startCellEditMode', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -892,7 +892,7 @@ describe(' - Cell editing', () => { it('should empty the cell', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -927,7 +927,7 @@ describe(' - Cell editing', () => { describe('by pressing a printable character', () => { it('should call startCellEditMode', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); // A @@ -937,7 +937,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStart' with reason=printableKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); // A @@ -947,7 +947,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', keyCode: 65 }); // A @@ -958,7 +958,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellEditStart' if ${key} is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', keyCode: 65, [key]: true }); // for example Ctrl + A, copy @@ -969,7 +969,7 @@ describe(' - Cell editing', () => { it(`should call startCellEditMode if shiftKey is pressed with a letter`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', keyCode: 65, shiftKey: true }); // Print A in uppercase @@ -979,7 +979,7 @@ describe(' - Cell editing', () => { it(`should call startCellEditMode if the paste shortcut is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', keyCode: 86, ctrlKey: true }); // Ctrl+V @@ -989,7 +989,7 @@ describe(' - Cell editing', () => { it(`should call startCellEditMode if a special character on macOS is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStart', listener); + apiRef.current?.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Ï€', altKey: true }); // ⌥ Option + P @@ -998,7 +998,7 @@ describe(' - Cell editing', () => { it('should empty the cell', () => { render(); - const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); + const spiedStartCellEditMode = spyApi(apiRef.current!, 'startCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); @@ -1013,7 +1013,7 @@ describe(' - Cell editing', () => { it(`should ignore keydown event until the IME is confirmed with a letter`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); const input = cell.querySelector('input')!; @@ -1029,7 +1029,7 @@ describe(' - Cell editing', () => { it(`should ignore keydown event until the IME is confirmed with multiple letters`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); const input = cell.querySelector('input')!; @@ -1049,7 +1049,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStop' with reason=cellFocusOut`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); fireEvent.doubleClick(getCell(0, 1)); expect(listener.callCount).to.equal(0); fireUserEvent.mousePress(getCell(1, 1)); @@ -1058,7 +1058,7 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false and cellToFocusAfter=undefined', () => { render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); fireEvent.doubleClick(getCell(0, 1)); fireUserEvent.mousePress(getCell(1, 1)); expect(spiedStopCellEditMode.callCount).to.equal(1); @@ -1073,12 +1073,12 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); fireEvent.doubleClick(getCell(0, 1)); await act( () => new Promise((resolve) => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); resolve(); }), ); @@ -1092,7 +1092,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStop' with reason=escapeKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1103,7 +1103,7 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=true and cellToFocusAfter=undefined', () => { render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1122,7 +1122,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStop' with reason=enterKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1133,7 +1133,7 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false and cellToFocusAfter=below', () => { render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1150,14 +1150,14 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act( () => new Promise((resolve) => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); resolve(); }), ); @@ -1171,7 +1171,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellEditStop' with reason=tabKeyDown`, async () => { const { user } = render(); const listener = spy(); - apiRef.current.subscribeEvent('cellEditStop', listener); + apiRef.current?.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); await user.click(cell); await user.dblClick(cell); @@ -1182,7 +1182,7 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false and cellToFocusAfter=right', () => { render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1199,14 +1199,14 @@ describe(' - Cell editing', () => { it('should call stopCellEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); + const spiedStopCellEditMode = spyApi(apiRef.current!, 'stopCellEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act( () => new Promise((resolve) => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); resolve(); }), ); @@ -1242,7 +1242,7 @@ describe(' - Cell editing', () => { , ); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); setProps({ cellModesModel: { @@ -1257,7 +1257,7 @@ describe(' - Cell editing', () => { , ); await act(() => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); }); setProps({ cellModesModel: { @@ -1271,7 +1271,7 @@ describe(' - Cell editing', () => { it(`should publish 'cellModesModelChange' when the model changes`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellModesModelChange', listener); + apiRef.current?.subscribeEvent('cellModesModelChange', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.lastCall.args[0]).to.deep.equal({ @@ -1283,7 +1283,7 @@ describe(' - Cell editing', () => { const { setProps } = render(); const listener = spy(); expect(listener.callCount).to.equal(0); - apiRef.current.subscribeEvent('cellModesModelChange', listener); + apiRef.current?.subscribeEvent('cellModesModelChange', listener); setProps({ cellModesModel: { 0: { currencyPair: { mode: 'edit' } } } }); expect(listener.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'edit' } }, @@ -1293,7 +1293,7 @@ describe(' - Cell editing', () => { it(`should not publish 'cellModesModelChange' when the model changes and cellModesModel is set`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('cellModesModelChange', listener); + apiRef.current?.subscribeEvent('cellModesModelChange', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); @@ -1311,7 +1311,7 @@ describe(' - Cell editing', () => { fireEvent.doubleClick(cell); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); const cellModesModel = { 0: { currencyPair: { mode: 'view' } } }; @@ -1325,7 +1325,7 @@ describe(' - Cell editing', () => { const onCellModesModelChange = spy(); render(); expect(onCellModesModelChange.callCount).to.equal(0); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); expect(onCellModesModelChange.callCount).to.equal(1); expect(onCellModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'edit' } }, @@ -1335,9 +1335,9 @@ describe(' - Cell editing', () => { it('should call with mode=view when stopEditMode is called', () => { const onCellModesModelChange = spy(); render(); - act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.startCellEditMode({ id: 0, field: 'currencyPair' })); onCellModesModelChange.resetHistory(); - act(() => apiRef.current.stopCellEditMode({ id: 0, field: 'currencyPair' })); + act(() => apiRef.current?.stopCellEditMode({ id: 0, field: 'currencyPair' })); expect(onCellModesModelChange.args[0][0]).to.deep.equal({ 0: { currencyPair: { mode: 'view' } }, }); diff --git a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx index 8eca8c184773e..c01f7129d67ae 100644 --- a/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/clipboard.DataGridPro.test.tsx @@ -18,7 +18,7 @@ describe(' - Clipboard', () => { const columns = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; - let apiRef: RefObject; + let apiRef: RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); @@ -53,7 +53,7 @@ describe(' - Clipboard', () => { writeText = spy(navigator.clipboard, 'writeText'); - act(() => apiRef.current.selectRows([0, 1])); + act(() => apiRef.current?.selectRows([0, 1])); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, [key]: true }); @@ -94,7 +94,7 @@ describe(' - Clipboard', () => { writeText = spy(navigator.clipboard, 'writeText'); - act(() => apiRef.current.selectRows([0, 1])); + act(() => apiRef.current?.selectRows([0, 1])); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); diff --git a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index 9508205193da0..d604162c17ef7 100644 --- a/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -41,7 +41,7 @@ function createDragOverEvent(target: ChildNode) { describe(' - Column pinning', () => { const { render, clock } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase({ nbCols = 20, ...other }: Partial & { nbCols?: number }) { apiRef = useGridApiRef(); @@ -258,12 +258,12 @@ describe(' - Column pinning', () => { it('should call when a column is pinned', async () => { const handlePinnedColumnsChange = spy(); render(); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({ left: ['currencyPair'], right: [], }); - await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.RIGHT)); + await act(() => apiRef.current?.pinColumn('price17M', GridPinnedColumnPosition.RIGHT)); expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({ left: ['currencyPair'], right: ['price17M'], @@ -279,7 +279,7 @@ describe(' - Column pinning', () => { />, ); expect($$(`[role="gridcell"].${gridClasses['cell--pinnedLeft']}`)).to.have.length(1); - await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('price17M', GridPinnedColumnPosition.LEFT)); await microtasks(); expect($$(`[role="gridcell"].${gridClasses['cell--pinnedLeft']}`)).to.have.length(1); expect(handlePinnedColumnsChange.lastCall.args[0]).to.deep.equal({ @@ -303,7 +303,7 @@ describe(' - Column pinning', () => { expect( document.querySelector(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`), ).not.to.equal(null); - await act(() => apiRef.current.pinColumn('price17M', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('price17M', GridPinnedColumnPosition.LEFT)); expect( document.querySelector(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`), ).not.to.equal(null); @@ -350,7 +350,7 @@ describe(' - Column pinning', () => { it('should allow to pin column using `apiRef.current.pinColumn`', async () => { render(); - await act(() => apiRef.current.pinColumn('id', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('id', GridPinnedColumnPosition.LEFT)); const cell = document.querySelector( `.${gridClasses['cell--pinnedLeft']}[data-field="id"]`, )!; @@ -386,7 +386,7 @@ describe(' - Column pinning', () => { it('should pin the given column', async () => { render(); expect($('[data-field="currencyPair"]')?.className).not.to.include('pinned'); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect($(`.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`)).not.to.equal( null, ); @@ -399,13 +399,13 @@ describe(' - Column pinning', () => { expect($(renderZone, '[data-field="currencyPair"]')!.className).not.to.include('pinned'); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect( $(renderZone, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`), ).not.to.equal(null); expect($(renderZone, '[data-field="currencyPair"]')!.className).to.include('pinned'); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT)); expect($$(renderZone, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0); expect( $(renderZone, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`), @@ -414,9 +414,9 @@ describe(' - Column pinning', () => { it('should not change the columns when called on a pinned column with the same side', async () => { render(); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect($$(`.${gridClasses['cell--pinnedLeft']}`)).to.have.length(1); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect($$(`.${gridClasses['cell--pinnedLeft']}`)).to.have.length(1); }); }); @@ -424,9 +424,9 @@ describe(' - Column pinning', () => { describe('unpinColumn', () => { it('should unpin the given column', async () => { render(); - await act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); + await act(() => apiRef.current?.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT)); expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).not.to.equal(0); - await act(() => apiRef.current.unpinColumn('currencyPair')); + await act(() => apiRef.current?.unpinColumn('currencyPair')); expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0); const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!; expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null); @@ -438,9 +438,9 @@ describe(' - Column pinning', () => { render( , ); - expect(apiRef.current.isColumnPinned('id')).to.equal(GridPinnedColumnPosition.LEFT); - expect(apiRef.current.isColumnPinned('price16M')).to.equal(GridPinnedColumnPosition.RIGHT); - expect(apiRef.current.isColumnPinned('currencyPair')).to.equal(false); + expect(apiRef.current?.isColumnPinned('id')).to.equal(GridPinnedColumnPosition.LEFT); + expect(apiRef.current?.isColumnPinned('price16M')).to.equal(GridPinnedColumnPosition.RIGHT); + expect(apiRef.current?.isColumnPinned('currencyPair')).to.equal(false); }); }); @@ -450,7 +450,7 @@ describe(' - Column pinning', () => { render( , ); - const cellElement = apiRef.current.getCellElement(0, 'currencyPair'); + const cellElement = apiRef.current?.getCellElement(0, 'currencyPair'); expect(cellElement).not.to.equal(null); }); }); @@ -550,7 +550,7 @@ describe(' - Column pinning', () => { setProps({ pinnedColumns: { left: ['currencyPair'] } }); expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id']); await act(() => { - apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }]); + apiRef.current?.updateColumns([{ field: 'foo' }, { field: 'bar' }]); }); expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', 'foo', 'bar']); setProps({ pinnedColumns: { left: ['currencyPair', 'foo'] } }); @@ -564,7 +564,7 @@ describe(' - Column pinning', () => { , ); expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair']); - await act(() => apiRef.current.updateColumns([{ field: 'foo' }, { field: 'bar' }])); + await act(() => apiRef.current?.updateColumns([{ field: 'foo' }, { field: 'bar' }])); expect(getColumnHeadersTextContent()).to.deep.equal(['foo', 'id', 'Currency Pair', 'bar']); setProps({ pinnedColumns: {} }); expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', 'foo', 'bar']); @@ -591,7 +591,7 @@ describe(' - Column pinning', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'Currency Pair', '1M', '2M']); // price1M's index = 2 setProps({ pinnedColumns: { left: ['price1M'] } }); expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'id', 'Currency Pair', '2M']); - await act(() => apiRef.current.setColumnIndex('id', 2)); + await act(() => apiRef.current?.setColumnIndex('id', 2)); expect(getColumnHeadersTextContent()).to.deep.equal(['1M', 'Currency Pair', 'id', '2M']); setProps({ pinnedColumns: {} }); expect(getColumnHeadersTextContent()).to.deep.equal(['Currency Pair', 'id', '1M', '2M']); // price1M's index = 2 diff --git a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx index ff4ff4ef7d053..8d7820af7823e 100644 --- a/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnReorder.DataGridPro.test.tsx @@ -52,7 +52,7 @@ describe(' - Columns reorder', () => { }; it('resizing after columns reorder should respect the new columns order', async () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: { width: number }) { const { width } = props; @@ -67,14 +67,14 @@ describe(' - Columns reorder', () => { const { setProps } = render(); expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']); - await act(() => apiRef.current.setColumnIndex('id', 1)); + await act(() => apiRef.current?.setColumnIndex('id', 1)); setProps({ width: 200 }); await raf(); expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'id']); }); it('should not reset the column order when a prop change', async () => { - let apiRef: RefObject; + let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; @@ -90,23 +90,20 @@ describe(' - Columns reorder', () => { const { forceUpdate } = render(); expect(getColumnHeadersTextContent()).to.deep.equal(['brand', 'desc', 'type']); - await act(() => apiRef.current.setColumnIndex('brand', 2)); + await act(() => apiRef.current?.setColumnIndex('brand', 2)); expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']); forceUpdate(); // test stability expect(getColumnHeadersTextContent()).to.deep.equal(['desc', 'type', 'brand']); }); it('should allow to reorder columns by dropping outside the header row', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -128,16 +125,13 @@ describe(' - Columns reorder', () => { }); it('should cancel the reordering when dropping the column outside the grid', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -159,16 +153,13 @@ describe(' - Columns reorder', () => { }); it('should keep the order of the columns when dragStart is fired and disableColumnReorder=true', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -182,16 +173,13 @@ describe(' - Columns reorder', () => { }); it('should keep the order of the columns when dragEnd is fired and disableColumnReorder=true', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -206,14 +194,12 @@ describe(' - Columns reorder', () => { it('should call onColumnOrderChange after the column has been reordered', () => { const onColumnOrderChange = spy(); - let apiRef: RefObject; function Test() { - apiRef = useGridApiRef(); const data = useBasicDemoData(1, 3); return (
- +
); } @@ -240,7 +226,6 @@ describe(' - Columns reorder', () => { describe('column - disableReorder', () => { it('should not allow to start dragging a column with disableReorder=true', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand' }, @@ -249,11 +234,9 @@ describe(' - Columns reorder', () => { ]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -279,7 +262,6 @@ describe(' - Columns reorder', () => { }); it('should not allow to drag left of first visible column if it has disableReorder=true', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand', disableReorder: true }, @@ -288,11 +270,9 @@ describe(' - Columns reorder', () => { ]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -314,7 +294,6 @@ describe(' - Columns reorder', () => { }); it('should not allow to drag right of last visible column if it has disableReorder=true', () => { - let apiRef: RefObject; const rows = [{ id: 0, brand: 'Nike' }]; const columns = [ { field: 'brand' }, @@ -323,11 +302,9 @@ describe(' - Columns reorder', () => { ]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -386,9 +363,7 @@ describe(' - Columns reorder', () => { const handleDragEnter = spy(); const handleDragOver = spy(); const handleDragEnd = spy(); - let apiRef: RefObject; function Test() { - apiRef = useGridApiRef(); const data = useBasicDemoData(3, 3); return ( @@ -400,7 +375,7 @@ describe(' - Columns reorder', () => { onDragEnd={handleDragEnd} style={{ width: 300, height: 300 }} > - +
); } diff --git a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx index c43cf8d3f2cde..c14a71dbcd416 100644 --- a/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnSpanning.DataGridPro.test.tsx @@ -86,7 +86,7 @@ describe(' - Column spanning', () => { ]; it('should work after column reordering', () => { - let apiRef: RefObject; + let apiRef: RefObject; function Test() { apiRef = useGridApiRef(); @@ -100,7 +100,7 @@ describe(' - Column spanning', () => { render(); - act(() => apiRef!.current.setColumnIndex('price', 1)); + act(() => apiRef!.current?.setColumnIndex('price', 1)); fireUserEvent.mousePress(getCell(1, 1)); fireEvent.keyDown(getCell(1, 1), { key: 'ArrowRight' }); @@ -109,7 +109,7 @@ describe(' - Column spanning', () => { }); it('should recalculate cells after column reordering', () => { - let apiRef: RefObject; + let apiRef: RefObject; function Test() { apiRef = useGridApiRef(); @@ -133,7 +133,7 @@ describe(' - Column spanning', () => { render(); - act(() => apiRef!.current.setColumnIndex('brand', 1)); + act(() => apiRef.current?.setColumnIndex('brand', 1)); // Nike row expect(() => getCell(0, 0)).not.to.throw(); @@ -186,7 +186,7 @@ describe(' - Column spanning', () => { { field: 'rating' }, ]; - let apiRef: RefObject; + let apiRef: RefObject; function Test() { apiRef = useGridApiRef(); @@ -206,7 +206,7 @@ describe(' - Column spanning', () => { render(); act(() => - apiRef!.current.setRows([ + apiRef.current?.setRows([ { id: 0, brand: 'Adidas', diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx index 18ea338c05ea3..85c3836da08c2 100644 --- a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx @@ -20,7 +20,7 @@ import { describeSkipIf, testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Columns', () => { const { clock, render } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; const baselineProps = { autoHeight: isJSDOM, @@ -45,14 +45,14 @@ describe(' - Columns', () => { it('should open the column menu', async () => { render(); expect(screen.queryByRole('menu')).to.equal(null); - act(() => apiRef.current.showColumnMenu('brand')); + act(() => apiRef.current?.showColumnMenu('brand')); expect(screen.queryByRole('menu')).not.to.equal(null); }); it('should set the correct id and aria-labelledby', async () => { render(); expect(screen.queryByRole('menu')).to.equal(null); - act(() => apiRef.current.showColumnMenu('brand')); + act(() => apiRef.current?.showColumnMenu('brand')); clock.runToLast(); const menu = screen.getByRole('menu'); expect(menu.id).to.match(/:r[0-9a-z]+:/); @@ -64,10 +64,10 @@ describe(' - Columns', () => { it('should toggle the column menu', async () => { render(); expect(screen.queryByRole('menu')).to.equal(null); - act(() => apiRef.current.toggleColumnMenu('brand')); + act(() => apiRef.current?.toggleColumnMenu('brand')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - act(() => apiRef.current.toggleColumnMenu('brand')); + act(() => apiRef.current?.toggleColumnMenu('brand')); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); }); @@ -364,7 +364,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - act(() => apiRef.current.setColumnWidth('brand', 150)); + act(() => apiRef.current?.setColumnWidth('brand', 150)); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '148px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' }); @@ -404,7 +404,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - act(() => apiRef.current.setColumnWidth('brand', 150)); + act(() => apiRef.current?.setColumnWidth('brand', 150)); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '175px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' }); @@ -421,7 +421,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '98px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '200px' }); - act(() => apiRef.current.setColumnWidth('brand', 150)); + act(() => apiRef.current?.setColumnWidth('brand', 150)); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '125px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' }); @@ -484,7 +484,7 @@ describe(' - Columns', () => { expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '198px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '100px' }); - act(() => apiRef.current.setColumnWidth('brand', 150)); + act(() => apiRef.current?.setColumnWidth('brand', 150)); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '148px' }); expect(getColumnHeaderCell(1)).toHaveInlineStyle({ width: '150px' }); @@ -561,7 +561,7 @@ describe(' - Columns', () => { it('should work through the API', async () => { render(); - await apiRef.current.autosizeColumns(); + await apiRef.current?.autosizeColumns(); await microtasks(); expect(getWidths()).to.deep.equal([155, 177]); }); @@ -606,7 +606,7 @@ describe(' - Columns', () => { describe('options', () => { const autosize = async (options: GridAutosizeOptions | undefined, widths: number[]) => { render(); - await apiRef.current.autosizeColumns({ includeHeaders: false, ...options }); + await apiRef.current?.autosizeColumns({ includeHeaders: false, ...options }); await microtasks(); expect(getWidths()).to.deep.equal(widths); }; @@ -644,7 +644,11 @@ describe(' - Columns', () => { } render(); - act(() => apiRef.current.setColumnWidth('brand', 300)); + if (apiRef.current === null) { + throw new Error('apiRef is not defined'); + } + + act(() => apiRef.current?.setColumnWidth('brand', 300)); expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300); act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns')); expect(gridColumnLookupSelector(apiRef).brand.computedWidth).to.equal(300); @@ -665,7 +669,7 @@ describe(' - Columns', () => { ); expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(2); - act(() => apiRef.current.setColumnIndex('brand', 1)); + act(() => apiRef.current?.setColumnIndex('brand', 1)); expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1); act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns')); expect(gridColumnFieldsSelector(apiRef).indexOf('brand')).to.equal(1); @@ -679,7 +683,7 @@ describe(' - Columns', () => { } render(); - act(() => apiRef.current.updateColumns([{ field: 'id' }])); + act(() => apiRef.current?.updateColumns([{ field: 'id' }])); expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']); act(() => privateApi.current.requestPipeProcessorsApplication('hydrateColumns')); expect(gridColumnFieldsSelector(apiRef)).to.deep.equal(['__check__', 'brand', 'id']); diff --git a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx index 758c765fcbafd..f01961d16e023 100644 --- a/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/columnsVisibility.DataGridPro.test.tsx @@ -25,7 +25,7 @@ const columns: GridColDef[] = [{ field: 'id' }, { field: 'idBis' }]; describe(' - Columns visibility', () => { const { render } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; function TestDataGridPro( props: Omit & @@ -56,7 +56,7 @@ describe(' - Columns visibility', () => { />, ); - act(() => apiRef.current.updateColumns([{ field: 'id', width: 300 }])); + act(() => apiRef.current?.updateColumns([{ field: 'id', width: 300 }])); expect(onColumnVisibilityModelChange.callCount).to.equal(0); }); }); @@ -66,13 +66,13 @@ describe(' - Columns visibility', () => { render( , ); - act(() => apiRef.current.setColumnVisibility('id', false)); + act(() => apiRef.current?.setColumnVisibility('id', false)); expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({ id: false, idBis: false, }); - act(() => apiRef.current.setColumnVisibility('id', true)); + act(() => apiRef.current?.setColumnVisibility('id', true)); expect(gridColumnVisibilityModelSelector(apiRef)).to.deep.equal({ id: true, idBis: false, @@ -89,14 +89,14 @@ describe(' - Columns visibility', () => { />, ); - act(() => apiRef.current.setColumnVisibility('id', false)); + act(() => apiRef.current?.setColumnVisibility('id', false)); expect(onColumnVisibilityModelChange.callCount).to.equal(1); expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({ id: false, idBis: false, }); - act(() => apiRef.current.setColumnVisibility('id', true)); + act(() => apiRef.current?.setColumnVisibility('id', true)); expect(onColumnVisibilityModelChange.callCount).to.equal(2); expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({ idBis: false, @@ -115,7 +115,7 @@ describe(' - Columns visibility', () => { onColumnVisibilityModelChange={onColumnVisibilityModelChange} />, ); - act(() => apiRef.current.setColumnVisibilityModel({})); + act(() => apiRef.current?.setColumnVisibilityModel({})); expect(onColumnVisibilityModelChange.callCount).to.equal(1); expect(onColumnVisibilityModelChange.lastCall.firstArg).to.deep.equal({}); }); diff --git a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx index f8b213f7ad655..c04b31ea06b8a 100644 --- a/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx @@ -16,7 +16,7 @@ import { getCell, getRow } from 'test/utils/helperFn'; describe(' - Components', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -56,7 +56,7 @@ describe(' - Components', () => { const propHandler = spy(); const eventHandler = spy(); render(); - apiRef!.current.subscribeEvent(event, eventHandler); + apiRef.current?.subscribeEvent(event, eventHandler); expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); @@ -82,7 +82,7 @@ describe(' - Components', () => { const propHandler = spy(); const eventHandler = spy(); const { user } = render(); - apiRef!.current.subscribeEvent('cellKeyDown', eventHandler); + apiRef.current?.subscribeEvent('cellKeyDown', eventHandler); expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); @@ -105,7 +105,7 @@ describe(' - Components', () => { const propHandler = spy(); const eventHandler = spy(); render(); - apiRef!.current.subscribeEvent(event, eventHandler); + apiRef.current?.subscribeEvent(event, eventHandler); expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); diff --git a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx index c75bc54e22df6..b3746723d6f09 100644 --- a/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSource.DataGridPro.test.tsx @@ -29,7 +29,7 @@ const testCache: GridDataSourceCache = { describeSkipIf(isJSDOM)(' - Data source', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; @@ -143,7 +143,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { const cell1Content = cell1.innerText; act(() => { - apiRef.current.setPage(1); + apiRef.current?.setPage(1); }); await waitFor(() => { @@ -158,7 +158,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { expect(cell2Content).not.to.equal(cell1Content); act(() => { - apiRef.current.setPage(0); + apiRef.current?.setPage(0); }); expect(fetchRowsSpy.callCount).to.equal(2); @@ -195,7 +195,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { const cell1Content = cell1.innerText; act(() => { - apiRef.current.setPage(1); + apiRef.current?.setPage(1); }); await waitFor(() => { @@ -213,7 +213,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { expect(cell2Content).not.to.equal(cell1Content); act(() => { - apiRef.current.setPage(0); + apiRef.current?.setPage(0); }); const dataRow3 = await screen.findByText( @@ -245,7 +245,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { const cell1Content = cell1.innerText; act(() => { - apiRef.current.setPage(1); + apiRef.current?.setPage(1); }); await waitFor(() => { @@ -262,7 +262,7 @@ describeSkipIf(isJSDOM)(' - Data source', () => { expect(cell2Content).not.to.equal(cell1Content); act(() => { - apiRef.current.setPage(0); + apiRef.current?.setPage(0); }); await waitFor(() => { diff --git a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx index 965da7b739a6d..26fae9e21c748 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceLazyLoader.DataGridPro.test.tsx @@ -22,7 +22,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { const defaultTransformGetRowsResponse = (response: GridGetRowsResponse) => response; let transformGetRowsResponse: (response: GridGetRowsResponse) => GridGetRowsResponse; - let apiRef: RefObject; + let apiRef: RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; @@ -104,7 +104,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // reset the spy call count fetchRowsSpy.resetHistory(); - apiRef.current.scrollToIndexes({ rowIndex: 10 }); + apiRef.current?.scrollToIndexes({ rowIndex: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(1); @@ -119,7 +119,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { const initialSearchParams = new URL(fetchRowsSpy.lastCall.args[0]).searchParams; expect(initialSearchParams.get('end')).to.equal('9'); - apiRef.current.scrollToIndexes({ rowIndex: 10 }); + apiRef.current?.scrollToIndexes({ rowIndex: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); @@ -128,7 +128,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { const beforeSortSearchParams = new URL(fetchRowsSpy.lastCall.args[0]).searchParams; expect(beforeSortSearchParams.get('end')).to.not.equal('9'); - apiRef.current.sortColumn(mockServer.columns[0].field, 'asc'); + apiRef.current?.sortColumn(mockServer.columns[0].field, 'asc'); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(3); @@ -143,7 +143,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // wait until the rows are rendered await waitFor(() => expect(getRow(0)).not.to.be.undefined); - apiRef.current.scrollToIndexes({ rowIndex: 10 }); + apiRef.current?.scrollToIndexes({ rowIndex: 10 }); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); @@ -153,7 +153,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // first row is not the first page anymore expect(beforeFilteringSearchParams.get('start')).to.not.equal('0'); - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: mockServer.columns[0].field, @@ -197,8 +197,8 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { fetchRowsSpy.resetHistory(); // make one small and one big scroll that makes sure that the bottom of the grid window is reached - apiRef.current.scrollToIndexes({ rowIndex: 1 }); - apiRef.current.scrollToIndexes({ rowIndex: 9 }); + apiRef.current?.scrollToIndexes({ rowIndex: 1 }); + apiRef.current?.scrollToIndexes({ rowIndex: 9 }); // Only one additional fetch should have been made await waitFor(() => { @@ -211,7 +211,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // wait until the rows are rendered await waitFor(() => expect(getRow(0)).not.to.be.undefined); - apiRef.current.scrollToIndexes({ rowIndex: 9 }); + apiRef.current?.scrollToIndexes({ rowIndex: 9 }); // wait until the rows are rendered await waitFor(() => expect(getRow(10)).not.to.be.undefined); @@ -220,7 +220,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // last row is not the first page anymore expect(beforeSortingSearchParams.get('end')).to.not.equal('9'); - apiRef.current.sortColumn(mockServer.columns[0].field, 'asc'); + apiRef.current?.sortColumn(mockServer.columns[0].field, 'asc'); const afterSortingSearchParams = new URL(fetchRowsSpy.lastCall.args[0]).searchParams; // last row is the end of the first page @@ -232,7 +232,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // wait until the rows are rendered await waitFor(() => expect(getRow(0)).not.to.be.undefined); - apiRef.current.scrollToIndexes({ rowIndex: 9 }); + apiRef.current?.scrollToIndexes({ rowIndex: 9 }); // wait until the rows are rendered await waitFor(() => expect(getRow(10)).not.to.be.undefined); @@ -241,7 +241,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { // last row is not the first page anymore expect(beforeFilteringSearchParams.get('end')).to.not.equal('9'); - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: mockServer.columns[0].field, @@ -305,11 +305,11 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { fetchRowsSpy.resetHistory(); // reduce the rowCount to be more than the number of rows - apiRef.current.setRowCount(80); + apiRef.current?.setRowCount(80); expect(fetchRowsSpy.callCount).to.equal(0); // reduce the rowCount once more, but now to be less than the number of rows - apiRef.current.setRowCount(20); + apiRef.current?.setRowCount(20); await waitFor(() => expect(fetchRowsSpy.callCount).to.equal(1)); }); @@ -324,7 +324,7 @@ describeSkipIf(isJSDOM)(' - Data source lazy loader', () => { expect(() => getRow(10)).to.throw(); // set the rowCount via API - apiRef.current.setRowCount(100); + apiRef.current?.setRowCount(100); // wait until the rows are added await waitFor(() => expect(getRow(10)).not.to.be.undefined); diff --git a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx index 4b3075eebf586..556567465f326 100644 --- a/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/dataSourceTreeData.DataGridPro.test.tsx @@ -31,7 +31,7 @@ const serverOptions = { minDelay: 0, maxDelay: 0, verbose: false }; describeSkipIf(isJSDOM)(' - Data source tree data', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; let fetchRowsSpy: SinonSpy; let mockServer: ReturnType; @@ -126,9 +126,13 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { it('should fetch nested data when clicking on a dropdown', async () => { const { user } = render(); + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is not defined'); + } + expect(fetchRowsSpy.callCount).to.equal(1); await waitFor(() => { - expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(10 + 1); + expect(Object.keys(apiRef.current!.state.rows.tree).length).to.equal(10 + 1); }); const cell11 = getCell(0, 0); @@ -146,15 +150,20 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { it('should fetch nested data when calling API method `unstable_dataSource.fetchRows`', async () => { render(); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is not defined'); + } + expect(fetchRowsSpy.callCount).to.equal(1); await waitFor(() => { - expect(Object.keys(apiRef.current.state.rows.tree).length).to.equal(10 + 1); + expect(Object.keys(apiRef.current!.state.rows.tree).length).to.equal(10 + 1); }); const firstChildId = (apiRef.current.state.rows.tree[GRID_ROOT_GROUP_ID] as GridGroupNode) .children[0]; - apiRef.current.unstable_dataSource.fetchRows(firstChildId); + apiRef.current?.unstable_dataSource.fetchRows(firstChildId); await waitFor(() => { expect(fetchRowsSpy.callCount).to.equal(2); @@ -170,17 +179,21 @@ describeSkipIf(isJSDOM)(' - Data source tree data', () => { it('should lazily fetch nested data when using `defaultGroupingExpansionDepth`', async () => { render(); + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is not defined'); + } + expect(fetchRowsSpy.callCount).to.equal(1); await waitFor(() => { - expect(apiRef.current.state.rows.groupsToFetch?.length).to.be.greaterThan(0); + expect(apiRef.current!.state.rows.groupsToFetch?.length).to.be.greaterThan(0); }); // All the group nodes belonging to the grid root group should be there for fetching (apiRef.current.state.rows.tree[GRID_ROOT_GROUP_ID] as GridGroupNode).children.forEach( (child) => { - const node = apiRef.current.state.rows.tree[child]; - if (node.type === 'group') { - expect(apiRef.current.state.rows.groupsToFetch).to.include(child); + const node = apiRef.current?.state.rows.tree[child]; + if (node?.type === 'group') { + expect(apiRef.current?.state.rows.groupsToFetch).to.include(child); } }, ); diff --git a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx index 39d903233345a..d148b7092aa52 100644 --- a/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx @@ -27,7 +27,7 @@ import { testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Detail panel', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase({ nbRows = 20, ...other }: Partial & { nbRows?: number }) { apiRef = useGridApiRef(); @@ -619,9 +619,9 @@ describe(' - Detail panel', () => { it('should toggle the panel of the given row id', () => { render(
Detail
} />); expect(screen.queryByText('Detail')).to.equal(null); - act(() => apiRef.current.toggleDetailPanel(0)); + act(() => apiRef.current?.toggleDetailPanel(0)); expect(screen.queryByText('Detail')).not.to.equal(null); - act(() => apiRef.current.toggleDetailPanel(0)); + act(() => apiRef.current?.toggleDetailPanel(0)); expect(screen.queryByText('Detail')).to.equal(null); }); @@ -632,7 +632,7 @@ describe(' - Detail panel', () => { getDetailPanelContent={({ id }) => (id === 0 ?
Detail
: null)} />, ); - act(() => apiRef.current.toggleDetailPanel(1)); + act(() => apiRef.current?.toggleDetailPanel(1)); expect(document.querySelector('.MuiDataGrid-detailPanels')).to.equal(null); expect(getRow(1)).not.toHaveComputedStyle({ marginBottom: '50px' }); }); @@ -642,7 +642,7 @@ describe(' - Detail panel', () => { render(
Detail
} />); expect(screen.queryByText('Detail')).to.equal(null); // '0' !== 0 - act(() => apiRef.current.toggleDetailPanel('0')); + act(() => apiRef.current?.toggleDetailPanel('0')); expect(screen.queryByText('Detail')).to.equal(null); }); }); @@ -659,7 +659,7 @@ describe(' - Detail panel', () => { }} />, ); - act(() => expect(apiRef.current.getExpandedDetailPanels()).to.deep.equal(new Set([0, 1]))); + act(() => expect(apiRef.current?.getExpandedDetailPanels()).to.deep.equal(new Set([0, 1]))); }); }); @@ -678,7 +678,7 @@ describe(' - Detail panel', () => { expect(screen.queryByText('Row 0')).not.to.equal(null); expect(screen.queryByText('Row 1')).to.equal(null); expect(screen.queryByText('Row 2')).to.equal(null); - act(() => apiRef.current.setExpandedDetailPanels(new Set([1, 2]))); + act(() => apiRef.current?.setExpandedDetailPanels(new Set([1, 2]))); expect(screen.queryByText('Row 0')).to.equal(null); expect(screen.queryByText('Row 1')).not.to.equal(null); expect(screen.queryByText('Row 2')).not.to.equal(null); diff --git a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx index 45a0e02221031..0be5f09ce15e2 100644 --- a/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/editComponents.DataGridPro.test.tsx @@ -42,7 +42,7 @@ const generateDate = ( describe(' - Edit components', () => { const { render, clock } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const defaultData: Pick = { columns: [], rows: [] }; @@ -63,7 +63,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with debounce', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); fireEvent.doubleClick(cell); @@ -151,7 +151,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with debounce', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); fireEvent.doubleClick(cell); @@ -235,7 +235,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with the value converted to Date', async () => { const { user } = render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); await user.dblClick(cell); @@ -255,7 +255,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with null when entered an empty value', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); fireEvent.doubleClick(cell); @@ -274,7 +274,7 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; expect(input.value).to.equal('2022-02-18'); await act(async () => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'createdAt', value: new Date(2022, 1, 10), @@ -285,7 +285,7 @@ describe(' - Edit components', () => { it('should handle correctly dates with partial years', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue') as SinonSpy< + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue') as SinonSpy< [GridEditCellValueParams & { value: Date }] >; @@ -356,7 +356,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with the value converted to Date', async () => { const { user } = render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); await user.dblClick(cell); @@ -376,7 +376,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with null when entered an empty value', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); fireEvent.doubleClick(cell); @@ -395,7 +395,7 @@ describe(' - Edit components', () => { const input = cell.querySelector('input')!; expect(input.value).to.equal('2022-02-18T14:30'); await act(async () => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'createdAt', value: new Date(2022, 1, 10, 15, 10, 0), @@ -406,7 +406,7 @@ describe(' - Edit components', () => { it('should handle correctly dates with partial years', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue') as SinonSpy< + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue') as SinonSpy< [GridEditCellValueParams & { value: Date }] >; @@ -473,7 +473,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue with the correct value when valueOptions is an array of strings', async () => { const { user } = render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); await user.dblClick(cell); @@ -500,7 +500,7 @@ describe(' - Edit components', () => { }, ]; const { user } = render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); await user.dblClick(cell); @@ -523,7 +523,7 @@ describe(' - Edit components', () => { }, ]; const { user } = render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); await user.dblClick(cell); @@ -544,7 +544,7 @@ describe(' - Edit components', () => { expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Nike'); // We use .replace to remove ​ await act(async () => { - apiRef.current.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'brand', value: 'Adidas' }); }); expect(cell.textContent!.replace(/[\W]+/, '')).to.equal('Adidas'); }); @@ -618,7 +618,7 @@ describe(' - Edit components', () => { it('should call setEditCellValue', () => { render(); - const spiedSetEditCellValue = spyApi(apiRef.current, 'setEditCellValue'); + const spiedSetEditCellValue = spyApi(apiRef.current!, 'setEditCellValue'); const cell = getCell(0, 0); fireEvent.doubleClick(cell); diff --git a/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx index 225bebbd85c66..14a6c258a284c 100644 --- a/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx @@ -53,7 +53,7 @@ describe(' - Events params', () => { ], }; - let apiRef: RefObject; + let apiRef: RefObject; function TestEvents(props: Partial) { apiRef = useGridApiRef(); @@ -76,7 +76,7 @@ describe(' - Events params', () => { fireEvent.click(ageColumnElement); expect(eventArgs!.params).to.deep.include({ - colDef: apiRef.current.getColumn('age'), + colDef: apiRef.current?.getColumn('age'), field: 'age', }); }); @@ -97,7 +97,7 @@ describe(' - Events params', () => { expect(eventArgs!.params).to.deep.include({ id: 2, row: baselineProps.rows[1], - columns: apiRef.current.getAllColumns(), + columns: apiRef.current?.getAllColumns(), }); }); }); @@ -120,7 +120,7 @@ describe(' - Events params', () => { formattedValue: 'Jack', isEditable: true, row: baselineProps.rows[1], - colDef: apiRef.current.getColumn('first'), + colDef: apiRef.current?.getColumn('first'), hasFocus: false, tabIndex: -1, }); @@ -145,7 +145,7 @@ describe(' - Events params', () => { formattedValue: 'Jack', isEditable: true, row: baselineProps.rows[1], - colDef: apiRef.current.getColumn('first'), + colDef: apiRef.current?.getColumn('first'), hasFocus: false, tabIndex: -1, }); @@ -344,7 +344,7 @@ describe(' - Events params', () => { rowCount={50} />, ); - act(() => apiRef.current.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 })); + act(() => apiRef.current?.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 })); expect(handleFetchRows.callCount).to.equal(1); }, ); @@ -354,7 +354,7 @@ describe(' - Events params', () => { const { unmount } = render(); - act(() => apiRef.current.subscribeEvent('unmount', onUnmount)); + act(() => apiRef.current?.subscribeEvent('unmount', onUnmount)); unmount(); expect(onUnmount.calledOnce).to.equal(true); }); diff --git a/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx index 95ba8624c2acf..e1ec6b8ecfe23 100644 --- a/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/export.DataGridPro.test.tsx @@ -19,7 +19,7 @@ describe(' - Export', () => { autoHeight: isJSDOM, }; - let apiRef: RefObject; + let apiRef: RefObject; const columns: GridColDef[] = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; @@ -54,18 +54,18 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( ['id,Brand', '0,Nike', '1,Adidas', '2,Puma'].join('\r\n'), ); act(() => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: 1, brand: 'Adidas,Reebok', }, ]), ); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( ['id,Brand', '0,Nike', '1,"Adidas,Reebok"', '2,Puma'].join('\r\n'), ); }); @@ -95,7 +95,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( ['id,Brand', '0,Nike', '1,"Adidas,Puma"'].join('\r\n'), ); }); @@ -132,7 +132,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( ['id,Brand', '0,Jordan', '1,Adidas'].join('\r\n'), ); }); @@ -156,7 +156,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( ['id,Brand', '0,Nike', '1,"Samsung 24"" (inches)"'].join('\r\n'), ); }); @@ -194,7 +194,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( [ 'id,Brand', '0,"Nike \n Nike"', @@ -231,7 +231,7 @@ describe(' - Export', () => { render(); expect( - apiRef.current.getDataAsCsv({ + apiRef.current?.getDataAsCsv({ delimiter: ';', }), ).to.equal(['id;Brand', '0;Nike', '1;Adidas'].join('\r\n')); @@ -263,7 +263,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal(['id,Brand', '0,Nike'].join('\r\n')); + expect(apiRef.current?.getDataAsCsv()).to.equal(['id,Brand', '0,Nike'].join('\r\n')); }); it('should export the rows returned by params.getRowsToExport if defined', () => { @@ -291,7 +291,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv({ getRowsToExport: () => [0] })).to.equal( + expect(apiRef.current?.getDataAsCsv({ getRowsToExport: () => [0] })).to.equal( ['id,Brand', '0,Nike'].join('\r\n'), ); }); @@ -322,7 +322,7 @@ describe(' - Export', () => { } render(); - expect(apiRef.current.getDataAsCsv()).to.equal(['id', '0', '1'].join('\r\n')); + expect(apiRef.current?.getDataAsCsv()).to.equal(['id', '0', '1'].join('\r\n')); }); it('should export hidden column if params.allColumns = true', () => { @@ -352,7 +352,7 @@ describe(' - Export', () => { render(); expect( - apiRef.current.getDataAsCsv({ + apiRef.current?.getDataAsCsv({ allColumns: true, }), ).to.equal(['id,Brand', '0,Nike', '1,Adidas'].join('\r\n')); @@ -387,7 +387,7 @@ describe(' - Export', () => { render(); expect( - apiRef.current.getDataAsCsv({ + apiRef.current?.getDataAsCsv({ fields: ['brand'], }), ).to.equal(['Brand', 'Nike', 'Adidas'].join('\r\n')); @@ -420,7 +420,7 @@ describe(' - Export', () => { render(); expect( - apiRef.current.getDataAsCsv({ + apiRef.current?.getDataAsCsv({ fields: ['brand'], }), ).to.equal(['Brand', 'Nike', 'Adidas'].join('\r\n')); @@ -456,7 +456,7 @@ describe(' - Export', () => { render(); expect( - apiRef.current.getDataAsCsv({ + apiRef.current?.getDataAsCsv({ fields: ['id', 'brand'], }), ).to.equal(['id,Brand', '0,Nike', '1,Adidas'].join('\r\n')); @@ -481,7 +481,7 @@ describe(' - Export', () => { ); } render(); - expect(apiRef.current.getDataAsCsv()).to.equal(['id,isAdmin', '0,Yes', '1,No'].join('\r\n')); + expect(apiRef.current?.getDataAsCsv()).to.equal(['id,isAdmin', '0,Yes', '1,No'].join('\r\n')); }); it('should warn when a value of a field is an object and no `valueFormatter` is provided', () => { @@ -515,7 +515,7 @@ describe(' - Export', () => { render(); expect(() => { - apiRef.current.getDataAsCsv(); + apiRef.current?.getDataAsCsv(); }).toWarnDev( [ 'MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', @@ -557,7 +557,7 @@ describe(' - Export', () => { it('should include column groups by default', () => { render(); - expect(apiRef.current.getDataAsCsv()).to.equal( + expect(apiRef.current?.getDataAsCsv()).to.equal( [ 'Internal,Basic info,Basic info,Basic info', ',Full name,Full name,', @@ -569,7 +569,7 @@ describe(' - Export', () => { it('should not include column groups if disabled', () => { render(); - expect(apiRef.current.getDataAsCsv({ includeColumnGroupsHeaders: false })).to.equal( + expect(apiRef.current?.getDataAsCsv({ includeColumnGroupsHeaders: false })).to.equal( ['ID,First name,Last name,Age', '1,Jon,Snow,35'].join('\r\n'), ); }); diff --git a/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx index 2cb1bbd21fc22..ea880589aa0f0 100644 --- a/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/filterPanel.DataGridPro.test.tsx @@ -22,7 +22,7 @@ describe(' - Filter panel', () => { columns: [{ field: 'brand' }], }; - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -35,7 +35,7 @@ describe(' - Filter panel', () => { it('should add an id and `operator` to the filter item created when opening the filter panel', () => { render(); - act(() => apiRef.current.showFilterPanel('brand')); + act(() => apiRef.current?.showFilterPanel('brand')); const model = gridFilterModelSelector(apiRef); expect(model.items).to.have.length(1); expect(model.items[0].id).not.to.equal(null); diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx index 3c766d0753df2..6a45a97d1977b 100644 --- a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx @@ -31,7 +31,7 @@ const SUBMIT_FILTER_STROKE_TIME = DATA_GRID_PRO_PROPS_DEFAULT_VALUES.filterDebou describe(' - Filter', () => { const { clock, render } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; const baselineProps = { autoHeight: isJSDOM, @@ -83,7 +83,7 @@ describe(' - Filter', () => { render( row.brand} />); act(() => - apiRef.current.upsertFilterItems([ + apiRef.current?.upsertFilterItems([ { field: 'brand', value: 'i', @@ -106,7 +106,7 @@ describe(' - Filter', () => { render( row.brand} />); act(() => - apiRef.current.upsertFilterItems([ + apiRef.current?.upsertFilterItems([ { field: 'brand', value: 'i', @@ -123,7 +123,7 @@ describe(' - Filter', () => { ); expect(getColumnValues(0)).to.deep.equal(['Adidas']); act(() => - apiRef.current.upsertFilterItems([ + apiRef.current?.upsertFilterItems([ { field: 'brand', value: '', @@ -309,21 +309,21 @@ describe(' - Filter', () => { brand: 'Hugo', }, ]; - act(() => apiRef.current.setRows(newRows)); + act(() => apiRef.current?.setRows(newRows)); expect(getColumnValues(0)).to.deep.equal(['Asics']); }); it('should apply the filterModel prop correctly on GridApiRef update row data', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Patagonia' }])); expect(getColumnValues(0)).to.deep.equal(['Patagonia', 'Fila', 'Puma']); }); it('should allow apiRef to setFilterModel', () => { render(); act(() => - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: 'brand', @@ -375,7 +375,7 @@ describe(' - Filter', () => { }, ], }; - act(() => apiRef.current.setFilterModel(newModel)); + act(() => apiRef.current?.setFilterModel(newModel)); expect(getColumnValues(0)).to.deep.equal(['Adidas']); }); @@ -390,14 +390,14 @@ describe(' - Filter', () => { }} />, ); - expect(apiRef.current.state.filter.filterModel.items).to.have.length(0); + expect(apiRef.current?.state.filter.filterModel.items).to.have.length(0); const addButton = screen.getByRole('button', { name: /Add Filter/i }); const removeButton = screen.getByRole('button', { name: /Remove all/i }); fireEvent.click(addButton); fireEvent.click(addButton); - expect(apiRef.current.state.filter.filterModel.items).to.have.length(3); + expect(apiRef.current?.state.filter.filterModel.items).to.have.length(3); fireEvent.click(removeButton); - expect(apiRef.current.state.filter.filterModel.items).to.have.length(0); + expect(apiRef.current?.state.filter.filterModel.items).to.have.length(0); // clicking on `remove all` should close the panel when no filters fireEvent.click(removeButton); clock.tick(100); @@ -596,7 +596,7 @@ describe(' - Filter', () => { }} />, ); - apiRef.current.subscribeEvent('filterModelChange', listener); + apiRef.current?.subscribeEvent('filterModelChange', listener); expect(listener.callCount).to.equal(0); fireEvent.click(screen.getByRole('button', { name: 'Add filter' })); expect(listener.callCount).to.equal(1); @@ -617,7 +617,7 @@ describe(' - Filter', () => { render(); const checkAllCell = getColumnHeaderCell(0).querySelector('input')!; fireEvent.click(checkAllCell); - expect(apiRef.current.state.rowSelection).to.deep.equal([1]); + expect(apiRef.current?.state.rowSelection).to.deep.equal([1]); }); it('should allow to clear filters by passing an empty filter model', () => { @@ -720,9 +720,9 @@ describe(' - Filter', () => { grid('root')!.scrollIntoView(); const initialScrollPosition = window.scrollY; expect(initialScrollPosition).not.to.equal(0); - act(() => apiRef.current.hidePreferences()); + act(() => apiRef.current?.hidePreferences()); clock.tick(100); - act(() => apiRef.current.showPreferences(GridPreferencePanelsValue.filters)); + act(() => apiRef.current?.showPreferences(GridPreferencePanelsValue.filters)); expect(window.scrollY).to.equal(initialScrollPosition); }, ); @@ -847,7 +847,7 @@ describe(' - Filter', () => { ); const addButton = screen.getByRole('button', { name: /Add Filter/i }); fireEvent.click(addButton); - expect(apiRef.current.state.filter.filterModel.items).to.have.length(0); + expect(apiRef.current?.state.filter.filterModel.items).to.have.length(0); }); it('should update the filter state when the model is not set, but the onChange is set', () => { diff --git a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx index 537e902f54ea6..6c07e8866a6a6 100644 --- a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx @@ -79,7 +79,7 @@ describeSkipIf(isJSDOM)(' - Layout', () => { describe('columns width', () => { it('should resize flex: 1 column when changing column visibility to avoid exceeding grid width (apiRef setColumnVisibility method call)', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Omit) { apiRef = useGridApiRef(); @@ -130,7 +130,7 @@ describeSkipIf(isJSDOM)(' - Layout', () => { width: '198px', // because of the 2px border }); - act(() => apiRef!.current.setColumnVisibility('age', true)); + act(() => apiRef.current?.setColumnVisibility('age', true)); firstColumn = document.querySelector('[role="columnheader"][aria-colindex="1"]'); expect(firstColumn).toHaveInlineStyle({ width: '148px', // because of the 2px border diff --git a/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx index 82dc55eb81fbe..d0daf61cc05d4 100644 --- a/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx @@ -38,7 +38,7 @@ describe(' - Lazy loader', () => { columns: [{ field: 'id' }, { field: 'first' }], }; - let apiRef: RefObject; + let apiRef: RefObject; function TestLazyLoader(props: Partial) { apiRef = useGridApiRef(); @@ -95,15 +95,15 @@ describe(' - Lazy loader', () => { { id: 5, name: 'Mac' }, ]; - const initialAllRows = apiRef.current.getRowNode(GRID_ROOT_GROUP_ID)!.children; + const initialAllRows = apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID)!.children!; expect(initialAllRows.slice(3, 6)).to.deep.equal([ 'auto-generated-skeleton-row-root-0', 'auto-generated-skeleton-row-root-1', 'auto-generated-skeleton-row-root-2', ]); - act(() => apiRef.current.unstable_replaceRows(4, newRows)); + act(() => apiRef.current?.unstable_replaceRows(4, newRows)); - const updatedAllRows = apiRef.current.getRowNode(GRID_ROOT_GROUP_ID)!.children; + const updatedAllRows = apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID)!.children!; expect(updatedAllRows.slice(4, 6)).to.deep.equal([4, 5]); }); @@ -116,10 +116,10 @@ describe(' - Lazy loader', () => { { id: 5, first: 'Mac' }, ]; - act(() => apiRef.current.unstable_replaceRows(3, newRows)); + act(() => apiRef.current?.unstable_replaceRows(3, newRows)); expect(getColumnValues(1)).to.deep.equal(['Mike', 'Jack', 'Jim', 'John', 'Mac']); - act(() => apiRef.current.updateRows([{ id: 4, first: 'John updated' }])); + act(() => apiRef.current?.updateRows([{ id: 4, first: 'John updated' }])); expect(getColumnValues(1)).to.deep.equal(['Mike', 'Jack', 'Jim', 'John updated', 'Mac']); }); @@ -151,19 +151,19 @@ describe(' - Lazy loader', () => { { clientId: 5, name: 'Mac' }, ]; - const initialAllRows = apiRef.current.getRowNode(GRID_ROOT_GROUP_ID)!.children; + const initialAllRows = apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID)!.children!; expect(initialAllRows.slice(3, 6)).to.deep.equal([ 'auto-generated-skeleton-row-root-0', 'auto-generated-skeleton-row-root-1', 'auto-generated-skeleton-row-root-2', ]); - act(() => apiRef.current.unstable_replaceRows(4, newRows)); + act(() => apiRef.current?.unstable_replaceRows(4, newRows)); - const updatedAllRows = apiRef.current.getRowNode(GRID_ROOT_GROUP_ID)!.children; + const updatedAllRows = apiRef.current?.getRowNode(GRID_ROOT_GROUP_ID)!.children!; expect(updatedAllRows.slice(4, 6)).to.deep.equal([4, 5]); - expect(apiRef.current.getRowNode(4)).not.to.equal(null); - expect(apiRef.current.getRowNode(5)).not.to.equal(null); + expect(apiRef.current?.getRowNode(4)).not.to.equal(null); + expect(apiRef.current?.getRowNode(5)).not.to.equal(null); }); it('should update rows when `apiRef.current.updateRows` with data reversed', () => { @@ -184,7 +184,7 @@ describe(' - Lazy loader', () => { }, ]; - act(() => apiRef.current.unstable_replaceRows(0, newRows)); + act(() => apiRef.current?.unstable_replaceRows(0, newRows)); expect(getColumnValues(1)).to.deep.equal(['Jim', 'Jack', 'Mike']); }); }); diff --git a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx index 6f9446b49d89d..08ad7d021cecf 100644 --- a/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx @@ -12,7 +12,7 @@ describe(' - Pagination', () => { describe('setPage', () => { it('should apply valid value', () => { - let apiRef: RefObject; + let apiRef: RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); @@ -35,13 +35,13 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0']); act(() => { - apiRef.current.setPage(1); + apiRef.current?.setPage(1); }); expect(getColumnValues(0)).to.deep.equal(['1']); }); it('should apply last page if trying to go to a non-existing page', () => { - let apiRef: RefObject; + let apiRef: RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); apiRef = useGridApiRef(); @@ -63,7 +63,7 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0']); act(() => { - apiRef.current.setPage(50); + apiRef.current?.setPage(50); }); expect(getColumnValues(0)).to.deep.equal(['19']); }); @@ -71,7 +71,7 @@ describe(' - Pagination', () => { describe('setPageSize', () => { it('should apply value', () => { - let apiRef: RefObject; + let apiRef: RefObject; function GridTest() { const basicData = useBasicDemoData(20, 2); apiRef = useGridApiRef(); @@ -95,7 +95,7 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1', '2', '3', '4']); act(() => { - apiRef.current.setPageSize(2); + apiRef.current?.setPageSize(2); }); expect(getColumnValues(0)).to.deep.equal(['0', '1']); diff --git a/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx b/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx index ee3f1eb778db2..882444ad02bac 100644 --- a/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx +++ b/packages/x-data-grid-pro/src/tests/printExport.DataGrid.test.tsx @@ -17,7 +17,7 @@ describe(' - Print export', () => { const NB_ROWS = 2; const defaultData = getBasicGridData(NB_ROWS, 2); - let apiRef: RefObject; + let apiRef: RefObject; const baselineProps = { ...defaultData, @@ -101,7 +101,7 @@ describe(' - Print export', () => { expect(onColumnVisibilityModelChange.callCount).to.equal(0); await act(() => - apiRef.current.exportDataAsPrint({ + apiRef.current?.exportDataAsPrint({ fields: printVisible ? ['currencyPair', 'id'] : ['id'], }), ); @@ -130,7 +130,7 @@ describe(' - Print export', () => { expect(onColumnVisibilityModelChange.callCount).to.equal(0); - await act(() => apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true })); + await act(() => apiRef.current?.exportDataAsPrint({ fields: ['id'], allColumns: true })); expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({ currencyPair: false, @@ -150,7 +150,7 @@ describe(' - Print export', () => { expect(onColumnVisibilityModelChange.callCount).to.equal(0); - await act(() => apiRef.current.exportDataAsPrint({ fields: ['id'], allColumns: true })); + await act(() => apiRef.current?.exportDataAsPrint({ fields: ['id'], allColumns: true })); expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({ currencyPair: false, @@ -170,7 +170,7 @@ describe(' - Print export', () => { expect(onColumnVisibilityModelChange.callCount).to.equal(0); - await act(() => apiRef.current.exportDataAsPrint({ allColumns: true })); + await act(() => apiRef.current?.exportDataAsPrint({ allColumns: true })); expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({ currencyPair: true, @@ -191,7 +191,7 @@ describe(' - Print export', () => { expect(onColumnVisibilityModelChange.callCount).to.equal(0); - await act(() => apiRef.current.exportDataAsPrint({ allColumns: true })); + await act(() => apiRef.current?.exportDataAsPrint({ allColumns: true })); expect(onColumnVisibilityModelChange.firstCall.firstArg).to.deep.equal({ currencyPair: true, diff --git a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx index 1d7168f9154a2..0fbc5d8c13761 100644 --- a/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowEditing.DataGridPro.test.tsx @@ -21,7 +21,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Row editing', () => { const { render, clock } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const defaultData = getBasicGridData(4, 4); @@ -78,8 +78,8 @@ describe(' - Row editing', () => { describe('startRowEditMode', () => { it('should throw when the row is already in edit mode', () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); - expect(() => act(() => apiRef.current.startRowEditMode({ id: 0 }))).to.throw( + act(() => apiRef.current?.startRowEditMode({ id: 0 })); + expect(() => act(() => apiRef.current?.startRowEditMode({ id: 0 }))).to.throw( 'MUI X: The row with id=0 is not in view mode.', ); }); @@ -87,7 +87,7 @@ describe(' - Row editing', () => { it('should update the CSS class of all editable cells', () => { render(); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); expect(getCell(0, 2)).to.have.class('MuiDataGrid-cell--editing'); expect(getCell(0, 3)).not.to.have.class('MuiDataGrid-cell--editing'); @@ -96,7 +96,7 @@ describe(' - Row editing', () => { it('should update the CSS class of the row', () => { render(); expect(getRow(0)).not.to.have.class('MuiDataGrid-row--editing'); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(getRow(0)).to.have.class('MuiDataGrid-row--editing'); }); @@ -112,7 +112,7 @@ describe(' - Row editing', () => { ); expect(renderEditCell1.callCount).to.equal(0); expect(renderEditCell2.callCount).to.equal(0); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell1.callCount).not.to.equal(0); expect(renderEditCell2.callCount).not.to.equal(0); }); @@ -127,7 +127,7 @@ describe(' - Row editing', () => { column2Props={{ renderEditCell: renderEditCell2 }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP'); expect(renderEditCell1.lastCall.args[0].error).to.equal(false); expect(renderEditCell1.lastCall.args[0].isProcessingProps).to.equal(false); @@ -148,7 +148,7 @@ describe(' - Row editing', () => { ); act(() => - apiRef.current.startRowEditMode({ + apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair', deleteValue: true, @@ -171,10 +171,10 @@ describe(' - Row editing', () => { />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell1.lastCall.args[0].value).to.equal('USDGBP'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'usdgbp' }), ); expect(renderEditCell1.lastCall.args[0].value).to.equal('usdgbp'); }); @@ -193,12 +193,12 @@ describe(' - Row editing', () => { column2Props={{ renderEditCell: renderEditCell2 }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell1.lastCall.args[0].row).to.deep.equal(defaultData.rows[0]); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: ' usdgbp ' }), ); - await act(() => apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 100 })); + await act(() => apiRef.current?.setEditCellValue({ id: 0, field: 'price1M', value: 100 })); expect(renderEditCell2.lastCall.args[0].row).to.deep.equal({ ...defaultData.rows[0], currencyPair: 'usdgbp', @@ -211,10 +211,10 @@ describe(' - Row editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(valueParser.callCount).to.equal(0); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(valueParser.callCount).to.equal(1); expect(renderEditCell.lastCall.args[0].value).to.equal('usd gbp'); @@ -222,10 +222,10 @@ describe(' - Row editing', () => { it('should return true if no preProcessEditCellProps is defined', async () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect( await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ), ).to.equal(true); }); @@ -234,11 +234,11 @@ describe(' - Row editing', () => { const preProcessEditCellProps = () => new Promise(() => {}); const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act( () => new Promise((resolve) => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); resolve(); }), ); @@ -254,9 +254,9 @@ describe(' - Row editing', () => { column2Props={{ preProcessEditCellProps: preProcessEditCellProps2 }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); const args1 = preProcessEditCellProps1.lastCall.args[0]; @@ -288,10 +288,10 @@ describe(' - Row editing', () => { foo: 'bar', }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell.lastCall.args[0].foo).to.equal(undefined); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(renderEditCell.lastCall.args[0].foo).to.equal('bar'); }); @@ -303,10 +303,10 @@ describe(' - Row editing', () => { value: 'foobar', }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP'); }); @@ -338,12 +338,12 @@ describe(' - Row editing', () => { }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); let promise: Promise; await act( () => new Promise((resolve) => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -366,10 +366,10 @@ describe(' - Row editing', () => { error: true, }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect( await act(() => - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -385,11 +385,11 @@ describe(' - Row editing', () => { resolveCallback = () => resolve(props); }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); let promise: Promise; act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -397,7 +397,7 @@ describe(' - Row editing', () => { }); act(() => - apiRef.current.stopRowEditMode({ + apiRef.current?.stopRowEditMode({ id: 0, ignoreModifications: true, }), @@ -415,11 +415,11 @@ describe(' - Row editing', () => { const renderEditCell = spy(defaultRenderEditCell); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(renderEditCell.lastCall.args[0].value).to.equal('USDGBP'); renderEditCell.resetHistory(); act(() => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD', @@ -428,7 +428,7 @@ describe(' - Row editing', () => { }); expect(renderEditCell.callCount).to.equal(0); act(() => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -446,28 +446,28 @@ describe(' - Row editing', () => { describe('stopRowEditMode', () => { it('should reject when the cell is not in edit mode', async () => { render(); - expect(() => apiRef.current.stopRowEditMode({ id: 0 })).to.throw( + expect(() => apiRef.current?.stopRowEditMode({ id: 0 })).to.throw( 'MUI X: The row with id=0 is not in edit mode.', ); }); it('should update the row with the new value stored', async () => { render(); - await act(async () => apiRef.current.startRowEditMode({ id: 0 })); + await act(async () => apiRef.current?.startRowEditMode({ id: 0 })); await act(async () => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - await act(async () => apiRef.current.stopRowEditMode({ id: 0 })); + await act(async () => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1).textContent).to.equal('USD GBP'); }); it('should not update the row if ignoreModifications=true', async () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0, ignoreModifications: true })); + act(() => apiRef.current?.stopRowEditMode({ id: 0, ignoreModifications: true })); expect(getCell(0, 1).textContent).to.equal('USDGBP'); }); @@ -479,11 +479,11 @@ describe(' - Row editing', () => { }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); let promise: Promise; act(() => { - promise = apiRef.current.setEditCellValue({ + promise = apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', @@ -491,7 +491,7 @@ describe(' - Row editing', () => { }); // Simulates the user stopping the editing while processing the props - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); @@ -506,11 +506,11 @@ describe(' - Row editing', () => { error: true, }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); }); @@ -526,11 +526,11 @@ describe(' - Row editing', () => { column1Props={{ preProcessEditCellProps }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(onRowModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { mode: 'edit' } }); }); @@ -540,40 +540,40 @@ describe(' - Row editing', () => { error: props.value.length === 0, }); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: '' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); }); it('should update the CSS class of the cell', async () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(getCell(0, 1)).not.to.have.class('MuiDataGrid-cell--editing'); }); it('should call processRowUpdate before updating the row', async () => { const processRowUpdate = spy((row) => ({ ...row, currencyPair: 'USD-GBP' })); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); await act(() => Promise.resolve()); expect(processRowUpdate.callCount).to.equal(1); expect(getCell(0, 1).textContent).to.equal('USD-GBP'); @@ -582,11 +582,11 @@ describe(' - Row editing', () => { it('should call processRowUpdate with the new and old row', async () => { const processRowUpdate = spy((newRow, oldRow) => ({ ...oldRow, ...newRow })); render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); await act(() => Promise.resolve()); expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ ...defaultData.rows[0], @@ -600,8 +600,8 @@ describe(' - Row editing', () => { throw new Error('Something went wrong'); }; render(); - act(() => apiRef.current.startRowEditMode({ id: 0 })); - expect(() => act(() => apiRef.current.stopRowEditMode({ id: 0 }))).toErrorDev( + act(() => apiRef.current?.startRowEditMode({ id: 0 })); + expect(() => act(() => apiRef.current?.stopRowEditMode({ id: 0 }))).toErrorDev( 'MUI X: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', ); expect(getCell(0, 1)).to.have.class('MuiDataGrid-cell--editing'); @@ -619,8 +619,8 @@ describe(' - Row editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error); }); @@ -636,8 +636,8 @@ describe(' - Row editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); await Promise.resolve(); expect(onProcessRowUpdateError.lastCall.args[0]).to.equal(error); }); @@ -656,11 +656,11 @@ describe(' - Row editing', () => { onProcessRowUpdateError={onProcessRowUpdateError} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(onRowModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { mode: 'edit' } }); }); @@ -681,11 +681,11 @@ describe(' - Row editing', () => { column2Props={{ valueSetter: valueSetter2 }} />, ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); await act(() => Promise.resolve()); expect(processRowUpdate.lastCall.args[0]).to.deep.equal({ ...defaultData.rows[0], @@ -708,10 +708,10 @@ describe(' - Row editing', () => { it('should move focus to the cell below when cellToFocusAfter=below', () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); expect(getCell(0, 1).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopRowEditMode({ + apiRef.current?.stopRowEditMode({ id: 0, field: 'currencyPair', cellToFocusAfter: 'below', @@ -722,10 +722,10 @@ describe(' - Row editing', () => { it('should move focus to the cell below when cellToFocusAfter=right', () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); expect(getCell(0, 1).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopRowEditMode({ + apiRef.current?.stopRowEditMode({ id: 0, field: 'currencyPair', cellToFocusAfter: 'right', @@ -736,10 +736,10 @@ describe(' - Row editing', () => { it('should move focus to the cell below when cellToFocusAfter=left', () => { render(); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'price1M' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'price1M' })); expect(getCell(0, 2).querySelector('input')).toHaveFocus(); act(() => - apiRef.current.stopRowEditMode({ id: 0, field: 'price1M', cellToFocusAfter: 'left' }), + apiRef.current?.stopRowEditMode({ id: 0, field: 'price1M', cellToFocusAfter: 'left' }), ); expect(getCell(0, 1)).toHaveFocus(); }); @@ -758,16 +758,16 @@ describe(' - Row editing', () => { />, ); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'price1M' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'price1M' })); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); - act(() => apiRef.current.stopRowEditMode({ id: 0, field: 'price1M' })); + act(() => apiRef.current?.stopRowEditMode({ id: 0, field: 'price1M' })); expect(onRowModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { mode: 'view', field: 'price1M' }, }); - act(() => apiRef.current.startRowEditMode({ id: 1, fieldToFocus: 'price1M' })); + act(() => apiRef.current?.startRowEditMode({ id: 1, fieldToFocus: 'price1M' })); expect(onRowModesModelChange.lastCall.args[0]).to.have.keys('0', '1'); expect(onRowModesModelChange.lastCall.args[0][1]).to.deep.equal({ mode: 'edit', @@ -791,16 +791,16 @@ describe(' - Row editing', () => { render( , ); - act(() => apiRef.current.startRowEditMode({ id: 0 })); + act(() => apiRef.current?.startRowEditMode({ id: 0 })); await act(async () => { - apiRef.current.setEditCellValue({ + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP', debounceMs: 100, }); }); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); await act(() => Promise.resolve()); expect(renderEditCell.lastCall.args[0].value).to.equal('USD GBP'); expect(processRowUpdate.lastCall.args[0].currencyPair).to.equal('USD GBP'); @@ -814,7 +814,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStart' with reason=cellDoubleClick`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.lastCall.args[0].reason).to.equal('cellDoubleClick'); @@ -823,7 +823,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); @@ -831,7 +831,7 @@ describe(' - Row editing', () => { it('should call startRowEditMode', () => { render(); - const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); + const spiedStartRowEditMode = spyApi(apiRef.current!, 'startRowEditMode'); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(spiedStartRowEditMode.callCount).to.equal(1); @@ -842,7 +842,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStart' with reason=enterKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -852,7 +852,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -861,7 +861,7 @@ describe(' - Row editing', () => { it('should call startRowEditMode passing fieldToFocus', () => { render(); - const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); + const spiedStartRowEditMode = spyApi(apiRef.current!, 'startRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -877,7 +877,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStart' with reason=deleteKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -887,7 +887,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -896,7 +896,7 @@ describe(' - Row editing', () => { it('should call startRowEditMode passing fieldToFocus and deleteValue', () => { render(); - const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); + const spiedStartRowEditMode = spyApi(apiRef.current!, 'startRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); @@ -932,7 +932,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStart' with reason=printableKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); @@ -942,7 +942,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowEditStart' if the cell is not editable`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); @@ -953,7 +953,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowEditStart' if ${key} is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', keyCode: 65, [key]: true }); @@ -964,7 +964,7 @@ describe(' - Row editing', () => { it(`should call startRowEditMode if shiftKey is pressed with a letter`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', keyCode: 65, shiftKey: true }); @@ -974,7 +974,7 @@ describe(' - Row editing', () => { it('should not call startRowEditMode if space is pressed', () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: ' ' }); @@ -984,7 +984,7 @@ describe(' - Row editing', () => { it(`should call startRowEditMode if ctrl+V is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStart', listener); + apiRef.current?.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', keyCode: 86, ctrlKey: true }); @@ -993,7 +993,7 @@ describe(' - Row editing', () => { it('should call startRowEditMode passing fieldToFocus and deleteValue', () => { render(); - const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); + const spiedStartRowEditMode = spyApi(apiRef.current!, 'startRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); @@ -1008,7 +1008,7 @@ describe(' - Row editing', () => { it(`should ignore keydown event until the IME is confirmed with a letter`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); const input = cell.querySelector('input')!; @@ -1024,7 +1024,7 @@ describe(' - Row editing', () => { it(`should ignore keydown event until the IME is confirmed with multiple letters`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); const input = cell.querySelector('input')!; @@ -1046,7 +1046,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStop' with reason=rowFocusOut`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); fireEvent.doubleClick(getCell(0, 1)); expect(listener.callCount).to.equal(0); fireUserEvent.mousePress(getCell(1, 1)); @@ -1061,11 +1061,11 @@ describe(' - Row editing', () => { }); render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(listener.callCount).to.equal(0); @@ -1076,7 +1076,7 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false and no cellToFocusAfter', () => { render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); fireEvent.doubleClick(getCell(0, 1)); fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); @@ -1092,10 +1092,10 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); fireEvent.doubleClick(getCell(0, 1)); act(() => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); }); fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); @@ -1108,7 +1108,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStop' with reason=escapeKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1124,11 +1124,11 @@ describe(' - Row editing', () => { }); render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(listener.callCount).to.equal(0); @@ -1138,7 +1138,7 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=true', () => { render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1157,7 +1157,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStop' with reason=enterKeyDown`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1173,11 +1173,11 @@ describe(' - Row editing', () => { }); render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireEvent.doubleClick(cell); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); expect(listener.callCount).to.equal(0); @@ -1187,7 +1187,7 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=below', () => { render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1204,12 +1204,12 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); act(() => { - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); }); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1221,7 +1221,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStop' with reason=tabKeyDown if on the last column`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 2); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1233,7 +1233,7 @@ describe(' - Row editing', () => { it(`should publish 'rowEditStop' with reason=shiftTabKeyDown if on the first column and Shift is pressed`, () => { render(); const listener = spy(); - apiRef.current.subscribeEvent('rowEditStop', listener); + apiRef.current?.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1244,7 +1244,7 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=right', async () => { const { user } = render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 2); await user.click(cell); await user.dblClick(cell); @@ -1260,7 +1260,7 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false and cellToFocusAfter=left if Shift is pressed', () => { render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 1); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); @@ -1277,12 +1277,12 @@ describe(' - Row editing', () => { it('should call stopRowEditMode with ignoreModifications=false if the props are being processed', async () => { const preProcessEditCellProps = () => new Promise(() => {}); render(); - const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); + const spiedStopRowEditMode = spyApi(apiRef.current!, 'stopRowEditMode'); const cell = getCell(0, 2); fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act(async () => { - apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' }); + apiRef.current?.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' }); }); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1357,7 +1357,7 @@ describe(' - Row editing', () => { , ); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); setProps({ rowModesModel: { 0: { mode: GridRowModes.View, ignoreModifications: true } } }); expect(getCell(0, 1).textContent).to.equal('USDGBP'); @@ -1368,7 +1368,7 @@ describe(' - Row editing', () => { , ); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); setProps({ rowModesModel: { @@ -1382,7 +1382,7 @@ describe(' - Row editing', () => { it(`should publish 'rowModesModelChange' when the model changes`, () => { render(); const listener = spy(); - act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener)); + act(() => apiRef.current?.subscribeEvent('rowModesModelChange', listener)); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.lastCall.args[0]).to.deep.equal({ @@ -1394,7 +1394,7 @@ describe(' - Row editing', () => { const { setProps } = render(); const listener = spy(); expect(listener.callCount).to.equal(0); - act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener)); + act(() => apiRef.current?.subscribeEvent('rowModesModelChange', listener)); setProps({ rowModesModel: { 0: { currencyPair: { mode: 'edit' } } } }); expect(listener.lastCall.args[0]).to.deep.equal({ 0: { currencyPair: { mode: 'edit' } }, @@ -1404,7 +1404,7 @@ describe(' - Row editing', () => { it(`should not publish 'rowModesModelChange' when the model changes and rowModesModel is set`, () => { render(); const listener = spy(); - act(() => apiRef.current.subscribeEvent('rowModesModelChange', listener)); + act(() => apiRef.current?.subscribeEvent('rowModesModelChange', listener)); const cell = getCell(0, 1); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); @@ -1422,7 +1422,7 @@ describe(' - Row editing', () => { fireEvent.doubleClick(cell); await act(() => - apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), + apiRef.current?.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }), ); const rowModesModel = { 0: { mode: 'view' } }; @@ -1436,7 +1436,7 @@ describe(' - Row editing', () => { const onRowModesModelChange = spy(); render(); expect(onRowModesModelChange.callCount).to.equal(0); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); expect(onRowModesModelChange.callCount).to.equal(1); expect(onRowModesModelChange.lastCall.args[0]).to.deep.equal({ 0: { mode: 'edit', fieldToFocus: 'currencyPair' }, @@ -1446,9 +1446,9 @@ describe(' - Row editing', () => { it('should call with mode=view when stopEditMode is called', () => { const onRowModesModelChange = spy(); render(); - act(() => apiRef.current.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); + act(() => apiRef.current?.startRowEditMode({ id: 0, fieldToFocus: 'currencyPair' })); onRowModesModelChange.resetHistory(); - act(() => apiRef.current.stopRowEditMode({ id: 0 })); + act(() => apiRef.current?.stopRowEditMode({ id: 0 })); expect(onRowModesModelChange.args[0][0]).to.deep.equal({ 0: { mode: 'view' }, }); diff --git a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx index 6344c9b898a82..01edc569998e0 100644 --- a/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowPinning.DataGridPro.test.tsx @@ -179,7 +179,7 @@ describe(' - Row pinning', () => { it('should update pinned rows when calling `apiRef.current.setPinnedRows` method', async () => { const data = getBasicGridData(20, 5); - let apiRef!: RefObject; + let apiRef!: RefObject; function TestCase(props: any) { const [pinnedRow0, pinnedRow1, ...rows] = data.rows; @@ -210,8 +210,8 @@ describe(' - Row pinning', () => { let rows = data.rows.filter((row) => row.id !== 11 && row.id !== 3); // should work when calling `setPinnedRows` before `setRows` - await act(() => apiRef.current.unstable_setPinnedRows(pinnedRows)); - await act(() => apiRef.current.setRows(rows)); + await act(() => apiRef.current?.unstable_setPinnedRows(pinnedRows)); + await act(() => apiRef.current?.setRows(rows)); expect(isRowPinned(getRowById(0), 'top')).to.equal(false, '#0 pinned top'); expect(isRowPinned(getRowById(1), 'bottom')).to.equal(false, '#1 pinned bottom'); @@ -223,8 +223,8 @@ describe(' - Row pinning', () => { rows = data.rows.filter((row) => row.id !== 8 && row.id !== 5); // should work when calling `setPinnedRows` after `setRows` - await act(() => apiRef.current.setRows(rows)); - await act(() => apiRef.current.unstable_setPinnedRows(pinnedRows)); + await act(() => apiRef.current?.setRows(rows)); + await act(() => apiRef.current?.unstable_setPinnedRows(pinnedRows)); expect(isRowPinned(getRowById(11), 'top')).to.equal(false, '#11 pinned top'); expect(isRowPinned(getRowById(3), 'bottom')).to.equal(false, '#3 pinned bottom'); @@ -480,12 +480,9 @@ describe(' - Row pinning', () => { // Needs layouting testSkipIf(isJSDOM)('should work with variable row height', () => { - let apiRef!: RefObject; function TestCase() { - apiRef = useGridApiRef(); return ( { @@ -511,16 +508,9 @@ describe(' - Row pinning', () => { testSkipIf(isJSDOM)('should always update on `rowHeight` change', async () => { const defaultRowHeight = 52; - let apiRef!: RefObject; function TestCase({ rowHeight }: { rowHeight?: number }) { - apiRef = useGridApiRef(); return ( - + ); } @@ -680,7 +670,7 @@ describe(' - Row pinning', () => { }); it('should not be selectable', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -690,7 +680,7 @@ describe(' - Row pinning', () => { render(); fireEvent.click(getCell(0, 0)); - expect(apiRef!.current.isRowSelected(0)).to.equal(false); + expect(apiRef!.current?.isRowSelected(0)).to.equal(false); }); it('should not render selection checkbox for pinned rows', () => { @@ -701,7 +691,7 @@ describe(' - Row pinning', () => { }); it('should export pinned rows to CSV', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -710,9 +700,10 @@ describe(' - Row pinning', () => { render(); - const csv = apiRef!.current.getDataAsCsv({ - includeHeaders: false, - }); + const csv = + apiRef!.current?.getDataAsCsv({ + includeHeaders: false, + }) || ''; const csvRows = csv.split('\r\n'); expect(csvRows[0]).to.equal('0'); @@ -813,7 +804,7 @@ describe(' - Row pinning', () => { it('should support `updateRows`', async () => { const columns: GridColDef[] = [{ field: 'id' }, { field: 'name', editable: true }]; - let apiRef!: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); return ( @@ -840,7 +831,7 @@ describe(' - Row pinning', () => { expect(getCell(4, 1).textContent).to.equal('Cory'); await act(async () => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: 3, name: 'Marcus' }, { id: 4, name: 'Tom' }, ]), diff --git a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx index 4fc0693ea9bb2..cbacad9ca224c 100644 --- a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { RefObject } from '@mui/x-internals/types'; import { createRenderer, fireEvent, screen, createEvent } from '@mui/internal-test-utils'; import { getCell, getColumnValues, getRowsFieldContent } from 'test/utils/helperFn'; -import { useGridApiRef, DataGridPro, gridClasses, GridApi } from '@mui/x-data-grid-pro'; +import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; function createDragOverEvent(target: ChildNode) { @@ -30,7 +29,6 @@ describe(' - Row reorder', () => { const { render } = createRenderer(); it('should cancel the reordering when dropping the row outside the grid', () => { - let apiRef: RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -39,11 +37,9 @@ describe(' - Row reorder', () => { const columns = [{ field: 'brand' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -66,7 +62,6 @@ describe(' - Row reorder', () => { }); it('should keep the order of the rows when dragStart is fired and rowReordering=false', () => { - let apiRef: RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -75,11 +70,9 @@ describe(' - Row reorder', () => { const columns = [{ field: 'brand' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -92,7 +85,6 @@ describe(' - Row reorder', () => { }); it('should keep the order of the rows when dragEnd is fired and rowReordering=false', () => { - let apiRef: RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -101,11 +93,9 @@ describe(' - Row reorder', () => { const columns = [{ field: 'brand' }]; function Test() { - apiRef = useGridApiRef(); - return (
- +
); } @@ -120,9 +110,7 @@ describe(' - Row reorder', () => { it('should call onRowOrderChange after the row stops being dragged', () => { const handleOnRowOrderChange = spy(); - let apiRef: RefObject; function Test() { - apiRef = useGridApiRef(); const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -133,7 +121,6 @@ describe(' - Row reorder', () => { return (
- Row reorder', () => { const handleDragEnter = spy(); const handleDragOver = spy(); const handleDragEnd = spy(); - let apiRef: RefObject; function Test() { - apiRef = useGridApiRef(); const data = useBasicDemoData(3, 3); return ( @@ -180,7 +165,7 @@ describe(' - Row reorder', () => { onDragEnd={handleDragEnd} style={{ width: 300, height: 300 }} > - +
); } @@ -203,7 +188,6 @@ describe(' - Row reorder', () => { }); it('should reorder rows correctly on any page when pagination is enabled', () => { - let apiRef: RefObject; const rows = [ { id: 0, brand: 'Nike' }, { id: 1, brand: 'Adidas' }, @@ -213,12 +197,9 @@ describe(' - Row reorder', () => { const columns = [{ field: 'brand' }]; function Test() { - apiRef = useGridApiRef(); - return (
- Row selection', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; function TestDataGridSelection({ rowLength = 4, @@ -179,10 +179,10 @@ describe(' - Row selection', () => { }), ); - expect(apiRef.current.getSelectedRows()).to.have.length(15); + expect(apiRef.current?.getSelectedRows()).to.have.length(15); await act(() => { - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: 'jobTitle', @@ -193,7 +193,7 @@ describe(' - Row selection', () => { }); }); - expect(apiRef.current.getSelectedRows()).to.have.keys([1]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1]); }); // Context: https://github.com/mui/mui-x/issues/15045 @@ -233,17 +233,17 @@ describe(' - Row selection', () => { })[1], ); - expect(apiRef.current.getSelectedRows()).to.have.length(1); - expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); + expect(apiRef.current?.getSelectedRows()).to.have.length(1); + expect(Array.from(apiRef.current!.getSelectedRows())[0][0]).to.equal(1); await act(() => { - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [{ field: 'jobTitle', value: 'Head of Human Resources', operator: 'contains' }], }); }); - expect(apiRef.current.getSelectedRows()).to.have.length(1); - expect(Array.from(apiRef.current.getSelectedRows())[0][0]).to.equal(1); + expect(apiRef.current?.getSelectedRows()).to.have.length(1); + expect(Array.from(apiRef.current!.getSelectedRows())[0][0]).to.equal(1); }); // Context: https://github.com/mui/mui-x/issues/15068 @@ -297,7 +297,7 @@ describe(' - Row selection', () => { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.length(4); + expect(apiRef.current?.getSelectedRows()).to.have.length(4); expect(selectAllCheckbox.checked).to.equal(true); }); @@ -311,13 +311,13 @@ describe(' - Row selection', () => { />, ); await user.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0]); await user.click(screen.getByRole('button', { name: /next page/i })); const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.length(4); + expect(apiRef.current?.getSelectedRows()).to.have.length(4); expect(selectAllCheckbox.checked).to.equal(true); }); @@ -336,7 +336,7 @@ describe(' - Row selection', () => { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.length(rowLength); + expect(apiRef.current?.getSelectedRows()).to.have.length(rowLength); expect(selectAllCheckbox.checked).to.equal(true); }); @@ -399,13 +399,13 @@ describe(' - Row selection', () => { ); await user.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0]); await user.click(screen.getByRole('button', { name: /next page/i })); const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2, 3]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 2, 3]); expect(selectAllCheckbox.checked).to.equal(true); }); @@ -421,15 +421,15 @@ describe(' - Row selection', () => { ); await user.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0]); await user.click(screen.getByRole('button', { name: /next page/i })); await user.click(getCell(2, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 2]); const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 2, 3]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 2, 3]); expect(selectAllCheckbox.checked).to.equal(true); }); @@ -490,7 +490,7 @@ describe(' - Row selection', () => { }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.length(2); + expect(apiRef.current?.getSelectedRows()).to.have.length(2); }); // https://github.com/mui/mui-x/issues/14074 @@ -520,13 +520,13 @@ describe(' - Row selection', () => { ); await user.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0]); await user.click(screen.getByRole('button', { name: /next page/i })); const selectAllCheckbox: HTMLInputElement = screen.getByRole('checkbox', { name: /select all rows/i, }); await user.click(selectAllCheckbox); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 3, 4]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 3, 4]); expect(selectAllCheckbox.checked).to.equal(true); }); }); @@ -554,7 +554,7 @@ describe(' - Row selection', () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1]); }); it('should deselect the parent only when deselecting it', async () => { @@ -564,9 +564,9 @@ describe(' - Row selection', () => { await user.click(getCell(1, 0).querySelector('input')!); await user.click(getCell(2, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2]); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2]); }); it('should not auto select the parent if all the children are selected', async () => { @@ -581,7 +581,7 @@ describe(' - Row selection', () => { await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should not be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); }); it('should not deselect selected parent if one of the children is deselected', async () => { @@ -596,26 +596,26 @@ describe(' - Row selection', () => { await user.click(getCell(5, 0).querySelector('input')!); await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); await user.click(getCell(2, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should still be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); }); it('should select only the unwrapped rows when clicking "Select All" checkbox', async () => { const { user } = render(); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 1, 8]); }); it('should deselect only the unwrapped rows when clicking "Select All" checkbox', async () => { const { user } = render(); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 8]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 1, 8]); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); }); @@ -630,16 +630,16 @@ describe(' - Row selection', () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); }); it('should deselect all the children when deselecting a parent', async () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); it('should not auto select the parent if all the children are selected', async () => { @@ -654,7 +654,7 @@ describe(' - Row selection', () => { await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should not be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); }); it('should not deselect selected parent if one of the children is deselected', async () => { @@ -663,26 +663,26 @@ describe(' - Row selection', () => { ); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); await user.click(getCell(2, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should still be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); }); it('should select all the nested rows when clicking "Select All" checkbox', async () => { const { user } = render(); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows().size).to.equal(15); + expect(apiRef.current?.getSelectedRows().size).to.equal(15); }); it('should deselect all the nested rows when clicking "Select All" checkbox', async () => { const { user } = render(); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows().size).to.equal(15); + expect(apiRef.current?.getSelectedRows().size).to.equal(15); await user.click(screen.getByRole('checkbox', { name: /select all rows/i })); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); describe('prop: isRowSelectable', () => { @@ -696,7 +696,7 @@ describe(' - Row selection', () => { ); fireEvent.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); it('should not auto-select a descendant if not allowed', async () => { @@ -709,7 +709,7 @@ describe(' - Row selection', () => { ); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 3, 4, 5, 6, 7]); }); }); }); @@ -738,7 +738,7 @@ describe(' - Row selection', () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1]); }); it('should deselect the parent only when deselecting it', async () => { @@ -748,9 +748,9 @@ describe(' - Row selection', () => { await user.click(getCell(1, 0).querySelector('input')!); await user.click(getCell(2, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2]); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([2]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2]); }); it('should auto select the parent if all the children are selected', async () => { @@ -765,7 +765,7 @@ describe(' - Row selection', () => { await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]); }); it('should deselect selected parent if one of the children is deselected', async () => { @@ -779,10 +779,10 @@ describe(' - Row selection', () => { await user.click(getCell(5, 0).querySelector('input')!); await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7, 1]); await user.click(getCell(2, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should not be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([3, 4, 5, 6, 7]); }); describe('prop: isRowSelectable', () => { @@ -802,7 +802,7 @@ describe(' - Row selection', () => { await user.click(getCell(6, 0).querySelector('input')!); await user.click(getCell(7, 0).querySelector('input')!); // The parent row (Thomas, id: 1) should still not be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([2, 3, 4, 5, 6, 7]); }); }); }); @@ -818,16 +818,16 @@ describe(' - Row selection', () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); }); it('should deselect all the children when deselecting a parent', async () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows().size).to.equal(0); + expect(apiRef.current?.getSelectedRows().size).to.equal(0); }); it('should auto select the parent if all the children are selected', async () => { @@ -840,7 +840,7 @@ describe(' - Row selection', () => { await user.click(getCell(12, 0).querySelector('input')!); // The parent row (Mary, id: 8) should be among the selected rows - expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]); }); it('should deselect auto selected parent if one of the children is deselected', async () => { @@ -851,9 +851,9 @@ describe(' - Row selection', () => { await user.click(getCell(9, 0).querySelector('input')!); await user.click(getCell(11, 0).querySelector('input')!); await user.click(getCell(12, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([9, 10, 11, 12, 8, 13, 14]); await user.click(getCell(9, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([11, 12, 13, 14]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([11, 12, 13, 14]); }); it('should select all the children when selecting an indeterminate parent', async () => { @@ -864,7 +864,7 @@ describe(' - Row selection', () => { await user.click(getCell(2, 0).querySelector('input')!); expect(getCell(1, 0).querySelector('input')!).to.have.attr('data-indeterminate', 'true'); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); }); describe('prop: keepNonExistentRowsSelected = true', () => { @@ -872,10 +872,10 @@ describe(' - Row selection', () => { const { user } = render(); await user.click(getCell(1, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([1, 2, 3, 4, 5, 6, 7]); await act(() => { - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: 'jobTitle', @@ -888,7 +888,7 @@ describe(' - Row selection', () => { await user.click(getCell(0, 0).querySelector('input')!); - expect(apiRef.current.getSelectedRows()).to.have.keys([0, 1, 2, 3, 4, 5, 6, 7]); + expect(apiRef.current?.getSelectedRows()).to.have.keys([0, 1, 2, 3, 4, 5, 6, 7]); }); }); }); @@ -898,14 +898,14 @@ describe(' - Row selection', () => { render( { - expect(apiRef.current.getSelectedRows()).to.have.length(1); + expect(apiRef.current?.getSelectedRows()).to.have.length(1); expect(model).to.deep.equal([1]); }} />, ); - expect(apiRef.current.getSelectedRows()).to.have.length(0); - await act(() => apiRef.current.selectRow(1)); - expect(apiRef.current.getSelectedRows().get(1)).to.deep.equal({ + expect(apiRef.current?.getSelectedRows()).to.have.length(0); + await act(() => apiRef.current?.selectRow(1)); + expect(apiRef.current?.getSelectedRows().get(1)).to.deep.equal({ id: 1, currencyPair: 'USDEUR', }); @@ -918,15 +918,15 @@ describe(' - Row selection', () => { await user.click(getCell(1, 0)); - expect(apiRef.current.isRowSelected(0)).to.equal(false); - expect(apiRef.current.isRowSelected(1)).to.equal(true); + expect(apiRef.current?.isRowSelected(0)).to.equal(false); + expect(apiRef.current?.isRowSelected(1)).to.equal(true); }); it('should check if the rows selected with the rowSelectionModel prop are selected', () => { render(); - expect(apiRef.current.isRowSelected(0)).to.equal(false); - expect(apiRef.current.isRowSelected(1)).to.equal(true); + expect(apiRef.current?.isRowSelected(0)).to.equal(false); + expect(apiRef.current?.isRowSelected(1)).to.equal(true); }); }); @@ -934,15 +934,15 @@ describe(' - Row selection', () => { it('should call onRowSelectionModelChange with the ids selected', async () => { const handleRowSelectionModelChange = spy(); render(); - await act(() => apiRef.current.selectRow(1)); + await act(() => apiRef.current?.selectRow(1)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1]); // Reset old selection - await act(() => apiRef.current.selectRow(2, true, true)); + await act(() => apiRef.current?.selectRow(2, true, true)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2]); // Keep old selection - await act(() => apiRef.current.selectRow(3)); + await act(() => apiRef.current?.selectRow(3)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2, 3]); - await act(() => apiRef.current.selectRow(3, false)); + await act(() => apiRef.current?.selectRow(3, false)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([2]); }); @@ -954,9 +954,9 @@ describe(' - Row selection', () => { onRowSelectionModelChange={handleRowSelectionModelChange} />, ); - await act(() => apiRef.current.selectRow(0)); + await act(() => apiRef.current?.selectRow(0)); expect(handleRowSelectionModelChange.callCount).to.equal(0); - await act(() => apiRef.current.selectRow(1)); + await act(() => apiRef.current?.selectRow(1)); expect(handleRowSelectionModelChange.callCount).to.equal(1); }); }); @@ -971,17 +971,17 @@ describe(' - Row selection', () => { />, ); - await act(() => apiRef.current.selectRows([1, 2])); + await act(() => apiRef.current?.selectRows([1, 2])); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]); - await act(() => apiRef.current.selectRows([3])); + await act(() => apiRef.current?.selectRows([3])); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2, 3]); - await act(() => apiRef.current.selectRows([1, 2], false)); + await act(() => apiRef.current?.selectRows([1, 2], false)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([3]); // Deselect others - await act(() => apiRef.current.selectRows([4, 5], true, true)); + await act(() => apiRef.current?.selectRows([4, 5], true, true)); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([4, 5]); }); @@ -993,14 +993,14 @@ describe(' - Row selection', () => { onRowSelectionModelChange={handleRowSelectionModelChange} />, ); - await act(() => apiRef.current.selectRows([0, 1, 2])); + await act(() => apiRef.current?.selectRows([0, 1, 2])); expect(handleRowSelectionModelChange.lastCall.args[0]).to.deep.equal([1, 2]); }); it('should not select a range of several elements when disableMultipleRowSelection = true', async () => { render(); - await act(() => apiRef.current.selectRows([0, 1, 2], true)); + await act(() => apiRef.current?.selectRows([0, 1, 2], true)); expect(getSelectedRowIds()).to.deep.equal([]); }); }); @@ -1009,16 +1009,16 @@ describe(' - Row selection', () => { it('should select all the rows in the range', async () => { render(); - await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true)); + await act(() => apiRef.current?.selectRowRange({ startId: 1, endId: 3 }, true)); expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]); }); it('should unselect all the rows in the range', async () => { render(); - await act(() => apiRef.current.setRowSelectionModel([2, 3])); + await act(() => apiRef.current?.setRowSelectionModel([2, 3])); expect(getSelectedRowIds()).to.deep.equal([2, 3]); - await act(() => apiRef.current.selectRowRange({ startId: 0, endId: 3 }, false)); + await act(() => apiRef.current?.selectRowRange({ startId: 0, endId: 3 }, false)); expect(getSelectedRowIds()).to.deep.equal([]); }); @@ -1026,10 +1026,10 @@ describe(' - Row selection', () => { render(); await act(() => { - apiRef.current.setRowSelectionModel([2]); + apiRef.current?.setRowSelectionModel([2]); }); await act(() => { - apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true); + apiRef.current?.selectRowRange({ startId: 1, endId: 3 }, true); }); expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]); }); @@ -1038,10 +1038,10 @@ describe(' - Row selection', () => { render(); await act(() => { - apiRef.current.setRowSelectionModel([0]); + apiRef.current?.setRowSelectionModel([0]); }); await act(() => { - apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, false); + apiRef.current?.selectRowRange({ startId: 2, endId: 3 }, true, false); }); expect(getSelectedRowIds()).to.deep.equal([0, 2, 3]); }); @@ -1050,10 +1050,10 @@ describe(' - Row selection', () => { render(); await act(() => { - apiRef.current.setRowSelectionModel([0]); + apiRef.current?.setRowSelectionModel([0]); }); await act(() => { - apiRef.current.selectRowRange({ startId: 2, endId: 3 }, true, true); + apiRef.current?.selectRowRange({ startId: 2, endId: 3 }, true, true); }); expect(getSelectedRowIds()).to.deep.equal([2, 3]); }); @@ -1061,14 +1061,14 @@ describe(' - Row selection', () => { it('should not select unselectable rows inside the range', async () => { render( Number(params.id) % 2 === 1} />); - await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true)); + await act(() => apiRef.current?.selectRowRange({ startId: 1, endId: 3 }, true)); expect(getSelectedRowIds()).to.deep.equal([1, 3]); }); it('should not select a range of several elements when disableMultipleRowSelection = true', async () => { render(); - await act(() => apiRef.current.selectRowRange({ startId: 1, endId: 3 }, true)); + await act(() => apiRef.current?.selectRowRange({ startId: 1, endId: 3 }, true)); expect(getSelectedRowIds()).to.deep.equal([]); }); @@ -1078,7 +1078,7 @@ describe(' - Row selection', () => { filterModel={{ items: [{ field: 'id', value: 1, operator: '!=' }] }} />, ); - await act(() => apiRef.current.selectRowRange({ startId: 0, endId: 2 }, true)); + await act(() => apiRef.current?.selectRowRange({ startId: 0, endId: 2 }, true)); expect(getSelectedRowIds()).to.deep.equal([0, 2]); }); }); @@ -1089,7 +1089,7 @@ describe(' - Row selection', () => { name: /select all rows/i, }); await act(() => - apiRef.current.setFilterModel({ + apiRef.current?.setFilterModel({ items: [ { field: 'currencyPair', @@ -1115,8 +1115,8 @@ describe(' - Row selection', () => { const handleSelectionChange = spy(); const rowSelectionModel: GridRowSelectionModel = []; render(); - apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange); - apiRef.current.setRowSelectionModel(rowSelectionModel); + apiRef.current?.subscribeEvent('rowSelectionChange', handleSelectionChange); + apiRef.current?.setRowSelectionModel(rowSelectionModel); expect(handleSelectionChange.callCount).to.equal(0); }); diff --git a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx index 56d9177be66bb..2b32aea28afa7 100644 --- a/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx @@ -74,7 +74,7 @@ describe(' - Rows', () => { }); it('should allow to switch between cell mode', () => { - let apiRef: RefObject; + let apiRef: RefObject; const editableProps = { ...baselineProps }; editableProps.columns = editableProps.columns.map((col) => ({ ...col, editable: true })); const getRowId: DataGridProProps['getRowId'] = (row) => `${row.clientId}`; @@ -88,13 +88,13 @@ describe(' - Rows', () => { ); } render(); - act(() => apiRef!.current.startCellEditMode({ id: 'c2', field: 'first' })); + act(() => apiRef.current?.startCellEditMode({ id: 'c2', field: 'first' })); const cell = getCell(1, 1); expect(cell).to.have.class('MuiDataGrid-cell--editable'); expect(cell).to.have.class('MuiDataGrid-cell--editing'); expect(cell.querySelector('input')!.value).to.equal('Jack'); - act(() => apiRef!.current.stopCellEditMode({ id: 'c2', field: 'first' })); + act(() => apiRef.current?.stopCellEditMode({ id: 'c2', field: 'first' })); expect(cell).to.have.class('MuiDataGrid-cell--editable'); expect(cell).not.to.have.class('MuiDataGrid-cell--editing'); @@ -103,7 +103,7 @@ describe(' - Rows', () => { it('should not clone the row', () => { const getRowId: DataGridProProps['getRowId'] = (row) => `${row.clientId}`; - let apiRef: RefObject; + let apiRef: RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -113,7 +113,7 @@ describe(' - Rows', () => { ); } render(); - expect(apiRef!.current.getRow('c1')).to.equal(baselineProps.rows[0]); + expect(apiRef!.current?.getRow('c1')).to.equal(baselineProps.rows[0]); }); }); @@ -165,7 +165,7 @@ describe(' - Rows', () => { }; }); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -179,14 +179,14 @@ describe(' - Rows', () => { it('should not throttle by default', () => { render(); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Fila', 'Puma']); }); it('should allow to enable throttle', () => { render(); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); clock.tick(50); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); clock.tick(50); @@ -195,25 +195,25 @@ describe(' - Rows', () => { it('should allow to update row data', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }])); - act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Pata' }])); + act(() => apiRef.current?.updateRows([{ id: 2, brand: 'Pum' }])); expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum']); }); it('update row data can also add rows', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }])); - act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }])); - act(() => apiRef.current.updateRows([{ id: 3, brand: 'Jordan' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Pata' }])); + act(() => apiRef.current?.updateRows([{ id: 2, brand: 'Pum' }])); + act(() => apiRef.current?.updateRows([{ id: 3, brand: 'Jordan' }])); expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); }); it('update row data can also add rows in bulk', () => { render(); act(() => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: 1, brand: 'Fila' }, { id: 0, brand: 'Pata' }, { id: 2, brand: 'Pum' }, @@ -225,17 +225,17 @@ describe(' - Rows', () => { it('update row data can also delete rows', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, _action: 'delete' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Apple' }])); - act(() => apiRef.current.updateRows([{ id: 2, _action: 'delete' }])); - act(() => apiRef.current.updateRows([{ id: 5, brand: 'Atari' }])); + act(() => apiRef.current?.updateRows([{ id: 1, _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Apple' }])); + act(() => apiRef.current?.updateRows([{ id: 2, _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ id: 5, brand: 'Atari' }])); expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); it('update row data can also delete rows in bulk', () => { render(); act(() => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: 1, _action: 'delete' }, { id: 0, brand: 'Apple' }, { id: 2, _action: 'delete' }, @@ -264,7 +264,7 @@ describe(' - Rows', () => { render(); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); act(() => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { idField: 1, _action: 'delete' }, { idField: 0, brand: 'Apple' }, { idField: 2, _action: 'delete' }, @@ -288,7 +288,7 @@ describe(' - Rows', () => { expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); setProps({ loading: true }); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Nike 2' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Nike 2' }])); setProps({ loading: false }); expect(getColumnValues(0)).to.deep.equal(['Nike 2', 'Adidas', 'Puma']); }); @@ -314,7 +314,7 @@ describe(' - Rows', () => { const initialRendersCount = 2; expect(renderCellSpy.callCount).to.equal(initialRendersCount); - act(() => apiRef.current.updateRows([{ id: 1, name: 'John' }])); + act(() => apiRef.current?.updateRows([{ id: 1, name: 'John' }])); expect(renderCellSpy.callCount).to.equal(initialRendersCount + 2); }); }); @@ -341,7 +341,7 @@ describe(' - Rows', () => { }; }); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -361,7 +361,7 @@ describe(' - Rows', () => { brand: 'Asics', }, ]; - act(() => apiRef.current.setRows(newRows)); + act(() => apiRef.current?.setRows(newRows)); expect(getColumnValues(0)).to.deep.equal(['Asics']); }); @@ -375,7 +375,7 @@ describe(' - Rows', () => { brand: 'Asics', }, ]; - act(() => apiRef.current.setRows(newRows)); + act(() => apiRef.current?.setRows(newRows)); clock.tick(50); expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']); @@ -389,7 +389,7 @@ describe(' - Rows', () => { const newRows = [{ id: 3, brand: 'Asics' }]; setProps({ loading: true }); - act(() => apiRef.current.setRows(newRows)); + act(() => apiRef.current?.setRows(newRows)); setProps({ loading: false }); expect(getColumnValues(0)).to.deep.equal(['Asics']); @@ -398,7 +398,7 @@ describe(' - Rows', () => { // Need layouting describeSkipIf(isJSDOM)('virtualization', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCaseVirtualization( props: Partial & { nbRows?: number; @@ -459,7 +459,7 @@ describe(' - Rows', () => { const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('995'); expect(renderingZone.children.length).to.equal(Math.floor(innerHeight / rowHeight) + n); - const scrollbarSize = apiRef.current.state.dimensions.scrollbarSize; + const scrollbarSize = apiRef.current?.state.dimensions.scrollbarSize || 0; const distanceToFirstRow = (nbRows - renderingZone.children.length) * rowHeight; expect(gridOffsetTop()).to.equal(distanceToFirstRow); expect(virtualScroller.scrollHeight - scrollbarSize - headerHeight).to.equal( @@ -469,12 +469,12 @@ describe(' - Rows', () => { it('should have all the rows rendered of the page in the DOM when autoPageSize: true', () => { render(); - expect(getRows()).to.have.length(apiRef.current.state.pagination.paginationModel.pageSize); + expect(getRows()).to.have.length(apiRef.current!.state.pagination.paginationModel.pageSize); }); it('should have all the rows rendered in the DOM when autoPageSize: true', () => { render(); - expect(getRows()).to.have.length(apiRef.current.state.pagination.paginationModel.pageSize); + expect(getRows()).to.have.length(apiRef.current!.state.pagination.paginationModel.pageSize); }); it('should render extra columns when the columnBuffer prop is present', () => { @@ -548,7 +548,7 @@ describe(' - Rows', () => { virtualScroller.scrollTop = 10e6; // scroll to the bottom act(() => virtualScroller.dispatchEvent(new Event('scroll'))); - const dimensions = apiRef.current.state.dimensions; + const dimensions = apiRef.current!.state.dimensions; const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0]; expect(lastCell).to.have.text('31'); expect(virtualScroller.scrollHeight).to.equal( @@ -609,7 +609,7 @@ describe(' - Rows', () => { />, ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - act(() => apiRef.current.scrollToIndexes({ rowIndex: 4, colIndex: 0 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 4, colIndex: 0 })); expect(virtualScroller.scrollTop).to.equal(rowHeight - offset); }); @@ -630,11 +630,11 @@ describe(' - Rows', () => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; virtualScroller.scrollTop = offset; virtualScroller.dispatchEvent(new Event('scroll')); // Simulate browser behavior - act(() => apiRef.current.scrollToIndexes({ rowIndex: 2, colIndex: 0 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 2, colIndex: 0 })); expect(virtualScroller.scrollTop).to.equal(offset); - act(() => apiRef.current.scrollToIndexes({ rowIndex: 1, colIndex: 0 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 1, colIndex: 0 })); expect(virtualScroller.scrollTop).to.equal(offset); - act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 0 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 0, colIndex: 0 })); expect(virtualScroller.scrollTop).to.equal(0); }); @@ -652,7 +652,7 @@ describe(' - Rows', () => { render(); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; expect(virtualScroller.scrollLeft).to.equal(0); - act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 0, colIndex: 2 })); expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width); }); @@ -670,17 +670,17 @@ describe(' - Rows', () => { render(); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; expect(virtualScroller.scrollLeft).to.equal(0); - act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 2 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 0, colIndex: 2 })); virtualScroller.dispatchEvent(new Event('scroll')); // Simulate browser behavior expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width); - act(() => apiRef.current.scrollToIndexes({ rowIndex: 0, colIndex: 1 })); + act(() => apiRef.current?.scrollToIndexes({ rowIndex: 0, colIndex: 1 })); expect(virtualScroller.scrollLeft).to.equal(columnWidth * 3 - width); }); }); }); describe('no virtualization', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial & { nbRows?: number; nbCols?: number }) { apiRef = useGridApiRef(); @@ -714,14 +714,14 @@ describe(' - Rows', () => { ); expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(6); act(() => { - apiRef.current.setPage(1); + apiRef.current?.setPage(1); }); expect(document.querySelectorAll('[role="row"][data-rowindex]')).to.have.length(4); }); }); describe('Cell focus', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { apiRef = useGridApiRef(); @@ -764,7 +764,7 @@ describe(' - Rows', () => { render(); fireUserEvent.mousePress(getCell(0, 0)); - expect(apiRef.current.state.focus.cell).to.deep.equal({ + expect(apiRef.current?.state.focus.cell).to.deep.equal({ id: baselineProps.rows[0].id, field: baselineProps.columns[0].field, }); @@ -828,7 +828,7 @@ describe(' - Rows', () => { it('should publish "cellFocusOut" when clicking outside the focused cell', () => { const handleCellFocusOut = spy(); render(); - apiRef.current.subscribeEvent('cellFocusOut', handleCellFocusOut); + apiRef.current?.subscribeEvent('cellFocusOut', handleCellFocusOut); fireUserEvent.mousePress(getCell(1, 0)); expect(handleCellFocusOut.callCount).to.equal(0); fireUserEvent.mousePress(document.body); @@ -843,7 +843,7 @@ describe(' - Rows', () => { { - apiRef.current.updateRows([{ id: 1, _action: 'delete' }]); + apiRef.current?.updateRows([{ id: 1, _action: 'delete' }]); }} />, ); @@ -857,7 +857,7 @@ describe(' - Rows', () => { render(); const cell = getCell(0, 0); fireEvent.mouseEnter(cell); - act(() => apiRef.current.updateRows([{ id: 1, _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ id: 1, _action: 'delete' }])); fireEvent.mouseLeave(cell); }).not.to.throw(); }); @@ -869,7 +869,7 @@ describe(' - Rows', () => { { - apiRef.current.updateRows([{ id: 1, _action: 'delete' }]); + apiRef.current?.updateRows([{ id: 1, _action: 'delete' }]); }} />, ); diff --git a/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx index 87891da359845..865508e7e686d 100644 --- a/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/sorting.DataGridPro.test.tsx @@ -39,7 +39,7 @@ describe(' - Sorting', () => { const { render } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Partial) { const { rows, ...other } = props; @@ -83,21 +83,21 @@ describe(' - Sorting', () => { brand: 'Hugo', }, ]; - act(() => apiRef.current.setRows(newRows)); + act(() => apiRef.current?.setRows(newRows)); expect(getColumnValues(0)).to.deep.equal(['Asics', 'Hugo', 'RedBull']); }); it('should apply the sortModel prop correctly on GridApiRef update row data', () => { renderBrandSortedAsc(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Patagonia' }])); expect(getColumnValues(0)).to.deep.equal(['Fila', 'Patagonia', 'Puma']); }); it('should allow apiRef to setSortModel', () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'brand', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'brand', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); }); @@ -118,7 +118,7 @@ describe(' - Sorting', () => { { field: 'brand', sort: 'asc' }, ]; - act(() => apiRef.current.setSortModel(sortModel)); + act(() => apiRef.current?.setSortModel(sortModel)); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); }); @@ -126,7 +126,7 @@ describe(' - Sorting', () => { ['shiftKey', 'metaKey', 'ctrlKey'].forEach((key) => { it(`should do a multi-sorting when clicking the header cell while ${key} is pressed`, () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'year', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0), { [key]: true }); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Adidas', 'Nike']); @@ -136,7 +136,7 @@ describe(' - Sorting', () => { ['metaKey', 'ctrlKey'].forEach((key) => { it(`should do nothing when pressing Enter while ${key} is pressed`, () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'year', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); act(() => getColumnHeaderCell(1).focus()); fireEvent.keyDown(getColumnHeaderCell(1), { key: 'Enter', [key]: true }); @@ -146,7 +146,7 @@ describe(' - Sorting', () => { it('should do a multi-sorting pressing Enter while shiftKey is pressed', () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'year', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); act(() => getColumnHeaderCell(0).focus()); fireEvent.keyDown(getColumnHeaderCell(0), { key: 'Enter', shiftKey: true }); @@ -155,7 +155,7 @@ describe(' - Sorting', () => { it(`should not do a multi-sorting if no multiple key is pressed`, () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'year', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0)); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); @@ -163,7 +163,7 @@ describe(' - Sorting', () => { it('should not do a multi-sorting if disableMultipleColumnsSorting is true', () => { render(); - act(() => apiRef.current.setSortModel([{ field: 'year', sort: 'desc' }])); + act(() => apiRef.current?.setSortModel([{ field: 'year', sort: 'desc' }])); expect(getColumnValues(0)).to.deep.equal(['Puma', 'Nike', 'Adidas']); fireEvent.click(getColumnHeaderCell(0), { shiftKey: true }); expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Nike', 'Puma']); diff --git a/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx index 1cec5d0fdcf55..871758e6bea3d 100644 --- a/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/state.DataGridPro.test.tsx @@ -31,7 +31,7 @@ describe(' - State', () => { it('should trigger on state change and pass the correct params', () => { let onStateParams; - let apiRef: RefObject; + let apiRef: RefObject; function Test() { apiRef = useGridApiRef(); @@ -49,7 +49,7 @@ describe(' - State', () => { render(); const header = screen.getByRole('columnheader', { name: 'brand' }); fireEvent.click(header); - expect(onStateParams).to.equal(apiRef!.current.state); + expect(onStateParams).to.equal(apiRef!.current?.state); expect(onStateParams).not.to.equal(undefined); }); @@ -58,11 +58,11 @@ describe(' - State', () => { const apiRef = useGridApiRef(); React.useEffect(() => { - apiRef.current.setState((prev) => ({ + apiRef.current?.setState((prev) => ({ ...prev, sorting: { ...prev.sorting, sortModel: [{ field: 'brand', sort: 'asc' }] }, })); - apiRef.current.applySorting(); + apiRef.current?.applySorting(); }, [apiRef]); return (
diff --git a/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx index de64a1e6f73ba..0edd9e0655014 100644 --- a/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx @@ -86,7 +86,7 @@ const FULL_INITIAL_STATE: GridInitialState = { describe(' - State persistence', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; function TestCase(props: Omit) { apiRef = useGridApiRef(); @@ -119,7 +119,7 @@ describe(' - State persistence', () => { describe('apiRef: exportState', () => { it('should export the default values of the models', () => { render(); - expect(apiRef.current.exportState()).to.deep.equal({ + expect(apiRef.current?.exportState()).to.deep.equal({ columns: { columnVisibilityModel: {}, orderedFields: ['id', 'idBis', 'category'], @@ -145,7 +145,7 @@ describe(' - State persistence', () => { it('should not export the default values of the models when using exportOnlyDirtyModels', () => { render(); - expect(apiRef.current.exportState({ exportOnlyDirtyModels: true })).to.deep.equal({ + expect(apiRef.current?.exportState({ exportOnlyDirtyModels: true })).to.deep.equal({ columns: { orderedFields: ['id', 'idBis', 'category'], }, @@ -154,7 +154,7 @@ describe(' - State persistence', () => { it('should export the initial values of the models', () => { render(); - expect(apiRef.current.exportState()).to.deep.equal(FULL_INITIAL_STATE); + expect(apiRef.current?.exportState()).to.deep.equal(FULL_INITIAL_STATE); }); it('should export the controlled values of the models', () => { @@ -181,7 +181,7 @@ describe(' - State persistence', () => { }} />, ); - expect(apiRef.current.exportState()).to.deep.equal(FULL_INITIAL_STATE); + expect(apiRef.current?.exportState()).to.deep.equal(FULL_INITIAL_STATE); }); it('should export the controlled values of the models when using exportOnlyDirtyModels', () => { @@ -209,14 +209,14 @@ describe(' - State persistence', () => { }} />, ); - expect(apiRef.current.exportState({ exportOnlyDirtyModels: true })).to.deep.equal( + expect(apiRef.current?.exportState({ exportOnlyDirtyModels: true })).to.deep.equal( FULL_INITIAL_STATE, ); }); it('should export the initial values of the models when using exportOnlyUserModels', () => { render(); - expect(apiRef.current.exportState({ exportOnlyDirtyModels: true })).to.deep.equal( + expect(apiRef.current?.exportState({ exportOnlyDirtyModels: true })).to.deep.equal( FULL_INITIAL_STATE, ); }); @@ -224,19 +224,19 @@ describe(' - State persistence', () => { it('should export the current version of the exportable state', () => { render(); act(() => { - apiRef.current.setPaginationModel({ page: 1, pageSize: 2 }); - apiRef.current.setPinnedColumns({ left: ['id'] }); - apiRef.current.showPreferences(GridPreferencePanelsValue.filters); - apiRef.current.setSortModel([{ field: 'id', sort: 'desc' }]); - apiRef.current.setFilterModel({ + apiRef.current?.setPaginationModel({ page: 1, pageSize: 2 }); + apiRef.current?.setPinnedColumns({ left: ['id'] }); + apiRef.current?.showPreferences(GridPreferencePanelsValue.filters); + apiRef.current?.setSortModel([{ field: 'id', sort: 'desc' }]); + apiRef.current?.setFilterModel({ items: [{ field: 'id', operator: '>=', value: '0' }], }); - apiRef.current.setColumnIndex('category', 1); - apiRef.current.setColumnWidth('category', 75); - apiRef.current.setColumnVisibilityModel({ idBis: false }); - apiRef.current.setDensity('compact'); + apiRef.current?.setColumnIndex('category', 1); + apiRef.current?.setColumnWidth('category', 75); + apiRef.current?.setColumnVisibilityModel({ idBis: false }); + apiRef.current?.setDensity('compact'); }); - expect(apiRef.current.exportState()).to.deep.equal(FULL_INITIAL_STATE); + expect(apiRef.current?.exportState()).to.deep.equal(FULL_INITIAL_STATE); }); }); @@ -244,7 +244,7 @@ describe(' - State persistence', () => { it('should restore the whole exportable state', () => { render(); - act(() => apiRef.current.restoreState(FULL_INITIAL_STATE)); + act(() => apiRef.current?.restoreState(FULL_INITIAL_STATE)); // Pinning, pagination, sorting and filtering expect(getColumnValues(0)).to.deep.equal(['3', '2']); @@ -263,7 +263,7 @@ describe(' - State persistence', () => { render(); act(() => - apiRef.current.restoreState({ + apiRef.current?.restoreState({ pagination: { paginationModel: { page: 1, pageSize: 2 }, }, @@ -288,7 +288,7 @@ describe(' - State persistence', () => { render(); act(() => - apiRef.current.restoreState({ + apiRef.current?.restoreState({ pagination: { paginationModel: { page: 1, pageSize: 2 }, }, diff --git a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx index 297d98c79d837..318669a1bd3ec 100644 --- a/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx +++ b/packages/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx @@ -62,7 +62,7 @@ const baselineProps: DataGridProProps = { describe(' - Tree data', () => { const { render, clock } = createRenderer({ clock: 'fake' }); - let apiRef: RefObject; + let apiRef: RefObject; function Test(props: Partial) { apiRef = useGridApiRef(); @@ -121,7 +121,7 @@ describe(' - Tree data', () => { 'B.B.A.A', 'C', ]); - act(() => apiRef.current.updateRows([{ name: 'A.A', _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ name: 'A.A', _action: 'delete' }])); expect(getColumnValues(0)).to.deep.equal([ 'A', 'A.B', @@ -172,10 +172,10 @@ describe(' - Tree data', () => { it('should keep children expansion when changing some of the rows', () => { render(); expect(getColumnValues(1)).to.deep.equal(['A']); - act(() => apiRef.current.setRowChildrenExpansion('A', true)); + act(() => apiRef.current?.setRowChildrenExpansion('A', true)); clock.runToLast(); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A']); - act(() => apiRef.current.updateRows([{ name: 'B' }])); + act(() => apiRef.current?.updateRows([{ name: 'B' }])); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'B']); }); }); @@ -275,7 +275,7 @@ describe(' - Tree data', () => { it('should not re-apply default expansion on rerender after expansion manually toggled', () => { const { setProps } = render(); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']); - act(() => apiRef.current.setRowChildrenExpansion('B', true)); + act(() => apiRef.current?.setRowChildrenExpansion('B', true)); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'B.A', 'B.B', 'C']); setProps({ sortModel: [{ field: 'name', sort: 'desc' }] }); expect(getColumnValues(1)).to.deep.equal(['C', 'B', 'B.B', 'B.A', 'A']); @@ -288,7 +288,7 @@ describe(' - Tree data', () => { render(); expect(isGroupExpandedByDefault.callCount).to.equal(reactMajor >= 19 ? 4 : 8); // Should not be called on leaves - const { childrenExpanded, children, childrenFromPath, ...node } = apiRef.current.state.rows + const { childrenExpanded, children, childrenFromPath, ...node } = apiRef.current?.state.rows .tree.A as GridGroupNode; const callForNodeA = isGroupExpandedByDefault .getCalls() @@ -418,11 +418,11 @@ describe(' - Tree data', () => { render(); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '200px' }); act(() => - apiRef.current.updateColumns([{ field: GRID_TREE_DATA_GROUPING_FIELD, width: 100 }]), + apiRef.current?.updateColumns([{ field: GRID_TREE_DATA_GROUPING_FIELD, width: 100 }]), ); expect(getColumnHeaderCell(0)).toHaveInlineStyle({ width: '100px' }); act(() => - apiRef.current.updateColumns([ + apiRef.current?.updateColumns([ { field: 'name', headerName: 'New name', @@ -617,7 +617,7 @@ describe(' - Tree data', () => { ); const { filteredChildrenCountLookup, filteredDescendantCountLookup } = - apiRef.current.state.filter; + apiRef.current!.state.filter; expect(filteredChildrenCountLookup.A).to.equal(3); expect(filteredDescendantCountLookup.A).to.equal(5); @@ -629,11 +629,11 @@ describe(' - Tree data', () => { expect(filteredDescendantCountLookup.C).to.equal(undefined); act(() => { - apiRef.current.updateRows([{ name: 'A.D' }]); + apiRef.current?.updateRows([{ name: 'A.D' }]); }); - expect(apiRef.current.state.filter.filteredChildrenCountLookup.A).to.equal(4); - expect(apiRef.current.state.filter.filteredDescendantCountLookup.A).to.equal(6); + expect(apiRef.current?.state.filter.filteredChildrenCountLookup.A).to.equal(4); + expect(apiRef.current?.state.filter.filteredDescendantCountLookup.A).to.equal(6); }); }); diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index cba9be214c7c7..ec8bfd57e3fa8 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -91,7 +91,7 @@ DataGridRaw.propTypes = { * The ref object that allows Data Grid manipulation. Can be instantiated with `useGridApiRef()`. */ apiRef: PropTypes.shape({ - current: PropTypes.object.isRequired, + current: PropTypes.object, }), /** * The label of the Data Grid. diff --git a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx index 6787227972e22..11bd616909589 100644 --- a/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx +++ b/packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx @@ -64,7 +64,7 @@ import { } from '../hooks/features/listView/useGridListView'; export const useDataGridComponent = ( - inputApiRef: RefObject | undefined, + inputApiRef: RefObject | undefined, props: DataGridProcessedProps, ) => { const apiRef = useGridInitialization( diff --git a/packages/x-data-grid/src/components/panel/GridPanel.test.tsx b/packages/x-data-grid/src/components/panel/GridPanel.test.tsx index 51c38dc7e87e4..f04a78dfdfc0d 100644 --- a/packages/x-data-grid/src/components/panel/GridPanel.test.tsx +++ b/packages/x-data-grid/src/components/panel/GridPanel.test.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import { createRenderer } from '@mui/internal-test-utils'; -import { - GridPanel, - gridPanelClasses as classes, - useGridApiRef, - GridApiContext, -} from '@mui/x-data-grid'; +import { GridApiCommunity } from '@mui/x-data-grid/internals'; +import { GridPanel, gridPanelClasses as classes, GridApiContext } from '@mui/x-data-grid'; import { GridRootPropsContext } from '@mui/x-data-grid/context/GridRootPropsContext'; import Popper from '@mui/material/Popper'; import { describeConformance } from 'test/utils/describeConformance'; @@ -16,7 +12,7 @@ describe('', () => { function Wrapper(props: { children: React.ReactNode }) { // mock rootProps const rootProps = React.useMemo(() => ({}), []); - const apiRef = useGridApiRef(); + const apiRef = React.useRef({} as GridApiCommunity); apiRef.current.rootElementRef = { // @ts-ignore current: document.body, diff --git a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts index 83bae70415a86..6b5ac504056eb 100644 --- a/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts +++ b/packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts @@ -97,7 +97,7 @@ export function useGridApiInitialization< PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon, >( - inputApiRef: RefObject | undefined, + inputApiRef: RefObject | undefined, props: Pick, ): RefObject { const publicApiRef = React.useRef(null) as RefObject; diff --git a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts index ba4026364b234..0afa72054390e 100644 --- a/packages/x-data-grid/src/hooks/core/useGridInitialization.ts +++ b/packages/x-data-grid/src/hooks/core/useGridInitialization.ts @@ -17,7 +17,7 @@ export const useGridInitialization = < PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon, >( - inputApiRef: RefObject | undefined, + inputApiRef: RefObject | undefined, props: DataGridProcessedProps, ) => { const privateApiRef = useGridApiInitialization(inputApiRef, props); diff --git a/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts b/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts index 9e75d4ef0d194..37912b74416b3 100644 --- a/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts +++ b/packages/x-data-grid/src/hooks/utils/useGridApiRef.ts @@ -7,5 +7,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity'; * Hook that instantiate a [[GridApiRef]]. */ export const useGridApiRef = () => - // TODO v8: initialize with null (see https://github.com/mui/mui-x/issues/16135#issuecomment-2589395230 and https://github.com/mui/mui-x/issues/16000#issuecomment-2567820735) - React.useRef({}) as RefObject; + React.useRef(null) as RefObject; diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 0854fa9745a72..47bc6e04fb83b 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -399,7 +399,7 @@ export interface DataGridPropsWithoutDefaultValue; + apiRef?: RefObject; /** * Signal to the underlying logic what version of the public component API * of the Data Grid is exposed [[GridSignature]]. diff --git a/packages/x-data-grid/src/tests/DataGrid.spec.tsx b/packages/x-data-grid/src/tests/DataGrid.spec.tsx index a4622c5e2a16a..fc563869e8118 100644 --- a/packages/x-data-grid/src/tests/DataGrid.spec.tsx +++ b/packages/x-data-grid/src/tests/DataGrid.spec.tsx @@ -261,7 +261,7 @@ function ApiRefPrivateMethods() { function ApiRefPublicMethods() { const apiRef = useGridApiRef(); - apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {}); + apiRef.current!.unstable_applyPipeProcessors('exportMenu', [], {}); } function ApiRefProMethods() { diff --git a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx index 94b0c0493a625..f6e9afc4cc832 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -702,7 +702,7 @@ describe(' - Layout & warnings', () => { const columnHeaderHeight = 40; const rowHeight = 30; - let apiRef!: RefObject; + let apiRef!: RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -720,7 +720,7 @@ describe(' - Layout & warnings', () => { } render(); - const scrollbarSize = apiRef.current.state.dimensions.scrollbarSize; + const scrollbarSize = apiRef.current?.state.dimensions.scrollbarSize || 0; expect(scrollbarSize).not.to.equal(0); expect(grid('main')!.clientHeight).to.equal( scrollbarSize + columnHeaderHeight + rowHeight * baselineProps.rows.length, @@ -808,7 +808,7 @@ describe(' - Layout & warnings', () => { const columnHeaderHeight = 40; const height = 300; const border = 1; - let apiRef!: RefObject; + let apiRef!: RefObject; function Test() { apiRef = useGridApiRef(); return ( @@ -824,7 +824,7 @@ describe(' - Layout & warnings', () => { ); } render(); - const scrollbarSize = apiRef.current.state.dimensions.scrollbarSize; + const scrollbarSize = apiRef.current?.state.dimensions.scrollbarSize || 0; const overlayWrapper = screen.getByText('No rows').parentElement; const expectedHeight = height - columnHeaderHeight - scrollbarSize; expect(overlayWrapper).toHaveComputedStyle({ height: `${expectedHeight}px` }); diff --git a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx index 7672823936633..01e71890b9048 100644 --- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -258,7 +258,7 @@ describe(' - Pagination', () => { }); it('should throw if pageSize exceeds 100', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); return ( @@ -270,7 +270,7 @@ describe(' - Pagination', () => { ); } render(); - expect(() => apiRef.current.setPageSize(101)).to.throw( + expect(() => apiRef.current?.setPageSize(101)).to.throw( /`pageSize` cannot exceed 100 in the MIT version of the DataGrid./, ); }); diff --git a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx index b41699bd13247..ee7dabec480fa 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -899,20 +899,20 @@ describe(' - Row selection', () => { }); it('should throw if rowSelectionModel contains more than 1 row', () => { - let apiRef: RefObject; + let apiRef: RefObject; function ControlCase() { apiRef = useGridApiRef(); return ; } render(); - expect(() => apiRef.current.setRowSelectionModel([0, 1])).to.throw( + expect(() => apiRef.current?.setRowSelectionModel([0, 1])).to.throw( /`rowSelectionModel` can only contain 1 item in DataGrid/, ); }); it('should not throw if rowSelectionModel contains more than 1 item with checkbox selection', () => { - let apiRef: RefObject; + let apiRef: RefObject; function ControlCase() { apiRef = useGridApiRef(); return ; @@ -921,7 +921,7 @@ describe(' - Row selection', () => { render(); expect(() => act(() => { - apiRef.current.setRowSelectionModel([0, 1]); + apiRef.current?.setRowSelectionModel([0, 1]); }), ).not.to.throw(); }); diff --git a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index 64e4f5a736e76..227d62827ffe3 100644 --- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx @@ -10,7 +10,7 @@ import { testSkipIf, isJSDOM } from 'test/utils/skipIf'; describe(' - Row spanning', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const baselineProps: DataGridProps = { rowSpanning: true, columns: [ @@ -115,6 +115,11 @@ describe(' - Row spanning', () => { testSkipIf(isJSDOM)('should span the repeating row values', () => { render(); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + const rowsWithSpannedCells = Object.keys(apiRef.current.state.rowSpanning.spannedCells); expect(rowsWithSpannedCells.length).to.equal(1); const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(4); @@ -132,6 +137,11 @@ describe(' - Row spanning', () => { initialState={{ sorting: { sortModel: [{ field: 'code', sort: 'desc' }] } }} />, ); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + const rowsWithSpannedCells = Object.keys(apiRef.current.state.rowSpanning.spannedCells); expect(rowsWithSpannedCells.length).to.equal(1); const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(4); @@ -144,6 +154,11 @@ describe(' - Row spanning', () => { testSkipIf(isJSDOM)('should work with sorting when controlling sorting', () => { render(); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + const rowsWithSpannedCells = Object.keys(apiRef.current.state.rowSpanning.spannedCells); expect(rowsWithSpannedCells.length).to.equal(1); const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(4); @@ -168,6 +183,11 @@ describe(' - Row spanning', () => { }} />, ); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + const rowsWithSpannedCells = Object.keys(apiRef.current.state.rowSpanning.spannedCells); expect(rowsWithSpannedCells.length).to.equal(1); const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(5); @@ -186,6 +206,11 @@ describe(' - Row spanning', () => { }} />, ); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + const rowsWithSpannedCells = Object.keys(apiRef.current.state.rowSpanning.spannedCells); expect(rowsWithSpannedCells.length).to.equal(1); const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(5); @@ -206,9 +231,14 @@ describe(' - Row spanning', () => { pageSizeOptions={[4]} />, ); + + if (!apiRef.current?.state) { + throw new Error('apiRef.current.state is undefined'); + } + expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(0); - await act(async () => { - apiRef.current.setPage(1); + act(() => { + apiRef.current?.setPage(1); }); expect(Object.keys(apiRef.current.state.rowSpanning.spannedCells).length).to.equal(1); expect(Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length).to.equal(1); @@ -219,7 +249,7 @@ describe(' - Row spanning', () => { it('should respect the spanned cells when navigating using keyboard', () => { render(); // Set focus to the cell with value `- 16GB RAM Upgrade` - act(() => apiRef.current.setCellFocus(5, 'description')); + act(() => apiRef.current?.setCellFocus(5, 'description')); expect(getActiveCell()).to.equal('4-1'); const cell41 = getCell(4, 1); fireEvent.keyDown(cell41, { key: 'ArrowLeft' }); @@ -253,7 +283,7 @@ describe(' - Row spanning', () => { expect(rowSpanningStateUpdates).to.equal(1); act(() => { - apiRef.current.setRows([ + apiRef.current?.setRows([ { id: 1, code: 'A101' }, { id: 2, code: 'A101' }, ]); diff --git a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx index 5ff90be2b35b6..17782cdf77f68 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -45,7 +45,7 @@ import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/densitySelecto describe(' - Rows', () => { const { render } = createRenderer(); - let apiRef: RefObject; + let apiRef: RefObject; const baselineProps = { autoHeight: isJSDOM, @@ -1058,7 +1058,7 @@ describe(' - Rows', () => { it('should throw when updating more than one row at once', () => { render(); expect(() => - apiRef.current.updateRows([ + apiRef.current?.updateRows([ { id: 1, brand: 'Fila' }, { id: 0, brand: 'Pata' }, { id: 2, brand: 'Pum' }, @@ -1069,27 +1069,27 @@ describe(' - Rows', () => { it('should allow to update one row at the time', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }])); - act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Pata' }])); + act(() => apiRef.current?.updateRows([{ id: 2, brand: 'Pum' }])); expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum']); }); it('should allow adding rows', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Pata' }])); - act(() => apiRef.current.updateRows([{ id: 2, brand: 'Pum' }])); - act(() => apiRef.current.updateRows([{ id: 3, brand: 'Jordan' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Pata' }])); + act(() => apiRef.current?.updateRows([{ id: 2, brand: 'Pum' }])); + act(() => apiRef.current?.updateRows([{ id: 3, brand: 'Jordan' }])); expect(getColumnValues(0)).to.deep.equal(['Pata', 'Fila', 'Pum', 'Jordan']); }); it('should allow to delete rows', () => { render(); - act(() => apiRef.current.updateRows([{ id: 1, _action: 'delete' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Apple' }])); - act(() => apiRef.current.updateRows([{ id: 2, _action: 'delete' }])); - act(() => apiRef.current.updateRows([{ id: 5, brand: 'Atari' }])); + act(() => apiRef.current?.updateRows([{ id: 1, _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Apple' }])); + act(() => apiRef.current?.updateRows([{ id: 2, _action: 'delete' }])); + act(() => apiRef.current?.updateRows([{ id: 5, brand: 'Atari' }])); expect(getColumnValues(0)).to.deep.equal(['Apple', 'Atari']); }); diff --git a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx index 591e7a189811c..0c84423363fc4 100644 --- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -91,7 +91,7 @@ describe(' - Sorting', () => { }); it('should allow sorting using `apiRef` for unsortable columns', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); const cols = [{ field: 'id', sortable: false }]; @@ -112,16 +112,16 @@ describe(' - Sorting', () => { expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); // should allow sort using `apiRef` - act(() => apiRef.current.sortColumn('id', 'desc')); + act(() => apiRef.current?.sortColumn('id', 'desc')); expect(getColumnValues(0)).to.deep.equal(['10', '5', '0']); - act(() => apiRef.current.sortColumn('id', 'asc')); + act(() => apiRef.current?.sortColumn('id', 'asc')); expect(getColumnValues(0)).to.deep.equal(['0', '5', '10']); - act(() => apiRef.current.sortColumn('id', null)); + act(() => apiRef.current?.sortColumn('id', null)); expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); }); it('should allow clearing the current sorting using `sortColumn` idempotently', async () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); const cols = [{ field: 'id' }]; @@ -143,17 +143,17 @@ describe(' - Sorting', () => { expect(getColumnValues(0)).to.deep.equal(['0', '5', '10']); // Clear the value using `apiRef` - await act(() => apiRef.current.sortColumn('id', null)); + await act(() => apiRef.current?.sortColumn('id', null)); expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); // Check the behavior is idempotent - await act(() => apiRef.current.sortColumn('id', null)); + await act(() => apiRef.current?.sortColumn('id', null)); expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); }); // See https://github.com/mui/mui-x/issues/12271 it('should not keep the sort item with `item.sort = null`', () => { - let apiRef: RefObject; + let apiRef: RefObject; const onSortModelChange = spy(); function TestCase() { apiRef = useGridApiRef(); @@ -183,7 +183,7 @@ describe(' - Sorting', () => { expect(onSortModelChange.lastCall.firstArg).to.deep.equal([{ field: 'id', sort: 'asc' }]); // Clear the sort using `apiRef` - act(() => apiRef.current.sortColumn('id', null)); + act(() => apiRef.current?.sortColumn('id', null)); expect(getColumnValues(0)).to.deep.equal(['10', '0', '5']); expect(onSortModelChange.callCount).to.equal(2); @@ -668,7 +668,7 @@ describe(' - Sorting', () => { }); it('should apply the sortModel prop correctly on GridApiRef update row data', () => { - let apiRef: RefObject; + let apiRef: RefObject; function TestCase() { apiRef = useGridApiRef(); @@ -682,8 +682,8 @@ describe(' - Sorting', () => { } render(); - act(() => apiRef.current.updateRows([{ id: 1, brand: 'Fila' }])); - act(() => apiRef.current.updateRows([{ id: 0, brand: 'Patagonia' }])); + act(() => apiRef.current?.updateRows([{ id: 1, brand: 'Fila' }])); + act(() => apiRef.current?.updateRows([{ id: 0, brand: 'Patagonia' }])); expect(getColumnValues(0)).to.deep.equal(['Fila', 'Patagonia', 'Puma']); }); diff --git a/packages/x-data-grid/src/utils/createSelector.ts b/packages/x-data-grid/src/utils/createSelector.ts index 9851b89fcb0c0..aac1daa546819 100644 --- a/packages/x-data-grid/src/utils/createSelector.ts +++ b/packages/x-data-grid/src/utils/createSelector.ts @@ -19,7 +19,10 @@ type GridCreateSelectorFunction = ReturnType & { }; export interface OutputSelector { - (apiRef: RefObject<{ state: State; instanceId: GridCoreApi['instanceId'] }>, args?: Args): Result; + ( + apiRef: RefObject<{ state: State; instanceId: GridCoreApi['instanceId'] } | null>, + args?: Args, + ): Result; (state: State, args?: Args, instanceId?: GridCoreApi['instanceId']): Result; acceptsApiRef: boolean; }