@astral/ui 4.113.3 → 4.115.0

package/components/DataGrid/tests/performance/testDataGridPerformance.js

@@ -1,12 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { screen, userEvents } from '@ui/dev/tests';
-import { useMemo, useState } from 'react';
-import { expect, it, vi } from 'vitest';
+import { useCallback, useMemo, useState, } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 const TEST_ROWS = [
     { id: '1', name: 'Vasya' },
     { id: '2', name: 'Petya' },
     { id: '3', name: 'Ivan' },
 ];
+const TEST_ROWS_WITH_CHILDREN = [
+    ...TEST_ROWS,
+    {
+        id: '4',
+        name: 'Package',
+        children: [{ id: '4-1', name: 'Nested' }],
+    },
+];
+const SELECTION_DISABLED = {
+    mode: 'selection',
+    reason: 'Документ отправляется',
+};
+const ROW_DISABLED = {
+    mode: 'row',
+    reason: 'Документ отправляется',
+};
 export const testDataGridPerformance = ({ render, renderGrid, }) => {
     const getRenderCountFor = (spy, id) => spy.mock.calls.filter(([row]) => row.id === id).length;
     it('При клике на чекбокс перерендеривается только выбранная строка', async () => {
@@ -99,4 +115,220 @@ export const testDataGridPerformance = ({ render, renderGrid, }) => {
         expect(getRenderCountFor(renderCellSpy, '2')).toBe(0);
         expect(getRenderCountFor(renderCellSpy, '3')).toBe(1);
     });
+    describe('getRowDisabled', () => {
+        const createColumns = (renderCell) => [
+            { field: 'name', label: 'Наименование', renderCell },
+        ];
+        const getRenderCounts = (spy, ids) => Object.fromEntries(ids.map((id) => [id, getRenderCountFor(spy, id)]));
+        const setupSelectableGrid = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [selectedRows, setSelectedRows] = useState([]);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                return renderGrid({
+                    rows: TEST_ROWS,
+                    columns,
+                    selectedRows,
+                    onSelectRow: setSelectedRows,
+                    getRowDisabled: getRowDisabledSpy,
+                    onRetry: () => { },
+                });
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupParentRerender = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn(() => undefined);
+            const TestComponent = () => {
+                const [, setCounter] = useState(0);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setCounter((value) => value + 1), children: "Rerender" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled: getRowDisabledSpy,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupChangedResult = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn();
+            const TestComponent = () => {
+                const [lockedId, setLockedId] = useState();
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = useCallback((row) => {
+                    getRowDisabledSpy(row);
+                    return row.id === lockedId ? SELECTION_DISABLED : undefined;
+                }, [lockedId]);
+                return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setLockedId('2'), children: "Lock row 2" }), renderGrid({
+                            rows: TEST_ROWS,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled,
+                            onRetry: () => { },
+                        })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        const setupSameResult = () => {
+            const renderCellSpy = vi.fn((row) => row.name);
+            const getRowDisabledSpy = vi.fn();
+            const TestComponent = () => {
+                const [counter, setCounter] = useState(0);
+                const columns = useMemo(() => createColumns(renderCellSpy), []);
+                const getRowDisabled = useCallback((row) => {
+                    getRowDisabledSpy(row);
+                    return undefined;
+                }, [counter]);
+                return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setCounter((value) => value + 1), children: "New function" }), renderGrid({
+                            rows: TEST_ROWS_WITH_CHILDREN,
+                            columns,
+                            selectedRows: [],
+                            onSelectRow: () => { },
+                            getRowDisabled,
+                            tree: { isInitialExpanded: true },
+                            onRetry: () => { },
+                        })] }));
+            };
+            render(_jsx(TestComponent, {}));
+            renderCellSpy.mockClear();
+            getRowDisabledSpy.mockClear();
+            return { renderCellSpy, getRowDisabledSpy };
+        };
+        describe('Клик на чекбокс', () => {
+            it('Перерендеривается только выбранная строка', async () => {
+                const { renderCellSpy } = setupSelectableGrid();
+                // 0 - "Выбрать все", 1 - первая строка
+                await userEvents.click(screen.getAllByRole('checkbox')[2]);
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupSelectableGrid();
+                await userEvents.click(screen.getAllByRole('checkbox')[2]);
+                expect(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        it('getRowDisabled не вызывается при «Выбрать все»', async () => {
+            const { getRowDisabledSpy } = setupSelectableGrid();
+            await userEvents.click(screen.getAllByRole('checkbox')[0]);
+            expect(getRowDisabledSpy).not.toHaveBeenCalled();
+        });
+        describe('Перерисовка родителя со стабильной функцией', () => {
+            it('Строки не перерисовываются', async () => {
+                const { renderCellSpy } = setupParentRerender();
+                await userEvents.click(screen.getByText('Rerender'));
+                expect(renderCellSpy).not.toHaveBeenCalled();
+            });
+            it('getRowDisabled не вызывается', async () => {
+                const { getRowDisabledSpy } = setupParentRerender();
+                await userEvents.click(screen.getByText('Rerender'));
+                expect(getRowDisabledSpy).not.toHaveBeenCalled();
+            });
+        });
+        describe('Новая функция с изменившимся результатом', () => {
+            it('Перерендеривается только строка с изменившимся результатом', async () => {
+                const { renderCellSpy } = setupChangedResult();
+                await userEvents.click(screen.getByText('Lock row 2'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it('getRowDisabled вызывается один раз на строку', async () => {
+                const { getRowDisabledSpy } = setupChangedResult();
+                await userEvents.click(screen.getByText('Lock row 2'));
+                expect(getRowDisabledSpy).toHaveBeenCalledTimes(TEST_ROWS.length);
+            });
+        });
+        describe('Новая функция с тем же результатом', () => {
+            it('Перерисовываются только строки с дочерними элементами', async () => {
+                const { renderCellSpy } = setupSameResult();
+                await userEvents.click(screen.getByText('New function'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3', '4', '4-1'])).toEqual({ '1': 0, '2': 0, '3': 0, '4': 1, '4-1': 1 });
+            });
+            it('getRowDisabled вызывается один раз на строку, включая вложенную', async () => {
+                const { getRowDisabledSpy } = setupSameResult();
+                await userEvents.click(screen.getByText('New function'));
+                // 4 строки и 1 вложенная
+                expect(getRowDisabledSpy).toHaveBeenCalledTimes(5);
+            });
+        });
+        // Virtuoso отдаёт строкам новые данные на рендер позже родителя: состояние строки
+        // не должно приходить раньше данных и перерисовывать строку дважды
+        describe('Новые rows вместе с изменением состояния строки', () => {
+            const createVersionRows = (version) => TEST_ROWS.map((row) => ({ ...row, name: `${row.name} v${version}` }));
+            const setupRowsUpdate = () => {
+                const renderCellSpy = vi.fn((row) => row.name);
+                const TestComponent = () => {
+                    const [version, setVersion] = useState(0);
+                    const [isOptionsLocked, setOptionsLocked] = useState(false);
+                    const [lockedId, setLockedId] = useState();
+                    const [selectedRows, setSelectedRows] = useState([]);
+                    const columns = useMemo(() => createColumns(renderCellSpy), []);
+                    const versionRows = useMemo(() => createVersionRows(version), [version]);
+                    // Заново создаётся только заблокированная строка, остальные сохраняют ссылки
+                    const rows = useMemo(() => versionRows.map((row) => isOptionsLocked && row.id === '2'
+                        ? { ...row, options: { isDisabled: true } }
+                        : row), [versionRows, isOptionsLocked]);
+                    const getRowDisabled = useCallback((row) => (row.id === lockedId ? ROW_DISABLED : undefined), [lockedId]);
+                    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setOptionsLocked(true), children: "Lock via options" }), _jsx("button", { onClick: () => {
+                                    setVersion(1);
+                                    setSelectedRows([TEST_ROWS[1]]);
+                                }, children: "Refetch and select" }), _jsx("button", { onClick: () => {
+                                    setVersion(1);
+                                    setLockedId('2');
+                                }, children: "Refetch and lock" }), renderGrid({
+                                rows,
+                                columns,
+                                selectedRows,
+                                onSelectRow: setSelectedRows,
+                                getRowDisabled,
+                                onRetry: () => { },
+                            })] }));
+                };
+                render(_jsx(TestComponent, {}));
+                renderCellSpy.mockClear();
+                return { renderCellSpy };
+            };
+            it('Строка перерисовывается один раз при блокировке через options', async () => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await userEvents.click(screen.getByText('Lock via options'));
+                expect(getRenderCounts(renderCellSpy, ['1', '2', '3'])).toEqual({
+                    '1': 0,
+                    '2': 1,
+                    '3': 0,
+                });
+            });
+            it.each([
+                { condition: 'изменении выбора', action: 'Refetch and select' },
+                {
+                    condition: 'блокировке через getRowDisabled',
+                    action: 'Refetch and lock',
+                },
+            ])('Строки перерисовываются один раз и сразу с новыми данными при $condition', async ({ action }) => {
+                const { renderCellSpy } = setupRowsUpdate();
+                await userEvents.click(screen.getByText(action));
+                expect(renderCellSpy.mock.calls.map(([row]) => row.name)).toEqual(['Vasya v1', 'Petya v1', 'Ivan v1']);
+            });
+        });
+    });
 };

package/components/DataGrid/tests/selection/testDataGridSelection.d.ts

@@ -0,0 +1,14 @@
+import { type RenderResult } from '@ui/dev/tests';
+import { type ReactElement } from 'react';
+import { type DataGridProps } from '../../types';
+type DataItem = {
+    id: string | number;
+    name: string;
+};
+type GridRenderProps = Pick<DataGridProps<DataItem>, 'rows' | 'columns' | 'selectedRows' | 'onSelectRow' | 'getRowDisabled' | 'onRowClick' | 'variant' | 'tree' | 'onRetry'>;
+type TestDataGridSelectionParams = {
+    render: (ui: ReactElement) => Pick<RenderResult, 'rerender'>;
+    renderGrid: (props: GridRenderProps) => ReactElement;
+};
+export declare const testDataGridSelection: ({ render, renderGrid, }: TestDataGridSelectionParams) => void;
+export {};