From a943aefd53e3281bd8937ce239539694be1fb04f Mon Sep 17 00:00:00 2001 From: Lukas Tyla Date: Tue, 20 Aug 2024 13:32:26 +0300 Subject: [PATCH] [code-infra] Set up `eslint-plugin-testing-library` (#14232) Signed-off-by: Lukas Tyla Co-authored-by: Andrew Cherniavskyi --- .eslintrc.js | 13 + package.json | 1 + .../ResponsiveChartContainerPro.test.tsx | 6 +- .../useHighlighted.test.tsx | 6 +- .../x-charts/src/hooks/useSeries.test.tsx | 6 +- .../x-charts/src/hooks/useSvgRef.test.tsx | 6 +- .../aggregation.DataGridPremium.test.tsx | 16 +- .../cellSelection.DataGridPremium.test.tsx | 27 +- .../tests/clipboard.DataGridPremium.test.tsx | 95 +- .../rowGrouping.DataGridPremium.test.tsx | 12 +- .../tests/cellEditing.DataGridPro.test.tsx | 65 +- .../src/tests/clipboard.DataGridPro.test.tsx | 9 +- .../tests/columnPinning.DataGridPro.test.tsx | 14 +- .../tests/columnSpanning.DataGridPro.test.tsx | 5 +- .../columnsVisibility.DataGridPro.test.tsx | 6 +- .../src/tests/components.DataGridPro.test.tsx | 5 +- .../tests/detailPanel.DataGridPro.test.tsx | 20 +- .../tests/editComponents.DataGridPro.test.tsx | 7 +- .../src/tests/filtering.DataGridPro.test.tsx | 6 +- .../src/tests/rowEditing.DataGridPro.test.tsx | 57 +- .../src/tests/rowPinning.DataGridPro.test.tsx | 18 +- .../src/tests/rows.DataGridPro.test.tsx | 25 +- .../src/tests/treeData.DataGridPro.test.tsx | 5 +- .../src/tests/cells.DataGrid.test.tsx | 9 +- .../src/tests/columnHeaders.DataGrid.test.tsx | 7 +- .../tests/columnSpanning.DataGrid.test.tsx | 29 +- .../tests/columnsVisibility.DataGrid.test.tsx | 34 +- .../src/tests/density.DataGrid.test.tsx | 24 +- .../src/tests/keyboard.DataGrid.test.tsx | 61 +- .../src/tests/layout.DataGrid.test.tsx | 24 +- .../src/tests/pagination.DataGrid.test.tsx | 5 +- .../tests/quickFiltering.DataGrid.test.tsx | 20 +- .../src/tests/rowSelection.DataGrid.test.tsx | 66 +- .../src/tests/rows.DataGrid.test.tsx | 6 +- .../src/tests/sorting.DataGrid.test.tsx | 6 +- .../src/tests/toolbar.DataGrid.test.tsx | 14 +- .../DateRangeCalendar.test.tsx | 17 +- .../DateRangePicker/DateRangePicker.test.tsx | 4 +- .../tests/DesktopDateRangePicker.test.tsx | 43 +- .../describes.DesktopDateRangePicker.test.tsx | 7 +- .../tests/DesktopDateTimeRangePicker.test.tsx | 19 +- ...cribes.DesktopDateTimeRangePicker.test.tsx | 13 +- .../tests/MobileDateRangePicker.test.tsx | 27 +- .../describes.MobileDateRangePicker.test.tsx | 5 +- ...scribes.MobileDateTimeRangePicker.test.tsx | 19 +- ...editing.SingleInputDateRangeField.test.tsx | 192 ++--- ...lection.SingleInputDateRangeField.test.tsx | 114 +-- .../AdapterDateFns/AdapterDateFns.test.tsx | 11 +- .../AdapterDateFnsJalali.test.tsx | 11 +- .../AdapterDateFnsJalaliV3.test.tsx | 11 +- .../src/AdapterDayjs/AdapterDayjs.test.tsx | 11 +- .../src/AdapterLuxon/AdapterLuxon.test.tsx | 22 +- .../src/AdapterMoment/AdapterMoment.test.tsx | 11 +- .../AdapterMomentHijri.test.tsx | 11 +- .../AdapterMomentJalaali.test.tsx | 11 +- .../DateCalendar/tests/DateCalendar.test.tsx | 25 +- .../tests/describes.DateCalendar.test.tsx | 5 +- .../tests/timezone.DateCalendar.test.tsx | 9 +- .../tests/editing.DateField.test.tsx | 811 +++++++++--------- .../DateField/tests/format.DateField.test.tsx | 108 +-- .../tests/selection.DateField.test.tsx | 144 ++-- .../tests/editing.DateTimeField.test.tsx | 72 +- .../tests/timezone.DateTimeField.test.tsx | 30 +- .../tests/DesktopDatePicker.test.tsx | 17 +- .../describes.DesktopDatePicker.test.tsx | 5 +- .../tests/field.DesktopDatePicker.test.tsx | 44 +- .../tests/DesktopDateTimePicker.test.tsx | 41 +- .../describes.DesktopDateTimePicker.test.tsx | 13 +- .../field.DesktopDateTimePicker.test.tsx | 18 +- .../tests/DesktopTimePicker.test.tsx | 21 +- .../describes.DesktopTimePicker.test.tsx | 11 +- .../tests/field.DesktopTimePicker.test.tsx | 18 +- .../DigitalClock/tests/DigitalClock.test.tsx | 9 +- .../tests/timezone.DigitalClock.test.tsx | 9 +- .../tests/MobileDatePicker.test.tsx | 15 +- .../tests/describes.MobileDatePicker.test.tsx | 5 +- .../tests/MobileDateTimePicker.test.tsx | 11 +- .../describes.MobileDateTimePicker.test.tsx | 11 +- .../tests/field.MobileDateTimePicker.test.tsx | 8 +- .../tests/MobileTimePicker.test.tsx | 5 +- .../tests/describes.MobileTimePicker.test.tsx | 9 +- .../tests/field.MobileTimePicker.test.tsx | 8 +- .../tests/describes.MonthCalendar.test.tsx | 5 +- .../PickersActionBar.test.tsx | 11 +- .../StaticTimePicker.test.tsx | 6 +- .../src/TimeClock/tests/TimeClock.test.tsx | 12 +- .../tests/editing.TimeField.test.tsx | 80 +- .../tests/describes.YearCalendar.test.tsx | 5 +- .../tests/fieldKeyboardInteraction.test.tsx | 68 +- .../useTreeViewItemsReordering.test.tsx | 60 +- .../src/TreeItem/TreeItem.test.tsx | 12 +- .../useTreeViewExpansion.test.tsx | 156 ++-- .../useTreeViewFocus.test.tsx | 114 +-- .../useTreeViewIcons.test.tsx | 40 +- .../useTreeViewItems.test.tsx | 132 ++- .../useTreeViewKeyboardNavigation.test.tsx | 738 ++++++++-------- .../useTreeViewLabel.test.tsx | 122 +-- .../useTreeViewSelection.test.tsx | 464 +++++----- .../useTreeView/useTreeView.test.tsx | 4 +- .../src/useTreeItem2/useTreeItem2.test.tsx | 30 +- pnpm-lock.yaml | 106 +++ test/utils/fireUserEvent/fireUserEvent.ts | 30 + test/utils/fireUserEvent/index.ts | 1 + .../testControlledUnControlled.tsx | 5 +- .../describeValue/testPickerActionBar.tsx | 19 +- .../testPickerOpenCloseLifeCycle.tsx | 13 +- .../pickers/describeValue/testShortcuts.tsx | 9 +- test/utils/pickers/fields.tsx | 7 +- test/utils/pickers/openPicker.ts | 11 +- test/utils/pickers/viewHandlers.ts | 13 +- 110 files changed, 2579 insertions(+), 2470 deletions(-) create mode 100644 test/utils/fireUserEvent/fireUserEvent.ts create mode 100644 test/utils/fireUserEvent/index.ts diff --git a/.eslintrc.js b/.eslintrc.js index 7242c7ae0a17..d7b85f4b16de 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -181,6 +181,19 @@ module.exports = { }, overrides: [ ...baseline.overrides, + { + files: [ + // matching the pattern of the test runner + '*.test.js', + '*.test.ts', + '*.test.tsx', + ], + excludedFiles: ['test/e2e/**/*', 'test/regressions/**/*'], + extends: ['plugin:testing-library/react'], + rules: { + 'testing-library/no-container': 'off', + }, + }, { files: [ // matching the pattern of the test runner diff --git a/package.json b/package.json index 4914ace3ee7a..c5afe7bcc4d5 100644 --- a/package.json +++ b/package.json @@ -149,6 +149,7 @@ "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725", "eslint-plugin-react-hooks": "^4.6.2", + "eslint-plugin-testing-library": "^6.3.0", "fast-glob": "^3.3.2", "format-util": "^1.0.5", "fs-extra": "^11.2.0", diff --git a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx index 4d5e4565a271..569724f5829d 100644 --- a/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx +++ b/packages/x-charts-pro/src/ResponsiveChartContainerPro/ResponsiveChartContainerPro.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { createRenderer, screen, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, screen } from '@mui/internal-test-utils'; import { LicenseInfo } from '@mui/x-license'; import { sharedLicenseStatuses } from '@mui/x-license/useLicenseVerifier/useLicenseVerifier'; import { ResponsiveChartContainerPro } from './ResponsiveChartContainerPro'; @@ -21,8 +21,6 @@ describe(' - License', () => { render(), ).toErrorDev(['MUI X: Missing license key.']); - await waitFor(() => { - expect(screen.findAllByText('MUI X Missing license key')).not.to.equal(null); - }); + expect(await screen.findAllByText('MUI X Missing license key')).not.to.equal(null); }); }); diff --git a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx index ac69895cf5e7..29337e8d7191 100644 --- a/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx +++ b/packages/x-charts/src/context/HighlightedProvider/useHighlighted.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils'; +import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils'; import { useHighlighted } from './useHighlighted'; import { HighlightedProvider } from './HighlightedProvider'; import { SeriesProvider } from '../SeriesProvider'; @@ -42,7 +42,7 @@ describe('useHighlighted', () => { }); it('should not throw an error when parent context is present', () => { - const { getByText } = render( + render( @@ -52,6 +52,6 @@ describe('useHighlighted', () => { , ); - expect(getByText('test-id')).toBeVisible(); + expect(screen.getByText('test-id')).toBeVisible(); }); }); diff --git a/packages/x-charts/src/hooks/useSeries.test.tsx b/packages/x-charts/src/hooks/useSeries.test.tsx index 7a8d6f15a8f8..4bbe16ff5cb6 100644 --- a/packages/x-charts/src/hooks/useSeries.test.tsx +++ b/packages/x-charts/src/hooks/useSeries.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils'; +import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils'; import { useSeries } from './useSeries'; import { SeriesProvider } from '../context/SeriesProvider'; import { PluginProvider } from '../internals'; @@ -41,7 +41,7 @@ describe('useSeries', () => { }); it('should not throw an error when parent context is present', () => { - const { getByText } = render( + render( @@ -49,6 +49,6 @@ describe('useSeries', () => { , ); - expect(getByText('test-id')).toBeVisible(); + expect(screen.getByText('test-id')).toBeVisible(); }); }); diff --git a/packages/x-charts/src/hooks/useSvgRef.test.tsx b/packages/x-charts/src/hooks/useSvgRef.test.tsx index a61113fa1e8d..ed345538cc14 100644 --- a/packages/x-charts/src/hooks/useSvgRef.test.tsx +++ b/packages/x-charts/src/hooks/useSvgRef.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { ErrorBoundary, createRenderer } from '@mui/internal-test-utils'; +import { ErrorBoundary, createRenderer, screen } from '@mui/internal-test-utils'; import { useSvgRef } from './useSvgRef'; import { DrawingProvider } from '../context/DrawingProvider'; @@ -52,11 +52,11 @@ describe('useSvgRef', () => { ); } - const { findByText, forceUpdate } = render(); + const { forceUpdate } = render(); // Ref is not available on first render. forceUpdate(); - expect(await findByText('test-id')).toBeVisible(); + expect(await screen.findByText('test-id')).toBeVisible(); }); }); 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 43f054c2635c..ab65dab64c7d 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 @@ -1,14 +1,8 @@ import * as React from 'react'; -import { - createRenderer, - screen, - userEvent, - within, - act, - fireEvent, -} from '@mui/internal-test-utils'; +import { createRenderer, screen, within, act, fireEvent } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { getCell, getColumnHeaderCell, getColumnValues } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { SinonSpy, spy } from 'sinon'; import { DataGridPremium, @@ -177,7 +171,7 @@ describe(' - Aggregation', () => { setProps({ columns: [{ ...column, editable: true }] }); fireEvent.doubleClick(cell); expect(cell.querySelector('input')).not.to.equal(null); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); setProps({ columns: [column] }); fireEvent.doubleClick(cell); @@ -409,8 +403,8 @@ describe(' - Aggregation', () => { act(() => apiRef.current.showColumnMenu('id')); clock.runToLast(); - userEvent.mousePress(screen.getByLabelText('Aggregation')); - userEvent.mousePress( + fireUserEvent.mousePress(screen.getByLabelText('Aggregation')); + fireUserEvent.mousePress( within( screen.getByRole('listbox', { name: 'Aggregation', 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 15f398c262c2..09efe492a468 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 @@ -2,7 +2,7 @@ import * as React from 'react'; import { stub, SinonStub } from 'sinon'; import { expect } from 'chai'; import { spyApi, getCell, grid } from 'test/utils/helperFn'; -import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils'; import { DataGridPremium, DataGridPremiumProps, @@ -11,6 +11,7 @@ import { gridClasses, } from '@mui/x-data-grid-premium'; import { getBasicGridData } from '@mui/x-data-grid-generator'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Cell selection', () => { const { render } = createRenderer(); @@ -116,9 +117,9 @@ describe(' - Cell selection', () => { expect(document.querySelector('.Mui-selected')).to.equal(null); const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); - userEvent.mousePress(getCell(2, 1), { shiftKey: true }); + fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true }); expect(document.querySelectorAll('.Mui-selected')).to.have.length(3 * 2); // 3 rows with 2 cells each }); @@ -128,9 +129,9 @@ describe(' - Cell selection', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); - userEvent.mousePress(getCell(2, 1), { shiftKey: true }); + fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true }); expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' }); expect(spiedSelectCellsBetweenRange.lastCall.args[1]).to.deep.equal({ id: 2, @@ -142,9 +143,9 @@ describe(' - Cell selection', () => { render(); const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); - userEvent.mousePress(getCell(2, 2), { shiftKey: true }); + fireUserEvent.mousePress(getCell(2, 2), { shiftKey: true }); expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeTop']); expect(getCell(0, 0)).to.have.class(gridClasses['cell--rangeLeft']); @@ -167,7 +168,7 @@ describe(' - Cell selection', () => { const cell = getCell(0, 0); cell.focus(); expect(cell).toHaveFocus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.click(getCell(2, 1), { shiftKey: true }); expect(cell).toHaveFocus(); }); @@ -179,7 +180,7 @@ describe(' - Cell selection', () => { const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true }); expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' }); @@ -191,7 +192,7 @@ describe(' - Cell selection', () => { const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); const cell = getCell(1, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.keyDown(cell, { key: 'ArrowUp', shiftKey: true }); expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 1, field: 'id' }); @@ -203,7 +204,7 @@ describe(' - Cell selection', () => { const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.keyDown(cell, { key: 'ArrowLeft', shiftKey: true }); expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ @@ -218,7 +219,7 @@ describe(' - Cell selection', () => { const spiedSelectCellsBetweenRange = spyApi(apiRef.current, 'selectCellRange'); const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.keyDown(cell, { key: 'ArrowRight', shiftKey: true }); expect(spiedSelectCellsBetweenRange.lastCall.args[0]).to.deep.equal({ id: 0, field: 'id' }); @@ -232,7 +233,7 @@ describe(' - Cell selection', () => { render(); const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.keyDown(cell, { key: 'ArrowDown', shiftKey: true }); expect(cell).toHaveFocus(); 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 12fe266dee93..6653971f3ae4 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 @@ -6,10 +6,11 @@ import { DataGridPremiumProps, GridColDef, } from '@mui/x-data-grid-premium'; -import { createRenderer, fireEvent, userEvent, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, waitFor } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { SinonSpy, spy, stub, SinonStub } from 'sinon'; import { getCell, getColumnValues, sleep } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { getBasicGridData } from '@mui/x-data-grid-generator'; describe(' - Clipboard', () => { @@ -72,7 +73,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -95,7 +96,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(0, 2), { shiftKey: true }); @@ -126,7 +127,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Ctrl' }); fireEvent.click(getCell(1, 0), { ctrlKey: true }); @@ -157,7 +158,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Ctrl' }); fireEvent.click(getCell(1, 0), { ctrlKey: true }); @@ -194,7 +195,7 @@ describe(' - Clipboard', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V expect(listener.callCount).to.equal(0); }); @@ -207,7 +208,7 @@ describe(' - Clipboard', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', code: 'KeyV', keyCode: 86, [key]: true }); // Ctrl+V expect(listener.callCount).to.equal(0); }); @@ -219,7 +220,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -259,7 +260,7 @@ describe(' - Clipboard', () => { expect(cell).not.to.have.text(clipboardData); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, clipboardData); // no update @@ -271,7 +272,7 @@ describe(' - Clipboard', () => { setProps({ paginationModel: { pageSize: 2, page: 1 } }); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, clipboardData); // updated @@ -285,7 +286,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -322,7 +323,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -368,7 +369,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const clipboardData = [ ['p11', 'p12', 'p13'], @@ -386,10 +387,10 @@ describe(' - Clipboard', () => { await waitFor(() => { expect(getCell(3, 3).textContent).to.equal('p33'); - expect(getCell(6, 2).textContent).to.equal('p62'); - expect(getCell(7, 1).textContent).to.equal('p71'); - expect(getCell(7, 3).textContent).to.equal('p73'); }); + expect(getCell(6, 2).textContent).to.equal('p62'); + expect(getCell(7, 1).textContent).to.equal('p71'); + expect(getCell(7, 3).textContent).to.equal('p73'); }); }); @@ -399,7 +400,7 @@ describe(' - Clipboard', () => { const cell = getCell(2, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const clipboardData = ['p01', 'p02', 'p03'].join('\t'); paste(cell, clipboardData); @@ -407,8 +408,8 @@ describe(' - Clipboard', () => { await waitFor(() => { // the last row is not selected and should not be updated expect(getColumnValues(1)).to.deep.equal(['p02', 'p02', 'p02', 'JPYUSD']); - expect(getColumnValues(2)).to.deep.equal(['p03', 'p03', 'p03', '31']); }); + expect(getColumnValues(2)).to.deep.equal(['p03', 'p03', 'p03', '31']); }); it('should paste into selected rows if multiple rows of data are pasted', async () => { @@ -416,7 +417,7 @@ describe(' - Clipboard', () => { const cell = getCell(2, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const clipboardData = [ ['p01', 'p02', 'p03'].join('\t'), @@ -429,8 +430,8 @@ describe(' - Clipboard', () => { await waitFor(() => { // the last row is not selected and should not be updated expect(getColumnValues(1)).to.deep.equal(['p02', 'p12', 'p22', 'JPYUSD']); - expect(getColumnValues(2)).to.deep.equal(['p03', 'p13', 'p23', '31']); }); + expect(getColumnValues(2)).to.deep.equal(['p03', 'p13', 'p23', '31']); }); it('should ignore row selection when single cell value is pasted', async () => { @@ -438,22 +439,22 @@ describe(' - Clipboard', () => { const cell = getCell(2, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, 'pasted'); await waitFor(() => { // should ignore selected rows and paste into selected cell expect(getColumnValues(1)).to.deep.equal(['USDGBP', 'USDEUR', 'pasted', 'JPYUSD']); - expect(getColumnValues(2)).to.deep.equal(['1', '11', '21', '31']); }); + expect(getColumnValues(2)).to.deep.equal(['1', '11', '21', '31']); }); it('should paste into selected rows when checkbox selection cell is focused', async () => { render(); const checkboxInput = getCell(0, 0).querySelector('input')!; - userEvent.mousePress(checkboxInput!); + fireUserEvent.mousePress(checkboxInput!); const clipboardData = ['p01', 'p02', 'p03'].join('\t'); paste(checkboxInput, clipboardData); @@ -461,8 +462,8 @@ describe(' - Clipboard', () => { await waitFor(() => { // the first column (id) is not editable and won't be updated expect(getCell(0, 2).textContent).to.equal('p02'); - expect(getCell(0, 3).textContent).to.equal('p03'); }); + expect(getCell(0, 3).textContent).to.equal('p03'); }); }); @@ -493,7 +494,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, 'Nike'); @@ -511,7 +512,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(1, 2), { shiftKey: true }); @@ -556,7 +557,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, '0'); @@ -605,7 +606,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 2); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, 'John Doe'); @@ -646,7 +647,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, 'john doe'); @@ -685,7 +686,7 @@ describe(' - Clipboard', () => { const cell = getCell(1, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(1, 4), { shiftKey: true }); @@ -694,10 +695,10 @@ describe(' - Clipboard', () => { await waitFor(() => { expect(getColumnValues(1)).to.deep.equal(['Nike', 'Nike', 'Puma']); - expect(getColumnValues(2)).to.deep.equal(['Shoes', 'Shoes', 'Shoes']); - expect(getColumnValues(3)).to.deep.equal(['$120', '$100', '$90']); - expect(getColumnValues(4)).to.deep.equal(['4.0', '4.0', '4.9']); }); + expect(getColumnValues(2)).to.deep.equal(['Shoes', 'Shoes', 'Shoes']); + expect(getColumnValues(3)).to.deep.equal(['$120', '$100', '$90']); + expect(getColumnValues(4)).to.deep.equal(['4.0', '4.0', '4.9']); }); it('should call `processRowUpdate` with each row impacted by the paste', async () => { @@ -708,7 +709,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -751,7 +752,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, '12'); @@ -776,7 +777,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, '12'); @@ -803,7 +804,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, '12'); @@ -832,14 +833,14 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, '12'); await waitFor(() => { expect(onProcessRowUpdateError.callCount).to.equal(1); - expect(onProcessRowUpdateError.args[0][0]).to.equal(error); }); + expect(onProcessRowUpdateError.args[0][0]).to.equal(error); }); it('should emit clipboard paste events', async () => { @@ -864,7 +865,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(0, 2), { shiftKey: true }); @@ -908,13 +909,13 @@ describe(' - Clipboard', () => { } function copyCell(cell: HTMLElement) { - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); } function pasteIntoCell(cell: HTMLElement) { cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); paste(cell, clipboardData); } @@ -1129,7 +1130,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Shift' }); fireEvent.click(getCell(2, 2), { shiftKey: true }); @@ -1159,7 +1160,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 1); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); let clipboardData = ['01', '11'].join('\n'); // Add newline at the end @@ -1169,10 +1170,10 @@ describe(' - Clipboard', () => { await waitFor(() => { expect(getCell(0, 1)).to.have.text('01'); - expect(getCell(1, 1)).to.have.text('11'); - // Should not be empty - expect(getCell(2, 1)).to.have.text('GBPEUR'); }); + expect(getCell(1, 1)).to.have.text('11'); + // Should not be empty + expect(getCell(2, 1)).to.have.text('GBPEUR'); }); }); }); 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 994100b91b89..9f60eb3694cf 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 @@ -1,12 +1,5 @@ import * as React from 'react'; -import { - createRenderer, - fireEvent, - screen, - act, - userEvent, - waitFor, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils'; import { microtasks, getColumnHeaderCell, @@ -16,6 +9,7 @@ import { getSelectByName, getRow, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { expect } from 'chai'; import { DataGridPremium, @@ -888,7 +882,7 @@ describe(' - Row grouping', () => { />, ); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); expect(renderIdCell.lastCall.firstArg.field).to.equal('id'); expect(getCell(1, 0)).to.have.text('Focused: true'); }); 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 65611293817f..e28fd45873d7 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 @@ -13,8 +13,9 @@ import { GridCellModes, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { getCell, spyApi } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Cell editing', () => { const { render, clock } = createRenderer({ clock: 'fake' }); @@ -210,9 +211,7 @@ describe(' - Cell editing', () => { const cell = getCell(0, 1); cell.focus(); - await act(() => { - fireEvent.keyDown(cell, { key: 'Enter' }); - }); + fireEvent.keyDown(cell, { key: 'Enter' }); expect(handleEditCellStop.callCount).to.equal(0); }); @@ -759,7 +758,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: '$' }); expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown'); }); @@ -769,7 +768,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: ' ' }); expect(listener.callCount).to.equal(0); }); @@ -781,7 +780,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: '1' }); expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown'); }); @@ -793,7 +792,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown'); }); @@ -803,7 +802,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(listener.callCount).to.equal(0); }); @@ -812,7 +811,7 @@ describe(' - Cell editing', () => { render(); const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(spiedStartCellEditMode.callCount).to.equal(1); }); @@ -824,7 +823,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(listener.lastCall.args[0].reason).to.equal('deleteKeyDown'); }); @@ -834,7 +833,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(listener.callCount).to.equal(0); }); @@ -843,7 +842,7 @@ describe(' - Cell editing', () => { render(); const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(spiedStartCellEditMode.callCount).to.equal(1); }); @@ -852,7 +851,7 @@ describe(' - Cell editing', () => { render(); const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(spiedStartCellEditMode.callCount).to.equal(1); expect(spiedStartCellEditMode.lastCall.args[0]).to.deep.equal({ @@ -868,7 +867,7 @@ describe(' - Cell editing', () => { render(); const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); // A expect(spiedStartCellEditMode.callCount).to.equal(1); }); @@ -878,7 +877,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); // A expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown'); }); @@ -888,7 +887,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); // A expect(listener.callCount).to.equal(0); }); @@ -899,7 +898,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', [key]: true }); // for example Ctrl + A, copy expect(listener.callCount).to.equal(0); }); @@ -910,7 +909,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', shiftKey: true }); // Print A in uppercase expect(listener.callCount).to.equal(1); }); @@ -920,7 +919,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', ctrlKey: true }); // Ctrl+V expect(listener.callCount).to.equal(1); }); @@ -930,7 +929,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'π', altKey: true }); // ⌥ Option + P expect(listener.callCount).to.equal(1); }); @@ -939,7 +938,7 @@ describe(' - Cell editing', () => { render(); const spiedStartCellEditMode = spyApi(apiRef.current, 'startCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); expect(spiedStartCellEditMode.callCount).to.equal(1); expect(spiedStartCellEditMode.lastCall.args[0]).to.deep.equal({ @@ -991,7 +990,7 @@ describe(' - Cell editing', () => { apiRef.current.subscribeEvent('cellEditStop', listener); fireEvent.doubleClick(getCell(0, 1)); expect(listener.callCount).to.equal(0); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(listener.lastCall.args[0].reason).to.equal('cellFocusOut'); }); @@ -999,7 +998,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); fireEvent.doubleClick(getCell(0, 1)); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(spiedStopCellEditMode.callCount).to.equal(1); expect(spiedStopCellEditMode.lastCall.args[0]).to.deep.equal({ id: 0, @@ -1021,7 +1020,7 @@ describe(' - Cell editing', () => { resolve(); }), ); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(spiedStopCellEditMode.callCount).to.equal(1); expect(spiedStopCellEditMode.lastCall.args[0].ignoreModifications).to.equal(false); }); @@ -1033,7 +1032,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell, { key: 'Escape' }); @@ -1044,7 +1043,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell, { key: 'Escape' }); expect(spiedStopCellEditMode.callCount).to.equal(1); @@ -1063,7 +1062,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell, { key: 'Enter' }); @@ -1074,7 +1073,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(spiedStopCellEditMode.callCount).to.equal(1); @@ -1091,7 +1090,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act( () => @@ -1112,7 +1111,7 @@ describe(' - Cell editing', () => { const listener = spy(); apiRef.current.subscribeEvent('cellEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell, { key: 'Tab' }); @@ -1123,7 +1122,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell, { key: 'Tab' }); expect(spiedStopCellEditMode.callCount).to.equal(1); @@ -1140,7 +1139,7 @@ describe(' - Cell editing', () => { render(); const spiedStopCellEditMode = spyApi(apiRef.current, 'stopCellEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act( () => 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 6287545d7c5b..e7be57860196 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 @@ -1,9 +1,10 @@ import * as React from 'react'; import { GridApi, useGridApiRef, DataGridPro, DataGridProProps } from '@mui/x-data-grid-pro'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { SinonSpy, spy } from 'sinon'; import { getCell } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -53,7 +54,7 @@ describe(' - Clipboard', () => { act(() => apiRef.current.selectRows([0, 1])); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, [key]: true }); expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas'].join('\r\n')); }); @@ -72,7 +73,7 @@ describe(' - Clipboard', () => { const cell = getCell(0, 0); cell.focus(); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); expect(writeText.lastCall.firstArg).to.equal('1 " 1'); @@ -94,7 +95,7 @@ describe(' - Clipboard', () => { act(() => apiRef.current.selectRows([0, 1])); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'c', keyCode: 67, ctrlKey: true }); expect(writeText.firstCall.args[0]).to.equal(['1 " 1', '2'].join('\r\n')); }); 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 7508c219422f..340fefa5515c 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 @@ -12,14 +12,7 @@ import { GridColDef, } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -import { - createRenderer, - fireEvent, - screen, - createEvent, - act, - userEvent, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, createEvent, act } from '@mui/internal-test-utils'; import { $, $$, @@ -29,6 +22,7 @@ import { getColumnHeadersTextContent, grid, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; // TODO Move to utils // Fix https://github.com/mui/mui-x/pull/2085/files/058f56ac3c729b2142a9a28b79b5b13535cdb819#diff-db85480a519a5286d7341e9b8957844762cf04cdacd946331ebaaaff287482ec @@ -105,7 +99,7 @@ describe(' - Column pinning', () => { virtualScroller.scrollLeft = 100; act(() => virtualScroller.dispatchEvent(new Event('scroll'))); const cell = getCell(0, 2); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); expect(virtualScroller.scrollLeft).to.equal(0); }); @@ -119,7 +113,7 @@ describe(' - Column pinning', () => { const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!; expect(virtualScroller.scrollLeft).to.equal(0); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowRight' }); expect(virtualScroller.scrollLeft).to.equal(100); }); 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 f5f8e93126a2..5c3bd5c7c0cc 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 @@ -1,8 +1,9 @@ import * as React from 'react'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGridPro, GridApi, useGridApiRef, GridColDef, gridClasses } from '@mui/x-data-grid-pro'; import { getActiveCell, getCell, getColumnHeaderCell } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -102,7 +103,7 @@ describe(' - Column spanning', () => { act(() => apiRef!.current.setColumnIndex('price', 1)); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); fireEvent.keyDown(getCell(1, 1), { key: 'ArrowRight' }); expect(getActiveCell()).to.equal('1-2'); }); 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 884c31719746..07d621dcb81c 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 @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils'; import { DataGridPro, DataGridProProps, @@ -121,7 +121,7 @@ describe(' - Columns visibility', () => { }); it('should not hide column when resizing a column after hiding it and showing it again', () => { - const { getByRole } = render( + render( - Columns visibility', () => { />, ); - const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' }); + const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' }); fireEvent.click(showHideAllCheckbox); expect(getColumnHeadersTextContent()).to.deep.equal([]); fireEvent.click(document.querySelector('[role="tooltip"] [name="id"]')!); 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 496505757760..0c5db66554ee 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 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, EventType, fireEvent, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, EventType, fireEvent } from '@mui/internal-test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { @@ -11,6 +11,7 @@ import { } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; import { getCell, getRow } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Components', () => { const { render } = createRenderer(); @@ -86,7 +87,7 @@ describe(' - Components', () => { expect(propHandler.callCount).to.equal(0); expect(eventHandler.callCount).to.equal(0); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); fireEvent.keyDown(getCell(0, 0)); expect(propHandler.callCount).to.equal(1); 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 e6aa9421dac8..29a8ffe8b2b9 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 @@ -11,15 +11,9 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, } from '@mui/x-data-grid-pro'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; -import { - createRenderer, - fireEvent, - screen, - waitFor, - act, - userEvent, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, waitFor, act } from '@mui/internal-test-utils'; import { $, $$, grid, getRow, getCell, getColumnValues, microtasks } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -228,7 +222,7 @@ describe(' - Detail panel', () => { />, ); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; - userEvent.mousePress(getCell(2, 1)); + fireUserEvent.mousePress(getCell(2, 1)); fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown' }); expect(virtualScroller.scrollTop).to.equal(0); fireEvent.keyDown(getCell(3, 1), { key: 'ArrowDown' }); @@ -259,7 +253,7 @@ describe(' - Detail panel', () => { const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowRight' }); virtualScroller.dispatchEvent(new Event('scroll')); @@ -278,7 +272,7 @@ describe(' - Detail panel', () => { render(
Detail
} />); expect(screen.queryByText('Detail')).to.equal(null); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: ' ' }); expect(screen.queryByText('Detail')).not.to.equal(null); fireEvent.keyDown(cell, { key: ' ' }); @@ -438,7 +432,7 @@ describe(' - Detail panel', () => { ); expect(screen.queryByText('Detail')).to.equal(null); const cell = getCell(1, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(handleRowSelectionModelChange.callCount).to.equal(0); }); @@ -514,7 +508,7 @@ describe(' - Detail panel', () => { />, ); - userEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]); + fireUserEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]); const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!; virtualScroller.scrollTop = 500; 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 016d93c357ef..4982b8f559b4 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 @@ -10,9 +10,10 @@ import { renderEditInputCell, renderEditSingleSelectCell, } from '@mui/x-data-grid-pro'; -import { act, createRenderer, fireEvent, screen, userEvent } from '@mui/internal-test-utils'; +import { act, createRenderer, fireEvent, screen } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { getCell, spyApi } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { spy, SinonSpy } from 'sinon'; /** @@ -571,7 +572,7 @@ describe(' - Edit components', () => { const cell = getCell(0, 0); fireEvent.doubleClick(cell); - userEvent.mousePress(document.getElementById('outside-grid')!); + fireUserEvent.mousePress(document.getElementById('outside-grid')!); await act(() => Promise.resolve()); expect(onCellEditStop.callCount).to.equal(1); @@ -590,7 +591,7 @@ describe(' - Edit components', () => { const cell = getCell(0, 0); fireEvent.doubleClick(cell); - userEvent.mousePress(screen.queryAllByRole('option')[1]); + fireUserEvent.mousePress(screen.queryAllByRole('option')[1]); clock.runToLast(); expect(screen.queryByRole('listbox')).to.equal(null); fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' }); 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 9818caf94205..3f9e9f9a36f6 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 @@ -1161,11 +1161,9 @@ describe(' - Filter', () => { openedPanelValue: GridPreferencePanelsValue.filters, }, }; - const { getAllByRole } = render( - , - ); + render(); // For JSDom, the first hidden combo is also found which we are not interested in - const select = getAllByRole('combobox', { name: 'Logic operator' })[isJSDOM ? 1 : 0]; + const select = screen.getAllByRole('combobox', { name: 'Logic operator' })[isJSDOM ? 1 : 0]; expect(select).not.to.have.class('Mui-disabled'); }); 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 ff073625b482..d469b0bb87a2 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 @@ -13,8 +13,9 @@ import { } from '@mui/x-data-grid-pro'; import Portal from '@mui/material/Portal'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { createRenderer, fireEvent, act, userEvent, screen } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils'; import { getCell, getRow, spyApi } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Row editing', () => { const { render, clock } = createRenderer(); @@ -780,7 +781,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(listener.lastCall.args[0].reason).to.equal('enterKeyDown'); }); @@ -790,7 +791,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(listener.callCount).to.equal(0); }); @@ -799,7 +800,7 @@ describe(' - Row editing', () => { render(); const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Enter' }); expect(spiedStartRowEditMode.callCount).to.equal(1); expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({ @@ -815,7 +816,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(listener.lastCall.args[0].reason).to.equal('deleteKeyDown'); }); @@ -825,7 +826,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(listener.callCount).to.equal(0); }); @@ -834,7 +835,7 @@ describe(' - Row editing', () => { render(); const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'Delete' }); expect(spiedStartRowEditMode.callCount).to.equal(1); expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({ @@ -851,7 +852,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); expect(listener.lastCall.args[0].reason).to.equal('printableKeyDown'); }); @@ -861,7 +862,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); expect(listener.callCount).to.equal(0); }); @@ -872,7 +873,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', [key]: true }); expect(listener.callCount).to.equal(0); }); @@ -883,7 +884,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a', shiftKey: true }); expect(listener.callCount).to.equal(1); }); @@ -893,7 +894,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: ' ' }); expect(listener.callCount).to.equal(0); }); @@ -903,7 +904,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStart', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'v', ctrlKey: true }); expect(listener.callCount).to.equal(1); }); @@ -912,7 +913,7 @@ describe(' - Row editing', () => { render(); const spiedStartRowEditMode = spyApi(apiRef.current, 'startRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); expect(spiedStartRowEditMode.callCount).to.equal(1); expect(spiedStartRowEditMode.lastCall.args[0]).to.deep.equal({ @@ -966,7 +967,7 @@ describe(' - Row editing', () => { apiRef.current.subscribeEvent('rowEditStop', listener); fireEvent.doubleClick(getCell(0, 1)); expect(listener.callCount).to.equal(0); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); expect(listener.lastCall.args[0].reason).to.equal('rowFocusOut'); }); @@ -986,7 +987,7 @@ describe(' - Row editing', () => { ); expect(listener.callCount).to.equal(0); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); expect(listener.callCount).to.equal(0); }); @@ -995,7 +996,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); fireEvent.doubleClick(getCell(0, 1)); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0]).to.deep.equal({ @@ -1014,7 +1015,7 @@ describe(' - Row editing', () => { act(() => { apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); }); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); clock.runToLast(); expect(spiedStopRowEditMode.callCount).to.equal(1); expect(spiedStopRowEditMode.lastCall.args[0].ignoreModifications).to.equal(false); @@ -1027,7 +1028,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' }); @@ -1057,7 +1058,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Escape' }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1076,7 +1077,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); @@ -1106,7 +1107,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Enter' }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1123,7 +1124,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); act(() => { apiRef.current.setEditCellValue({ id: 0, field: 'currencyPair', value: 'USD GBP' }); @@ -1140,7 +1141,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 2); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); @@ -1152,7 +1153,7 @@ describe(' - Row editing', () => { const listener = spy(); apiRef.current.subscribeEvent('rowEditStop', listener); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); expect(listener.callCount).to.equal(0); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true }); @@ -1163,7 +1164,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 2); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab' }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1179,7 +1180,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); fireEvent.keyDown(cell.querySelector('input')!, { key: 'Tab', shiftKey: true }); expect(spiedStopRowEditMode.callCount).to.equal(1); @@ -1196,7 +1197,7 @@ describe(' - Row editing', () => { render(); const spiedStopRowEditMode = spyApi(apiRef.current, 'stopRowEditMode'); const cell = getCell(0, 2); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.doubleClick(cell); await act(() => { apiRef.current.setEditCellValue({ id: 0, field: 'price1M', value: 'USD GBP' }); 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 bb57b3b1aad8..c4ca6ea072b6 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 @@ -11,14 +11,7 @@ import { GridColDef, } from '@mui/x-data-grid-pro'; import { getBasicGridData } from '@mui/x-data-grid-generator'; -import { - createRenderer, - fireEvent, - screen, - act, - userEvent, - waitFor, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils'; import { $, grid, @@ -30,6 +23,7 @@ import { getRows, microtasks, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -368,7 +362,7 @@ describe(' - Row pinning', () => { expect(isRowPinned(getRowById(1), 'top')).to.equal(true, '#1 pinned top'); expect(isRowPinned(getRowById(0), 'top')).to.equal(true, '#0 pinned top'); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); // first top pinned row expect(getActiveCellRowId()).to.equal('1'); @@ -410,7 +404,7 @@ describe(' - Row pinning', () => { expect(isRowPinned(getRowById(0), 'bottom')).to.equal(true, '#0 pinned top'); expect(isRowPinned(getRowById(1), 'bottom')).to.equal(true, '#1 pinned top'); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getActiveCellRowId()).to.equal('2'); fireEvent.keyDown(getCell(0, 0), { key: 'ArrowDown' }); @@ -462,7 +456,7 @@ describe(' - Row pinning', () => { expect(isRowPinned(getRowById(0), 'bottom')).to.equal(true, '#0 pinned bottom'); // top-pinned row - userEvent.mousePress(getCell(0, 3)); + fireUserEvent.mousePress(getCell(0, 3)); expect(getActiveCell()).to.equal('0-3'); expect(getActiveCellRowId()).to.equal('1'); @@ -887,7 +881,7 @@ describe(' - Row pinning', () => { await waitFor(() => { expect(getCell(0, 1).textContent).to.equal('Marcus'); - expect(getCell(4, 1).textContent).to.equal('Tom'); }); + expect(getCell(4, 1).textContent).to.equal('Tom'); }); }); 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 8e24fde92b3b..3fa3aec057dd 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 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, act } from '@mui/internal-test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { @@ -13,6 +13,7 @@ import { getRows, getColumnHeaderCell, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { GridRowModel, useGridApiRef, @@ -766,7 +767,7 @@ describe(' - Rows', () => { it('should focus the clicked cell in the state', () => { render(); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(apiRef.current.state.focus.cell).to.deep.equal({ id: baselineProps.rows[0].id, field: baselineProps.columns[0].field, @@ -784,7 +785,7 @@ describe(' - Rows', () => { it('should not reset focus when removing a row not containing the focus cell', () => { const { setProps } = render(); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); setProps({ rows: baselineProps.rows.slice(1) }); expect(gridFocusCellSelector(apiRef)).to.deep.equal({ id: baselineProps.rows[1].id, @@ -795,7 +796,7 @@ describe(' - Rows', () => { it('should set the focus when pressing a key inside a cell', () => { render(); const cell = getCell(1, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'a' }); expect(gridFocusCellSelector(apiRef)).to.deep.equal({ id: baselineProps.rows[1].id, @@ -805,12 +806,12 @@ describe(' - Rows', () => { it('should update the focus when clicking from one cell to another', () => { render(); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); expect(gridFocusCellSelector(apiRef)).to.deep.equal({ id: baselineProps.rows[1].id, field: baselineProps.columns[0].field, }); - userEvent.mousePress(getCell(2, 1)); + fireUserEvent.mousePress(getCell(2, 1)); expect(gridFocusCellSelector(apiRef)).to.deep.equal({ id: baselineProps.rows[2].id, field: baselineProps.columns[1].field, @@ -819,12 +820,12 @@ describe(' - Rows', () => { it('should reset focus when clicking outside the focused cell', () => { render(); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); expect(gridFocusCellSelector(apiRef)).to.deep.equal({ id: baselineProps.rows[1].id, field: baselineProps.columns[0].field, }); - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(gridFocusCellSelector(apiRef)).to.deep.equal(null); }); @@ -832,9 +833,9 @@ describe(' - Rows', () => { const handleCellFocusOut = spy(); render(); apiRef.current.subscribeEvent('cellFocusOut', handleCellFocusOut); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); expect(handleCellFocusOut.callCount).to.equal(0); - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(handleCellFocusOut.callCount).to.equal(1); expect(handleCellFocusOut.args[0][0].id).to.equal(baselineProps.rows[1].id); expect(handleCellFocusOut.args[0][0].field).to.equal(baselineProps.columns[0].field); @@ -851,7 +852,7 @@ describe(' - Rows', () => { />, ); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); }).not.to.throw(); }); @@ -877,7 +878,7 @@ describe(' - Rows', () => { />, ); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const columnHeaderCell = getColumnHeaderCell(0); fireEvent.focus(columnHeaderCell); }).not.to.throw(); 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 12260bda0f58..a4c2c120e273 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 @@ -1,4 +1,4 @@ -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils'; import { getCell, getColumnHeaderCell, @@ -6,6 +6,7 @@ import { getColumnValues, getRow, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; @@ -399,7 +400,7 @@ describe(' - Tree data', () => { it('should toggle expansion when pressing Space while focusing grouping column', () => { render(); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getColumnValues(1)).to.deep.equal(['A', 'B', 'C']); fireEvent.keyDown(getCell(0, 0), { key: ' ' }); expect(getColumnValues(1)).to.deep.equal(['A', 'A.A', 'A.B', 'B', 'C']); diff --git a/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx index 91eec8720b13..61c3a5b0f72d 100644 --- a/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/cells.DataGrid.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { spy } from 'sinon'; -import { createRenderer, fireEvent, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid, GridValueFormatter } from '@mui/x-data-grid'; import { getCell } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { getBasicGridData } from '@mui/x-data-grid-generator'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -180,7 +181,7 @@ describe(' - Cells', () => { , ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(() => { getCell(1, 0).focus(); @@ -203,7 +204,7 @@ describe(' - Cells', () => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; const cell = getCell(1, 3); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const activeElementTextContent = document.activeElement?.textContent; const columnWidth = document.activeElement!.clientWidth; @@ -240,7 +241,7 @@ describe(' - Cells', () => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; const thirdRowCell = getCell(2, 0); - userEvent.mousePress(thirdRowCell); + fireUserEvent.mousePress(thirdRowCell); let scrollTop = 6 * rowHeight; virtualScroller.scrollTop = scrollTop; diff --git a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx index 47e091416795..0d8a7c325d47 100644 --- a/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, within } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid } from '@mui/x-data-grid'; import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -123,11 +124,11 @@ describe(' - Column headers', () => { , ); - userEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu')); + fireUserEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu')); clock.runToLast(); expect(screen.queryByRole('menu')).not.to.equal(null); - userEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu')); + fireUserEvent.mousePress(within(getColumnHeaderCell(0)).getByLabelText('Menu')); clock.runToLast(); expect(screen.queryByRole('menu')).to.equal(null); }); diff --git a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx index eaada2a7f132..b326949ee1d7 100644 --- a/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnSpanning.DataGrid.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, within, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, within } from '@mui/internal-test-utils'; import { expect } from 'chai'; import { DataGrid, gridClasses, GridColDef } from '@mui/x-data-grid'; import { getCell, getActiveCell, getColumnHeaderCell } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -125,7 +126,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getActiveCell()).to.equal('0-0'); fireEvent.keyDown(getCell(0, 0), { key: 'ArrowRight' }); @@ -139,7 +140,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 2)); + fireUserEvent.mousePress(getCell(0, 2)); expect(getActiveCell()).to.equal('0-2'); fireEvent.keyDown(getCell(0, 2), { key: 'ArrowLeft' }); @@ -153,7 +154,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(getCell(1, 1), { key: 'ArrowUp' }); @@ -167,7 +168,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(1, 3)); + fireUserEvent.mousePress(getCell(1, 3)); expect(getActiveCell()).to.equal('1-3'); fireEvent.keyDown(getCell(1, 3), { key: 'ArrowDown' }); @@ -186,7 +187,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 3)); + fireUserEvent.mousePress(getCell(0, 3)); expect(getActiveCell()).to.equal('0-3'); fireEvent.keyDown(getCell(0, 3), { key: 'PageDown' }); @@ -200,7 +201,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(2, 1)); + fireUserEvent.mousePress(getCell(2, 1)); expect(getActiveCell()).to.equal('2-1'); fireEvent.keyDown(getCell(2, 1), { key: 'PageUp' }); @@ -220,7 +221,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(1, 3)); + fireUserEvent.mousePress(getCell(1, 3)); expect(getActiveCell()).to.equal('1-3'); // start editing @@ -239,7 +240,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(getActiveCell()).to.equal('1-1'); // start editing @@ -257,7 +258,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 2)); + fireUserEvent.mousePress(getCell(0, 2)); expect(getActiveCell()).to.equal('0-2'); // start editing @@ -318,7 +319,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(getCell(1, 1), { key: 'ArrowDown' }); @@ -352,7 +353,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); fireEvent.keyDown(getCell(0, 0), { key: 'ArrowRight' }); document.querySelector(`.${gridClasses.virtualScroller}`)!.dispatchEvent(new Event('scroll')); @@ -428,7 +429,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getActiveCell()).to.equal('0-0'); fireEvent.keyDown(getCell(0, 0), { key: 'ArrowDown' }); @@ -459,7 +460,7 @@ describe(' - Column spanning', () => { , ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); const virtualScroller = document.querySelector( `.${gridClasses.virtualScroller}`, diff --git a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx index 3771593c4f90..0adf925558ef 100644 --- a/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/columnsVisibility.DataGrid.test.tsx @@ -126,12 +126,12 @@ describe(' - Columns visibility', () => { /> ); } - const { getByRole } = render(); + render(); expect(getColumnHeadersTextContent()).to.deep.equal(['id']); - fireEvent.click(getByRole('button', { name: 'Select columns' })); - const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' }); + fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); + const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' }); // Hide all fireEvent.click(showHideAllCheckbox); @@ -149,7 +149,7 @@ describe(' - Columns visibility', () => { // Fixes (1) and (2) in https://github.com/mui/mui-x/issues/7393#issuecomment-1372129661 it('should not show hidden non hideable columns when "Show/Hide All" is clicked', () => { - const { getByRole } = render( + render( - Columns visibility', () => { />, ); - fireEvent.click(getByRole('button', { name: 'Select columns' })); - const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' }); + fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); + const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' }); // Hide all fireEvent.click(showHideAllCheckbox); expect(getColumnHeadersTextContent()).to.deep.equal([]); @@ -267,7 +267,7 @@ describe(' - Columns visibility', () => { }); it('should hide `Show/Hide all` in columns management when `disableShowHideToggle` is `true`', () => { - const { setProps, getByRole, queryByRole } = render( + const { setProps } = render( - Columns visibility', () => { fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); // check if `Show/Hide all` checkbox is present initially - expect(getByRole('checkbox', { name: 'Show/Hide All' })).not.to.equal(null); + expect(screen.getByRole('checkbox', { name: 'Show/Hide All' })).not.to.equal(null); setProps({ slotProps: { columnsManagement: { @@ -287,11 +287,11 @@ describe(' - Columns visibility', () => { }); // check if `Show/Hide All` checkbox is not present after setting `slotProps` - expect(queryByRole('checkbox', { name: 'Show/Hide All' })).to.equal(null); + expect(screen.queryByRole('checkbox', { name: 'Show/Hide All' })).to.equal(null); }); it('should hide `Reset` in columns panel when `disableResetButton` is `true`', () => { - const { setProps, getByRole, queryByRole } = render( + const { setProps } = render( - Columns visibility', () => { fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); // check if Reset button is present initially - expect(getByRole('button', { name: 'Reset' })).not.to.equal(null); + expect(screen.getByRole('button', { name: 'Reset' })).not.to.equal(null); setProps({ slotProps: { columnsManagement: { @@ -310,11 +310,11 @@ describe(' - Columns visibility', () => { }, }); // check if Reset button is not present after setting slotProps - expect(queryByRole('button', { name: 'Reset' })).to.equal(null); + expect(screen.queryByRole('button', { name: 'Reset' })).to.equal(null); }); it('should reset the columns to initial columns state when `Reset` button is clicked in columns management panel', () => { - const { getByRole } = render( + render( - Columns visibility', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'idBis']); fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); - const resetButton = getByRole('button', { name: 'Reset' }); + const resetButton = screen.getByRole('button', { name: 'Reset' }); expect(resetButton).to.have.attribute('disabled'); // Hide `idBis` column @@ -363,7 +363,7 @@ describe(' - Columns visibility', () => { it('should avoid toggling columns provided by `getTogglableColumns` prop on `Show/Hide All`', () => { const getTogglableColumns = (cols: GridColDef[]) => cols.filter((column) => column.field !== 'idBis').map((column) => column.field); - const { getByRole } = render( + render( - Columns visibility', () => { />, ); - fireEvent.click(getByRole('button', { name: 'Select columns' })); - const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' }); + fireEvent.click(screen.getByRole('button', { name: 'Select columns' })); + const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' }); fireEvent.click(showHideAllCheckbox); expect(getColumnHeadersTextContent()).to.deep.equal(['idBis']); diff --git a/packages/x-data-grid/src/tests/density.DataGrid.test.tsx b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx index e1a2e2b3148f..aaad84e1c4fe 100644 --- a/packages/x-data-grid/src/tests/density.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/density.DataGrid.test.tsx @@ -106,13 +106,13 @@ describe(' - Density', () => { ); } - const { setProps, getByText } = render(); + const { setProps } = render(); expectHeight(rowHeight); - fireEvent.click(getByText('Density')); + fireEvent.click(screen.getByText('Density')); clock.tick(100); - fireEvent.click(getByText('Compact')); + fireEvent.click(screen.getByText('Compact')); // Not updated because of the controlled prop expectHeight(rowHeight); @@ -138,9 +138,9 @@ describe(' - Density', () => { ); } - const { getByText } = render(); - fireEvent.click(getByText('Density')); - fireEvent.click(getByText('Comfortable')); + render(); + fireEvent.click(screen.getByText('Density')); + fireEvent.click(screen.getByText('Comfortable')); expect(onDensityChange.callCount).to.equal(1); expect(onDensityChange.firstCall.args[0]).to.equal('comfortable'); }); @@ -149,7 +149,7 @@ describe(' - Density', () => { describe('density selection menu', () => { it('should increase grid density when selecting compact density', () => { const rowHeight = 30; - const { getByText } = render( + render(
- Density', () => {
, ); - fireEvent.click(getByText('Density')); + fireEvent.click(screen.getByText('Density')); clock.tick(100); - fireEvent.click(getByText('Compact')); + fireEvent.click(screen.getByText('Compact')); expectHeight(rowHeight * COMPACT_DENSITY_FACTOR); }); it('should decrease grid density when selecting comfortable density', () => { const rowHeight = 30; - const { getByText } = render( + render(
- Density', () => {
, ); - fireEvent.click(getByText('Density')); - fireEvent.click(getByText('Comfortable')); + fireEvent.click(screen.getByText('Density')); + fireEvent.click(screen.getByText('Comfortable')); expectHeight(rowHeight * COMFORTABLE_DENSITY_FACTOR); }); diff --git a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx index 27c196256ecd..c27dbaf58942 100644 --- a/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/keyboard.DataGrid.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createRenderer, fireEvent, screen, act, userEvent } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act } from '@mui/internal-test-utils'; import { spy } from 'sinon'; import { expect } from 'chai'; import { @@ -10,6 +10,7 @@ import { getColumnValues, getRow, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { DataGrid, DataGridProps, @@ -74,7 +75,7 @@ describe(' - Keyboard', () => { it('should move to cell below when pressing "ArrowDown" on a cell on the 1st page', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' }); expect(getActiveCell()).to.equal('9-1'); @@ -85,7 +86,7 @@ describe(' - Keyboard', () => { it('should move to cell below when pressing "ArrowDown" on a cell on the 2nd page', () => { render(); const cell = getCell(18, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('18-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' }); expect(getActiveCell()).to.equal('19-1'); @@ -96,7 +97,7 @@ describe(' - Keyboard', () => { it('should move to the cell below when pressing "ArrowDown" on the checkbox selection cell', () => { render(); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('0-0'); fireEvent.keyDown(cell.querySelector('input')!, { key: 'ArrowDown' }); expect(getActiveCell()).to.equal('1-0'); @@ -107,7 +108,7 @@ describe(' - Keyboard', () => { it('should move to the cell above when pressing "ArrowUp" on a cell on the 1st page', () => { render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' }); expect(getActiveCell()).to.equal('0-1'); @@ -118,7 +119,7 @@ describe(' - Keyboard', () => { it('should move to the cell above when pressing "ArrowUp" on a cell on the 2nd page', () => { render(); const cell = getCell(11, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('11-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' }); expect(getActiveCell()).to.equal('10-1'); @@ -129,7 +130,7 @@ describe(' - Keyboard', () => { it('should move to the cell right when pressing "ArrowRight" on a cell', () => { render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' }); expect(getActiveCell()).to.equal('1-2'); @@ -140,7 +141,7 @@ describe(' - Keyboard', () => { it('should move to the cell right when pressing "ArrowRight" on the checkbox selection cell', () => { render(); const cell = getCell(1, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-0'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowRight' }); expect(getActiveCell()).to.equal('1-1'); @@ -149,7 +150,7 @@ describe(' - Keyboard', () => { it('should move to the cell left when pressing "ArrowLeft" on a cell', () => { render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(document.activeElement!, { key: 'ArrowLeft' }); expect(getActiveCell()).to.equal('1-0'); @@ -165,7 +166,7 @@ describe(' - Keyboard', () => { render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(document.activeElement!, { key: 'PageDown' }); expect(getActiveCell()).to.equal(`6-1`); @@ -181,7 +182,7 @@ describe(' - Keyboard', () => { render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('1-1'); fireEvent.keyDown(document.activeElement!, { key: 'PageDown' }); expect(getActiveCell()).to.equal(`6-1`); @@ -197,7 +198,7 @@ describe(' - Keyboard', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'PageUp' }); expect(getActiveCell()).to.equal(`3-1`); @@ -211,7 +212,7 @@ describe(' - Keyboard', () => { render(); const cell = getCell(3, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('3-1'); fireEvent.keyDown(document.activeElement!, { key: 'PageUp' }); @@ -233,7 +234,7 @@ describe(' - Keyboard', () => { fireEvent.click(screen.getByRole('button', { name: /next page/i })); const cell = getCell(13, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('13-1'); fireEvent.keyDown(document.activeElement!, { key: 'PageUp' }); @@ -247,7 +248,7 @@ describe(' - Keyboard', () => { it('should navigate to the 1st cell of the current row when pressing "Home"', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'Home' }); expect(getActiveCell()).to.equal('8-0'); @@ -259,17 +260,17 @@ describe(' - Keyboard', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'Home', ctrlKey: true }); expect(getActiveCell()).to.equal('0-0'); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'Home', metaKey: true }); expect(getActiveCell()).to.equal('0-0'); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'Home', shiftKey: true }); expect(getActiveCell()).to.equal('0-0'); @@ -278,7 +279,7 @@ describe(' - Keyboard', () => { it('should navigate to the last cell of the current row when pressing "End"', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(cell, { key: 'End' }); expect(getActiveCell()).to.equal('8-2'); @@ -290,17 +291,17 @@ describe(' - Keyboard', () => { render(); const cell = getCell(8, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'End', ctrlKey: true }); expect(getActiveCell()).to.equal('9-2'); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'End', metaKey: true }); expect(getActiveCell()).to.equal('9-2'); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('8-1'); fireEvent.keyDown(document.activeElement!, { key: 'End', shiftKey: true }); expect(getActiveCell()).to.equal('9-2'); @@ -404,7 +405,7 @@ describe(' - Keyboard', () => { getColumnHeaderCell(1).querySelector(`button[title="Sort"]`)!; // Simulate click on this button - userEvent.mousePress(columnMenuButton); + fireUserEvent.mousePress(columnMenuButton); columnMenuButton.focus(); fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' }); @@ -434,7 +435,7 @@ describe(' - Keyboard', () => { , ); const input = screen.getByTestId('custom-input'); - userEvent.mousePress(input); + fireUserEvent.mousePress(input); input.focus(); // Verify that the event is not prevented during the bubbling. @@ -632,7 +633,7 @@ describe(' - Keyboard', () => { , ); const firstCell = getCell(0, 0); - userEvent.mousePress(firstCell); + fireUserEvent.mousePress(firstCell); fireEvent.keyDown(firstCell, { key: 'ArrowRight' }); expect(handleKeyDown.returnValues).to.deep.equal([true]); }); @@ -675,7 +676,7 @@ describe(' - Keyboard', () => { it('should select a row when pressing Space key + shiftKey', () => { render(); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); expect(getActiveCell()).to.equal('0-0'); fireEvent.keyDown(cell, { key: ' ', shiftKey: true }); const row = getRow(0); @@ -715,7 +716,7 @@ describe(' - Keyboard', () => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; const firstCell = getCell(0, 0); - userEvent.mousePress(firstCell); + fireUserEvent.mousePress(firstCell); expect(virtualScroller.scrollLeft).to.equal(0); fireEvent.keyDown(firstCell, { key: 'ArrowDown' }); @@ -747,7 +748,7 @@ describe(' - Keyboard', () => { ); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); expect(getActiveCell()).to.equal(`0-0`); @@ -781,7 +782,7 @@ describe(' - Keyboard', () => { ); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); expect(getActiveCell()).to.equal(`0-0`); @@ -815,7 +816,7 @@ describe(' - Keyboard', () => { ); const cell = getCell(0, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); expect(getActiveCell()).to.equal(`0-0`); 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 4f003a354866..b9840172ee73 100644 --- a/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/layout.DataGrid.test.tsx @@ -277,13 +277,13 @@ describe(' - Layout & warnings', () => { }, ]; - const { getAllByRole } = render( + render(
, ); - getAllByRole('columnheader').forEach((col: HTMLElement) => { + screen.getAllByRole('columnheader').forEach((col: HTMLElement) => { expect(col).toHaveInlineStyle({ width: '100px' }); }); }); @@ -313,13 +313,13 @@ describe(' - Layout & warnings', () => { }, ]; - const { getAllByRole } = render( + render(
, ); - getAllByRole('columnheader').forEach((col: HTMLElement, index: number) => { + screen.getAllByRole('columnheader').forEach((col: HTMLElement, index: number) => { expect(col).toHaveInlineStyle({ width: `${colWidthValues[index]}px` }); }); }); @@ -887,7 +887,7 @@ describe(' - Layout & warnings', () => { describe('localeText', () => { it('should replace the density selector button label text to "Size"', () => { - const { getByText } = render( + render(
- Layout & warnings', () => {
, ); - expect(getByText('Size')).not.to.equal(null); + expect(screen.getByText('Size')).not.to.equal(null); }); it('should support translations in the theme', () => { @@ -927,23 +927,21 @@ describe(' - Layout & warnings', () => { ); } - const { setProps, getByText } = render( - , - ); - expect(getByText('Density')).not.to.equal(null); + const { setProps } = render(); + expect(screen.getByText('Density')).not.to.equal(null); setProps({ localeText: { toolbarDensity: 'Densidade' } }); - expect(getByText('Densidade')).not.to.equal(null); + expect(screen.getByText('Densidade')).not.to.equal(null); }); }); describe('non-strict mode', () => { - const renderer = createRenderer({ strict: false }); + const { render: innerRender } = createRenderer({ strict: false }); it('should render in JSDOM', function test() { if (!/jsdom/.test(window.navigator.userAgent)) { this.skip(); // Only run in JSDOM } - renderer.render( + innerRender(
, 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 15693031a3be..94421d70f768 100644 --- a/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy, stub, SinonStub, SinonSpy } from 'sinon'; import { expect } from 'chai'; -import { createRenderer, fireEvent, screen, userEvent, waitFor } from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, waitFor } from '@mui/internal-test-utils'; import { DataGrid, DataGridProps, @@ -13,6 +13,7 @@ import { } from '@mui/x-data-grid'; import { useBasicDemoData } from '@mui/x-data-grid-generator'; import { getCell, getColumnValues, getRows } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -631,7 +632,7 @@ describe(' - Pagination', () => { pageSizeOptions={[1]} />, ); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); fireEvent.click(screen.getByRole('button', { name: /next page/i })); expect(getCell(1, 0)).to.have.attr('tabindex', '0'); }); diff --git a/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx index dec971998713..44d608d5602f 100644 --- a/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/quickFiltering.DataGrid.test.tsx @@ -480,23 +480,27 @@ describe(' - Quick filter', () => { } it('should not ignore diacritics by default', () => { - let renderer = render(); + const { unmount } = render(); expect(getColumnValues(0)).to.deep.equal([]); - renderer.unmount(); + unmount(); - renderer = render(); + const { unmount: unmount2 } = render(); expect(getColumnValues(0)).to.deep.equal(['Apă']); - renderer.unmount(); + unmount2(); }); it('should ignore diacritics when `ignoreDiacritics` is enabled', () => { - let renderer = render(); + const { unmount } = render( + , + ); expect(getColumnValues(0)).to.deep.equal(['Apă']); - renderer.unmount(); + unmount(); - renderer = render(); + const { unmount: unmount2 } = render( + , + ); expect(getColumnValues(0)).to.deep.equal(['Apă']); - renderer.unmount(); + unmount2(); }); }); }); 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 f01954e76a1f..23f1c8f406d2 100644 --- a/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx @@ -1,14 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { - createRenderer, - fireEvent, - screen, - act, - userEvent, - waitFor, -} from '@mui/internal-test-utils'; +import { createRenderer, fireEvent, screen, act, waitFor } from '@mui/internal-test-utils'; import { DataGrid, DataGridProps, @@ -28,6 +21,7 @@ import { getActiveCell, grid, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { getBasicGridData } from '@mui/x-data-grid-generator'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -67,9 +61,9 @@ describe(' - Row selection', () => { describe('prop: checkboxSelection = false (single selection)', () => { it('should select one row at a time on click WITHOUT ctrl or meta pressed', () => { render(); - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getSelectedRowIds()).to.deep.equal([0]); - userEvent.mousePress(getCell(1, 0)); + fireUserEvent.mousePress(getCell(1, 0)); expect(getSelectedRowIds()).to.deep.equal([1]); }); @@ -113,12 +107,12 @@ describe(' - Row selection', () => { render(); const cell0 = getCell(0, 0); - userEvent.mousePress(cell0); + fireUserEvent.mousePress(cell0); fireEvent.keyDown(cell0, { key: ' ', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0]); const cell1 = getCell(1, 0); - userEvent.mousePress(cell1); + fireUserEvent.mousePress(cell1); fireEvent.keyDown(cell1, { key: ' ', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([1]); }); @@ -144,7 +138,7 @@ describe(' - Row selection', () => { expect(onCellEditStart.callCount).to.equal(0); const cell01 = getCell(0, 1); - userEvent.mousePress(cell01); + fireUserEvent.mousePress(cell01); fireEvent.keyDown(cell01, { key: ' ', shiftKey: true }); @@ -152,7 +146,7 @@ describe(' - Row selection', () => { expect(getSelectedRowIds()).to.deep.equal([0]); const cell11 = getCell(1, 1); - userEvent.mousePress(cell11); + fireUserEvent.mousePress(cell11); fireEvent.keyDown(cell11, { key: ' ', shiftKey: true }); expect(onCellEditStart.callCount).to.equal(0); @@ -163,7 +157,7 @@ describe(' - Row selection', () => { it(`should deselect the selected row on Shift + Space`, () => { render(); const cell00 = getCell(0, 0); - userEvent.mousePress(cell00); + fireUserEvent.mousePress(cell00); fireEvent.keyDown(cell00, { key: ' ', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0]); @@ -175,7 +169,7 @@ describe(' - Row selection', () => { it('should not select a range with shift pressed', () => { render(); const cell00 = getCell(0, 0); - userEvent.mousePress(cell00); + fireUserEvent.mousePress(cell00); fireEvent.keyDown(cell00, { key: ' ', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([0]); @@ -234,7 +228,7 @@ describe(' - Row selection', () => { // simulate click const checkboxInput = getCell(0, 0).querySelector('input'); - userEvent.mousePress(checkboxInput!); + fireUserEvent.mousePress(checkboxInput!); expect(getActiveCell()).to.equal('0-0'); }); @@ -380,8 +374,8 @@ describe(' - Row selection', () => { fireEvent.click(selectAllCheckbox); await waitFor(() => { expect(getSelectedRowIds()).to.deep.equal([0, 1, 2, 3]); - expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); }); + expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); fireEvent.change(screen.getByRole('spinbutton', { name: 'Value' }), { target: { value: 1 }, @@ -389,27 +383,27 @@ describe(' - Row selection', () => { await waitFor(() => { // Previous selection remains, but only one row is visible expect(getSelectedRowIds()).to.deep.equal([1]); - expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); }); + expect(grid('selectedRowCount')?.textContent).to.equal('4 rows selected'); fireEvent.click(selectAllCheckbox); // Unselect all await waitFor(() => { expect(getSelectedRowIds()).to.deep.equal([]); - expect(grid('selectedRowCount')).to.equal(null); }); + expect(grid('selectedRowCount')).to.equal(null); fireEvent.click(selectAllCheckbox); // Select all filtered rows await waitFor(() => { expect(getSelectedRowIds()).to.deep.equal([1]); - expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected'); }); + expect(grid('selectedRowCount')?.textContent).to.equal('1 row selected'); }); }); describe('prop: checkboxSelection = true (multi selection), with keyboard events', () => { it('should select row below when pressing "ArrowDown" + shiftKey', () => { render(); - userEvent.mousePress(getCell(2, 1)); + fireUserEvent.mousePress(getCell(2, 1)); expect(getSelectedRowIds()).to.deep.equal([2]); fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([2, 3]); @@ -419,10 +413,10 @@ describe(' - Row selection', () => { it('should unselect previous row when pressing "ArrowDown" + shiftKey', () => { render(); - userEvent.mousePress(getCell(3, 1)); + fireUserEvent.mousePress(getCell(3, 1)); expect(getSelectedRowIds()).to.deep.equal([3]); - userEvent.mousePress(getCell(1, 1), { shiftKey: true }); + fireUserEvent.mousePress(getCell(1, 1), { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]); fireEvent.keyDown(getCell(1, 1), { key: 'ArrowDown', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([2, 3]); @@ -430,9 +424,9 @@ describe(' - Row selection', () => { it('should not unselect row above when pressing "ArrowDown" + shiftKey', () => { render(); - userEvent.mousePress(getCell(1, 1)); + fireUserEvent.mousePress(getCell(1, 1)); expect(getSelectedRowIds()).to.deep.equal([1]); - userEvent.mousePress(getCell(2, 1), { shiftKey: true }); + fireUserEvent.mousePress(getCell(2, 1), { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([1, 2]); fireEvent.keyDown(getCell(2, 1), { key: 'ArrowDown', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([1, 2, 3]); @@ -442,9 +436,9 @@ describe(' - Row selection', () => { it('should unselect previous row when pressing "ArrowUp" + shiftKey', () => { render(); - userEvent.mousePress(getCell(2, 1)); + fireUserEvent.mousePress(getCell(2, 1)); expect(getSelectedRowIds()).to.deep.equal([2]); - userEvent.mousePress(getCell(3, 1), { shiftKey: true }); + fireUserEvent.mousePress(getCell(3, 1), { shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([2, 3]); fireEvent.keyDown(getCell(3, 1), { key: 'ArrowUp', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([2]); @@ -456,7 +450,7 @@ describe(' - Row selection', () => { expect(getSelectedRowIds()).to.deep.equal([]); const cell21 = getCell(2, 1); - userEvent.mousePress(cell21); + fireUserEvent.mousePress(cell21); fireEvent.keyDown(cell21, { key: ' ', shiftKey: true, @@ -465,7 +459,7 @@ describe(' - Row selection', () => { expect(getSelectedRowIds()).to.deep.equal([2]); const cell11 = getCell(1, 1); - userEvent.mousePress(cell11); + fireUserEvent.mousePress(cell11); fireEvent.keyDown(cell11, { key: ' ', shiftKey: true, @@ -480,7 +474,7 @@ describe(' - Row selection', () => { const data = getBasicGridData(20, 1); render(); const checkboxes = screen.queryAllByRole('checkbox', { name: /select row/i }); - userEvent.mousePress(checkboxes[0]); + fireUserEvent.mousePress(checkboxes[0]); expect(checkboxes[0]).toHaveFocus(); fireEvent.keyDown(checkboxes[0], { key: 'ArrowDown' }); fireEvent.keyDown(checkboxes[1], { key: 'ArrowDown' }); @@ -500,7 +494,7 @@ describe(' - Row selection', () => { expect(checkboxCell).to.have.attribute('tabindex', '-1'); expect(secondCell).to.have.attribute('tabindex', '-1'); - userEvent.mousePress(secondCell); + fireUserEvent.mousePress(secondCell); expect(secondCell).to.have.attribute('tabindex', '0'); fireEvent.keyDown(secondCell, { key: 'ArrowLeft' }); @@ -541,7 +535,7 @@ describe(' - Row selection', () => { } render(); const cell = getCell(1, 1); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); fireEvent.keyDown(cell, { key: 'ArrowLeft' }); fireEvent.keyDown(getCell(1, 0).querySelector('input')!, { key: 'ArrowUp' }); clock.runToLast(); // Wait for transition @@ -826,7 +820,7 @@ describe(' - Row selection', () => { it('should not select rows with Shift + Space', () => { render(); const cell0 = getCell(0, 0); - userEvent.mousePress(cell0); + fireUserEvent.mousePress(cell0); fireEvent.keyDown(cell0, { key: ' ', shiftKey: true }); expect(getSelectedRowIds()).to.deep.equal([]); }); @@ -842,7 +836,7 @@ describe(' - Row selection', () => { render(); // Select the first row - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); expect(getRow(0).getAttribute('aria-selected')).to.equal('true'); expect(getRow(1).getAttribute('aria-selected')).to.equal('false'); }); @@ -852,7 +846,7 @@ describe(' - Row selection', () => { expect(getRow(0).getAttribute('aria-selected')).to.equal(null); // Try to select the first row - userEvent.mousePress(getCell(0, 0)); + fireUserEvent.mousePress(getCell(0, 0)); // nothing should change expect(getRow(0).getAttribute('aria-selected')).to.equal(null); }); 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 4cc711d37821..2efc26c7c9c3 100644 --- a/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rows.DataGrid.test.tsx @@ -4,7 +4,6 @@ import { fireEvent, screen, act, - userEvent, ErrorBoundary, waitFor, } from '@mui/internal-test-utils'; @@ -33,6 +32,7 @@ import { getCell, microtasks, } from 'test/utils/helperFn'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import Dialog from '@mui/material/Dialog'; import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/densitySelector'; @@ -374,7 +374,7 @@ describe(' - Rows', () => { />, ); const moreButton = screen.getByRole('menuitem', { name: 'more' }); - userEvent.mousePress(moreButton); + fireUserEvent.mousePress(moreButton); await waitFor(() => { const printButton = screen.queryByRole('menuitem', { name: 'print' }); @@ -1146,7 +1146,7 @@ describe(' - Rows', () => { ); const cell = getCell(0, 0); - userEvent.mousePress(cell); + fireUserEvent.mousePress(cell); const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!; virtualScroller.scrollTop = 1000; 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 4fec48edbd18..59bd49145729 100644 --- a/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/sorting.DataGrid.test.tsx @@ -714,9 +714,9 @@ describe(' - Sorting', () => { setProps({ columns: [{ field: 'id' }] }); await waitFor(() => { expect(getColumnValues(0)).to.deep.equal(['0', '1', '2']); - expect(onSortModelChange.callCount).to.equal(1); - expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]); }); + expect(onSortModelChange.callCount).to.equal(1); + expect(onSortModelChange.lastCall.firstArg).to.deep.equal([]); }); // See https://github.com/mui/mui-x/issues/9204 @@ -749,8 +749,8 @@ describe(' - Sorting', () => { setProps({ columns: [{ field: 'id' }], sortModel: [{ field: 'id', sort: 'desc' }] }); await waitFor(() => { expect(getColumnValues(0)).to.deep.equal(['2', '1', '0']); - expect(onSortModelChange.callCount).to.equal(0); }); + expect(onSortModelChange.callCount).to.equal(0); }); describe('getSortComparator', () => { diff --git a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx index 12e1c495bd55..92cea1015317 100644 --- a/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/toolbar.DataGrid.test.tsx @@ -37,7 +37,7 @@ describe(' - Toolbar', () => { describe('column selector', () => { it('should hide "id" column when hiding it from the column selector', () => { - const { getByText } = render( + render(
- Toolbar', () => { expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']); - fireEvent.click(getByText('Columns')); + fireEvent.click(screen.getByText('Columns')); fireEvent.click(screen.getByRole('tooltip').querySelector('[name="id"]')!); expect(getColumnHeadersTextContent()).to.deep.equal(['brand']); @@ -66,7 +66,7 @@ describe(' - Toolbar', () => { }, ]; - const { getByText, getByRole } = render( + render(
- Toolbar', () => {
, ); - fireEvent.click(getByText('Columns')); - const showHideAllCheckbox = getByRole('checkbox', { name: 'Show/Hide All' }); + fireEvent.click(screen.getByText('Columns')); + const showHideAllCheckbox = screen.getByRole('checkbox', { name: 'Show/Hide All' }); fireEvent.click(showHideAllCheckbox); expect(getColumnHeadersTextContent()).to.deep.equal(['id', 'brand']); fireEvent.click(showHideAllCheckbox); @@ -135,7 +135,7 @@ describe(' - Toolbar', () => { ); }; - const { getByText } = render( + render(
- Toolbar', () => {
, ); - fireEvent.click(getByText('Columns')); + fireEvent.click(screen.getByText('Columns')); const searchInput = document.querySelector('input[type="text"]')!; fireEvent.change(searchInput, { target: { value: 'test' } }); diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx index 1836534d0282..2dc85c2aa91d 100644 --- a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.test.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { - screen, - fireEvent, - getByRole, - fireTouchChangedEvent, - userEvent, -} from '@mui/internal-test-utils'; +import { screen, fireEvent, within, fireTouchChangedEvent } from '@mui/internal-test-utils'; import { adapterToUse, buildPickerDragInteractions, @@ -21,10 +15,11 @@ import { } from '@mui/x-date-pickers-pro/DateRangeCalendar'; import { DateRangePickerDay } from '@mui/x-date-pickers-pro/DateRangePickerDay'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { RangePosition } from '../models'; const getPickerDay = (name: string, picker = 'January 2018') => - getByRole(screen.getByRole('grid', { name: picker }), 'gridcell', { name }); + within(screen.getByRole('grid', { name: picker })).getByRole('gridcell', { name }); const dynamicShouldDisableDate = (date, position: RangePosition) => { if (position === 'end') { @@ -540,7 +535,7 @@ describe('', () => { ); const renderCountBeforeChange = RenderCount.callCount; - userEvent.mousePress(getPickerDay('2')); + fireUserEvent.mousePress(getPickerDay('2')); expect(RenderCount.callCount - renderCountBeforeChange).to.equal(2); // 2 render * 1 day }); @@ -555,10 +550,10 @@ describe('', () => { />, ); - userEvent.mousePress(getPickerDay('2')); + fireUserEvent.mousePress(getPickerDay('2')); const renderCountBeforeChange = RenderCount.callCount; - userEvent.mousePress(getPickerDay('4')); + fireUserEvent.mousePress(getPickerDay('4')); expect(RenderCount.callCount - renderCountBeforeChange).to.equal(6); // 2 render * 3 day }); }); diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx index c6b3c1487e6d..2d6094f4db18 100644 --- a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.test.tsx @@ -23,14 +23,14 @@ describe('', () => { it('should not open mobile picker dialog when clicked on input', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const { unmount } = renderWithProps({ enableAccessibleFieldDOMStructure: true }); fireEvent.click(getFieldInputRoot()); clock.runToLast(); expect(screen.queryByRole('tooltip')).not.to.equal(null); expect(screen.queryByRole('dialog')).to.equal(null); - v7Response.unmount(); + unmount(); // Test with v6 input renderWithProps({ enableAccessibleFieldDOMStructure: false }); diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx index 6137c60421f0..ee452e3e68ad 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/DesktopDateRangePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, fireEvent, userEvent, act, getByRole } from '@mui/internal-test-utils'; +import { screen, fireEvent, act, within } from '@mui/internal-test-utils'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; @@ -15,11 +15,12 @@ import { getFieldSectionsContainer, getTextbox, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); const getPickerDay = (name: string, picker = 'January 2018') => - getByRole(screen.getByRole('grid', { name: picker }), 'gridcell', { name }); + within(screen.getByRole('grid', { name: picker })).getByRole('gridcell', { name }); describe('', () => { const { render, clock } = createPickerRenderer({ @@ -93,7 +94,7 @@ describe('', () => { describe('Field slot: SingleInputDateRangeField', () => { it('should add focused class to the field when it is focused', () => { // test v7 behavior - const response = render( + const { unmount } = render( ', () => { expect(sectionsContainer.parentElement).to.have.class('Mui-focused'); - response.unmount(); + unmount(); // test v6 behavior render(); @@ -118,7 +119,7 @@ describe('', () => { it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => { // Test with v7 input - const v7Response = render( + const { unmount } = render( ', () => { ); expect(screen.getByRole('textbox', { hidden: true }).name).to.equal('test'); - v7Response.unmount(); + unmount(); // Test with v6 input render(); @@ -244,13 +245,13 @@ describe('', () => { expect(onClose.callCount).to.equal(0); // Change the start date - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3)); expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]); // Change the end date - userEvent.mousePress(getPickerDay('5')); + fireUserEvent.mousePress(getPickerDay('5')); expect(onChange.callCount).to.equal(2); expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3)); expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5)); @@ -287,7 +288,7 @@ describe('', () => { expect(onClose.callCount).to.equal(0); // Change the end date - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]); expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3)); @@ -318,7 +319,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'end' }); // Change the end date - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); @@ -346,7 +347,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); // Change the start date (already tested) - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); // Dismiss the picker // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target -- don't care @@ -380,12 +381,12 @@ describe('', () => { // Dismiss the picker const input = document.getElementById('test-id')!; + fireEvent.mouseDown(input); act(() => { - fireEvent.mouseDown(input); input.focus(); - fireEvent.mouseUp(input); - clock.runToLast(); }); + fireEvent.mouseUp(input); + clock.runToLast(); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); @@ -417,17 +418,17 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); // Change the start date (already tested) - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); clock.runToLast(); // Dismiss the picker const input = document.getElementById('test-id')!; + fireEvent.mouseDown(input); act(() => { - fireEvent.mouseDown(input); input.focus(); - fireEvent.mouseUp(input); }); + fireEvent.mouseUp(input); clock.runToLast(); @@ -453,7 +454,7 @@ describe('', () => { ); // Dismiss the picker - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); @@ -521,7 +522,7 @@ describe('', () => { expect(screen.getByRole('tooltip')).toBeVisible(); // Change the start date (already tested) - userEvent.mousePress(getPickerDay('3')); + fireUserEvent.mousePress(getPickerDay('3')); clock.runToLast(); act(() => { @@ -559,7 +560,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(1); // Start date change expect(onChange.lastCall.args[0]).to.deep.equal([null, null]); expect(onAccept.callCount).to.equal(1); @@ -586,7 +587,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'desktop', initialFocus: 'start' }); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx index ff1a2bf8b2c1..2639cbebef6b 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { adapterToUse, createPickerRenderer, @@ -13,6 +13,7 @@ import { import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -86,7 +87,7 @@ describe(' - Describes', () => { } if (isOpened) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getAllByRole('gridcell', { name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), })[0], @@ -148,7 +149,7 @@ describe(' - Describes', () => { } if (isOpened) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getAllByRole('gridcell', { name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), })[0], diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx index f39f90bdb0d1..e866a5140081 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/DesktopDateTimeRangePicker.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -8,6 +8,7 @@ import { getFieldSectionsContainer, expectFieldValueV7, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker'; describe('', () => { @@ -23,16 +24,16 @@ describe('', () => { openPicker({ type: 'date-time-range', variant: 'desktop', initialFocus: 'start' }); // select start date range - userEvent.mousePress(screen.getByRole('gridcell', { name: '11' })); - userEvent.mousePress(screen.getByRole('option', { name: '4 hours' })); - userEvent.mousePress(screen.getByRole('option', { name: '5 minutes' })); - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '11' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '4 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '5 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); // select end date range on the same day - userEvent.mousePress(screen.getByRole('gridcell', { name: '11' })); - userEvent.mousePress(screen.getByRole('option', { name: '5 hours' })); - userEvent.mousePress(screen.getByRole('option', { name: '10 minutes' })); - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '11' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '5 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '10 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); const startSectionsContainer = getFieldSectionsContainer(0); const endSectionsContainer = getFieldSectionsContainer(1); diff --git a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx index 25518f4a44f3..bd7c125ec4b4 100644 --- a/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance, screen, userEvent } from '@mui/internal-test-utils'; +import { describeConformance, screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -9,6 +9,7 @@ import { describeRangeValidation, getFieldSectionsContainer, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { DesktopDateTimeRangePicker } from '../DesktopDateTimeRangePicker'; describe(' - Describes', () => { @@ -101,7 +102,7 @@ describe(' - Describes', () => { ]; } if (isOpened) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), }), @@ -112,8 +113,10 @@ describe(' - Describes', () => { hasMeridiem ? 'hours12h' : 'hours24h', ); const hoursNumber = adapterToUse.getHours(newValue[setEndDate ? 1 : 0]); - userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` })); - userEvent.mousePress( + fireUserEvent.mousePress( + screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }), + ); + fireUserEvent.mousePress( screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue[setEndDate ? 1 : 0])} minutes`, }), @@ -121,7 +124,7 @@ describe(' - Describes', () => { if (hasMeridiem) { // meridiem is an extra view on `DesktopDateTimeRangePicker` // we need to click it to finish selection - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }), ); } diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx index e27cb9084aa3..177cf4752e9a 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/MobileDateRangePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { screen, userEvent, fireEvent } from '@mui/internal-test-utils'; +import { screen, fireEvent } from '@mui/internal-test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { createPickerRenderer, @@ -9,6 +9,7 @@ import { openPicker, getFieldSectionsContainer, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { DateRange } from '@mui/x-date-pickers-pro/models'; import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField'; @@ -18,7 +19,7 @@ describe('', () => { describe('Field slot: SingleInputDateRangeField', () => { it('should render the input with a given `name` when `SingleInputDateRangeField` is used', () => { // Test with v7 input - const v7Response = render( + const { unmount } = render( ', () => { ); expect(screen.getByRole('textbox', { hidden: true }).name).to.equal('test'); - v7Response.unmount(); + unmount(); // Test with v6 input render(); @@ -84,13 +85,13 @@ describe('', () => { expect(onClose.callCount).to.equal(0); // Change the start date - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3)); expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]); // Change the end date - userEvent.mousePress(screen.getByRole('gridcell', { name: '5' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '5' })); expect(onChange.callCount).to.equal(2); expect(onChange.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3)); expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 5)); @@ -125,7 +126,7 @@ describe('', () => { expect(onClose.callCount).to.equal(0); // Change the end date - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]); expect(onChange.lastCall.args[0][1]).toEqualDateTime(new Date(2018, 0, 3)); @@ -154,7 +155,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'end' }); // Change the end date - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]); @@ -185,10 +186,10 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' }); // Change the start date (already tested) - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); // Cancel the modifications - userEvent.mousePress(screen.getByText(/cancel/i)); + fireUserEvent.mousePress(screen.getByText(/cancel/i)); expect(onChange.callCount).to.equal(2); // Start date change + reset expect(onChange.lastCall.args[0][0]).toEqualDateTime(defaultValue[0]); expect(onChange.lastCall.args[0][1]).toEqualDateTime(defaultValue[1]); @@ -218,10 +219,10 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' }); // Change the start date (already tested) - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); // Accept the modifications - userEvent.mousePress(screen.getByText(/ok/i)); + fireUserEvent.mousePress(screen.getByText(/ok/i)); expect(onChange.callCount).to.equal(1); // Start date change expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0][0]).toEqualDateTime(new Date(2018, 0, 3)); @@ -252,7 +253,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' }); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(1); // Start date change expect(onChange.lastCall.args[0]).to.deep.equal([null, null]); expect(onAccept.callCount).to.equal(1); @@ -279,7 +280,7 @@ describe('', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' }); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx index eea31d3a3659..7503ccadc73e 100644 --- a/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent, fireDiscreteEvent } from '@mui/internal-test-utils'; +import { screen, fireDiscreteEvent } from '@mui/internal-test-utils'; import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker'; import { adapterToUse, @@ -12,6 +12,7 @@ import { getFieldSectionsContainer, } from 'test/utils/pickers'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -86,7 +87,7 @@ describe(' - Describes', () => { openPicker({ type: 'date-range', variant: 'mobile', initialFocus: 'start' }); } - userEvent.mousePress( + fireUserEvent.mousePress( screen.getAllByRole('gridcell', { name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), })[0], diff --git a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx index 4aadcac52f6d..1422ba7bb233 100644 --- a/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx +++ b/packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { describeConformance, fireEvent, screen, userEvent } from '@mui/internal-test-utils'; +import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -10,6 +10,7 @@ import { getFieldSectionsContainer, openPicker, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker'; describe(' - Describes', () => { @@ -108,12 +109,12 @@ describe(' - Describes', () => { // if we want to set the end date, we firstly need to switch to end date "range position" if (setEndDate) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('button', { name: adapterToUse.format(value[1], 'shortDate') }), ); } - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue[setEndDate ? 1 : 0]).toString(), }), @@ -124,8 +125,10 @@ describe(' - Describes', () => { hasMeridiem ? 'hours12h' : 'hours24h', ); const hoursNumber = adapterToUse.getHours(newValue[setEndDate ? 1 : 0]); - userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` })); - userEvent.mousePress( + fireUserEvent.mousePress( + screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }), + ); + fireUserEvent.mousePress( screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue[setEndDate ? 1 : 0])} minutes`, }), @@ -133,7 +136,9 @@ describe(' - Describes', () => { if (hasMeridiem) { // meridiem is an extra view on `MobileDateTimeRangePicker` // we need to click it to finish selection - userEvent.mousePress(screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' })); + fireUserEvent.mousePress( + screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }), + ); } // Close the picker if (!isOpened) { @@ -142,7 +147,7 @@ describe(' - Describes', () => { clock.runToLast(); } else { // return to the start date view in case we'd like to repeat the selection process - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('button', { name: adapterToUse.format(newValue[0], 'shortDate') }), ); } diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx index 33b138e7262d..b392a9d80984 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/editing.SingleInputDateRangeField.test.tsx @@ -13,31 +13,31 @@ describe(' - Editing', () => { describeAdapters(`key: Delete`, SingleInputDateRangeField, ({ adapter, renderWithProps }) => { it('should clear all the sections when all sections are selected and all sections are completed', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -48,33 +48,33 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and not all sections are completed', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section - fireEvent.input(v7Response.getActiveSection(0), { target: { innerHTML: 'j' } }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY – MMMM YYYY'); + fireEvent.input(view.getActiveSection(0), { target: { innerHTML: 'j' } }); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY – MMMM YYYY'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section fireEvent.change(input, { @@ -93,33 +93,33 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'Delete' }); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(0); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -132,52 +132,52 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Start date - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(2), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(2); expect(onChangeV7.lastCall.firstArg[0]).to.equal(null); expect(onChangeV7.lastCall.firstArg[1]).toEqualDateTime(adapter.addYears(adapter.date(), 1)); // End date - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(3), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(3); - fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(4), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(3); - fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(5), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(4); expect(onChangeV7.lastCall.firstArg[0]).to.equal(null); expect(onChangeV7.lastCall.firstArg[1]).to.equal(null); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Start date fireEvent.keyDown(input, { key: 'Delete' }); @@ -209,27 +209,27 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'Delete' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], @@ -237,7 +237,7 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.keyDown(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(1); @@ -253,31 +253,31 @@ describe(' - Editing', () => { ({ adapter, renderWithProps }) => { it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); + view.pressKey(null, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -288,33 +288,33 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section - fireEvent.input(v7Response.getActiveSection(0), { target: { innerHTML: 'j' } }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY – MMMM YYYY'); + fireEvent.input(view.getActiveSection(0), { target: { innerHTML: 'j' } }); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY – MMMM YYYY'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); + view.pressKey(null, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY – MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section fireEvent.change(input, { @@ -333,33 +333,33 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); + view.pressKey(null, ''); expect(onChangeV7.callCount).to.equal(0); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -372,22 +372,22 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Start date - v7Response.pressKey(0, ''); + view.pressKey(0, ''); expect(onChangeV7.callCount).to.equal(1); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' }); - v7Response.pressKey(1, ''); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); + view.pressKey(1, ''); expect(onChangeV7.callCount).to.equal(1); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' }); - v7Response.pressKey(2, ''); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' }); + view.pressKey(2, ''); expect(onChangeV7.callCount).to.equal(2); expect(onChangeV7.lastCall.firstArg[0]).to.equal(null); expect(onChangeV7.lastCall.firstArg[1]).toEqualDateTime( @@ -395,31 +395,31 @@ describe(' - Editing', () => { ); // End date - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' }); - v7Response.pressKey(3, ''); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' }); + view.pressKey(3, ''); expect(onChangeV7.callCount).to.equal(3); - fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' }); - v7Response.pressKey(4, ''); + fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' }); + view.pressKey(4, ''); expect(onChangeV7.callCount).to.equal(3); - fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' }); - v7Response.pressKey(5, ''); + fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' }); + view.pressKey(5, ''); expect(onChangeV7.callCount).to.equal(4); expect(onChangeV7.lastCall.firstArg[0]).to.equal(null); expect(onChangeV7.lastCall.firstArg[1]).to.equal(null); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Start date fireEvent.change(input, { target: { value: '/15/2022 – 06/15/2023' } }); @@ -453,27 +453,27 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - v7Response.pressKey(0, ''); + view.pressKey(0, ''); expect(onChangeV7.callCount).to.equal(1); - v7Response.pressKey(0, ''); + view.pressKey(0, ''); expect(onChangeV7.callCount).to.equal(1); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: [adapter.date(), adapter.addYears(adapter.date(), 1)], @@ -481,7 +481,7 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: ' 2022 – June 2023' } }); expect(onChangeV6.callCount).to.equal(1); diff --git a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx index 26f9fe2ceedd..ce9852d7fd25 100644 --- a/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx +++ b/packages/x-date-pickers-pro/src/SingleInputDateRangeField/tests/selection.SingleInputDateRangeField.test.tsx @@ -22,14 +22,14 @@ describe(' - Selection', () => { describe('Focus', () => { it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => { // Test with v7 input - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, autoFocus: true, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY – MM/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY – MM/DD/YYYY'); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input renderWithProps({ autoFocus: true, enableAccessibleFieldDOMStructure: false }); @@ -57,89 +57,89 @@ describe(' - Selection', () => { describe('Click', () => { it('should select the clicked selection when the input is already focused', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: [null, adapterToUse.date('2022-02-24')], }); // Start date - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v7Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); // End date - v7Response.selectSection('month', 'last'); + view.selectSection('month', 'last'); expect(getCleanedSelectedContent()).to.equal('02'); - v7Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: [null, adapterToUse.date('2022-02-24')], }); // Start date - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v6Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); // End date - v6Response.selectSection('month', 'last'); + view.selectSection('month', 'last'); expect(getCleanedSelectedContent()).to.equal('02'); - v6Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); }); it('should not change the selection when clicking on the only already selected section', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: [null, adapterToUse.date('2022-02-24')], }); // Start date - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); // End date - v7Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); - v7Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: [null, adapterToUse.date('2022-02-24')], }); // Start date - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); // End date - v6Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); - v6Response.selectSection('day', 'last'); + view.selectSection('day', 'last'); expect(getCleanedSelectedContent()).to.equal('24'); }); }); @@ -147,33 +147,33 @@ describe(' - Selection', () => { describe('key: ArrowRight', () => { it('should allow to move from left to right with ArrowRight', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('MM'); - fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); fireEvent.keyDown(input, { key: 'ArrowRight' }); @@ -194,20 +194,20 @@ describe(' - Selection', () => { it('should stay on the current section when the last section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('year', 'last'); + view.selectSection('year', 'last'); expect(getCleanedSelectedContent()).to.equal('YYYY'); - fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(5), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('year', 'last'); + view.selectSection('year', 'last'); expect(getCleanedSelectedContent()).to.equal('YYYY'); fireEvent.keyDown(input, { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); @@ -217,32 +217,32 @@ describe(' - Selection', () => { describe('key: ArrowLeft', () => { it('should allow to move from right to left with ArrowLeft', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('year', 'last'); + view.selectSection('year', 'last'); expect(getCleanedSelectedContent()).to.equal('YYYY'); - fireEvent.keyDown(v7Response.getActiveSection(5), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(5), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(4), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(4), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - fireEvent.keyDown(v7Response.getActiveSection(3), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(3), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('year', 'last'); + view.selectSection('year', 'last'); expect(getCleanedSelectedContent()).to.equal('YYYY'); fireEvent.keyDown(input, { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('DD'); @@ -262,20 +262,20 @@ describe(' - Selection', () => { it('should stay on the current section when the first section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); fireEvent.keyDown(input, { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); diff --git a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx index 6f8301a14602..3f51bd19e5d0 100644 --- a/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.test.tsx @@ -117,21 +117,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx index b88d9390fced..03caf784f4f1 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.test.tsx @@ -78,21 +78,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx index 4a35a3d2558a..f97f309af0fd 100644 --- a/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx +++ b/packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.test.tsx @@ -64,21 +64,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx index dda1f5c56ab9..9095ecc60cc6 100644 --- a/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx +++ b/packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.test.tsx @@ -148,21 +148,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx index 8c68148e8620..372dbfab75f6 100644 --- a/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx +++ b/packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.test.tsx @@ -107,21 +107,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); @@ -166,25 +163,22 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: 'DD', }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), format: 'DD', }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx index 895710889ae5..fa684d96e860 100644 --- a/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx +++ b/packages/x-date-pickers/src/AdapterMoment/AdapterMoment.test.tsx @@ -161,21 +161,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx index de006376e282..bd86f319abe6 100644 --- a/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.test.tsx @@ -75,21 +75,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx index 1d326ff9e325..9a30e357c05d 100644 --- a/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx +++ b/packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.test.tsx @@ -82,21 +82,18 @@ describe('', () => { }); it('should have correct placeholder', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - expectFieldValueV7( - v7Response.getSectionsContainer(), - localizedTexts[localeKey].placeholder, - ); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].placeholder); }); it('should have well formatted value', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(testDate), }); - expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value); + expectFieldValueV7(view.getSectionsContainer(), localizedTexts[localeKey].value); }); }); }); diff --git a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx index fb52644ced5b..8cfd7af3ad1e 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireEvent, userEvent, screen } from '@mui/internal-test-utils'; +import { fireEvent, screen } from '@mui/internal-test-utils'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; import { createPickerRenderer, adapterToUse } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -136,20 +137,20 @@ describe('', () => { const defaultDate = adapterToUse.date('2019-01-02T11:12:13.550Z'); render(); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('button', { name: 'calendar view is open, switch to year view' }), ); - userEvent.mousePress(screen.getByRole('radio', { name: '2020' })); + fireUserEvent.mousePress(screen.getByRole('radio', { name: '2020' })); // Finish the transition to the day view clock.runToLast(); - userEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); - userEvent.mousePress( + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); + fireUserEvent.mousePress( screen.getByRole('button', { name: 'calendar view is open, switch to year view' }), ); // select the current year with a date in the past to trigger "findClosestEnabledDate" - userEvent.mousePress(screen.getByRole('radio', { name: '2019' })); + fireUserEvent.mousePress(screen.getByRole('radio', { name: '2019' })); expect(onChange.lastCall.firstArg).toEqualDateTime(defaultDate); }); @@ -195,7 +196,7 @@ describe('', () => { // should make the reference day firstly focusable expect(screen.getByRole('gridcell', { name: '17' })).to.have.attribute('tabindex', '0'); - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2022, 3, 2, 12, 30)); }); @@ -212,7 +213,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20)); }); @@ -229,7 +230,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.firstArg).toEqualDateTime(new Date(2019, 0, 2, 12, 20)); }); @@ -245,7 +246,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.firstArg).toEqualDateTime( adapterToUse.date('2018-01-02T11:11:11.111'), @@ -620,7 +621,7 @@ describe('', () => { ); const renderCountBeforeChange = RenderCount.callCount; - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(RenderCount.callCount - renderCountBeforeChange).to.equal(2); // 2 render * 1 day }); @@ -637,7 +638,7 @@ describe('', () => { ); const renderCountBeforeChange = RenderCount.callCount; - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); expect(RenderCount.callCount - renderCountBeforeChange).to.equal(4); // 2 render * 2 days }); }); diff --git a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx index 7a807f651b17..d3ab8212f0d7 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/describes.DateCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { DateCalendar, dateCalendarClasses as classes } from '@mui/x-date-pickers/DateCalendar'; import { pickersDayClasses } from '@mui/x-date-pickers/PickersDay'; import { @@ -10,6 +10,7 @@ import { describeValue, } from 'test/utils/pickers'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -47,7 +48,7 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addDays(value, 1); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx index 59249ab7660b..795a3bf042af 100644 --- a/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx +++ b/packages/x-date-pickers/src/DateCalendar/tests/timezone.DateCalendar.test.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { userEvent, screen } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { describeAdapters } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; import { DateCalendar } from '@mui/x-date-pickers/DateCalendar'; const TIMEZONE_TO_TEST = ['UTC', 'system', 'America/New_York']; @@ -17,7 +18,7 @@ describe(' - Timezone', () => { const onChange = spy(); render(); - userEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); const expectedDate = adapter.setDate(adapter.date(undefined, 'default'), 25); // Check the `onChange` value (uses default timezone, e.g: UTC, see TZ env variable) @@ -34,7 +35,7 @@ describe(' - Timezone', () => { it('should use timezone prop for onChange when no value is provided', () => { const onChange = spy(); render(); - userEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); const expectedDate = adapter.setDate( adapter.startOfDay(adapter.date(undefined, timezone)), 25, @@ -52,7 +53,7 @@ describe(' - Timezone', () => { render(); - userEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '25' })); const expectedDate = adapter.setDate(value, 25); // Check the `onChange` value (uses timezone prop) diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx index 7c6ac2b0a0bc..b5140fdffb72 100644 --- a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx @@ -1,13 +1,14 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { DateField } from '@mui/x-date-pickers/DateField'; -import { act, userEvent, fireEvent } from '@mui/internal-test-utils'; +import { act, fireEvent } from '@mui/internal-test-utils'; import { expectFieldValueV7, getTextbox, describeAdapters, expectFieldValueV6, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Editing', () => { describeAdapters('key: ArrowDown', DateField, ({ adapter, testFieldKeyPress }) => { @@ -213,30 +214,30 @@ describe(' - Editing', () => { describeAdapters('key: Delete', DateField, ({ adapter, testFieldKeyPress, renderWithProps }) => { it('should clear the selected section when only this section is completed', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section - v7Response.pressKey(0, 'j'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY'); + view.pressKey(0, 'j'); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY'); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section fireEvent.change(input, { @@ -244,7 +245,7 @@ describe(' - Editing', () => { }); // press "j" expectFieldValueV6(input, 'January YYYY'); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY'); }); @@ -259,68 +260,68 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and all sections are completed', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY'); }); it('should clear all the sections when all sections are selected and not all sections are completed', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section - v7Response.pressKey(0, 'j'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY'); + view.pressKey(0, 'j'); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Set a value for the "month" section fireEvent.change(input, { @@ -329,45 +330,45 @@ describe(' - Editing', () => { expectFieldValueV6(input, 'January YYYY'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'MMMM YYYY'); }); it('should not keep query after typing again on a cleared section', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.year, }); - v7Response.selectSection('year'); + view.selectSection('year'); - v7Response.pressKey(0, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '0002'); + view.pressKey(0, '2'); + expectFieldValueV7(view.getSectionsContainer(), '0002'); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'YYYY'); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' }); + expectFieldValueV7(view.getSectionsContainer(), 'YYYY'); - v7Response.pressKey(0, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '0002'); + view.pressKey(0, '2'); + expectFieldValueV7(view.getSectionsContainer(), '0002'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: adapter.formats.year, }); const input = getTextbox(); - v6Response.selectSection('year'); + view.selectSection('year'); fireEvent.change(input, { target: { value: '2' } }); // press "2" expectFieldValueV6(input, '0002'); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expectFieldValueV6(input, 'YYYY'); fireEvent.change(input, { target: { value: '2' } }); // press "2" @@ -388,38 +389,38 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - userEvent.keyPress(v7Response.getSectionsContainer(), { key: 'Delete' }); + fireUserEvent.keyPress(view.getSectionsContainer(), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(0); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(0); }); @@ -427,32 +428,32 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' }); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.args[1].validationError).to.equal('invalidDate'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); - userEvent.keyPress(v7Response.getActiveSection(1), { key: 'Delete' }); + fireUserEvent.keyPress(view.getActiveSection(1), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(2); expect(onChangeV7.lastCall.firstArg).to.equal(null); expect(onChangeV7.lastCall.args[1].validationError).to.equal(null); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), @@ -460,15 +461,15 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(1); expect(onChangeV6.lastCall.args[1].validationError).to.equal('invalidDate'); - userEvent.keyPress(input, { key: 'ArrowRight' }); + fireUserEvent.keyPress(input, { key: 'ArrowRight' }); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(2); expect(onChangeV6.lastCall.firstArg).to.equal(null); expect(onChangeV6.lastCall.args[1].validationError).to.equal(null); @@ -478,27 +479,27 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' }); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'Delete' }); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'Delete' }); expect(onChangeV7.callCount).to.equal(1); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), @@ -506,12 +507,12 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(1); - userEvent.keyPress(input, { key: 'Delete' }); + fireUserEvent.keyPress(input, { key: 'Delete' }); expect(onChangeV6.callCount).to.equal(1); }); }); @@ -748,7 +749,7 @@ describe(' - Editing', () => { it('should not allow key editing on disabled field', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, disabled: true, @@ -766,30 +767,30 @@ describe(' - Editing', () => { 'ArrowRight', ]; - v7Response.selectSection('month'); + view.selectSection('month'); keys.forEach((key) => { - v7Response.pressKey(0, key); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + view.pressKey(0, key); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); expect(onChangeV7.callCount).to.equal(0); }); // digit key press - userEvent.keyPress(v7Response.getActiveSection(0), { key: '2' }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + fireUserEvent.keyPress(view.getActiveSection(0), { key: '2' }); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, disabled: true, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // v6 doesn't allow focusing on sections when disabled keys.forEach((key) => { @@ -964,44 +965,44 @@ describe(' - Editing', () => { it('should allow to type the date 29th of February for leap years', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.keyboardDate, }); - v7Response.selectSection('month'); + view.selectSection('month'); - v7Response.pressKey(0, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/DD/YYYY'); + view.pressKey(0, '2'); + expectFieldValueV7(view.getSectionsContainer(), '02/DD/YYYY'); - v7Response.pressKey(1, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/02/YYYY'); + view.pressKey(1, '2'); + expectFieldValueV7(view.getSectionsContainer(), '02/02/YYYY'); - v7Response.pressKey(1, '9'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/YYYY'); + view.pressKey(1, '9'); + expectFieldValueV7(view.getSectionsContainer(), '02/29/YYYY'); - v7Response.pressKey(2, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0001'); + view.pressKey(2, '1'); + expectFieldValueV7(view.getSectionsContainer(), '02/29/0001'); - v7Response.pressKey(2, '9'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0019'); + view.pressKey(2, '9'); + expectFieldValueV7(view.getSectionsContainer(), '02/29/0019'); - v7Response.pressKey(2, '8'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/0198'); + view.pressKey(2, '8'); + expectFieldValueV7(view.getSectionsContainer(), '02/29/0198'); - v7Response.pressKey(2, '8'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02/29/1988'); + view.pressKey(2, '8'); + expectFieldValueV7(view.getSectionsContainer(), '02/29/1988'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: adapter.formats.keyboardDate, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: '2/DD/YYYY' } }); expectFieldValueV6(input, '02/DD/YYYY'); @@ -1136,28 +1137,28 @@ describe(' - Editing', () => { ({ adapter, renderWithProps, testFieldChange }) => { it('should clear the selected section when only this section is completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); - v7Response.pressKey(0, 'j'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY'); + view.selectSection('month'); + view.pressKey(0, 'j'); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY'); - v7Response.pressKey(0, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + view.pressKey(0, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: 'j YYYY' } }); expectFieldValueV6(input, 'January YYYY'); @@ -1167,28 +1168,28 @@ describe(' - Editing', () => { it('should clear the selected section when all sections are completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), }); - v7Response.selectSection('month'); + view.selectSection('month'); - v7Response.pressKey(0, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM 2022'); + view.pressKey(0, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM 2022'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: ' 2022' } }); expectFieldValueV6(input, 'MMMM 2022'); @@ -1196,31 +1197,31 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and all sections are completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + view.pressKey(null, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -1231,31 +1232,31 @@ describe(' - Editing', () => { it('should clear all the sections when all sections are selected and not all sections are completed (Backspace)', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, }); - v7Response.selectSection('month'); - v7Response.pressKey(0, 'j'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January YYYY'); + view.selectSection('month'); + view.pressKey(0, 'j'); + expectFieldValueV7(view.getSectionsContainer(), 'January YYYY'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM YYYY'); + view.pressKey(null, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: 'j YYYY' } }); expectFieldValueV6(input, 'January YYYY'); @@ -1302,30 +1303,30 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), onChange: onChangeV7, }); - v7Response.selectSection('month'); - v7Response.pressKey(0, ''); + view.selectSection('month'); + view.pressKey(0, ''); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.args[1].validationError).to.equal('invalidDate'); - v7Response.selectSection('year'); - v7Response.pressKey(1, ''); + view.selectSection('year'); + view.pressKey(1, ''); expect(onChangeV7.callCount).to.equal(2); expect(onChangeV7.lastCall.firstArg).to.equal(null); expect(onChangeV7.lastCall.args[1].validationError).to.equal(null); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `${adapter.formats.month} ${adapter.formats.year}`, defaultValue: adapter.date(), @@ -1333,12 +1334,12 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: ' 2022' } }); expect(onChangeV6.callCount).to.equal(1); expect(onChangeV6.lastCall.args[1].validationError).to.equal('invalidDate'); - userEvent.keyPress(input, { key: 'ArrowRight' }); + fireUserEvent.keyPress(input, { key: 'ArrowRight' }); fireEvent.change(input, { target: { value: 'MMMM ' } }); expect(onChangeV6.callCount).to.equal(2); @@ -1367,90 +1368,92 @@ describe(' - Editing', () => { describeAdapters('Pasting', DateField, ({ adapter, renderWithProps }) => { const firePasteEventV7 = (element: HTMLElement, pastedValue: string) => { - act(() => { - const clipboardEvent = new window.Event('paste', { - bubbles: true, - cancelable: true, - composed: true, - }); + const clipboardEvent = new window.Event('paste', { + bubbles: true, + cancelable: true, + composed: true, + }); - // @ts-ignore - clipboardEvent.clipboardData = { - getData: () => pastedValue, - }; + // @ts-ignore + clipboardEvent.clipboardData = { + getData: () => pastedValue, + }; + let canContinue = true; + act(() => { // canContinue is `false` if default have been prevented - const canContinue = element.dispatchEvent(clipboardEvent); - if (!canContinue) { - return; - } - - fireEvent.input(element, { target: { textContent: pastedValue } }); + canContinue = element.dispatchEvent(clipboardEvent); }); + if (!canContinue) { + return; + } + + fireEvent.input(element, { target: { textContent: pastedValue } }); }; const firePasteEventV6 = (input: HTMLInputElement, pastedValue?: string, rawValue?: string) => { - act(() => { - const clipboardEvent = new window.Event('paste', { - bubbles: true, - cancelable: true, - composed: true, - }); + const clipboardEvent = new window.Event('paste', { + bubbles: true, + cancelable: true, + composed: true, + }); - // @ts-ignore - clipboardEvent.clipboardData = { - getData: () => pastedValue ?? rawValue ?? '', - }; + // @ts-ignore + clipboardEvent.clipboardData = { + getData: () => pastedValue ?? rawValue ?? '', + }; + let canContinue = true; + act(() => { // canContinue is `false` if default have been prevented - const canContinue = input.dispatchEvent(clipboardEvent); - if (!canContinue) { - return; - } - - if (!pastedValue) { - return; - } - - const prevValue = input.value; - const nextValue = `${prevValue.slice( - 0, - input.selectionStart || 0, - )}${pastedValue}${prevValue.slice(input.selectionEnd || 0)}`; - fireEvent.change(input, { target: { value: nextValue } }); + canContinue = input.dispatchEvent(clipboardEvent); }); + if (!canContinue) { + return; + } + + if (!pastedValue) { + return; + } + + const prevValue = input.value; + const nextValue = `${prevValue.slice( + 0, + input.selectionStart || 0, + )}${pastedValue}${prevValue.slice(input.selectionEnd || 0)}`; + fireEvent.change(input, { target: { value: nextValue } }); }; it('should set the date when all sections are selected, the pasted value is valid and a value is provided', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date(), onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022'); + firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date(), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); @@ -1461,32 +1464,32 @@ describe(' - Editing', () => { it('should set the date when all sections are selected, the pasted value is valid and no value is provided', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022'); + firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); @@ -1497,30 +1500,30 @@ describe(' - Editing', () => { it('should not set the date when all sections are selected and the pasted value is not valid', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), 'Some invalid content'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.unmount(); + firePasteEventV7(view.getSectionsContainer(), 'Some invalid content'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); firePasteEventV6(input, 'Some invalid content'); expectFieldValueV6(input, 'MM/DD/YYYY'); @@ -1531,35 +1534,35 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, format: `${startChar}Escaped${endChar} ${adapter.formats.year}`, }); - v7Response.selectSection('year'); + view.selectSection('year'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), `Escaped 2014`); + firePasteEventV7(view.getSectionsContainer(), `Escaped 2014`); expect(onChangeV7.callCount).to.equal(1); expect(adapter.getYear(onChangeV7.lastCall.firstArg)).to.equal(2014); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, format: `${startChar}Escaped${endChar} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('year'); + view.selectSection('year'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); firePasteEventV6(input, `Escaped 2014`); expect(onChangeV6.callCount).to.equal(1); @@ -1570,36 +1573,36 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, readOnly: true, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022'); + firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); expect(onChangeV7.callCount).to.equal(0); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, readOnly: true, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); firePasteEventV6(input, '09/16/2022'); expect(onChangeV6.callCount).to.equal(0); @@ -1609,31 +1612,31 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); - firePasteEventV7(v7Response.getActiveSection(0), '12'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); + firePasteEventV7(view.getActiveSection(0), '12'); expect(onChangeV7.callCount).to.equal(1); - expectFieldValueV7(v7Response.getSectionsContainer(), '12/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), '12/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expectFieldValueV6(input, 'MM/DD/YYYY'); firePasteEventV6(input, '12'); @@ -1646,33 +1649,33 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-01-13'), onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018'); - firePasteEventV7(v7Response.getActiveSection(0), '12'); - expectFieldValueV7(v7Response.getSectionsContainer(), '12/13/2018'); + expectFieldValueV7(view.getSectionsContainer(), '01/13/2018'); + firePasteEventV7(view.getActiveSection(0), '12'); + expectFieldValueV7(view.getSectionsContainer(), '12/13/2018'); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2018, 11, 13)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2018-01-13'), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expectFieldValueV6(input, '01/13/2018'); firePasteEventV6(input, '12'); @@ -1685,32 +1688,32 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-01-13'), onChange: onChangeV7, }); - v7Response.selectSection('month'); + view.selectSection('month'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018'); - firePasteEventV7(v7Response.getActiveSection(0), 'Jun'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01/13/2018'); + expectFieldValueV7(view.getSectionsContainer(), '01/13/2018'); + firePasteEventV7(view.getActiveSection(0), 'Jun'); + expectFieldValueV7(view.getSectionsContainer(), '01/13/2018'); expect(onChangeV7.callCount).to.equal(0); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2018-01-13'), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expectFieldValueV6(input, '01/13/2018'); firePasteEventV6(input, 'Jun'); @@ -1720,37 +1723,37 @@ describe(' - Editing', () => { it('should reset sections internal state when pasting', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-12-05'), }); - v7Response.selectSection('day'); + view.selectSection('day'); - v7Response.pressKey(1, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '12/02/2018'); + view.pressKey(1, '2'); + expectFieldValueV7(view.getSectionsContainer(), '12/02/2018'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022'); - expectFieldValueV7(v7Response.getSectionsContainer(), '09/16/2022'); + firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); + expectFieldValueV7(view.getSectionsContainer(), '09/16/2022'); - v7Response.selectSection('day'); + view.selectSection('day'); - v7Response.pressKey(1, '2'); // Press 2 - expectFieldValueV7(v7Response.getSectionsContainer(), '09/02/2022'); // If internal state is not reset it would be 22 instead of 02 + view.pressKey(1, '2'); // Press 2 + expectFieldValueV7(view.getSectionsContainer(), '09/02/2022'); // If internal state is not reset it would be 22 instead of 02 - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2018-12-05'), enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); fireEvent.change(input, { target: { value: '12/2/2018' } }); // Press 2 expectFieldValueV6(input, '12/02/2018'); @@ -1763,32 +1766,32 @@ describe(' - Editing', () => { }); it('should allow pasting a section', () => { - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-12-05'), }); - v7Response.selectSection('month'); + view.selectSection('month'); - v7Response.pressKey(0, '1'); // Press 1 - expectFieldValueV7(v7Response.getSectionsContainer(), '01/05/2018'); + view.pressKey(0, '1'); // Press 1 + expectFieldValueV7(view.getSectionsContainer(), '01/05/2018'); - firePasteEventV7(v7Response.getActiveSection(0), '05'); - expectFieldValueV7(v7Response.getSectionsContainer(), '05/05/2018'); + firePasteEventV7(view.getActiveSection(0), '05'); + expectFieldValueV7(view.getSectionsContainer(), '05/05/2018'); - v7Response.selectSection('month'); // move back to month section - v7Response.pressKey(0, '2'); // check that the search query has been cleared after pasting - expectFieldValueV7(v7Response.getSectionsContainer(), '02/05/2018'); // If internal state is not reset it would be 12 instead of 02 + view.selectSection('month'); // move back to month section + view.pressKey(0, '2'); // check that the search query has been cleared after pasting + expectFieldValueV7(view.getSectionsContainer(), '02/05/2018'); // If internal state is not reset it would be 12 instead of 02 - v7Response.unmount(); + view.unmount(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2018-12-05'), enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: '1/05/2018' } }); // initiate search query on month section expectFieldValueV6(input, '01/05/2018'); @@ -1796,7 +1799,7 @@ describe(' - Editing', () => { firePasteEventV6(input, undefined, '05'); expectFieldValueV6(input, '05/05/2018'); - v6Response.selectSection('month'); // move back to month section + view.selectSection('month'); // move back to month section fireEvent.change(input, { target: { value: '2/05/2018' } }); // check that the search query has been cleared after pasting expectFieldValueV6(input, '02/05/2018'); // If internal state is not reset it would be 12 instead of 02 }); @@ -1804,32 +1807,32 @@ describe(' - Editing', () => { it('should not allow pasting on disabled field', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, disabled: true, }); - v7Response.selectSection('month'); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); - firePasteEventV7(v7Response.getSectionsContainer(), '09/16/2022'); + firePasteEventV7(view.getSectionsContainer(), '09/16/2022'); expect(onChangeV7.callCount).to.equal(0); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, disabled: true, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); firePasteEventV6(input, '9'); // v6 doesn't allow focusing on sections when disabled @@ -1846,27 +1849,27 @@ describe(' - Editing', () => { it('should not loose time information when a value is provided', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - v7Response.selectSection('year'); - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowDown' }); + view.selectSection('year'); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowDown' }); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('year'); - userEvent.keyPress(input, { key: 'ArrowDown' }); + view.selectSection('year'); + fireUserEvent.keyPress(input, { key: 'ArrowDown' }); expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3)); }); @@ -1874,51 +1877,51 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.selectSection('month'); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); + view.pressKey(null, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); + view.selectSection('month'); - v7Response.pressKey(0, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01/DD/YYYY'); + view.pressKey(0, '1'); + expectFieldValueV7(view.getSectionsContainer(), '01/DD/YYYY'); - v7Response.pressKey(0, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/DD/YYYY'); + view.pressKey(0, '1'); + expectFieldValueV7(view.getSectionsContainer(), '11/DD/YYYY'); - v7Response.pressKey(1, '2'); - v7Response.pressKey(1, '5'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/YYYY'); + view.pressKey(1, '2'); + view.pressKey(1, '5'); + expectFieldValueV7(view.getSectionsContainer(), '11/25/YYYY'); - v7Response.pressKey(2, '2'); - v7Response.pressKey(2, '0'); - v7Response.pressKey(2, '0'); - v7Response.pressKey(2, '9'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/2009'); + view.pressKey(2, '2'); + view.pressKey(2, '0'); + view.pressKey(2, '0'); + view.pressKey(2, '9'); + expectFieldValueV7(view.getSectionsContainer(), '11/25/2009'); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 10, 25, 3, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + view.selectSection('month'); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); - userEvent.keyPress(input, { key: 'ArrowLeft' }); + fireUserEvent.keyPress(input, { key: 'ArrowLeft' }); fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); // Press "1" expectFieldValueV6(input, '01/DD/YYYY'); @@ -1942,24 +1945,24 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.year, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - v7Response.selectSection('year'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' }); + view.selectSection('year'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' }); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ format: adapter.formats.year, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, @@ -1967,8 +1970,8 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('year'); - userEvent.keyPress(input, { key: 'ArrowDown' }); + view.selectSection('year'); + fireUserEvent.keyPress(input, { key: 'ArrowDown' }); expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2009, 3, 3, 3, 3, 3)); }); @@ -1977,32 +1980,32 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.month, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - v7Response.selectSection('month'); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowDown' }); + view.selectSection('month'); + fireUserEvent.keyPress(view.getActiveSection(0), { key: 'ArrowDown' }); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 2, 3, 3, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ format: adapter.formats.month, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, enableAccessibleFieldDOMStructure: false, }); - v6Response.selectSection('month'); + view.selectSection('month'); const input = getTextbox(); - userEvent.keyPress(input, { key: 'ArrowDown' }); + fireUserEvent.keyPress(input, { key: 'ArrowDown' }); expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 2, 3, 3, 3, 3)); }); }, @@ -2015,16 +2018,16 @@ describe(' - Editing', () => { it('should set the date when the change value is valid and no value is provided', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange: onChangeV7, }); - fireEvent.change(v7Response.getHiddenInput(), { target: { value: '09/16/2022' } }); + fireEvent.change(view.getHiddenInput(), { target: { value: '09/16/2022' } }); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); @@ -2043,18 +2046,18 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - fireEvent.change(v7Response.getHiddenInput(), { target: { value: '09/16/2022' } }); + fireEvent.change(view.getHiddenInput(), { target: { value: '09/16/2022' } }); expect(onChangeV7.callCount).to.equal(1); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2022, 8, 16, 3, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); @@ -2098,7 +2101,7 @@ describe(' - Editing', () => { }); it('should support digit editing', () => { - const v6Response = renderWithProps({ + const view = renderWithProps({ defaultValue: adapter.date('2022-11-23'), enableAccessibleFieldDOMStructure: false, }); @@ -2106,53 +2109,45 @@ describe(' - Editing', () => { const input = getTextbox(); const initialValueStr = input.value; - v6Response.selectSection('day'); + view.selectSection('day'); - act(() => { - // Remove the selected section - fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } }); + // Remove the selected section + fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } }); - // Set the key pressed in the selected section - fireEvent.change(input, { target: { value: initialValueStr.replace('23', '2') } }); - }); + // Set the key pressed in the selected section + fireEvent.change(input, { target: { value: initialValueStr.replace('23', '2') } }); - act(() => { - // Remove the selected section - fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } }); + // Remove the selected section + fireEvent.change(input, { target: { value: initialValueStr.replace('23', '') } }); - // Set the key pressed in the selected section - fireEvent.change(input, { target: { value: initialValueStr.replace('23', '1') } }); - }); + // Set the key pressed in the selected section + fireEvent.change(input, { target: { value: initialValueStr.replace('23', '1') } }); expectFieldValueV6(input, '11/01/2022'); }); it('should support letter editing', () => { // Test with v6 input - const v6Response = renderWithProps({ + const view = renderWithProps({ defaultValue: adapter.date('2022-01-16'), format: `${adapter.formats.month} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); - act(() => { - // Remove the selected section - fireEvent.change(input, { target: { value: ' 2022' } }); + // Remove the selected section + fireEvent.change(input, { target: { value: ' 2022' } }); - // Set the key pressed in the selected section - fireEvent.change(input, { target: { value: 'J 2022' } }); - }); + // Set the key pressed in the selected section + fireEvent.change(input, { target: { value: 'J 2022' } }); - act(() => { - // Remove the selected section - fireEvent.change(input, { target: { value: ' 2022' } }); + // Remove the selected section + fireEvent.change(input, { target: { value: ' 2022' } }); - // Set the key pressed in the selected section - fireEvent.change(input, { target: { value: 'a 2022' } }); - }); + // Set the key pressed in the selected section + fireEvent.change(input, { target: { value: 'a 2022' } }); expectFieldValueV6(input, 'April 2022'); }); @@ -2162,76 +2157,76 @@ describe(' - Editing', () => { describeAdapters('Editing from the outside', DateField, ({ adapter, renderWithProps, clock }) => { it('should be able to reset the value from the outside', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date('2022-11-23'), }); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/2022'); + expectFieldValueV7(view.getSectionsContainer(), '11/23/2022'); - v7Response.setProps({ value: null }); + view.setProps({ value: null }); - v7Response.selectSection('month'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + view.selectSection('month'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ value: adapter.date('2022-11-23'), enableAccessibleFieldDOMStructure: false, }); const input = getTextbox(); expectFieldValueV6(input, '11/23/2022'); - v6Response.setProps({ value: null }); + view.setProps({ value: null }); - v6Response.selectSection('month'); + view.selectSection('month'); expectFieldValueV6(input, 'MM/DD/YYYY'); }); it('should reset the input query state on an unfocused field', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: null }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: null }); - v7Response.selectSection('month'); + view.selectSection('month'); - v7Response.pressKey(0, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01/DD/YYYY'); + view.pressKey(0, '1'); + expectFieldValueV7(view.getSectionsContainer(), '01/DD/YYYY'); - v7Response.pressKey(0, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/DD/YYYY'); + view.pressKey(0, '1'); + expectFieldValueV7(view.getSectionsContainer(), '11/DD/YYYY'); - v7Response.pressKey(1, '2'); - v7Response.pressKey(1, '5'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/YYYY'); + view.pressKey(1, '2'); + view.pressKey(1, '5'); + expectFieldValueV7(view.getSectionsContainer(), '11/25/YYYY'); - v7Response.pressKey(2, '2'); - v7Response.pressKey(2, '0'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/25/0020'); + view.pressKey(2, '2'); + view.pressKey(2, '0'); + expectFieldValueV7(view.getSectionsContainer(), '11/25/0020'); act(() => { - v7Response.getSectionsContainer().blur(); + view.getSectionsContainer().blur(); }); clock.runToLast(); - v7Response.setProps({ value: adapter.date('2022-11-23') }); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/2022'); + view.setProps({ value: adapter.date('2022-11-23') }); + expectFieldValueV7(view.getSectionsContainer(), '11/23/2022'); - v7Response.selectSection('year'); + view.selectSection('year'); - v7Response.pressKey(2, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/0002'); - v7Response.pressKey(2, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '11/23/0021'); + view.pressKey(2, '2'); + expectFieldValueV7(view.getSectionsContainer(), '11/23/0002'); + view.pressKey(2, '1'); + expectFieldValueV7(view.getSectionsContainer(), '11/23/0021'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: null }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, value: null }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.change(input, { target: { value: '1/DD/YYYY' } }); // Press "1" expectFieldValueV6(input, '01/DD/YYYY'); @@ -2251,15 +2246,15 @@ describe(' - Editing', () => { input.blur(); }); - v6Response.setProps({ value: adapter.date('2022-11-23') }); + view.setProps({ value: adapter.date('2022-11-23') }); expectFieldValueV6(input, '11/23/2022'); + fireEvent.mouseDown(input); + fireEvent.mouseUp(input); act(() => { - fireEvent.mouseDown(input); - fireEvent.mouseUp(input); input.setSelectionRange(6, 9); - fireEvent.click(input); }); + fireEvent.click(input); fireEvent.change(input, { target: { value: '11/23/2' } }); // Press "2" expectFieldValueV6(input, '11/23/0002'); @@ -2271,26 +2266,26 @@ describe(' - Editing', () => { describeAdapters('Select all', DateField, ({ renderWithProps }) => { it('should edit the 1st section when all sections are selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); // When all sections are selected, the value only contains the key pressed - v7Response.pressKey(null, '9'); + view.pressKey(null, '9'); - expectFieldValueV7(v7Response.getSectionsContainer(), '09/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), '09/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); - v6Response.selectSection('month'); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view.selectSection('month'); const input = getTextbox(); // Select all sections - userEvent.keyPress(input, { key: 'a', ctrlKey: true }); + fireUserEvent.keyPress(input, { key: 'a', ctrlKey: true }); // When all sections are selected, the value only contains the key pressed fireEvent.change(input, { target: { value: '9' } }); diff --git a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx index f680275405ce..67c0df9d5edc 100644 --- a/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/format.DateField.test.tsx @@ -12,20 +12,20 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const { start: startChar, end: endChar } = adapter.escapedCharacters; // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, // For Day.js: "[Escaped] YYYY" format: `${startChar}Escaped${endChar} ${adapter.formats.year}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'Escaped YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), 'Escaped 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ // For Day.js: "[Escaped] YYYY" format: `${startChar}Escaped${endChar} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, @@ -33,7 +33,7 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'Escaped YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, 'Escaped 2019'); }); @@ -41,21 +41,21 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const { start: startChar, end: endChar } = adapter.escapedCharacters; // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, // For Day.js: "MMMM [Escaped] YYYY" format: `${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM Escaped YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM Escaped YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January Escaped 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), 'January Escaped 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ // For Day.js: "MMMM [Escaped] YYYY" format: `${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, @@ -64,7 +64,7 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'MMMM Escaped YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, 'January Escaped 2019'); }); @@ -77,21 +77,21 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp } // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, // For Day.js: "MMMM [Escaped[] YYYY" format: `${adapter.formats.month} ${startChar}Escaped ${startChar}${endChar} ${adapter.formats.year}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM Escaped [ YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM Escaped [ YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'January Escaped [ 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), 'January Escaped [ 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ // For Day.js: "MMMM [Escaped[] YYYY" format: `${adapter.formats.month} ${startChar}Escaped ${startChar}${endChar} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, @@ -100,7 +100,7 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'MMMM Escaped [ YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, 'January Escaped [ 2019'); }); @@ -108,21 +108,21 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const { start: startChar, end: endChar } = adapter.escapedCharacters; // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, // For Day.js: "[Escaped] MMMM [Escaped] YYYY" format: `${startChar}Escaped${endChar} ${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped MMMM Escaped YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'Escaped MMMM Escaped YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped January Escaped 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), 'Escaped January Escaped 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ // For Day.js: "[Escaped] MMMM [Escaped] YYYY" format: `${startChar}Escaped${endChar} ${adapter.formats.month} ${startChar}Escaped${endChar} ${adapter.formats.year}`, enableAccessibleFieldDOMStructure: false, @@ -131,7 +131,7 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'Escaped MMMM Escaped YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, 'Escaped January Escaped 2019'); }); @@ -139,15 +139,15 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const { start: startChar, end: endChar } = adapter.escapedCharacters; // Test with v7 input - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, // For Day.js: "[Escaped] [Escaped]" format: `${startChar}Escaped${endChar} ${startChar}Escaped${endChar}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'Escaped Escaped'); + expectFieldValueV7(view.getSectionsContainer(), 'Escaped Escaped'); - v7Response.unmount(); + view.unmount(); // Test with v6 input renderWithProps({ @@ -161,30 +161,30 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp }); it('should support format without separators', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `${adapter.formats.dayOfMonth}${adapter.formats.monthShort}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'DDMMMM'); + expectFieldValueV7(view.getSectionsContainer(), 'DDMMMM'); }); it('should add spaces around `/` when `formatDensity = "spacious"`', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, formatDensity: `spacious`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM / DD / YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM / DD / YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), '01 / 01 / 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), '01 / 01 / 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ formatDensity: `spacious`, enableAccessibleFieldDOMStructure: false, }); @@ -192,27 +192,27 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'MM / DD / YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, '01 / 01 / 2019'); }); it('should add spaces around `.` when `formatDensity = "spacious"`', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, formatDensity: `spacious`, format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '.'), }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM . DD . YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM . DD . YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), '01 . 01 . 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), '01 . 01 . 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ formatDensity: `spacious`, format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '.'), enableAccessibleFieldDOMStructure: false, @@ -221,27 +221,27 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'MM . DD . YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, '01 . 01 . 2019'); }); it('should add spaces around `-` when `formatDensity = "spacious"`', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, formatDensity: `spacious`, format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '-'), }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM - DD - YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM - DD - YYYY'); - v7Response.setProps({ value: adapter.date('2019-01-01') }); - expectFieldValueV7(v7Response.getSectionsContainer(), '01 - 01 - 2019'); + view.setProps({ value: adapter.date('2019-01-01') }); + expectFieldValueV7(view.getSectionsContainer(), '01 - 01 - 2019'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ formatDensity: `spacious`, format: adapter.expandFormat(adapter.formats.keyboardDate).replace(/\//g, '-'), enableAccessibleFieldDOMStructure: false, @@ -250,7 +250,7 @@ describeAdapters(' - Format', DateField, ({ adapter, renderWithProp const input = getTextbox(); expectFieldPlaceholderV6(input, 'MM - DD - YYYY'); - v6Response.setProps({ value: adapter.date('2019-01-01') }); + view.setProps({ value: adapter.date('2019-01-01') }); expectFieldValueV6(input, '01 - 01 - 2019'); }); }); diff --git a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx index 4036ee7beaf6..e0b6a0114dd1 100644 --- a/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx +++ b/packages/x-date-pickers/src/DateField/tests/selection.DateField.test.tsx @@ -18,13 +18,13 @@ describe(' - Selection', () => { describe('Focus', () => { it('should select 1st section (v7) / all sections (v6) on mount focus (`autoFocus = true`)', () => { // Text with v7 input - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, autoFocus: true, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Text with v6 input renderWithProps({ enableAccessibleFieldDOMStructure: false, autoFocus: true }); @@ -35,14 +35,14 @@ describe(' - Selection', () => { it('should select 1st section (v7) / all sections (v6) (`autoFocus = true`) with start separator', () => { // Text with v7 input - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, autoFocus: true, format: `- ${adapterToUse.formats.year}`, }); - expectFieldValueV7(v7Response.getSectionsContainer(), '- YYYY'); + expectFieldValueV7(view.getSectionsContainer(), '- YYYY'); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Text with v6 input renderWithProps({ @@ -109,10 +109,10 @@ describe(' - Selection', () => { it('should select day on desktop (v6 only)', () => { // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); expectFieldValueV6(input, 'MM/DD/YYYY'); expect(getCleanedSelectedContent()).to.equal('DD'); @@ -122,45 +122,45 @@ describe(' - Selection', () => { describe('Click', () => { it('should select the clicked selection when the input is already focused', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v7Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v6Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); }); it('should not change the selection when clicking on the only already selected section', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v7Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); }); }); @@ -168,40 +168,40 @@ describe(' - Selection', () => { describe('key: Ctrl + A', () => { it('should select all sections', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); }); it('should select all sections with start separator', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: `- ${adapterToUse.formats.year}`, }); - v7Response.selectSection('year'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + view.selectSection('year'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('- YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: `- ${adapterToUse.formats.year}`, }); const input = getTextbox(); - v6Response.selectSection('year'); + view.selectSection('year'); fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('- YYYY'); }); @@ -210,17 +210,17 @@ describe(' - Selection', () => { describe('key: ArrowRight', () => { it('should move selection to the next section when one section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('day'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); fireEvent.keyDown(input, { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); @@ -228,17 +228,17 @@ describe(' - Selection', () => { it('should stay on the current section when the last section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('year'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('year'); expect(getCleanedSelectedContent()).to.equal('YYYY'); - fireEvent.keyDown(v7Response.getActiveSection(2), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(2), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('year'); + view.selectSection('year'); expect(getCleanedSelectedContent()).to.equal('YYYY'); fireEvent.keyDown(input, { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); @@ -246,22 +246,22 @@ describe(' - Selection', () => { it('should select the last section when all the sections are selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowRight' }); expect(getCleanedSelectedContent()).to.equal('YYYY'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); @@ -275,17 +275,17 @@ describe(' - Selection', () => { describe('key: ArrowLeft', () => { it('should move selection to the previous section when one section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('day'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); expect(getCleanedSelectedContent()).to.equal('DD'); fireEvent.keyDown(input, { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); @@ -293,17 +293,17 @@ describe(' - Selection', () => { it('should stay on the current section when the first section is selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expect(getCleanedSelectedContent()).to.equal('MM'); fireEvent.keyDown(input, { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); @@ -311,22 +311,22 @@ describe(' - Selection', () => { it('should select the first section when all the sections are selected', () => { // Test with v7 input - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); - v7Response.selectSection('month'); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + view.selectSection('month'); // Select all sections - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); expect(getCleanedSelectedContent()).to.equal('MM/DD/YYYY'); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowLeft' }); expect(getCleanedSelectedContent()).to.equal('MM'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ enableAccessibleFieldDOMStructure: false }); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); // Select all sections fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); diff --git a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx index cd0885e18eef..2abe7bd407d2 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/editing.DateTimeField.test.tsx @@ -26,15 +26,15 @@ describe(' - Editing', () => { const onChange = spy(); const referenceDate = adapterToUse.date('2012-05-03T14:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, referenceDate, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // All sections not present should equal the one from the referenceDate, and the month should equal January (because it's an ArrowUp on an empty month). expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(referenceDate, 0)); @@ -45,7 +45,7 @@ describe(' - Editing', () => { const value = adapterToUse.date('2018-11-03T22:15:00'); const referenceDate = adapterToUse.date('2012-05-03T14:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, referenceDate, @@ -53,8 +53,8 @@ describe(' - Editing', () => { format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Should equal the initial `value` prop with one less month. expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(value, 11)); @@ -65,7 +65,7 @@ describe(' - Editing', () => { const defaultValue = adapterToUse.date('2018-11-03T22:15:00'); const referenceDate = adapterToUse.date('2012-05-03T14:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, referenceDate, @@ -73,8 +73,8 @@ describe(' - Editing', () => { format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Should equal the initial `defaultValue` prop with one less month. expect(onChange.lastCall.firstArg).toEqualDateTime(adapterToUse.setMonth(defaultValue, 11)); @@ -84,14 +84,14 @@ describe(' - Editing', () => { it('should only keep year when granularity = month', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01'); }); @@ -99,14 +99,14 @@ describe(' - Editing', () => { it('should only keep year and month when granularity = day', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, format: adapterToUse.formats.dayOfMonth, }); - v7Response.selectSection('day'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('day'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); expect(onChange.lastCall.firstArg).toEqualDateTime('2012-05-01'); }); @@ -114,20 +114,20 @@ describe(' - Editing', () => { it('should only keep up to the hours when granularity = minutes', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, format: adapterToUse.formats.fullTime24h, }); - v7Response.selectSection('hours'); + view.selectSection('hours'); // Set hours - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Set minutes - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowRight' }); - fireEvent.keyDown(v7Response.getActiveSection(1), { key: 'ArrowUp' }); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(1), { key: 'ArrowUp' }); expect(onChange.lastCall.firstArg).toEqualDateTime('2012-05-03T00:00:00.000Z'); }); @@ -138,15 +138,15 @@ describe(' - Editing', () => { const onChange = spy(); const minDate = adapterToUse.date('2030-05-05T18:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, minDate, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Respect the granularity and the minDate expect(onChange.lastCall.firstArg).toEqualDateTime('2030-01-01T00:00'); @@ -156,15 +156,15 @@ describe(' - Editing', () => { const onChange = spy(); const minDate = adapterToUse.date('2007-05-05T18:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, minDate, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Respect the granularity but not the minDate expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01T00:00'); @@ -174,15 +174,15 @@ describe(' - Editing', () => { const onChange = spy(); const maxDate = adapterToUse.date('2007-05-05T18:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, maxDate, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Respect the granularity and the minDate expect(onChange.lastCall.firstArg).toEqualDateTime('2007-01-01T00:00'); @@ -192,15 +192,15 @@ describe(' - Editing', () => { const onChange = spy(); const maxDate = adapterToUse.date('2030-05-05T18:30:00'); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, maxDate, format: adapterToUse.formats.month, }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowUp' }); // Respect the granularity but not the maxDate expect(onChange.lastCall.firstArg).toEqualDateTime('2012-01-01T00:00'); @@ -209,17 +209,17 @@ describe(' - Editing', () => { }); it('should correctly update `value` when both `format` and `value` are changed', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: null, format: 'P', }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); - v7Response.setProps({ + view.setProps({ format: 'Pp', value: adapterToUse.date('2012-05-03T14:30:00'), }); - expectFieldValueV7(v7Response.getSectionsContainer(), '05/03/2012, 02:30 PM'); + expectFieldValueV7(view.getSectionsContainer(), '05/03/2012, 02:30 PM'); }); }); diff --git a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx index 1cc3a46e7972..9ff18ca2bf5e 100644 --- a/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx +++ b/packages/x-date-pickers/src/DateTimeField/tests/timezone.DateTimeField.test.tsx @@ -46,16 +46,16 @@ describe(' - Timezone', () => { it('should use default timezone for rendering and onChange when no value and no timezone prop are provided', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, format, }); - const expectedDate = fillEmptyValue(v7Response, 'default'); + const expectedDate = fillEmptyValue(view, 'default'); // Check the rendered value (uses default timezone, e.g: UTC, see TZ env variable) - expectFieldValueV7(v7Response.getSectionsContainer(), '12/31/2022 23'); + expectFieldValueV7(view.getSectionsContainer(), '12/31/2022 23'); // Check the `onChange` value (uses default timezone, e.g: UTC, see TZ env variable) const actualDate = onChange.lastCall.firstArg; @@ -70,16 +70,16 @@ describe(' - Timezone', () => { describe(`Timezone: ${timezone}`, () => { it('should use timezone prop for onChange and rendering when no value is provided', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, onChange, format, timezone, }); - const expectedDate = fillEmptyValue(v7Response, timezone); + const expectedDate = fillEmptyValue(view, timezone); // Check the rendered value (uses timezone prop) - expectFieldValueV7(v7Response.getSectionsContainer(), '12/31/2022 23'); + expectFieldValueV7(view.getSectionsContainer(), '12/31/2022 23'); // Check the `onChange` value (uses timezone prop) const actualDate = onChange.lastCall.firstArg; @@ -89,7 +89,7 @@ describe(' - Timezone', () => { it('should use timezone prop for rendering and value timezone for onChange when a value is provided', () => { const onChange = spy(); - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, value: adapter.date(undefined, timezone), onChange, @@ -97,11 +97,11 @@ describe(' - Timezone', () => { timezone: 'America/Chicago', }); - v7Response.selectSection('month'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' }); + view.selectSection('month'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' }); // Check the rendered value (uses America/Chicago timezone) - expectFieldValueV7(v7Response.getSectionsContainer(), '05/14/2022 19'); + expectFieldValueV7(view.getSectionsContainer(), '05/14/2022 19'); // Check the `onChange` value (uses timezone prop) const expectedDate = adapter.addMonths(adapter.date(undefined, timezone), -1); @@ -125,16 +125,16 @@ describe(' - Timezone', () => { }); it('should update the field when time zone changes (timestamp remains the same)', () => { - const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true }); + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true }); const date = adapter.date('2020-06-18T14:30:10.000Z').setZone('UTC'); - v7Response.setProps({ value: date }); + view.setProps({ value: date }); - expectFieldValueV7(v7Response.getSectionsContainer(), '06/18/2020 02:30 PM'); + expectFieldValueV7(view.getSectionsContainer(), '06/18/2020 02:30 PM'); - v7Response.setProps({ value: date.setZone('America/Los_Angeles') }); + view.setProps({ value: date.setZone('America/Los_Angeles') }); - expectFieldValueV7(v7Response.getSectionsContainer(), '06/18/2020 07:30 AM'); + expectFieldValueV7(view.getSectionsContainer(), '06/18/2020 07:30 AM'); }); }); }); diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx index b3ed68ab6851..4078e7548eb3 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx @@ -3,9 +3,10 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { TransitionProps } from '@mui/material/transitions'; import { inputBaseClasses } from '@mui/material/InputBase'; -import { fireEvent, screen, userEvent } from '@mui/internal-test-utils'; +import { fireEvent, screen } from '@mui/internal-test-utils'; import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; import { createPickerRenderer, adapterToUse, openPicker } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); @@ -46,7 +47,7 @@ describe('', () => { expect(handleViewChange.callCount).to.equal(1); // Dismiss the picker - userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' }); openPicker({ type: 'date', variant: 'desktop' }); expect(handleViewChange.callCount).to.equal(2); @@ -71,7 +72,7 @@ describe('', () => { expect(handleViewChange.callCount).to.equal(1); // Dismiss the picker - userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' }); openPicker({ type: 'date', variant: 'desktop' }); expect(handleViewChange.callCount).to.equal(2); @@ -88,7 +89,7 @@ describe('', () => { expect(screen.getByRole('radio', { checked: true, name: '2018' })).not.to.equal(null); // Dismiss the picker - userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' }); setProps({ views: ['month', 'year'] }); openPicker({ type: 'date', variant: 'desktop' }); // wait for all pending changes to be flushed @@ -125,7 +126,7 @@ describe('', () => { expect(screen.getByRole('radio', { checked: true, name: 'January' })).not.to.equal(null); // Dismiss the picker - userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' }); setProps({ view: 'year' }); openPicker({ type: 'date', variant: 'desktop' }); // wait for all pending changes to be flushed @@ -220,7 +221,7 @@ describe('', () => { render(); - userEvent.mousePress(screen.getByLabelText(/Choose date/)); + fireUserEvent.mousePress(screen.getByLabelText(/Choose date/)); expect(onOpen.callCount).to.equal(1); expect(screen.queryByRole('dialog')).toBeVisible(); @@ -244,14 +245,14 @@ describe('', () => { openPicker({ type: 'date', variant: 'desktop' }); // Select year - userEvent.mousePress(screen.getByRole('radio', { name: '2025' })); + fireUserEvent.mousePress(screen.getByRole('radio', { name: '2025' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1)); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); // Change the date (same value) - userEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1)); diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx index 0357d40ba542..782794ba18eb 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/describes.DesktopDatePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -11,6 +11,7 @@ import { } from 'test/utils/pickers'; import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -62,7 +63,7 @@ describe(' - Describes', () => { const newValue = applySameValue ? value : adapterToUse.addDays(value, 1); if (isOpened) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); } else { diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx index 808dce9bbcf9..4ef2b7327fab 100644 --- a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx @@ -25,7 +25,7 @@ describe(' - Field', () => { it('should be able to reset a single section', () => { // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { enableAccessibleFieldDOMStructure: true as const, format: `${adapterToUse.formats.month} ${adapterToUse.formats.dayOfMonth}`, @@ -33,22 +33,22 @@ describe(' - Field', () => { { componentFamily: 'picker' }, ); - v7Response.selectSection('month'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM DD'); + view.selectSection('month'); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM DD'); - v7Response.pressKey(0, 'N'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'November DD'); + view.pressKey(0, 'N'); + expectFieldValueV7(view.getSectionsContainer(), 'November DD'); - v7Response.pressKey(1, '4'); - expectFieldValueV7(v7Response.getSectionsContainer(), 'November 04'); + view.pressKey(1, '4'); + expectFieldValueV7(view.getSectionsContainer(), 'November 04'); - v7Response.pressKey(1, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'November DD'); + view.pressKey(1, ''); + expectFieldValueV7(view.getSectionsContainer(), 'November DD'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { enableAccessibleFieldDOMStructure: false as const, format: `${adapterToUse.formats.month} ${adapterToUse.formats.dayOfMonth}`, @@ -57,7 +57,7 @@ describe(' - Field', () => { ); const input = getTextbox(); - v6Response.selectSection('month'); + view.selectSection('month'); expectFieldPlaceholderV6(input, 'MMMM DD'); fireEvent.change(input, { target: { value: 'N DD' } }); // Press "N" @@ -73,21 +73,21 @@ describe(' - Field', () => { it('should adapt the default field format based on the props of the picker', () => { const testFormat = (props: DesktopDatePickerProps, expectedFormat: string) => { // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat); - v7Response.unmount(); + expectFieldValueV7(view.getSectionsContainer(), expectedFormat); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: false as const }, { componentFamily: 'picker' }, ); const input = getTextbox(); expectFieldPlaceholderV6(input, expectedFormat); - v6Response.unmount(); + view.unmount(); }; testFormat({ views: ['year'] }, 'YYYY'); @@ -171,7 +171,7 @@ describe(' - Field', () => { describeAdapters('Timezone', DesktopDatePicker, ({ adapter, renderWithProps }) => { it('should clear the selected section when all sections are completed when using timezones', () => { - const v7Response = renderWithProps( + const view = renderWithProps( { enableAccessibleFieldDOMStructure: true as const, value: adapter.date()!, @@ -181,11 +181,11 @@ describe(' - Field', () => { { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), 'June 2022'); - v7Response.selectSection('month'); + expectFieldValueV7(view.getSectionsContainer(), 'June 2022'); + view.selectSection('month'); - v7Response.pressKey(0, ''); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MMMM 2022'); + view.pressKey(0, ''); + expectFieldValueV7(view.getSectionsContainer(), 'MMMM 2022'); }); }); }); diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx index ade01ebb4a70..fbaa72781475 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/DesktopDateTimePicker.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker'; import { adapterToUse, createPickerRenderer, openPicker } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render } = createPickerRenderer({ @@ -17,7 +18,7 @@ describe('', () => { render(); - userEvent.mousePress(screen.getByLabelText(/Choose date/)); + fireUserEvent.mousePress(screen.getByLabelText(/Choose date/)); expect(onOpen.callCount).to.equal(1); expect(screen.queryByRole('dialog')).toBeVisible(); @@ -41,23 +42,23 @@ describe('', () => { openPicker({ type: 'date-time', variant: 'desktop' }); // Select year - userEvent.mousePress(screen.getByRole('radio', { name: '2025' })); + fireUserEvent.mousePress(screen.getByRole('radio', { name: '2025' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2025, 0, 1, 11, 55)); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); // Change the date (same value) - userEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '1' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change // Change the hours (same value) - userEvent.mousePress(screen.getByRole('option', { name: '11 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '11 hours' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change // Change the minutes (same value) - userEvent.mousePress(screen.getByRole('option', { name: '55 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '55 minutes' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change // Change the meridiem (same value) - userEvent.mousePress(screen.getByRole('option', { name: 'AM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'AM' })); expect(onChange.callCount).to.equal(1); // Don't call onChange again since the value did not change expect(onAccept.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); @@ -81,26 +82,26 @@ describe('', () => { openPicker({ type: 'date-time', variant: 'desktop' }); // Change the date multiple times to check that picker doesn't close after cycling through all views internally - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); - userEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); - userEvent.mousePress(screen.getByRole('gridcell', { name: '4' })); - userEvent.mousePress(screen.getByRole('gridcell', { name: '5' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '3' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '4' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '5' })); expect(onChange.callCount).to.equal(4); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); // Change the hours - userEvent.mousePress(screen.getByRole('option', { name: '10 hours' })); - userEvent.mousePress(screen.getByRole('option', { name: '9 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '10 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '9 hours' })); expect(onChange.callCount).to.equal(6); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); // Change the minutes - userEvent.mousePress(screen.getByRole('option', { name: '50 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '50 minutes' })); expect(onChange.callCount).to.equal(7); // Change the meridiem - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(8); expect(onAccept.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); @@ -118,10 +119,10 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByLabelText(/Choose date/)); + fireUserEvent.mousePress(screen.getByLabelText(/Choose date/)); - userEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); - userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '2' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); expect(onChange.callCount).to.equal(2); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 2, 3, 0, 0)); @@ -139,9 +140,9 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByLabelText(/Choose date/)); + fireUserEvent.mousePress(screen.getByLabelText(/Choose date/)); - userEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '03:00 AM' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 3, 0, 0)); diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx index 04ba5bf60006..dc66bec63c58 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/describes.DesktopDateTimePicker.test.tsx @@ -1,4 +1,4 @@ -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -12,6 +12,7 @@ import { DesktopDateTimePicker } from '@mui/x-date-pickers/DesktopDateTimePicker import { expect } from 'chai'; import * as React from 'react'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -84,20 +85,22 @@ describe(' - Describes', () => { : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5); if (isOpened) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); const hours = adapterToUse.format(newValue, hasMeridiem ? 'hours12h' : 'hours24h'); const hoursNumber = adapterToUse.getHours(newValue); - userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` })); - userEvent.mousePress( + fireUserEvent.mousePress( + screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }), + ); + fireUserEvent.mousePress( screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue)} minutes` }), ); if (hasMeridiem) { // meridiem is an extra view on `DesktopDateTimePicker` // we need to click it to finish selection - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }), ); } diff --git a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx index 3a951470e5f3..54877db6fa12 100644 --- a/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopDateTimePicker/tests/field.DesktopDateTimePicker.test.tsx @@ -19,35 +19,35 @@ describe(' - Field', () => { }); it('should pass the ampm prop to the field', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true as const, ampm: true, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa'); - v7Response.setProps({ ampm: false }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm'); + view.setProps({ ampm: false }); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm'); }); it('should adapt the default field format based on the props of the picker', () => { const testFormat = (props: DesktopDateTimePickerProps, expectedFormat: string) => { // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat); - v7Response.unmount(); + expectFieldValueV7(view.getSectionsContainer(), expectedFormat); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: false as const }, { componentFamily: 'picker' }, ); const input = getTextbox(); expectFieldPlaceholderV6(input, expectedFormat); - v6Response.unmount(); + view.unmount(); }; testFormat({ views: ['day', 'hours', 'minutes'], ampm: false }, 'DD hh:mm'); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx index b520cad77727..b60fa37d20fb 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/DesktopTimePicker.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; import { createPickerRenderer, openPicker } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render } = createPickerRenderer({ @@ -76,7 +77,7 @@ describe('', () => { openPicker({ type: 'time', variant: 'desktop' }); - userEvent.mousePress(screen.getByRole('option', { name: '09:00 AM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '09:00 AM' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 9, 0)); expect(onAccept.callCount).to.equal(1); @@ -93,17 +94,17 @@ describe('', () => { openPicker({ type: 'time', variant: 'desktop' }); - userEvent.mousePress(screen.getByRole('option', { name: '2 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '2 hours' })); expect(onChange.callCount).to.equal(1); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); - userEvent.mousePress(screen.getByRole('option', { name: '15 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '15 minutes' })); expect(onChange.callCount).to.equal(2); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(3); expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 15)); @@ -119,22 +120,22 @@ describe('', () => { openPicker({ type: 'time', variant: 'desktop' }); - userEvent.mousePress(screen.getByRole('option', { name: '15 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '15 minutes' })); expect(onChange.callCount).to.equal(1); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); - userEvent.mousePress(screen.getByRole('option', { name: '2 hours' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '2 hours' })); expect(onChange.callCount).to.equal(2); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); - userEvent.mousePress(screen.getByRole('option', { name: '25 minutes' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '25 minutes' })); expect(onChange.callCount).to.equal(3); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(4); expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 14, 25)); @@ -150,7 +151,7 @@ describe('', () => { openPicker({ type: 'time', variant: 'desktop' }); - userEvent.mousePress(screen.getByRole('option', { name: 'PM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: 'PM' })); expect(onChange.callCount).to.equal(1); expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0]).toEqualDateTime(new Date(2018, 0, 1, 12, 0)); diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx index 3b6e6eb28868..2fe4730f6fd1 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/describes.DesktopTimePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -12,6 +12,7 @@ import { } from 'test/utils/pickers'; import { DesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -76,14 +77,16 @@ describe(' - Describes', () => { const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); const hours = adapterToUse.format(newValue, hasMeridiem ? 'hours12h' : 'hours24h'); const hoursNumber = adapterToUse.getHours(newValue); - userEvent.mousePress(screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` })); - userEvent.mousePress( + fireUserEvent.mousePress( + screen.getByRole('option', { name: `${parseInt(hours, 10)} hours` }), + ); + fireUserEvent.mousePress( screen.getByRole('option', { name: `${adapterToUse.getMinutes(newValue)} minutes` }), ); if (hasMeridiem) { // meridiem is an extra view on `DesktopTimePicker` // we need to click it to finish selection - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('option', { name: hoursNumber >= 12 ? 'PM' : 'AM' }), ); } diff --git a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx index 10d1848a5fe3..88c95f981503 100644 --- a/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx +++ b/packages/x-date-pickers/src/DesktopTimePicker/tests/field.DesktopTimePicker.test.tsx @@ -16,35 +16,35 @@ describe(' - Field', () => { }); it('should pass the ampm prop to the field', () => { - const v7Response = renderWithProps( + const view = renderWithProps( { enableAccessibleFieldDOMStructure: true as const, ampm: true }, { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm aa'); + expectFieldValueV7(view.getSectionsContainer(), 'hh:mm aa'); - v7Response.setProps({ ampm: false }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm'); + view.setProps({ ampm: false }); + expectFieldValueV7(view.getSectionsContainer(), 'hh:mm'); }); it('should adapt the default field format based on the props of the picker', () => { const testFormat = (props: DesktopTimePickerProps, expectedFormat: string) => { // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: true as const }, { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), expectedFormat); - v7Response.unmount(); + expectFieldValueV7(view.getSectionsContainer(), expectedFormat); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { ...props, enableAccessibleFieldDOMStructure: false as const }, { componentFamily: 'picker' }, ); const input = getTextbox(); expectFieldPlaceholderV6(input, expectedFormat); - v6Response.unmount(); + view.unmount(); }; testFormat({ views: ['hours'], ampm: false }, 'hh'); diff --git a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx index 4f6617cc90c6..96fb9bd96fa6 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/DigitalClock.test.tsx @@ -93,16 +93,15 @@ describe('', () => { }); it('forwards list class to MenuList', () => { - const { getByRole } = render(); + render(); - const list = getByRole('listbox'); - expect(list).to.have.class('foo'); + expect(screen.getByRole('listbox')).to.have.class('foo'); }); it('forwards item class to clock item', () => { - const { getAllByRole } = render(); + render(); - const options = getAllByRole('option'); + const options = screen.getAllByRole('option'); expect(options[0]).to.have.class('bar'); }); }); diff --git a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx index 9dc25d08aef5..070c9b9243f5 100644 --- a/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx +++ b/packages/x-date-pickers/src/DigitalClock/tests/timezone.DigitalClock.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { DigitalClock } from '@mui/x-date-pickers/DigitalClock'; import { getDateOffset, describeAdapters } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; const TIMEZONE_TO_TEST = ['UTC', 'system', 'America/New_York']; @@ -25,7 +26,7 @@ describe(' - Timezone', () => { const onChange = spy(); render(); - userEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' })); const expectedDate = adapter.setHours(adapter.date(), 8); @@ -44,7 +45,7 @@ describe(' - Timezone', () => { const onChange = spy(); render(); - userEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '08:00 AM' })); const expectedDate = adapter.setHours( adapter.startOfDay(adapter.date(undefined, timezone)), @@ -75,7 +76,7 @@ describe(' - Timezone', () => { (adapter.getHours(value) + offsetDiff / 60 + 24) % 24, ); - userEvent.mousePress(screen.getByRole('option', { name: '08:30 PM' })); + fireUserEvent.mousePress(screen.getByRole('option', { name: '08:30 PM' })); const actualDate = onChange.lastCall.firstArg; diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx index 1095449d3312..3dc67b806538 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/MobileDatePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireEvent, screen, userEvent } from '@mui/internal-test-utils'; +import { fireEvent, screen } from '@mui/internal-test-utils'; import { PickersDay } from '@mui/x-date-pickers/PickersDay'; import { DayCalendarSkeleton } from '@mui/x-date-pickers/DayCalendarSkeleton'; import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; @@ -13,6 +13,7 @@ import { openPicker, getFieldSectionsContainer, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -155,7 +156,7 @@ describe('', () => { render(); - userEvent.mousePress(getFieldSectionsContainer()); + fireUserEvent.mousePress(getFieldSectionsContainer()); expect(onOpen.callCount).to.equal(1); expect(screen.queryByRole('dialog')).toBeVisible(); @@ -188,17 +189,17 @@ describe('', () => { }); it('should update internal state when controlled value is updated', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true as const, value: adapterToUse.date('2019-01-01'), }); // Set a date - expectFieldValueV7(v7Response.getSectionsContainer(), '01/01/2019'); + expectFieldValueV7(view.getSectionsContainer(), '01/01/2019'); // Clean value using external control - v7Response.setProps({ value: null }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + view.setProps({ value: null }); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); // Open and Dismiss the picker openPicker({ type: 'date', variant: 'mobile' }); @@ -207,7 +208,7 @@ describe('', () => { clock.runToLast(); // Verify it's still a clean value - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY'); }); }); }); diff --git a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx index 5dfe64dc6e89..b988c49e5827 100644 --- a/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDatePicker/tests/describes.MobileDatePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent, fireEvent } from '@mui/internal-test-utils'; +import { screen, fireEvent } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -12,6 +12,7 @@ import { } from 'test/utils/pickers'; import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -64,7 +65,7 @@ describe(' - Describes', () => { } const newValue = applySameValue ? value : adapterToUse.addDays(value, 1); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx index ad9c3641efbb..34849b1b5dc0 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/MobileDateTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireTouchChangedEvent, screen, userEvent } from '@mui/internal-test-utils'; +import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils'; import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'; import { adapterToUse, @@ -10,6 +10,7 @@ import { getClockTouchEvent, getFieldSectionsContainer, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -98,7 +99,7 @@ describe('', () => { render(); - userEvent.mousePress(getFieldSectionsContainer()); + fireUserEvent.mousePress(getFieldSectionsContainer()); expect(onOpen.callCount).to.equal(1); expect(screen.queryByRole('dialog')).toBeVisible(); @@ -131,8 +132,8 @@ describe('', () => { expect(onClose.callCount).to.equal(0); // Change the year view - userEvent.mousePress(screen.getByLabelText(/switch to year view/)); - userEvent.mousePress(screen.getByText('2010', { selector: 'button' })); + fireUserEvent.mousePress(screen.getByLabelText(/switch to year view/)); + fireUserEvent.mousePress(screen.getByText('2010', { selector: 'button' })); expect(onChange.callCount).to.equal(1); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2010, 0, 1)); @@ -140,7 +141,7 @@ describe('', () => { clock.runToLast(); // Change the date - userEvent.mousePress(screen.getByRole('gridcell', { name: '15' })); + fireUserEvent.mousePress(screen.getByRole('gridcell', { name: '15' })); expect(onChange.callCount).to.equal(2); expect(onChange.lastCall.args[0]).toEqualDateTime(new Date(2010, 0, 15)); diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx index 4d1d819ad773..7db743bb1c2e 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/describes.MobileDateTimePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, userEvent, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils'; +import { screen, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -13,6 +13,7 @@ import { } from 'test/utils/pickers'; import { MobileDateTimePicker } from '@mui/x-date-pickers/MobileDateTimePicker'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -78,7 +79,7 @@ describe(' - Describes', () => { const newValue = applySameValue ? value : adapterToUse.addMinutes(adapterToUse.addHours(adapterToUse.addDays(value, 1), 1), 5); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('gridcell', { name: adapterToUse.getDate(newValue).toString() }), ); const hasMeridiem = adapterToUse.is12HourCycleInCurrentLocale(); @@ -97,7 +98,9 @@ describe(' - Describes', () => { if (hasMeridiem) { const newHours = adapterToUse.getHours(newValue); // select appropriate meridiem - userEvent.mousePress(screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' })); + fireUserEvent.mousePress( + screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }), + ); } // Close the picker @@ -107,7 +110,7 @@ describe(' - Describes', () => { clock.runToLast(); } else { // return to the date view in case we'd like to repeat the selection process - userEvent.mousePress(screen.getByRole('tab', { name: 'pick date' })); + fireUserEvent.mousePress(screen.getByRole('tab', { name: 'pick date' })); } return newValue; diff --git a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx index 2a8aae0ea83c..413a025f2002 100644 --- a/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileDateTimePicker/tests/field.MobileDateTimePicker.test.tsx @@ -14,14 +14,14 @@ describe(' - Field', () => { }); it('should pass the ampm prop to the field', () => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true as const, ampm: true, }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa'); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm aa'); - v7Response.setProps({ ampm: false }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'MM/DD/YYYY hh:mm'); + view.setProps({ ampm: false }); + expectFieldValueV7(view.getSectionsContainer(), 'MM/DD/YYYY hh:mm'); }); }); diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx index 5bf9dade08f8..16e28b5b3c29 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/MobileTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { spy } from 'sinon'; import { expect } from 'chai'; -import { fireTouchChangedEvent, screen, userEvent, act } from '@mui/internal-test-utils'; +import { fireTouchChangedEvent, screen, act } from '@mui/internal-test-utils'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; import { createPickerRenderer, @@ -10,6 +10,7 @@ import { getClockTouchEvent, getFieldSectionsContainer, } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render } = createPickerRenderer({ clock: 'fake' }); @@ -20,7 +21,7 @@ describe('', () => { render(); - userEvent.mousePress(getFieldSectionsContainer()); + fireUserEvent.mousePress(getFieldSectionsContainer()); expect(onOpen.callCount).to.equal(1); expect(screen.queryByRole('dialog')).toBeVisible(); diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx index 79b4c2029072..8a694129a784 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/describes.MobileTimePicker.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { screen, fireEvent, userEvent, fireTouchChangedEvent } from '@mui/internal-test-utils'; +import { screen, fireEvent, fireTouchChangedEvent } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -14,6 +14,7 @@ import { } from 'test/utils/pickers'; import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -92,7 +93,9 @@ describe(' - Describes', () => { if (hasMeridiem) { const newHours = adapterToUse.getHours(newValue); // select appropriate meridiem - userEvent.mousePress(screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' })); + fireUserEvent.mousePress( + screen.getByRole('button', { name: newHours >= 12 ? 'PM' : 'AM' }), + ); } // Close the picker @@ -102,7 +105,7 @@ describe(' - Describes', () => { clock.runToLast(); } else { // return to the hours view in case we'd like to repeat the selection process - userEvent.mousePress(screen.getByRole('button', { name: 'Open previous view' })); + fireUserEvent.mousePress(screen.getByRole('button', { name: 'Open previous view' })); } return newValue; diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx index 206189acc74a..befd20099764 100644 --- a/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx +++ b/packages/x-date-pickers/src/MobileTimePicker/tests/field.MobileTimePicker.test.tsx @@ -14,14 +14,14 @@ describe(' - Field', () => { }); it('should pass the ampm prop to the field', () => { - const v7Response = renderWithProps( + const view = renderWithProps( { enableAccessibleFieldDOMStructure: true as const, ampm: true }, { componentFamily: 'picker' }, ); - expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm aa'); + expectFieldValueV7(view.getSectionsContainer(), 'hh:mm aa'); - v7Response.setProps({ ampm: false }); - expectFieldValueV7(v7Response.getSectionsContainer(), 'hh:mm'); + view.setProps({ ampm: false }); + expectFieldValueV7(view.getSectionsContainer(), 'hh:mm'); }); }); diff --git a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx index f439b851f2c3..ef370265decd 100644 --- a/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx +++ b/packages/x-date-pickers/src/MonthCalendar/tests/describes.MonthCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { userEvent, screen } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { createPickerRenderer, adapterToUse, @@ -9,6 +9,7 @@ import { } from 'test/utils/pickers'; import { MonthCalendar, monthCalendarClasses as classes } from '@mui/x-date-pickers/MonthCalendar'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ clock: 'fake' }); @@ -54,7 +55,7 @@ describe(' - Describes', () => { setNewValue: (value) => { const newValue = adapterToUse.addMonths(value, 1); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('radio', { name: adapterToUse.format(newValue, 'month') }), ); diff --git a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx index c4837e507ce7..465baad26cee 100644 --- a/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx +++ b/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.test.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { PickersActionBar } from '@mui/x-date-pickers/PickersActionBar'; import { createPickerRenderer } from 'test/utils/pickers'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe('', () => { const { render } = createPickerRenderer({ @@ -44,7 +45,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onClear.callCount).to.equal(1); }); @@ -64,7 +65,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByText(/cancel/i)); + fireUserEvent.mousePress(screen.getByText(/cancel/i)); expect(onCancel.callCount).to.equal(1); }); @@ -84,7 +85,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByText(/ok/i)); + fireUserEvent.mousePress(screen.getByText(/ok/i)); expect(onAccept.callCount).to.equal(1); }); @@ -104,7 +105,7 @@ describe('', () => { />, ); - userEvent.mousePress(screen.getByText(/today/i)); + fireUserEvent.mousePress(screen.getByText(/today/i)); expect(onSetToday.callCount).to.equal(1); }); diff --git a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx index 8e2e37371b5d..f5a04623b4af 100644 --- a/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx +++ b/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { fireTouchChangedEvent, screen, getAllByRole, fireEvent } from '@mui/internal-test-utils'; +import { fireTouchChangedEvent, screen, within, fireEvent } from '@mui/internal-test-utils'; import { adapterToUse, createPickerRenderer, describeValidation } from 'test/utils/pickers'; import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker'; import { describeConformance } from 'test/utils/describeConformance'; @@ -78,7 +78,7 @@ describe('', () => { // hours are not disabled const hoursContainer = screen.getByRole('listbox'); - const hours = getAllByRole(hoursContainer, 'option'); + const hours = within(hoursContainer).getAllByRole('option'); const disabledHours = hours.filter((day) => day.getAttribute('aria-disabled') === 'true'); expect(hours.length).to.equal(12); @@ -128,7 +128,7 @@ describe('', () => { // hours are disabled const hoursContainer = screen.getByRole('listbox'); - const hours = getAllByRole(hoursContainer, 'option'); + const hours = within(hoursContainer).getAllByRole('option'); const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true'); expect(hours.length).to.equal(12); expect(disabledHours.length).to.equal(12); diff --git a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx index 36bfb4c6597b..5ecc40f8b19c 100644 --- a/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx +++ b/packages/x-date-pickers/src/TimeClock/tests/TimeClock.test.tsx @@ -1,13 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { - fireEvent, - fireTouchChangedEvent, - screen, - within, - getAllByRole, -} from '@mui/internal-test-utils'; +import { fireEvent, fireTouchChangedEvent, screen, within } from '@mui/internal-test-utils'; import { TimeClock } from '@mui/x-date-pickers/TimeClock'; import { createPickerRenderer, adapterToUse, timeClockHandler } from 'test/utils/pickers'; @@ -166,7 +160,7 @@ describe('', () => { // hours are not disabled const hoursContainer = screen.getByRole('listbox'); - const hours = getAllByRole(hoursContainer, 'option'); + const hours = within(hoursContainer).getAllByRole('option'); const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true'); expect(hours.length).to.equal(12); @@ -194,7 +188,7 @@ describe('', () => { // hours are disabled const hoursContainer = screen.getByRole('listbox'); - const hours = getAllByRole(hoursContainer, 'option'); + const hours = within(hoursContainer).getAllByRole('option'); const disabledHours = hours.filter((hour) => hour.getAttribute('aria-disabled') === 'true'); expect(hours.length).to.equal(12); diff --git a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx index d9736f41ad51..9ddc968fd060 100644 --- a/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx +++ b/packages/x-date-pickers/src/TimeField/tests/editing.TimeField.test.tsx @@ -497,27 +497,27 @@ describe(' - Editing', () => { it('should go to the next section when pressing `2` in a 12-hours format', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.fullTime12h, }); - v7Response.selectSection('hours'); + view.selectSection('hours'); - v7Response.pressKey(0, '2'); - expectFieldValueV7(v7Response.getSectionsContainer(), '02:mm aa'); + view.pressKey(0, '2'); + expectFieldValueV7(view.getSectionsContainer(), '02:mm aa'); expect(getCleanedSelectedContent()).to.equal('mm'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: adapter.formats.fullTime12h, }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); // Press "2" fireEvent.change(input, { target: { value: '2:mm aa' } }); @@ -527,32 +527,32 @@ describe(' - Editing', () => { it('should go to the next section when pressing `1` then `3` in a 12-hours format', () => { // Test with v7 input - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, format: adapter.formats.fullTime12h, }); - v7Response.selectSection('hours'); + view.selectSection('hours'); - v7Response.pressKey(0, '1'); - expectFieldValueV7(v7Response.getSectionsContainer(), '01:mm aa'); + view.pressKey(0, '1'); + expectFieldValueV7(view.getSectionsContainer(), '01:mm aa'); expect(getCleanedSelectedContent()).to.equal('01'); // Press "3" - v7Response.pressKey(0, '3'); - expectFieldValueV7(v7Response.getSectionsContainer(), '03:mm aa'); + view.pressKey(0, '3'); + expectFieldValueV7(view.getSectionsContainer(), '03:mm aa'); expect(getCleanedSelectedContent()).to.equal('mm'); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, format: adapter.formats.fullTime12h, }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); // Press "1" fireEvent.change(input, { target: { value: '1:mm aa' } }); @@ -638,30 +638,30 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, }); - v7Response.selectSection('hours'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' }); + view.selectSection('hours'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' }); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); fireEvent.keyDown(input, { key: 'ArrowDown' }); expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3)); @@ -671,31 +671,31 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, format: adapter.formats.fullTime24h, }); - v7Response.selectSection('hours'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'a', ctrlKey: true }); - v7Response.pressKey(null, ''); - fireEvent.keyDown(v7Response.getSectionsContainer(), { key: 'ArrowLeft' }); + view.selectSection('hours'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'a', ctrlKey: true }); + view.pressKey(null, ''); + fireEvent.keyDown(view.getSectionsContainer(), { key: 'ArrowLeft' }); - v7Response.pressKey(0, '3'); - expectFieldValueV7(v7Response.getSectionsContainer(), '03:mm'); + view.pressKey(0, '3'); + expectFieldValueV7(view.getSectionsContainer(), '03:mm'); - v7Response.pressKey(1, '4'); - expectFieldValueV7(v7Response.getSectionsContainer(), '03:04'); + view.pressKey(1, '4'); + expectFieldValueV7(view.getSectionsContainer(), '03:04'); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 3, 4, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, @@ -703,7 +703,7 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); fireEvent.keyDown(input, { key: 'a', ctrlKey: true }); fireEvent.change(input, { target: { value: '' } }); fireEvent.keyDown(input, { key: 'ArrowLeft' }); @@ -720,24 +720,24 @@ describe(' - Editing', () => { // Test with v7 input const onChangeV7 = spy(); - const v7Response = renderWithProps({ + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV7, format: adapter.formats.hours24h, }); - v7Response.selectSection('hours'); - fireEvent.keyDown(v7Response.getActiveSection(0), { key: 'ArrowDown' }); + view.selectSection('hours'); + fireEvent.keyDown(view.getActiveSection(0), { key: 'ArrowDown' }); expect(onChangeV7.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3)); - v7Response.unmount(); + view.unmount(); // Test with v6 input const onChangeV6 = spy(); - const v6Response = renderWithProps({ + view = renderWithProps({ enableAccessibleFieldDOMStructure: false, defaultValue: adapter.date('2010-04-03T03:03:03'), onChange: onChangeV6, @@ -745,7 +745,7 @@ describe(' - Editing', () => { }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); fireEvent.keyDown(input, { key: 'ArrowDown' }); expect(onChangeV6.lastCall.firstArg).toEqualDateTime(new Date(2010, 3, 3, 2, 3, 3)); diff --git a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx index e2b1c722d71a..87eeb7fee9f4 100644 --- a/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx +++ b/packages/x-date-pickers/src/YearCalendar/tests/describes.YearCalendar.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { userEvent, screen } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { YearCalendar, yearCalendarClasses as classes } from '@mui/x-date-pickers/YearCalendar'; import { createPickerRenderer, @@ -9,6 +9,7 @@ import { describeValue, } from 'test/utils/pickers'; import { describeConformance } from 'test/utils/describeConformance'; +import { fireUserEvent } from 'test/utils/fireUserEvent'; describe(' - Describes', () => { const { render, clock } = createPickerRenderer({ @@ -51,7 +52,7 @@ describe(' - Describes', () => { }, setNewValue: (value) => { const newValue = adapterToUse.addYears(value, 1); - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('radio', { name: adapterToUse.getYear(newValue).toString() }), ); diff --git a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx index f9a7fc614478..3d7436f158ea 100644 --- a/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx +++ b/packages/x-date-pickers/src/tests/fieldKeyboardInteraction.test.tsx @@ -75,28 +75,22 @@ describe(`RTL - test arrows navigation`, () => { const expectedValues = ['hh', 'mm', 'YYYY', 'MM', 'DD', 'DD']; // Test with v7 input - const v7Response = renderWithProps( - { enableAccessibleFieldDOMStructure: true }, - { direction: 'rtl' }, - ); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }, { direction: 'rtl' }); - v7Response.selectSection('hours'); + view.selectSection('hours'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); - fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowRight' }); }); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( - { enableAccessibleFieldDOMStructure: false }, - { direction: 'rtl' }, - ); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }, { direction: 'rtl' }); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); @@ -108,28 +102,22 @@ describe(`RTL - test arrows navigation`, () => { const expectedValues = ['DD', 'MM', 'YYYY', 'mm', 'hh', 'hh']; // Test with v7 input - const v7Response = renderWithProps( - { enableAccessibleFieldDOMStructure: true }, - { direction: 'rtl' }, - ); + let view = renderWithProps({ enableAccessibleFieldDOMStructure: true }, { direction: 'rtl' }); - v7Response.selectSection('day'); + view.selectSection('day'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); - fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowLeft' }); }); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( - { enableAccessibleFieldDOMStructure: false }, - { direction: 'rtl' }, - ); + view = renderWithProps({ enableAccessibleFieldDOMStructure: false }, { direction: 'rtl' }); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); @@ -142,7 +130,7 @@ describe(`RTL - test arrows navigation`, () => { const expectedValues = ['11', '54', '1397', '02', '05', '05']; // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-04-25T11:54:00'), @@ -150,17 +138,17 @@ describe(`RTL - test arrows navigation`, () => { { direction: 'rtl' }, ); - v7Response.selectSection('hours'); + view.selectSection('hours'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); - fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowRight' }); + fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowRight' }); }); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { defaultValue: adapter.date('2018-04-25T11:54:00'), enableAccessibleFieldDOMStructure: false, @@ -169,7 +157,7 @@ describe(`RTL - test arrows navigation`, () => { ); const input = getTextbox(); - v6Response.selectSection('hours'); + view.selectSection('hours'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); @@ -182,7 +170,7 @@ describe(`RTL - test arrows navigation`, () => { const expectedValues = ['05', '02', '1397', '54', '11', '11']; // Test with v7 input - const v7Response = renderWithProps( + let view = renderWithProps( { enableAccessibleFieldDOMStructure: true, defaultValue: adapter.date('2018-04-25T11:54:00'), @@ -190,17 +178,17 @@ describe(`RTL - test arrows navigation`, () => { { direction: 'rtl' }, ); - v7Response.selectSection('day'); + view.selectSection('day'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); - fireEvent.keyDown(v7Response.getActiveSection(undefined), { key: 'ArrowLeft' }); + fireEvent.keyDown(view.getActiveSection(undefined), { key: 'ArrowLeft' }); }); - v7Response.unmount(); + view.unmount(); // Test with v6 input - const v6Response = renderWithProps( + view = renderWithProps( { defaultValue: adapter.date('2018-04-25T11:54:00'), enableAccessibleFieldDOMStructure: false, @@ -209,7 +197,7 @@ describe(`RTL - test arrows navigation`, () => { ); const input = getTextbox(); - v6Response.selectSection('day'); + view.selectSection('day'); expectedValues.forEach((expectedValue) => { expect(getCleanedSelectedContent()).to.equal(expectedValue); @@ -265,16 +253,16 @@ adapterToTest.forEach((adapterName) => { expectedValue: TDate; sectionConfig: ReturnType; }) => { - const v7Response = renderWithProps({ + const view = renderWithProps({ enableAccessibleFieldDOMStructure: true, defaultValue: initialValue, format, }); - v7Response.selectSection(sectionConfig.type); - fireEvent.keyDown(v7Response.getActiveSection(0), { key }); + view.selectSection(sectionConfig.type); + fireEvent.keyDown(view.getActiveSection(0), { key }); expectFieldValueV7( - v7Response.getSectionsContainer(), + view.getSectionsContainer(), cleanValueStr(adapter.formatByString(expectedValue, format), sectionConfig), ); }; diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx index 9e01b6229860..feae408bdcc7 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.test.tsx @@ -76,54 +76,54 @@ describeTreeView< describe('itemReordering prop', () => { it('should allow to drag and drop items when props.itemsReordering={true}', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([ + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([ { id: '2', children: [{ id: '1' }] }, { id: '3' }, ]); }); it('should not allow to drag and drop items when props.itemsReordering={false}', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: false, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); }); it('should not allow to drag and drop items when props.itemsReordering is not defined', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); }); it('should allow to expand the new parent of the dragged item when it was not expandable before', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], itemsReordering: true, defaultExpandedItems: ['1'], }); - dragEvents.fullDragSequence(response.getItemRoot('1.1'), response.getItemContent('2')); + dragEvents.fullDragSequence(view.getItemRoot('1.1'), view.getItemContent('2')); - fireEvent.focus(response.getItemRoot('2')); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'Enter' }); + fireEvent.focus(view.getItemRoot('2')); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'Enter' }); - expect(response.getItemIdTree()).to.deep.equal([ + expect(view.getItemIdTree()).to.deep.equal([ { id: '1', children: [] }, { id: '2', children: [{ id: '1.1' }] }, ]); @@ -133,14 +133,14 @@ describeTreeView< describe('onItemPositionChange prop', () => { it('should call onItemPositionChange when an item is moved', () => { const onItemPositionChange = spy(); - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, onItemPositionChange, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); expect(onItemPositionChange.callCount).to.equal(1); expect(onItemPositionChange.lastCall.firstArg).to.deep.equal({ itemId: '1', @@ -152,27 +152,27 @@ describeTreeView< describe('isItemReorderable prop', () => { it('should not allow to drag an item when isItemReorderable returns false', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => false, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); }); it('should allow to drag an item when isItemReorderable returns true', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => true, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([ + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([ { id: '2', children: [{ id: '1' }] }, { id: '3' }, ]); @@ -182,14 +182,14 @@ describeTreeView< describe('canMoveItemToNewPosition prop', () => { it('should call canMoveItemToNewPosition with the correct parameters', () => { const canMoveItemToNewPosition = spy(); - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); expect(canMoveItemToNewPosition.lastCall.firstArg).to.deep.equal({ itemId: '1', oldPosition: { parentId: null, index: 0 }, @@ -198,27 +198,27 @@ describeTreeView< }); it('should not allow to drop an item when canMoveItemToNewPosition returns false', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => false, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([{ id: '1' }, { id: '2' }, { id: '3' }]); }); it('should allow to drop an item when canMoveItemToNewPosition returns true', () => { - const response = render({ + const view = render({ experimentalFeatures: { indentationAtItemLevel: true, itemsReordering: true }, items: [{ id: '1' }, { id: '2' }, { id: '3' }], itemsReordering: true, canMoveItemToNewPosition: () => true, }); - dragEvents.fullDragSequence(response.getItemRoot('1'), response.getItemContent('2')); - expect(response.getItemIdTree()).to.deep.equal([ + dragEvents.fullDragSequence(view.getItemRoot('1'), view.getItemContent('2')); + expect(view.getItemIdTree()).to.deep.equal([ { id: '2', children: [{ id: '1' }] }, { id: '3' }, ]); diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx index d85f3e7aa395..f893aec46d2a 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.test.tsx @@ -21,12 +21,12 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) =
)); - const response = render({ + const view = render({ items: [{ id: '1' }], slotProps: { item: { ContentComponent } }, }); - expect(response.getItemContent('1').textContent).to.equal('MOCK CONTENT COMPONENT'); + expect(view.getItemContent('1').textContent).to.equal('MOCK CONTENT COMPONENT'); }); it('should use the ContentProps prop when defined', function test() { @@ -40,12 +40,12 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) = )); - const response = render({ + const view = render({ items: [{ id: '1' }], slotProps: { item: { ContentComponent, ContentProps: { customProp: 'ABCDEF' } as any } }, }); - expect(response.getItemContent('1').textContent).to.equal('ABCDEF'); + expect(view.getItemContent('1').textContent).to.equal('ABCDEF'); }); it('should render TreeItem when itemId prop is escaping characters without throwing an error', function test() { @@ -53,11 +53,11 @@ describeTreeView<[]>('TreeItem component', ({ render, treeItemComponentName }) = this.skip(); } - const response = render({ + const view = render({ items: [{ id: 'C:\\\\', label: 'ABCDEF' }], }); - expect(response.getItemContent('C:\\\\').textContent).to.equal('ABCDEF'); + expect(view.getItemContent('C:\\\\').textContent).to.equal('ABCDEF'); }); }); }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx index 418a8c459674..8019dcba99bb 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.test.tsx @@ -17,63 +17,63 @@ describeTreeView<[UseTreeViewExpansionSignature]>( ({ render, setup }) => { describe('model props (expandedItems, defaultExpandedItems, onExpandedItemsChange)', () => { it('should not expand items when no default state and no control state are defined', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.isItemExpanded('1')).to.equal(false); - expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']); + expect(view.isItemExpanded('1')).to.equal(false); + expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']); }); it('should use the default state when defined', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); - expect(response.isItemExpanded('1')).to.equal(true); - expect(response.getAllTreeItemIds()).to.deep.equal(['1', '1.1', '2']); + expect(view.isItemExpanded('1')).to.equal(true); + expect(view.getAllTreeItemIds()).to.deep.equal(['1', '1.1', '2']); }); it('should use the controlled state when defined', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], expandedItems: ['1'], }); - expect(response.isItemExpanded('1')).to.equal(true); - expect(response.getItemRoot('1.1')).toBeVisible(); + expect(view.isItemExpanded('1')).to.equal(true); + expect(view.getItemRoot('1.1')).toBeVisible(); }); it('should use the controlled state instead of the default state when both are defined', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], expandedItems: ['1'], defaultExpandedItems: ['2'], }); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should react to controlled state update', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], expandedItems: [], }); - response.setProps({ expandedItems: ['1'] }); - expect(response.isItemExpanded('1')).to.equal(true); + view.setProps({ expandedItems: ['1'] }); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should call the onExpandedItemsChange callback when the model is updated (add expanded item to empty list)', () => { const onExpandedItemsChange = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], onExpandedItemsChange, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onExpandedItemsChange.callCount).to.equal(1); expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal(['1']); @@ -82,7 +82,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should call the onExpandedItemsChange callback when the model is updated (add expanded item to non-empty list)', () => { const onExpandedItemsChange = spy(); - const response = render({ + const view = render({ items: [ { id: '1', children: [{ id: '1.1' }] }, { id: '2', children: [{ id: '2.1' }] }, @@ -91,7 +91,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>( defaultExpandedItems: ['1'], }); - fireEvent.click(response.getItemContent('2')); + fireEvent.click(view.getItemContent('2')); expect(onExpandedItemsChange.callCount).to.equal(1); expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal(['2', '1']); @@ -100,7 +100,7 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should call the onExpandedItemsChange callback when the model is updated (remove expanded item)', () => { const onExpandedItemsChange = spy(); - const response = render({ + const view = render({ items: [ { id: '1', children: [{ id: '1.1' }] }, { id: '2', children: [{ id: '2.1' }] }, @@ -109,35 +109,35 @@ describeTreeView<[UseTreeViewExpansionSignature]>( defaultExpandedItems: ['1'], }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onExpandedItemsChange.callCount).to.equal(1); expect(onExpandedItemsChange.lastCall.args[1]).to.deep.equal([]); }); it('should warn when switching from controlled to uncontrolled', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], expandedItems: [], }); expect(() => { - response.setProps({ expandedItems: undefined }); + view.setProps({ expandedItems: undefined }); }).toErrorDev( 'MUI X: A component is changing the controlled expandedItems state of TreeView to be uncontrolled.', ); }); it('should warn and not react to update when updating the default state', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); expect(() => { - response.setProps({ defaultExpandedItems: ['2'] }); - expect(response.isItemExpanded('1')).to.equal(true); - expect(response.isItemExpanded('2')).to.equal(false); + view.setProps({ defaultExpandedItems: ['2'] }); + expect(view.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('2')).to.equal(false); }).toErrorDev( 'MUI X: A component is changing the default expandedItems state of an uncontrolled TreeView after being initialized. To suppress this warning opt to use a controlled TreeView.', ); @@ -146,65 +146,65 @@ describeTreeView<[UseTreeViewExpansionSignature]>( describe('item click interaction', () => { it('should expand collapsed item when clicking on an item content', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should collapse expanded item when clicking on an item content', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); - expect(response.isItemExpanded('1')).to.equal(true); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(true); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemExpanded('1')).to.equal(false); }); it('should not expand collapsed item when clicking on a disabled item content', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemExpanded('1')).to.equal(false); }); it('should not collapse expanded item when clicking on a disabled item', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); - expect(response.isItemExpanded('1')).to.equal(true); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(true); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should expand collapsed item when clicking on an item label', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemLabel('1')); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemLabel('1')); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should expand collapsed item when clicking on an item icon container', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemIconContainer('1')); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemIconContainer('1')); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should be able to limit the expansion to the icon', function test() { @@ -245,16 +245,16 @@ describeTreeView<[UseTreeViewExpansionSignature]>( ); }); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], slots: { item: CustomTreeItem }, }); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemExpanded('1')).to.equal(false); - fireEvent.click(response.getItemIconContainer('1')); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemExpanded('1')).to.equal(false); + fireEvent.click(view.getItemIconContainer('1')); + expect(view.isItemExpanded('1')).to.equal(true); }); }); @@ -262,28 +262,28 @@ describeTreeView<[UseTreeViewExpansionSignature]>( // This `describe` only tests basics scenarios, more complex scenarios are tested in this file's other `describe`. describe('aria-expanded item attribute', () => { it('should have the attribute `aria-expanded=false` if collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], }); - expect(response.getItemRoot('1')).to.have.attribute('aria-expanded', 'false'); + expect(view.getItemRoot('1')).to.have.attribute('aria-expanded', 'false'); }); it('should have the attribute `aria-expanded=true` if expanded', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); - expect(response.getItemRoot('1')).to.have.attribute('aria-expanded', 'true'); + expect(view.getItemRoot('1')).to.have.attribute('aria-expanded', 'true'); }); it('should not have the attribute `aria-expanded` if no children are present', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); - expect(response.getItemRoot('1')).not.to.have.attribute('aria-expanded'); + expect(view.getItemRoot('1')).not.to.have.attribute('aria-expanded'); }); }); @@ -291,12 +291,12 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should call the onItemExpansionToggle callback when expanding an item', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], onItemExpansionToggle, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onItemExpansionToggle.callCount).to.equal(1); expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1'); expect(onItemExpansionToggle.lastCall.args[2]).to.equal(true); @@ -305,13 +305,13 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should call the onItemExpansionToggle callback when collapsing an item', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], onItemExpansionToggle, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onItemExpansionToggle.callCount).to.equal(1); expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1'); expect(onItemExpansionToggle.lastCall.args[2]).to.equal(false); @@ -322,16 +322,16 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should expand a collapsed item when calling the setItemExpansion method with `isExpanded=true`', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], onItemExpansionToggle, }); act(() => { - response.apiRef.current.setItemExpansion({} as any, '1', true); + view.apiRef.current.setItemExpansion({} as any, '1', true); }); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(true); expect(onItemExpansionToggle.callCount).to.equal(1); expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1'); expect(onItemExpansionToggle.lastCall.args[2]).to.equal(true); @@ -340,17 +340,17 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should collapse an expanded item when calling the setItemExpansion method with `isExpanded=false`', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], onItemExpansionToggle, }); act(() => { - response.apiRef.current.setItemExpansion({} as any, '1', false); + view.apiRef.current.setItemExpansion({} as any, '1', false); }); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); expect(onItemExpansionToggle.callCount).to.equal(1); expect(onItemExpansionToggle.lastCall.args[1]).to.equal('1'); expect(onItemExpansionToggle.lastCall.args[2]).to.equal(false); @@ -359,33 +359,33 @@ describeTreeView<[UseTreeViewExpansionSignature]>( it('should do nothing when calling the setItemExpansion method with `isExpanded=true` on an already expanded item', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], onItemExpansionToggle, }); act(() => { - response.apiRef.current.setItemExpansion({} as any, '1', true); + view.apiRef.current.setItemExpansion({} as any, '1', true); }); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(true); expect(onItemExpansionToggle.callCount).to.equal(0); }); it('should do nothing when calling the setItemExpansion method with `isExpanded=false` on an already collapsed item', () => { const onItemExpansionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], onItemExpansionToggle, }); act(() => { - response.apiRef.current.setItemExpansion({} as any, '1', false); + view.apiRef.current.setItemExpansion({} as any, '1', false); }); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); expect(onItemExpansionToggle.callCount).to.equal(0); }); }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx index 6bd9dc244893..94cf0c21ea63 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.test.tsx @@ -20,107 +20,107 @@ describeTreeView< ({ render, renderFromJSX, TreeItemComponent, treeViewComponentName, TreeViewComponent }) => { describe('basic behavior', () => { it('should allow to focus an item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - fireEvent.focus(response.getItemRoot('2')); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.focus(view.getItemRoot('2')); + expect(view.getFocusedItemId()).to.equal('2'); - fireEvent.focus(response.getItemRoot('1')); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.focus(view.getItemRoot('1')); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should move the focus when the focused item is removed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - fireEvent.focus(response.getItemRoot('2')); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.focus(view.getItemRoot('2')); + expect(view.getFocusedItemId()).to.equal('2'); - response.setItems([{ id: '1' }]); - expect(response.getFocusedItemId()).to.equal('1'); + view.setItems([{ id: '1' }]); + expect(view.getFocusedItemId()).to.equal('1'); }); }); describe('tabIndex HTML attribute', () => { it('should set tabIndex={0} on the first item if none are selected', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.getItemRoot('1').tabIndex).to.equal(0); - expect(response.getItemRoot('2').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(0); + expect(view.getItemRoot('2').tabIndex).to.equal(-1); }); it('should set tabIndex={0} on the selected item (single selection)', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], selectedItems: '2', }); - expect(response.getItemRoot('1').tabIndex).to.equal(-1); - expect(response.getItemRoot('2').tabIndex).to.equal(0); + expect(view.getItemRoot('1').tabIndex).to.equal(-1); + expect(view.getItemRoot('2').tabIndex).to.equal(0); }); it('should set tabIndex={0} on the first selected item (multi selection)', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }], selectedItems: ['2', '3'], multiSelect: true, }); - expect(response.getItemRoot('1').tabIndex).to.equal(-1); - expect(response.getItemRoot('2').tabIndex).to.equal(0); - expect(response.getItemRoot('3').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(-1); + expect(view.getItemRoot('2').tabIndex).to.equal(0); + expect(view.getItemRoot('3').tabIndex).to.equal(-1); }); it('should set tabIndex={0} on the first item if the selected item is not visible', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }], selectedItems: '2.1', }); - expect(response.getItemRoot('1').tabIndex).to.equal(0); - expect(response.getItemRoot('2').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(0); + expect(view.getItemRoot('2').tabIndex).to.equal(-1); }); it('should set tabIndex={0} on the first item if the no selected item is visible', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }, { id: '2.2' }] }], selectedItems: ['2.1', '2.2'], multiSelect: true, }); - expect(response.getItemRoot('1').tabIndex).to.equal(0); - expect(response.getItemRoot('2').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(0); + expect(view.getItemRoot('2').tabIndex).to.equal(-1); }); }); describe('focusItem api method', () => { it('should focus the item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.apiRef.current.focusItem({} as any, '2'); + view.apiRef.current.focusItem({} as any, '2'); }); - expect(response.getFocusedItemId()).to.equal('2'); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should not focus item if parent is collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }], }); act(() => { - response.apiRef.current.focusItem({} as any, '2.1'); + view.apiRef.current.focusItem({} as any, '2.1'); }); - expect(response.getFocusedItemId()).to.equal(null); + expect(view.getFocusedItemId()).to.equal(null); }); }); @@ -128,13 +128,13 @@ describeTreeView< it('should be called when an item is focused', () => { const onItemFocus = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }], onItemFocus, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); expect(onItemFocus.callCount).to.equal(1); @@ -145,47 +145,47 @@ describeTreeView< describe('disabledItemsFocusable prop', () => { describe('disabledItemFocusable={false}', () => { it('should prevent focus by mouse', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }], disabledItemsFocusable: false, }); - fireEvent.click(response.getItemContent('1')); - expect(response.getFocusedItemId()).to.equal(null); + fireEvent.click(view.getItemContent('1')); + expect(view.getFocusedItemId()).to.equal(null); }); it('should tab tabIndex={-1} on the disabled item and tabIndex={0} on the first non-disabled item', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }], disabledItemsFocusable: false, }); - expect(response.getItemRoot('1').tabIndex).to.equal(-1); - expect(response.getItemRoot('2').tabIndex).to.equal(0); - expect(response.getItemRoot('3').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(-1); + expect(view.getItemRoot('2').tabIndex).to.equal(0); + expect(view.getItemRoot('3').tabIndex).to.equal(-1); }); }); describe('disabledItemFocusable={true}', () => { it('should prevent focus by mouse', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }], disabledItemsFocusable: true, }); - fireEvent.click(response.getItemContent('1')); - expect(response.getFocusedItemId()).to.equal(null); + fireEvent.click(view.getItemContent('1')); + expect(view.getFocusedItemId()).to.equal(null); }); it('should tab tabIndex={0} on the disabled item and tabIndex={-1} on the other items', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }], disabledItemsFocusable: true, }); - expect(response.getItemRoot('1').tabIndex).to.equal(0); - expect(response.getItemRoot('2').tabIndex).to.equal(-1); - expect(response.getItemRoot('3').tabIndex).to.equal(-1); + expect(view.getItemRoot('1').tabIndex).to.equal(0); + expect(view.getItemRoot('2').tabIndex).to.equal(-1); + expect(view.getItemRoot('3').tabIndex).to.equal(-1); }); }); }); @@ -227,19 +227,19 @@ describeTreeView< ); } - const response = renderFromJSX(); + const view = renderFromJSX(); - fireEvent.focus(response.getItemRoot('1')); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.focus(view.getItemRoot('1')); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('1.1'); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); }, ); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx index ac5880d8b71f..78c339bd7440 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.test.tsx @@ -13,11 +13,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( 'useTreeViewIcons plugin', ({ render }) => { describe('slots (expandIcon, collapseIcon, endIcon, icon)', () => { - const getIconTestId = (response: DescribeTreeViewRendererReturnValue, itemId: string) => - response.getItemIconContainer(itemId).querySelector(`div`)?.dataset.testid; + const getIconTestId = (view: DescribeTreeViewRendererReturnValue, itemId: string) => + view.getItemIconContainer(itemId).querySelector(`div`)?.dataset.testid; it('should render the expandIcon slot defined on the tree if no icon slot is defined on the item and the item is collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -26,11 +26,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('treeExpandIcon'); + expect(getIconTestId(view, '1')).to.equal('treeExpandIcon'); }); it('should render the collapseIcon slot defined on the tree if no icon is defined on the item and the item is expanded', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -40,11 +40,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( defaultExpandedItems: ['1'], }); - expect(getIconTestId(response, '1')).to.equal('treeCollapseIcon'); + expect(getIconTestId(view, '1')).to.equal('treeCollapseIcon'); }); it('should render the endIcon slot defined on the tree if no icon is defined on the item and the item has no children', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], slots: { expandIcon: () =>
, @@ -53,11 +53,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('treeEndIcon'); + expect(getIconTestId(view, '1')).to.equal('treeEndIcon'); }); it('should render the expandIcon slot defined on the item if the item is collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -75,11 +75,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('itemExpandIcon'); + expect(getIconTestId(view, '1')).to.equal('itemExpandIcon'); }); it('should render the collapseIcon slot defined on the item if the item is expanded', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -98,11 +98,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( defaultExpandedItems: ['1'], }); - expect(getIconTestId(response, '1')).to.equal('itemCollapseIcon'); + expect(getIconTestId(view, '1')).to.equal('itemCollapseIcon'); }); it('should render the endIcon slot defined on the tree if the item has no children', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], slots: { expandIcon: () =>
, @@ -120,11 +120,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('itemEndIcon'); + expect(getIconTestId(view, '1')).to.equal('itemEndIcon'); }); it('should render the icon slot defined on the item if the item is collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -143,11 +143,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('itemIcon'); + expect(getIconTestId(view, '1')).to.equal('itemIcon'); }); it('should render the icon slot defined on the item if the item is expanded', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], slots: { expandIcon: () =>
, @@ -167,11 +167,11 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( defaultExpandedItems: ['1'], }); - expect(getIconTestId(response, '1')).to.equal('itemIcon'); + expect(getIconTestId(view, '1')).to.equal('itemIcon'); }); it('should render the icon slot defined on the item if the item has no children', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], slots: { expandIcon: () =>
, @@ -190,7 +190,7 @@ describeTreeView<[UseTreeViewIconsSignature, UseTreeViewExpansionSignature]>( }, }); - expect(getIconTestId(response, '1')).to.equal('itemIcon'); + expect(getIconTestId(view, '1')).to.equal('itemIcon'); }); }); }, diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx index 7c2a65c072f6..1fda8500521e 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.test.tsx @@ -40,7 +40,7 @@ describeTreeView< this.skip(); } - const response = render({ + const view = render({ items: [{ id: '1' }], slotProps: { item: { @@ -49,62 +49,62 @@ describeTreeView< }, }); - expect(response.getItemRoot('1')).to.have.attribute('id', 'customId'); + expect(view.getItemRoot('1')).to.have.attribute('id', 'customId'); }); describe('items prop / JSX Tree Item', () => { it('should support removing an item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - response.setItems([{ id: '1' }]); - expect(response.getAllTreeItemIds()).to.deep.equal(['1']); + view.setItems([{ id: '1' }]); + expect(view.getAllTreeItemIds()).to.deep.equal(['1']); }); it('should support adding an item at the end', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); - response.setItems([{ id: '1' }, { id: '2' }]); - expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']); + view.setItems([{ id: '1' }, { id: '2' }]); + expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']); }); it('should support adding an item at the beginning', () => { - const response = render({ + const view = render({ items: [{ id: '2' }], }); - response.setItems([{ id: '1' }, { id: '2' }]); - expect(response.getAllTreeItemIds()).to.deep.equal(['1', '2']); + view.setItems([{ id: '1' }, { id: '2' }]); + expect(view.getAllTreeItemIds()).to.deep.equal(['1', '2']); }); it('should update indexes when two items are swapped', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }], multiSelect: true, onSelectedItemsChange, }); - response.setItems([{ id: '1' }, { id: '3' }, { id: '2' }]); - expect(response.getAllTreeItemIds()).to.deep.equal(['1', '3', '2']); + view.setItems([{ id: '1' }, { id: '3' }, { id: '2' }]); + expect(view.getAllTreeItemIds()).to.deep.equal(['1', '3', '2']); // Check if the internal state is updated by running a range selection - fireEvent.click(response.getItemContent('1')); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); + fireEvent.click(view.getItemContent('1')); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['1', '3']); }); it('should not mark an item as expandable if its children is an empty array', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [] }], defaultExpandedItems: ['1'], }); - expect(response.getItemRoot('1')).not.to.have.attribute('aria-expanded'); + expect(view.getItemRoot('1')).not.to.have.attribute('aria-expanded'); }); it('should mark an item as not expandable if it has only empty conditional arrays', function test() { @@ -112,7 +112,7 @@ describeTreeView< this.skip(); } - const response = renderFromJSX( + const view = renderFromJSX( {[]} @@ -121,7 +121,7 @@ describeTreeView< , ); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); }); it('should mark an item as expandable if it has two array as children, one of which is empty (SimpleTreeView only)', function test() { @@ -129,7 +129,7 @@ describeTreeView< this.skip(); } - const response = renderFromJSX( + const view = renderFromJSX( {[]} @@ -138,7 +138,7 @@ describeTreeView< , ); - expect(response.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should mark an item as not expandable if it has one array containing an empty array as a children (SimpleTreeView only)', function test() { @@ -146,7 +146,7 @@ describeTreeView< this.skip(); } - const response = renderFromJSX( + const view = renderFromJSX( {[[]]} @@ -154,32 +154,32 @@ describeTreeView< , ); - expect(response.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); }); }); describe('disabled prop', () => { it('should not have the attribute `aria-disabled` if disabled is not defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: false }, { id: '3', disabled: true }], }); - expect(response.getItemRoot('1')).not.to.have.attribute('aria-disabled'); - expect(response.getItemRoot('2')).not.to.have.attribute('aria-disabled'); - expect(response.getItemRoot('3')).to.have.attribute('aria-disabled'); + expect(view.getItemRoot('1')).not.to.have.attribute('aria-disabled'); + expect(view.getItemRoot('2')).not.to.have.attribute('aria-disabled'); + expect(view.getItemRoot('3')).to.have.attribute('aria-disabled'); }); it('should disable all descendants of a disabled item', () => { - const response = render({ + const view = render({ items: [ { id: '1', disabled: true, children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] }, ], defaultExpandedItems: ['1', '1.1'], }); - expect(response.getItemRoot('1')).to.have.attribute('aria-disabled', 'true'); - expect(response.getItemRoot('1.1')).to.have.attribute('aria-disabled', 'true'); - expect(response.getItemRoot('1.1.1')).to.have.attribute('aria-disabled', 'true'); + expect(view.getItemRoot('1')).to.have.attribute('aria-disabled', 'true'); + expect(view.getItemRoot('1.1')).to.have.attribute('aria-disabled', 'true'); + expect(view.getItemRoot('1.1.1')).to.have.attribute('aria-disabled', 'true'); }); }); @@ -187,12 +187,12 @@ describeTreeView< it('should call onItemClick when clicking on the content of an item', () => { const onItemClick = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }], onItemClick, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onItemClick.callCount).to.equal(1); expect(onItemClick.lastCall.lastArg).to.equal('1'); }); @@ -200,13 +200,13 @@ describeTreeView< it('should not call onItemClick for the ancestors on the clicked item', () => { const onItemClick = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], onItemClick, }); - fireEvent.click(response.getItemContent('1.1')); + fireEvent.click(view.getItemContent('1.1')); expect(onItemClick.callCount).to.equal(1); expect(onItemClick.lastCall.lastArg).to.equal('1.1'); }); @@ -220,32 +220,32 @@ describeTreeView< } it('should return the tree', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.apiRef.current.getItem('1')).to.deep.equal({ + expect(view.apiRef.current.getItem('1')).to.deep.equal({ id: '1', children: [{ id: '1.1' }], }); }); it('should have up to date tree when props.items changes', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - response.setItems([{ id: '1' }, { id: '2' }]); + view.setItems([{ id: '1' }, { id: '2' }]); - expect(response.apiRef.current.getItem('1')).to.deep.equal({ id: '1' }); + expect(view.apiRef.current.getItem('1')).to.deep.equal({ id: '1' }); }); it('should contain custom item properties', () => { - const response = render({ + const view = render({ items: [{ id: '1', customProp: 'foo' }], }); - expect(response.apiRef.current.getItem('1')).to.deep.equal({ + expect(view.apiRef.current.getItem('1')).to.deep.equal({ id: '1', customProp: 'foo', }); @@ -254,21 +254,19 @@ describeTreeView< describe('getItemDOMElement', () => { it('should return the DOM element of the item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); - expect(response.apiRef.current.getItemDOMElement('1')).to.equal( - response.getItemRoot('1'), - ); + expect(view.apiRef.current.getItemDOMElement('1')).to.equal(view.getItemRoot('1')); }); it("should return the null when the item doesn't exist", () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); - expect(response.apiRef.current.getItemDOMElement('2')).to.equal(null); + expect(view.apiRef.current.getItemDOMElement('2')).to.equal(null); }); }); @@ -279,34 +277,32 @@ describeTreeView< } it('should return the tree', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - expect(response.apiRef.current.getItemTree()).to.deep.equal([ + expect(view.apiRef.current.getItemTree()).to.deep.equal([ { id: '1', children: [{ id: '1.1' }] }, { id: '2' }, ]); }); it('should have up to date tree when props.items changes', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - response.setItems([{ id: '1' }, { id: '2' }]); + view.setItems([{ id: '1' }, { id: '2' }]); - expect(response.apiRef.current.getItemTree()).to.deep.equal([{ id: '1' }, { id: '2' }]); + expect(view.apiRef.current.getItemTree()).to.deep.equal([{ id: '1' }, { id: '2' }]); }); it('should contain custom item properties', () => { - const response = render({ + const view = render({ items: [{ id: '1', customProp: 'foo' }], }); - expect(response.apiRef.current.getItemTree()).to.deep.equal([ - { id: '1', customProp: 'foo' }, - ]); + expect(view.apiRef.current.getItemTree()).to.deep.equal([{ id: '1', customProp: 'foo' }]); }); }); @@ -317,35 +313,29 @@ describeTreeView< } it('should return the children of an item in their rendering order', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }], }); - expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([ - '1.1', - '1.2', - ]); + expect(view.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal(['1.1', '1.2']); }); it('should work for the root items', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.apiRef.current.getItemOrderedChildrenIds(null)).to.deep.equal(['1', '2']); + expect(view.apiRef.current.getItemOrderedChildrenIds(null)).to.deep.equal(['1', '2']); }); it('should have up to date children when props.items changes', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], }); - response.setItems([{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }]); + view.setItems([{ id: '1', children: [{ id: '1.1' }, { id: '1.2' }] }]); - expect(response.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal([ - '1.1', - '1.2', - ]); + expect(view.apiRef.current.getItemOrderedChildrenIds('1')).to.deep.equal(['1.1', '1.2']); }); }); }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx index 790fc886213b..f15ef9c93251 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx @@ -21,302 +21,302 @@ describeTreeView< describe('Navigation (focus and expansion)', () => { describe('key: ArrowDown', () => { it('should move the focus to a sibling item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should move the focus to a child item', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); it('should move the focus to a child item with a dynamic tree', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); - response.setItems([{ id: '2' }]); - response.setItems([{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }]); + view.setItems([{ id: '2' }]); + view.setItems([{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }]); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); it("should move the focus to a parent's sibling", () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }, { id: '2' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1.1').focus(); + view.getItemRoot('1.1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should skip disabled items', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('3'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('3'); }); it('should not skip disabled items if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown' }); + expect(view.getFocusedItemId()).to.equal('2'); }); }); describe('key: ArrowUp', () => { it('should move the focus to a sibling item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should move the focus to a parent', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1.1').focus(); + view.getItemRoot('1.1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it("should move the focus to a sibling's child", () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }, { id: '2' }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); it('should skip disabled items', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should not skip disabled items if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp' }); + expect(view.getFocusedItemId()).to.equal('2'); }); }); describe('key: ArrowRight', () => { it('should open the item and not move the focus if the focus is on a closed item', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' }); - expect(response.isItemExpanded('1')).to.equal(true); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' }); + expect(view.isItemExpanded('1')).to.equal(true); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should move the focus to the first child if the focus is on an open item', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); it('should do nothing if the focus is on a leaf', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1.1').focus(); + view.getItemRoot('1.1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowRight' }); - expect(response.getFocusedItemId()).to.equal('1.1'); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowRight' }); + expect(view.getFocusedItemId()).to.equal('1.1'); }); it('should not expand an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowRight' }); - expect(response.isItemExpanded('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight' }); + expect(view.isItemExpanded('1')).to.equal(false); }); }); describe('key: ArrowLeft', () => { it('should close the item if the focus is on an open item', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' }); - expect(response.isItemExpanded('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' }); + expect(view.isItemExpanded('1')).to.equal(false); }); it("should move focus to the item's parent if the focus is on a child item that is a leaf", () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1.1').focus(); + view.getItemRoot('1.1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowLeft' }); - expect(response.getFocusedItemId()).to.equal('1'); - expect(response.isItemExpanded('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowLeft' }); + expect(view.getFocusedItemId()).to.equal('1'); + expect(view.isItemExpanded('1')).to.equal(true); }); it("should move the focus to the item's parent if the focus is on a child item that is closed", () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1.1').focus(); + view.getItemRoot('1.1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1.1'), { key: 'ArrowLeft' }); - expect(response.getFocusedItemId()).to.equal('1'); - expect(response.isItemExpanded('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowLeft' }); + expect(view.getFocusedItemId()).to.equal('1'); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should do nothing if the focus is on a root item that is closed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' }); - expect(response.getFocusedItemId()).to.equal('1'); - expect(response.isItemExpanded('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' }); + expect(view.getFocusedItemId()).to.equal('1'); + expect(view.isItemExpanded('1')).to.equal(false); }); it('should do nothing if the focus is on a root item that is a leaf', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should not collapse an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowLeft' }); - expect(response.isItemExpanded('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowLeft' }); + expect(view.isItemExpanded('1')).to.equal(true); }); }); describe('key: Home', () => { it('should move the focus to the first item in the tree', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], }); act(() => { - response.getItemRoot('4').focus(); + view.getItemRoot('4').focus(); }); - fireEvent.keyDown(response.getItemRoot('4'), { key: 'Home' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('4'), { key: 'Home' }); + expect(view.getFocusedItemId()).to.equal('1'); }); }); describe('key: End', () => { it('should move the focus to the last item in the tree when the last item is not expanded', () => { - const response = render({ + const view = render({ items: [ { id: '1' }, { id: '2' }, @@ -326,14 +326,14 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'End' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'End' }); + expect(view.getFocusedItemId()).to.equal('4'); }); it('should move the focus to the last item in the tree when the last item is expanded', () => { - const response = render({ + const view = render({ items: [ { id: '1' }, { id: '2' }, @@ -344,16 +344,16 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'End' }); - expect(response.getFocusedItemId()).to.equal('4.1.1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'End' }); + expect(view.getFocusedItemId()).to.equal('4.1.1'); }); }); describe('key: * (asterisk)', () => { it('should expand all items that are at the same depth as the current item (depth = 0)', () => { - const response = render({ + const view = render({ items: [ { id: '1', children: [{ id: '1.1' }] }, { id: '2', children: [{ id: '2.1' }] }, @@ -363,22 +363,22 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.isItemExpanded('1')).to.equal(false); - expect(response.isItemExpanded('2')).to.equal(false); - expect(response.isItemExpanded('3')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('2')).to.equal(false); + expect(view.isItemExpanded('3')).to.equal(false); - fireEvent.keyDown(response.getItemRoot('1'), { key: '*' }); - expect(response.isItemExpanded('1')).to.equal(true); - expect(response.isItemExpanded('2')).to.equal(true); - expect(response.isItemExpanded('3')).to.equal(true); - expect(response.isItemExpanded('3.1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: '*' }); + expect(view.isItemExpanded('1')).to.equal(true); + expect(view.isItemExpanded('2')).to.equal(true); + expect(view.isItemExpanded('3')).to.equal(true); + expect(view.isItemExpanded('3.1')).to.equal(false); }); it('should expand all items that are at the same depth as the current item (depth = 1)', () => { - const response = render({ + const view = render({ items: [ { id: '1', children: [{ id: '1.1' }] }, { id: '2', children: [{ id: '2.1' }] }, @@ -397,60 +397,60 @@ describeTreeView< }); act(() => { - response.getItemRoot('3.1').focus(); + view.getItemRoot('3.1').focus(); }); - expect(response.isItemExpanded('1')).to.equal(false); - expect(response.isItemExpanded('2')).to.equal(false); - expect(response.isItemExpanded('3')).to.equal(true); - expect(response.isItemExpanded('3.1')).to.equal(false); + expect(view.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('2')).to.equal(false); + expect(view.isItemExpanded('3')).to.equal(true); + expect(view.isItemExpanded('3.1')).to.equal(false); - fireEvent.keyDown(response.getItemRoot('3.1'), { key: '*' }); - expect(response.isItemExpanded('1')).to.equal(false); - expect(response.isItemExpanded('2')).to.equal(false); - expect(response.isItemExpanded('3')).to.equal(true); - expect(response.isItemExpanded('3.1')).to.equal(true); - expect(response.isItemExpanded('3.1.2')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('3.1'), { key: '*' }); + expect(view.isItemExpanded('1')).to.equal(false); + expect(view.isItemExpanded('2')).to.equal(false); + expect(view.isItemExpanded('3')).to.equal(true); + expect(view.isItemExpanded('3.1')).to.equal(true); + expect(view.isItemExpanded('3.1.2')).to.equal(false); }); }); describe('key: Enter', () => { it('should expand an item with children if it is collapsed', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemExpanded('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemExpanded('1')).to.equal(true); }); it('should collapse an item with children if it is expanded', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemExpanded('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemExpanded('1')).to.equal(false); }); it('should not expand an item with children if it is collapsed but disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true, children: [{ id: '1.1' }] }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemExpanded('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemExpanded('1')).to.equal(false); }); }); }); @@ -459,119 +459,119 @@ describeTreeView< describe('single selection', () => { describe('key: Space', () => { it('should select the focused item when Space is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not un-select the focused item when Space is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not select the focused item when Space is pressed and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select the focused item when Space is pressed and the item is disabled', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select the focused item when Space is pressed and the item is disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.isItemSelected('1')).to.equal(false); }); }); describe('key: Enter', () => { it('should select the focused item when Enter is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not un-select the focused item when Enter is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not select the focused item when Enter is pressed and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select the focused item when Enter is pressed and the item is disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); + expect(view.isItemSelected('1')).to.equal(false); }); }); }); @@ -579,179 +579,179 @@ describeTreeView< describe('multi selection', () => { describe('key: Space', () => { it('should select the focused item without un-selecting the other selected items when Space is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, defaultSelectedItems: ['1'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: ' ' }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.keyDown(view.getItemRoot('2'), { key: ' ' }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); }); it('should un-select the focused item when Space is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, defaultSelectedItems: ['1', '2'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should select the focused item without un-selecting the other selected items when Space is pressed while holding Ctrl', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, defaultSelectedItems: ['1'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: ' ', ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.keyDown(view.getItemRoot('2'), { key: ' ', ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); }); it('should un-select the focused item when Space is pressed while holding Ctrl', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, defaultSelectedItems: ['1', '2'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ', ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ', ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should not select the focused item when Space is pressed and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not select the focused item when Space is pressed and the item is disabled', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], multiSelect: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not select the focused item when Space is pressed and the item is disabled even if disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], multiSelect: true, disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: ' ' }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('1'), { key: ' ' }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); }); describe('key: ArrowDown', () => { it('should expand the selection range when ArrowDown is pressed while holding Shift from a selected item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['2'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); }); it('should not un-select the item below the focused item when ArrowDown is pressed while holding Shift from a selected item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['2', '3'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); }); it('should un-select the focused item when ArrowDown is pressed while holding Shift and the item below have been selected in the same range', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['3'], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['3']); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['3']); }); it('should not select any item when ArrowDown is pressed while holding Shift and disabledSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should select the next non-disabled item when ArrowDown is pressed while holding Shift', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], multiSelect: true, defaultSelectedItems: ['1'], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); it('should not select the next item when ArrowDown is pressed while holding Shift if the next item is disabled and disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], multiSelect: true, disabledItemsFocusable: true, @@ -759,104 +759,104 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should select the next item when ArrowDown is pressed while holding Shift if the focused item is disabled and disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }, { id: '3' }], multiSelect: true, disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); }); describe('key: ArrowUp', () => { it('should expand the selection range when ArrowUp is pressed while holding Shift from a selected item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['3'], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); }); it('should not un-select the item above the focused item when ArrowUp is pressed while holding Shift from a selected item', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['2', '3'], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); }); it('should un-select the focused item when ArrowUp is pressed while holding Shift and the item above have been selected in the same range', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, defaultSelectedItems: ['2'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '3']); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowDown', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '3']); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should not select any item when ArrowUp is pressed while holding Shift and disabledSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should select the next non-disabled item when ArrowUp is pressed while holding Shift', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], multiSelect: true, defaultSelectedItems: ['3'], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); it('should not select the next item when ArrowUp is pressed while holding Shift if the next item is disabled and disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], multiSelect: true, disabledItemsFocusable: true, @@ -864,67 +864,67 @@ describeTreeView< }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['3']); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['3']); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should select the previous item when ArrowUp is pressed while holding Shift if the focused item is disabled and disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3', disabled: true }], multiSelect: true, disabledItemsFocusable: true, }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.keyDown(view.getItemRoot('3'), { key: 'ArrowUp', shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); }); describe('key: Home', () => { it('should select select the focused item and all the items above when Home is pressed while holding Shift + Ctrl', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }, { id: '3' }, { id: '4' }], multiSelect: true, defaultExpandedItems: ['2'], }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { + fireEvent.keyDown(view.getItemRoot('3'), { key: 'Home', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); }); it('should not select any item when Home is pressed while holding Shift + Ctrl and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { + fireEvent.keyDown(view.getItemRoot('3'), { key: 'Home', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not select disabled items when Home is pressed while holding Shift + Ctrl', () => { - const response = render({ + const view = render({ items: [ { id: '1' }, { id: '2', disabled: true, children: [{ id: '2.1' }] }, @@ -936,56 +936,56 @@ describeTreeView< }); act(() => { - response.getItemRoot('3').focus(); + view.getItemRoot('3').focus(); }); - fireEvent.keyDown(response.getItemRoot('3'), { + fireEvent.keyDown(view.getItemRoot('3'), { key: 'Home', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); }); describe('key: End', () => { it('should select select the focused item and all the items below when End is pressed while holding Shift + Ctrl', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2', children: [{ id: '2.1' }] }, { id: '3' }, { id: '4' }], multiSelect: true, defaultExpandedItems: ['2'], }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { + fireEvent.keyDown(view.getItemRoot('2'), { key: 'End', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3', '4']); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3', '4']); }); it('should not select any item when End is pressed while holding Shift + Ctrl and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { + fireEvent.keyDown(view.getItemRoot('2'), { key: 'End', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not select disabled items when End is pressed while holding Shift + Ctrl', () => { - const response = render({ + const view = render({ items: [ { id: '1' }, { id: '2' }, @@ -997,47 +997,47 @@ describeTreeView< }); act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - fireEvent.keyDown(response.getItemRoot('2'), { + fireEvent.keyDown(view.getItemRoot('2'), { key: 'End', shiftKey: true, ctrlKey: true, }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '4']); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '4']); }); }); describe('key: Ctrl + A', () => { it('should select all items when Ctrl + A is pressed', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '3', '4']); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '3', '4']); }); it('should not select any item when Ctrl + A is pressed and disableSelection={true}', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], multiSelect: true, disableSelection: true, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not select disabled items when Ctrl + A is pressed', () => { - const response = render({ + const view = render({ items: [ { id: '1' }, { id: '2', disabled: true, children: [{ id: '2.1' }] }, @@ -1048,10 +1048,10 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'a', ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3', '4']); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'a', ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3', '4']); }); }); }); @@ -1059,7 +1059,7 @@ describeTreeView< describe('Type-ahead', () => { it('should move the focus to the next item with a name that starts with the typed character', () => { - const response = render({ + const view = render({ items: [ { id: '1', label: 'one' }, { id: '2', label: 'two' }, @@ -1069,45 +1069,45 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't' }); + expect(view.getFocusedItemId()).to.equal('2'); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' }); + expect(view.getFocusedItemId()).to.equal('4'); - fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should move to the next item in the displayed order when typing the same starting character', () => { - const response = render({ + const view = render({ items: [{ id: 'A1' }, { id: 'B1' }, { id: 'A2' }, { id: 'B3' }, { id: 'B2' }], }); act(() => { - response.getItemRoot('A1').focus(); + view.getItemRoot('A1').focus(); }); - expect(response.getFocusedItemId()).to.equal('A1'); + expect(view.getFocusedItemId()).to.equal('A1'); - fireEvent.keyDown(response.getItemRoot('A1'), { key: 'b' }); - expect(response.getFocusedItemId()).to.equal('B1'); + fireEvent.keyDown(view.getItemRoot('A1'), { key: 'b' }); + expect(view.getFocusedItemId()).to.equal('B1'); - fireEvent.keyDown(response.getItemRoot('B1'), { key: 'b' }); - expect(response.getFocusedItemId()).to.equal('B3'); + fireEvent.keyDown(view.getItemRoot('B1'), { key: 'b' }); + expect(view.getFocusedItemId()).to.equal('B3'); - fireEvent.keyDown(response.getItemRoot('B3'), { key: 'b' }); - expect(response.getFocusedItemId()).to.equal('B2'); + fireEvent.keyDown(view.getItemRoot('B3'), { key: 'b' }); + expect(view.getFocusedItemId()).to.equal('B2'); - fireEvent.keyDown(response.getItemRoot('B2'), { key: 'b' }); - expect(response.getFocusedItemId()).to.equal('B1'); + fireEvent.keyDown(view.getItemRoot('B2'), { key: 'b' }); + expect(view.getFocusedItemId()).to.equal('B1'); }); it('should work with capitalized label', () => { - const response = render({ + const view = render({ items: [ { id: '1', label: 'One' }, { id: '2', label: 'Two' }, @@ -1117,18 +1117,18 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't' }); + expect(view.getFocusedItemId()).to.equal('2'); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' }); + expect(view.getFocusedItemId()).to.equal('4'); - fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should work with ReactElement label', function test() { @@ -1137,7 +1137,7 @@ describeTreeView< this.skip(); } - const response = render({ + const view = render({ items: [ { id: '1', label: one }, { id: '2', label: two }, @@ -1147,47 +1147,47 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't' }); + expect(view.getFocusedItemId()).to.equal('2'); - fireEvent.keyDown(response.getItemRoot('2'), { key: 'f' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('2'), { key: 'f' }); + expect(view.getFocusedItemId()).to.equal('4'); - fireEvent.keyDown(response.getItemRoot('4'), { key: 'o' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('4'), { key: 'o' }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should work after adding / removing items', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }], }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: '4' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('1'), { key: '4' }); + expect(view.getFocusedItemId()).to.equal('4'); - response.setItems([{ id: '1' }, { id: '2' }, { id: '3' }]); - expect(response.getFocusedItemId()).to.equal('1'); + view.setItems([{ id: '1' }, { id: '2' }, { id: '3' }]); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: '2' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: '2' }); + expect(view.getFocusedItemId()).to.equal('2'); - response.setItems([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]); - expect(response.getFocusedItemId()).to.equal('2'); + view.setItems([{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }]); + expect(view.getFocusedItemId()).to.equal('2'); - fireEvent.keyDown(response.getItemRoot('2'), { key: '4' }); - expect(response.getFocusedItemId()).to.equal('4'); + fireEvent.keyDown(view.getItemRoot('2'), { key: '4' }); + expect(view.getFocusedItemId()).to.equal('4'); }); it('should not move focus when a modifier key and a letter are pressed', () => { - const response = render({ + const view = render({ items: [ { id: '1', label: 'one' }, { id: '2', label: 'two' }, @@ -1197,22 +1197,22 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't', ctrlKey: true }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't', ctrlKey: true }); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't', metaKey: true }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't', metaKey: true }); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't', shiftKey: true }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't', shiftKey: true }); + expect(view.getFocusedItemId()).to.equal('1'); }); it('should work on disabled item when disabledItemsFocusable={true}', () => { - const response = render({ + const view = render({ items: [ { id: '1', label: 'one', disabled: true }, { id: '2', label: 'two', disabled: true }, @@ -1223,16 +1223,16 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't' }); - expect(response.getFocusedItemId()).to.equal('2'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't' }); + expect(view.getFocusedItemId()).to.equal('2'); }); it('should not move focus on disabled item when disabledItemsFocusable={false}', () => { - const response = render({ + const view = render({ items: [ { id: '1', label: 'one', disabled: true }, { id: '2', label: 'two', disabled: true }, @@ -1243,12 +1243,12 @@ describeTreeView< }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - expect(response.getFocusedItemId()).to.equal('1'); + expect(view.getFocusedItemId()).to.equal('1'); - fireEvent.keyDown(response.getItemRoot('1'), { key: 't' }); - expect(response.getFocusedItemId()).to.equal('1'); + fireEvent.keyDown(view.getItemRoot('1'), { key: 't' }); + expect(view.getFocusedItemId()).to.equal('1'); }); }); @@ -1257,13 +1257,13 @@ describeTreeView< const handleTreeViewKeyDown = spy(); const handleTreeItemKeyDown = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }], onKeyDown: handleTreeViewKeyDown, slotProps: { item: { onKeyDown: handleTreeItemKeyDown } }, } as any); - const itemRoot = response.getItemRoot('1'); + const itemRoot = view.getItemRoot('1'); act(() => { itemRoot.focus(); }); diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx index 05fe270d5248..a89bbdbd8e05 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.test.tsx @@ -13,17 +13,17 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', editable: false }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); + fireEvent.doubleClick(view.getItemLabel('1')); - expect(response.getItemLabelInput('1')).to.equal(null); + expect(view.getItemLabelInput('1')).to.equal(null); }); it('should render labelInput when double clicked if item is editable', function test() { @@ -31,17 +31,17 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); + fireEvent.doubleClick(view.getItemLabel('1')); - expect(response.getItemLabelInput('1')).not.to.equal(null); + expect(view.getItemLabelInput('1')).not.to.equal(null); }); it('should not render label when double clicked if item is editable', function test() { @@ -49,17 +49,17 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); + fireEvent.doubleClick(view.getItemLabel('1')); - expect(response.getItemLabel('1')).to.equal(null); + expect(view.getItemLabel('1')).to.equal(null); }); it('should not render labelInput on Enter if item is not editable', function test() { @@ -67,18 +67,18 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', editable: false }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); - expect(response.getItemLabelInput('1')).to.equal(null); - expect(response.getItemLabel('1')).not.to.equal(null); + expect(view.getItemLabelInput('1')).to.equal(null); + expect(view.getItemLabel('1')).not.to.equal(null); }); it('should render labelInput on Enter if item is editable', function test() { @@ -86,17 +86,17 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.keyDown(response.getItemRoot('1'), { key: 'Enter' }); + fireEvent.keyDown(view.getItemRoot('1'), { key: 'Enter' }); - expect(response.getItemLabelInput('1')).not.to.equal(null); + expect(view.getItemLabelInput('1')).not.to.equal(null); }); it('should unmount labelInput after save', function test() { @@ -104,19 +104,19 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); - fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' }); + fireEvent.doubleClick(view.getItemLabel('1')); + fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' }); - expect(response.getItemLabelInput('1')).to.equal(null); - expect(response.getItemLabel('1')).not.to.equal(null); + expect(view.getItemLabelInput('1')).to.equal(null); + expect(view.getItemLabel('1')).not.to.equal(null); }); it('should unmount labelInput after cancel', function test() { @@ -124,19 +124,19 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); - fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Esc' }); + fireEvent.doubleClick(view.getItemLabel('1')); + fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Esc' }); - expect(response.getItemLabelInput('1')).to.equal(null); - expect(response.getItemLabel('1')).not.to.equal(null); + expect(view.getItemLabelInput('1')).to.equal(null); + expect(view.getItemLabel('1')).not.to.equal(null); }); }); @@ -146,17 +146,17 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); + fireEvent.doubleClick(view.getItemLabel('1')); - expect(response.getItemLabelInput('1').value).to.equal('test'); + expect(view.getItemLabelInput('1').value).to.equal('test'); }); it('should save new value on Enter', function test() { @@ -164,19 +164,19 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); - fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } }); - fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' }); + fireEvent.doubleClick(view.getItemLabel('1')); + fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } }); + fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' }); - expect(response.getItemLabel('1').textContent).to.equal('new value'); + expect(view.getItemLabel('1').textContent).to.equal('new value'); }); it('should hold new value on render after save', function test() { @@ -184,20 +184,20 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); - fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } }); - fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Enter' }); - fireEvent.doubleClick(response.getItemLabel('1')); + fireEvent.doubleClick(view.getItemLabel('1')); + fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } }); + fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Enter' }); + fireEvent.doubleClick(view.getItemLabel('1')); - expect(response.getItemLabelInput('1').value).to.equal('new value'); + expect(view.getItemLabelInput('1').value).to.equal('new value'); }); it('should hold initial value on render after cancel', function test() { @@ -205,21 +205,21 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ experimentalFeatures: { labelEditing: true }, items: [{ id: '1', label: 'test', editable: true }], isItemEditable: (item) => item.editable, }); act(() => { - response.getItemRoot('1').focus(); + view.getItemRoot('1').focus(); }); - fireEvent.doubleClick(response.getItemLabel('1')); - fireEvent.change(response.getItemLabelInput('1'), { target: { value: 'new value' } }); - fireEvent.keyDown(response.getItemLabelInput('1'), { key: 'Esc' }); - expect(response.getItemLabel('1').textContent).to.equal('test'); + fireEvent.doubleClick(view.getItemLabel('1')); + fireEvent.change(view.getItemLabelInput('1'), { target: { value: 'new value' } }); + fireEvent.keyDown(view.getItemLabelInput('1'), { key: 'Esc' }); + expect(view.getItemLabel('1').textContent).to.equal('test'); - fireEvent.doubleClick(response.getItemLabel('1')); - expect(response.getItemLabelInput('1').value).to.equal('test'); + fireEvent.doubleClick(view.getItemLabel('1')); + expect(view.getItemLabelInput('1').value).to.equal('test'); }); }); }); @@ -229,15 +229,15 @@ describeTreeView<[UseTreeViewLabelSignature]>( if (treeViewComponentName.startsWith('SimpleTreeView')) { this.skip(); } - const response = render({ + const view = render({ items: [{ id: '1', label: 'test' }], }); act(() => { - response.apiRef.current.updateItemLabel('1', 'new value'); + view.apiRef.current.updateItemLabel('1', 'new value'); }); - expect(response.getItemLabel('1').textContent).to.equal('new value'); + expect(view.getItemLabel('1').textContent).to.equal('new value'); }); }); }, diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx index 3664db627d13..0f80094dc69a 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.test.tsx @@ -16,60 +16,60 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> ({ render }) => { describe('model props (selectedItems, defaultSelectedItems, onSelectedItemsChange)', () => { it('should not select items when no default state and no control state are defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); }); it('should use the default state when defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); }); it('should use the controlled state when defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], selectedItems: ['1'], }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); }); it('should use the controlled state instead of the default state when both are defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], selectedItems: ['1'], defaultSelectedItems: ['2'], }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); }); it('should react to controlled state update', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], selectedItems: [], }); - response.setProps({ selectedItems: ['1'] }); - expect(response.isItemSelected('1')).to.equal(true); + view.setProps({ selectedItems: ['1'] }); + expect(view.isItemSelected('1')).to.equal(true); }); it('should call the onSelectedItemsChange callback when the model is updated (single selection and add selected item)', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], onSelectedItemsChange, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onSelectedItemsChange.callCount).to.equal(1); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal('1'); @@ -80,13 +80,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it.skip('should call onSelectedItemsChange callback when the model is updated (single selection and remove selected item', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], onSelectedItemsChange, defaultSelectedItems: ['1'], }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onSelectedItemsChange.callCount).to.equal(1); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal([]); @@ -95,13 +95,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it('should call the onSelectedItemsChange callback when the model is updated (multi selection and add selected item to empty list)', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], onSelectedItemsChange, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onSelectedItemsChange.callCount).to.equal(1); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['1']); @@ -110,14 +110,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it('should call the onSelectedItemsChange callback when the model is updated (multi selection and add selected item to non-empty list)', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], onSelectedItemsChange, defaultSelectedItems: ['1'], }); - fireEvent.click(response.getItemContent('2'), { ctrlKey: true }); + fireEvent.click(view.getItemContent('2'), { ctrlKey: true }); expect(onSelectedItemsChange.callCount).to.equal(1); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal(['2', '1']); @@ -126,41 +126,41 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it('should call the onSelectedItemsChange callback when the model is updated (multi selection and remove selected item)', () => { const onSelectedItemsChange = spy(); - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], onSelectedItemsChange, defaultSelectedItems: ['1'], }); - fireEvent.click(response.getItemContent('1'), { ctrlKey: true }); + fireEvent.click(view.getItemContent('1'), { ctrlKey: true }); expect(onSelectedItemsChange.callCount).to.equal(1); expect(onSelectedItemsChange.lastCall.args[1]).to.deep.equal([]); }); it('should warn when switching from controlled to uncontrolled', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], selectedItems: [], }); expect(() => { - response.setProps({ selectedItems: undefined }); + view.setProps({ selectedItems: undefined }); }).toErrorDev( 'MUI X: A component is changing the controlled selectedItems state of TreeView to be uncontrolled.', ); }); it('should warn and not react to update when updating the default state', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); expect(() => { - response.setProps({ defaultSelectedItems: ['2'] }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + view.setProps({ defaultSelectedItems: ['2'] }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); }).toErrorDev( 'MUI X: A component is changing the default selectedItems state of an uncontrolled TreeView after being initialized. To suppress this warning opt to use a controlled TreeView.', ); @@ -170,197 +170,197 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> describe('item click interaction', () => { describe('single selection', () => { it('should select un-selected item when clicking on an item content', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not un-select selected item when clicking on an item content', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: '1', }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(true); }); it('should not select an item when click and disableSelection', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when clicking on a disabled item content', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], }); - expect(response.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); }); describe('multi selection', () => { it('should select un-selected item and remove other selected items when clicking on an item content', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['2'], }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemContent('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemContent('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); }); it('should not un-select selected item when clicking on an item content', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(true); }); it('should un-select selected item when clicking on its content while holding Ctrl', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1', '2'], }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); - fireEvent.click(response.getItemContent('1'), { ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.click(view.getItemContent('1'), { ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should un-select selected item when clicking on its content while holding Meta', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1', '2'], }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); - fireEvent.click(response.getItemContent('1'), { metaKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemContent('1'), { metaKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should not select an item when click and disableSelection', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when clicking on a disabled item content', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1', disabled: true }, { id: '2' }], }); - expect(response.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should select un-selected item when clicking on its content while holding Ctrl', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }, { id: '3' }], defaultSelectedItems: ['1'], }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemContent('3'), { ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + fireEvent.click(view.getItemContent('3'), { ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); it('should do nothing when clicking on an item content on a fresh tree whil holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should expand the selection range when clicking on an item content below the last selected item while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemContent('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemContent('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); }); it('should expand the selection range when clicking on an item content above the last selected item while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemContent('3')); - expect(response.getSelectedTreeItems()).to.deep.equal(['3']); + fireEvent.click(view.getItemContent('3')); + expect(view.getSelectedTreeItems()).to.deep.equal(['3']); - fireEvent.click(response.getItemContent('2'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); + fireEvent.click(view.getItemContent('2'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); }); it('should expand the selection range when clicking on an item content while holding Shift after un-selecting another item', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemContent('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemContent('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemContent('2'), { ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.click(view.getItemContent('2'), { ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); - fireEvent.click(response.getItemContent('2'), { ctrlKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemContent('2'), { ctrlKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); }); it('should not expand the selection range when clicking on a disabled item content then clicking on an item content while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, items: [ { id: '1' }, @@ -371,15 +371,15 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> ], }); - fireEvent.click(response.getItemContent('2')); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.click(view.getItemContent('2')); + expect(view.getSelectedTreeItems()).to.deep.equal([]); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not expand the selection range when clicking on an item content then clicking a disabled item content while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, items: [ { id: '1' }, @@ -390,28 +390,28 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> ], }); - fireEvent.click(response.getItemContent('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemContent('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should not select disabled items that are part of the selected range', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], }); - fireEvent.click(response.getItemContent('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemContent('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemContent('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + fireEvent.click(view.getItemContent('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); it('should not crash when selecting multiple items in a deeply nested tree', () => { - const response = render({ + const view = render({ multiSelect: true, items: [ { id: '1', children: [{ id: '1.1', children: [{ id: '1.1.1' }] }] }, @@ -420,10 +420,10 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> defaultExpandedItems: ['1', '1.1'], }); - fireEvent.click(response.getItemContent('1.1.1')); - fireEvent.click(response.getItemContent('2'), { shiftKey: true }); + fireEvent.click(view.getItemContent('1.1.1')); + fireEvent.click(view.getItemContent('2'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1.1.1', '2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1.1.1', '2']); }); }); }); @@ -431,213 +431,213 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> describe('checkbox interaction', () => { describe('render checkbox when needed', () => { it('should not render a checkbox when checkboxSelection is not defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }], }); - expect(response.getItemCheckbox('1')).to.equal(null); + expect(view.getItemCheckbox('1')).to.equal(null); }); it('should not render a checkbox when checkboxSelection is false', () => { - const response = render({ + const view = render({ checkboxSelection: false, items: [{ id: '1' }], }); - expect(response.getItemCheckbox('1')).to.equal(null); + expect(view.getItemCheckbox('1')).to.equal(null); }); it('should render a checkbox when checkboxSelection is true', () => { - const response = render({ + const view = render({ checkboxSelection: true, items: [{ id: '1' }], }); - expect(response.getItemCheckbox('1')).not.to.equal(null); + expect(view.getItemCheckbox('1')).not.to.equal(null); }); }); describe('single selection', () => { it('should not change selection when clicking on an item content', () => { - const response = render({ + const view = render({ checkboxSelection: true, items: [{ id: '1' }], }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should select un-selected item when clicking on an item checkbox', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], checkboxSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(true); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(true); }); it('should un-select selected item when clicking on an item checkbox', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: '1', checkboxSelection: true, }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when click and disableSelection', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], disableSelection: true, checkboxSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when clicking on a disabled item checkbox', () => { - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }, { id: '2' }], checkboxSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); }); describe('multi selection', () => { it('should not change selection when clicking on an item content', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }], }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemContent('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemContent('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should select un-selected item and keep other items selected when clicking on an item checkbox', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['2'], }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); }); it('should un-select selected item when clicking on an item checkbox', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when click and disableSelection', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when clicking on a disabled item content', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1', disabled: true }, { id: '2' }], }); - expect(response.isItemSelected('1')).to.equal(false); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.isItemSelected('1')).to.equal(false); }); it('should expand the selection range when clicking on an item checkbox below the last selected item while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemCheckboxInput('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemCheckboxInput('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); + fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); }); it('should expand the selection range when clicking on an item checkbox above the last selected item while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemCheckboxInput('3')); - expect(response.getSelectedTreeItems()).to.deep.equal(['3']); + fireEvent.click(view.getItemCheckboxInput('3')); + expect(view.getSelectedTreeItems()).to.deep.equal(['3']); - fireEvent.click(response.getItemCheckboxInput('2'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); + fireEvent.click(view.getItemCheckboxInput('2'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2', '2.1', '3']); }); it('should expand the selection range when clicking on an item checkbox while holding Shift after un-selecting another item', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2' }, { id: '2.1' }, { id: '3' }, { id: '4' }], }); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemCheckboxInput('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + fireEvent.click(view.getItemCheckboxInput('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); - fireEvent.click(response.getItemCheckboxInput('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemCheckboxInput('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); + fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2', '2.1', '3']); }); it('should not expand the selection range when clicking on a disabled item checkbox then clicking on an item checkbox while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [ @@ -649,15 +649,15 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> ], }); - fireEvent.click(response.getItemCheckboxInput('2')); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.click(view.getItemCheckboxInput('2')); + expect(view.getSelectedTreeItems()).to.deep.equal([]); - fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal([]); + fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal([]); }); it('should not expand the selection range when clicking on an item checkbox then clicking a disabled item checkbox while holding Shift', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [ @@ -669,95 +669,95 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> ], }); - fireEvent.click(response.getItemCheckboxInput('2')); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemCheckboxInput('2')); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); - fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['2']); + fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['2']); }); it('should not select disabled items that are part of the selected range', () => { - const response = render({ + const view = render({ multiSelect: true, checkboxSelection: true, items: [{ id: '1' }, { id: '2', disabled: true }, { id: '3' }], }); - fireEvent.click(response.getItemCheckboxInput('1')); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + fireEvent.click(view.getItemCheckboxInput('1')); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); - fireEvent.click(response.getItemCheckboxInput('3'), { shiftKey: true }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '3']); + fireEvent.click(view.getItemCheckboxInput('3'), { shiftKey: true }); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '3']); }); }); }); describe('aria-multiselectable tree attribute', () => { it('should have the attribute `aria-multiselectable=false if using single select`', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.getRoot()).to.have.attribute('aria-multiselectable', 'false'); + expect(view.getRoot()).to.have.attribute('aria-multiselectable', 'false'); }); it('should have the attribute `aria-multiselectable=true if using multi select`', () => { - const response = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true }); + const view = render({ items: [{ id: '1' }, { id: '2' }], multiSelect: true }); - expect(response.getRoot()).to.have.attribute('aria-multiselectable', 'true'); + expect(view.getRoot()).to.have.attribute('aria-multiselectable', 'true'); }); }); - // The `aria-selected` attribute is used by the `response.isItemSelected` method. + // The `aria-selected` attribute is used by the `view.isItemSelected` method. // This `describe` only tests basics scenarios, more complex scenarios are tested in this file's other `describe`. describe('aria-selected item attribute', () => { describe('single selection', () => { it('should not have the attribute `aria-selected=false` if not selected', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); - expect(response.getItemRoot('1')).not.to.have.attribute('aria-selected'); + expect(view.getItemRoot('1')).not.to.have.attribute('aria-selected'); }); it('should have the attribute `aria-selected=true` if selected', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: '1', }); - expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'true'); + expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'true'); }); }); describe('multi selection', () => { it('should have the attribute `aria-selected=false` if not selected', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], }); - expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'false'); + expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'false'); }); it('should have the attribute `aria-selected=true` if selected', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); - expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'true'); + expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'true'); }); it('should have the attribute `aria-selected=false` if disabledSelection is true', () => { - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); - expect(response.getItemRoot('1')).to.have.attribute('aria-selected', 'false'); + expect(view.getItemRoot('1')).to.have.attribute('aria-selected', 'false'); }); }); }); @@ -766,13 +766,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it('should call the onItemSelectionToggle callback when selecting an item', () => { const onItemSelectionToggle = spy(); - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], onItemSelectionToggle, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onItemSelectionToggle.callCount).to.equal(1); expect(onItemSelectionToggle.lastCall.args[1]).to.equal('1'); expect(onItemSelectionToggle.lastCall.args[2]).to.equal(true); @@ -781,14 +781,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> it('should call the onItemSelectionToggle callback when un-selecting an item', () => { const onItemSelectionToggle = spy(); - const response = render({ + const view = render({ multiSelect: true, items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], onItemSelectionToggle, }); - fireEvent.click(response.getItemContent('1'), { ctrlKey: true }); + fireEvent.click(view.getItemContent('1'), { ctrlKey: true }); expect(onItemSelectionToggle.callCount).to.equal(1); expect(onItemSelectionToggle.lastCall.args[1]).to.equal('1'); expect(onItemSelectionToggle.lastCall.args[2]).to.equal(false); @@ -798,89 +798,89 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> describe('selectItem api method', () => { describe('single selection', () => { it('should select un-selected item when shouldBeSelected is not defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event: {} as any }); + view.apiRef.current.selectItem({ itemId: '1', event: {} as any }); }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); }); it('should un-select selected item when shouldBeSelected is not defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event: {} as any }); + view.apiRef.current.selectItem({ itemId: '1', event: {} as any }); }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not select an item when disableSelection is true', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], disableSelection: true, }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event: {} as any }); + view.apiRef.current.selectItem({ itemId: '1', event: {} as any }); }); - expect(response.isItemSelected('1')).to.equal(false); + expect(view.isItemSelected('1')).to.equal(false); }); it('should not un-select an item when disableSelection is true', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['1'], disableSelection: true, }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event: {} as any }); + view.apiRef.current.selectItem({ itemId: '1', event: {} as any }); }); - expect(response.isItemSelected('1')).to.equal(true); + expect(view.isItemSelected('1')).to.equal(true); }); }); describe('multi selection', () => { it('should select un-selected item and remove other selected items when shouldBeSelected is not defined', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['2'], multiSelect: true, }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event: {} as any }); + view.apiRef.current.selectItem({ itemId: '1', event: {} as any }); }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1']); }); it('should select un-selected item and keep other selected items when shouldBeSelected is not defined and keepExistingSelection is true', () => { - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], defaultSelectedItems: ['2'], multiSelect: true, }); act(() => { - response.apiRef.current.selectItem({ + view.apiRef.current.selectItem({ itemId: '1', event: {} as any, keepExistingSelection: true, }); }); - expect(response.getSelectedTreeItems()).to.deep.equal(['1', '2']); + expect(view.getSelectedTreeItems()).to.deep.equal(['1', '2']); }); }); @@ -889,13 +889,13 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> const event = {} as any; const onItemSelectionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], onItemSelectionToggle, }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event }); + view.apiRef.current.selectItem({ itemId: '1', event }); }); expect(onItemSelectionToggle.callCount).to.equal(1); @@ -908,14 +908,14 @@ describeTreeView<[UseTreeViewSelectionSignature, UseTreeViewExpansionSignature]> const event = {} as any; const onItemSelectionToggle = spy(); - const response = render({ + const view = render({ items: [{ id: '1' }, { id: '2' }], onItemSelectionToggle, defaultSelectedItems: '1', }); act(() => { - response.apiRef.current.selectItem({ itemId: '1', event }); + view.apiRef.current.selectItem({ itemId: '1', event }); }); expect(onItemSelectionToggle.callCount).to.equal(1); diff --git a/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx b/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx index 2fba6b0a8ab9..9489bec6a86f 100644 --- a/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx +++ b/packages/x-tree-view/src/internals/useTreeView/useTreeView.test.tsx @@ -10,9 +10,9 @@ describeTreeView<[]>( 'useTreeView hook', ({ render, renderFromJSX, treeViewComponentName, TreeViewComponent, TreeItemComponent }) => { it('should have the role="tree" on the root slot', () => { - const response = render({ items: [{ id: '1' }] }); + const view = render({ items: [{ id: '1' }] }); - expect(response.getRoot()).to.have.attribute('role', 'tree'); + expect(view.getRoot()).to.have.attribute('role', 'tree'); }); it('should work inside a Portal', () => { diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx index e35e9df63ba0..8dc7de297623 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.test.tsx @@ -24,19 +24,19 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( }) => { describe('role prop', () => { it('should have the role="treeitem" on the root slot', () => { - const response = render({ items: [{ id: '1' }] }); + const view = render({ items: [{ id: '1' }] }); - expect(response.getItemRoot('1')).to.have.attribute('role', 'treeitem'); + expect(view.getItemRoot('1')).to.have.attribute('role', 'treeitem'); }); it('should have the role "group" on the groupTransition slot if the item is expandable', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], }); expect( - response.getItemRoot('1').querySelector(`.${treeItemClasses.groupTransition}`), + view.getItemRoot('1').querySelector(`.${treeItemClasses.groupTransition}`), ).to.have.attribute('role', 'group'); }); }); @@ -45,7 +45,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( it('should call onClick when clicked, but not when children are clicked for TreeItem', () => { const onClick = spy(); - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], slotProps: { @@ -55,7 +55,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( }, }); - fireEvent.click(response.getItemContent('1.1')); + fireEvent.click(view.getItemContent('1.1')); expect(onClick.callCount).to.equal(treeItemComponentName === 'TreeItem' ? 1 : 2); expect(onClick.lastCall.firstArg.target.parentElement.dataset.testid).to.equal('1.1'); }); @@ -63,7 +63,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( it('should call onClick even when the element is disabled', () => { const onClick = spy(); - const response = render({ + const view = render({ items: [{ id: '1', disabled: true }], slotProps: { item: { @@ -72,13 +72,13 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( }, }); - fireEvent.click(response.getItemContent('1')); + fireEvent.click(view.getItemContent('1')); expect(onClick.callCount).to.equal(1); }); }); it('should be able to type in a child input', () => { - const response = render({ + const view = render({ items: [{ id: '1', children: [{ id: '1.1' }] }], defaultExpandedItems: ['1'], slotProps: @@ -97,7 +97,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( }, }); - const input = response.getItemRoot('1.1').querySelector('.icon-input')!; + const input = view.getItemRoot('1.1').querySelector('.icon-input')!; const keydownEvent = createEvent.keyDown(input, { key: 'a', }); @@ -123,9 +123,9 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( return ; } - let response: DescribeTreeViewRendererUtils; + let view: DescribeTreeViewRendererUtils; if (treeViewComponentName === 'SimpleTreeView') { - response = renderFromJSX( + view = renderFromJSX( @@ -135,7 +135,7 @@ describeTreeView<[UseTreeViewExpansionSignature, UseTreeViewIconsSignature]>( , ); } else { - response = renderFromJSX( + view = renderFromJSX( ( } act(() => { - response.getItemRoot('2').focus(); + view.getItemRoot('2').focus(); }); - expect(response.getFocusedItemId()).to.equal('2'); + expect(view.getFocusedItemId()).to.equal('2'); act(() => { screen.getByRole('button').focus(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f64fc37d586b..574f2b830cfb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -266,6 +266,9 @@ importers: eslint-plugin-react-hooks: specifier: ^4.6.2 version: 4.6.2(eslint@8.57.0) + eslint-plugin-testing-library: + specifier: ^6.3.0 + version: 6.3.0(eslint@8.57.0)(typescript@5.5.4) fast-glob: specifier: ^3.3.2 version: 3.3.2 @@ -4118,6 +4121,9 @@ packages: '@types/retry@0.12.0': resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==} + '@types/semver@7.5.8': + resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} + '@types/send@0.17.4': resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==} @@ -4181,6 +4187,10 @@ packages: typescript: optional: true + '@typescript-eslint/scope-manager@5.62.0': + resolution: {integrity: sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/scope-manager@7.16.1': resolution: {integrity: sha512-nYpyv6ALte18gbMz323RM+vpFpTjfNdyakbf3nsLvF43uF9KeNC289SUEW3QLZ1xPtyINJ1dIsZOuWuSRIWygw==} engines: {node: ^18.18.0 || >=20.0.0} @@ -4195,10 +4205,23 @@ packages: typescript: optional: true + '@typescript-eslint/types@5.62.0': + resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/types@7.16.1': resolution: {integrity: sha512-AQn9XqCzUXd4bAVEsAXM/Izk11Wx2u4H3BAfQVhSfzfDOm/wAON9nP7J5rpkCxts7E5TELmN845xTUCQrD1xIQ==} engines: {node: ^18.18.0 || >=20.0.0} + '@typescript-eslint/typescript-estree@5.62.0': + resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + '@typescript-eslint/typescript-estree@7.16.1': resolution: {integrity: sha512-0vFPk8tMjj6apaAZ1HlwM8w7jbghC8jc1aRNJG5vN8Ym5miyhTQGMqU++kuBFDNKe9NcPeZ6x0zfSzV8xC1UlQ==} engines: {node: ^18.18.0 || >=20.0.0} @@ -4208,12 +4231,22 @@ packages: typescript: optional: true + '@typescript-eslint/utils@5.62.0': + resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + '@typescript-eslint/utils@7.16.1': resolution: {integrity: sha512-WrFM8nzCowV0he0RlkotGDujx78xudsxnGMBHI88l5J8wEhED6yBwaSLP99ygfrzAjsQvcYQ94quDwI0d7E1fA==} engines: {node: ^18.18.0 || >=20.0.0} peerDependencies: eslint: ^8.56.0 + '@typescript-eslint/visitor-keys@5.62.0': + resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@typescript-eslint/visitor-keys@7.16.1': resolution: {integrity: sha512-Qlzzx4sE4u3FsHTPQAAQFJFNOuqtuY0LFrZHwQ8IHK705XxBiWOFkfKRWu6niB7hwfgnwIpO4jTC75ozW1PHWg==} engines: {node: ^18.18.0 || >=20.0.0} @@ -5902,6 +5935,12 @@ packages: peerDependencies: eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7 + eslint-plugin-testing-library@6.3.0: + resolution: {integrity: sha512-GYcEErTt6EGwE0bPDY+4aehfEBpB2gDBFKohir8jlATSUvzStEyzCx8QWB/14xeKc/AwyXkzScSzMHnFojkWrA==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0, npm: '>=6'} + peerDependencies: + eslint: ^7.5.0 || ^8.0.0 + eslint-scope@5.1.1: resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==} engines: {node: '>=8.0.0'} @@ -9454,6 +9493,9 @@ packages: resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} engines: {node: '>=6'} + tslib@1.14.1: + resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} @@ -9461,6 +9503,12 @@ packages: resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==} engines: {node: '>=0.6.x'} + tsutils@3.21.0: + resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==} + engines: {node: '>= 6'} + peerDependencies: + typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta' + tsx@4.16.2: resolution: {integrity: sha512-C1uWweJDgdtX2x600HjaFaucXTilT7tgUZHbOE4+ypskZ1OP8CRCSDkCxG6Vya9EwaFIVagWwpaVAn5wzypaqQ==} engines: {node: '>=18.0.0'} @@ -13100,6 +13148,8 @@ snapshots: '@types/retry@0.12.0': {} + '@types/semver@7.5.8': {} + '@types/send@0.17.4': dependencies: '@types/mime': 1.3.5 @@ -13183,6 +13233,11 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/scope-manager@5.62.0': + dependencies: + '@typescript-eslint/types': 5.62.0 + '@typescript-eslint/visitor-keys': 5.62.0 + '@typescript-eslint/scope-manager@7.16.1': dependencies: '@typescript-eslint/types': 7.16.1 @@ -13200,8 +13255,24 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/types@5.62.0': {} + '@typescript-eslint/types@7.16.1': {} + '@typescript-eslint/typescript-estree@5.62.0(typescript@5.5.4)': + dependencies: + '@typescript-eslint/types': 5.62.0 + '@typescript-eslint/visitor-keys': 5.62.0 + debug: 4.3.5(supports-color@8.1.1) + globby: 11.1.0 + is-glob: 4.0.3 + semver: 7.6.3 + tsutils: 3.21.0(typescript@5.5.4) + optionalDependencies: + typescript: 5.5.4 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/typescript-estree@7.16.1(typescript@5.5.4)': dependencies: '@typescript-eslint/types': 7.16.1 @@ -13217,6 +13288,21 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.5.4)': + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) + '@types/json-schema': 7.0.15 + '@types/semver': 7.5.8 + '@typescript-eslint/scope-manager': 5.62.0 + '@typescript-eslint/types': 5.62.0 + '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.5.4) + eslint: 8.57.0 + eslint-scope: 5.1.1 + semver: 7.6.3 + transitivePeerDependencies: + - supports-color + - typescript + '@typescript-eslint/utils@7.16.1(eslint@8.57.0)(typescript@5.5.4)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) @@ -13228,6 +13314,11 @@ snapshots: - supports-color - typescript + '@typescript-eslint/visitor-keys@5.62.0': + dependencies: + '@typescript-eslint/types': 5.62.0 + eslint-visitor-keys: 3.4.3 + '@typescript-eslint/visitor-keys@7.16.1': dependencies: '@typescript-eslint/types': 7.16.1 @@ -15289,6 +15380,14 @@ snapshots: string.prototype.matchall: 4.0.11 string.prototype.repeat: 1.0.0 + eslint-plugin-testing-library@6.3.0(eslint@8.57.0)(typescript@5.5.4): + dependencies: + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.5.4) + eslint: 8.57.0 + transitivePeerDependencies: + - supports-color + - typescript + eslint-scope@5.1.1: dependencies: esrecurse: 4.3.0 @@ -19465,10 +19564,17 @@ snapshots: minimist: 1.2.8 strip-bom: 3.0.0 + tslib@1.14.1: {} + tslib@2.6.2: {} tsscmp@1.0.6: {} + tsutils@3.21.0(typescript@5.5.4): + dependencies: + tslib: 1.14.1 + typescript: 5.5.4 + tsx@4.16.2: dependencies: esbuild: 0.21.5 diff --git a/test/utils/fireUserEvent/fireUserEvent.ts b/test/utils/fireUserEvent/fireUserEvent.ts new file mode 100644 index 000000000000..e64105388c27 --- /dev/null +++ b/test/utils/fireUserEvent/fireUserEvent.ts @@ -0,0 +1,30 @@ +import { fireEvent } from '@mui/internal-test-utils/createRenderer'; + +/** + * @deprecated Use `pointer` from `@testing-library/user-event` instead. + */ +export function touch(target: Element): void { + fireEvent.touchStart(target); + fireEvent.touchEnd(target); +} + +/** + * @param {...any} args The arguments to pass to `fireEvent.mouseDown`, `fireEvent.mouseUp`, and `fireEvent.click`. + * @deprecated Use `click` from `@testing-library/user-event` instead. + */ +export const mousePress: (...args: Parameters<(typeof fireEvent)['mouseUp']>) => void = ( + target, + options, +) => { + fireEvent.mouseDown(target, options); + fireEvent.mouseUp(target, options); + fireEvent.click(target, options); +}; + +/** + * @deprecated Use `keyboard` or `type` from `@testing-library/user-event` instead. + */ +export function keyPress(target: Element, options: { key: string; [key: string]: any }): void { + fireEvent.keyDown(target, options); + fireEvent.keyUp(target, options); +} diff --git a/test/utils/fireUserEvent/index.ts b/test/utils/fireUserEvent/index.ts new file mode 100644 index 000000000000..b050ae5a78d0 --- /dev/null +++ b/test/utils/fireUserEvent/index.ts @@ -0,0 +1 @@ +export * as fireUserEvent from './fireUserEvent'; diff --git a/test/utils/pickers/describeValue/testControlledUnControlled.tsx b/test/utils/pickers/describeValue/testControlledUnControlled.tsx index ae4e204f8252..e5dca22796b5 100644 --- a/test/utils/pickers/describeValue/testControlledUnControlled.tsx +++ b/test/utils/pickers/describeValue/testControlledUnControlled.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { inputBaseClasses } from '@mui/material/InputBase'; import { getAllFieldInputRoot, @@ -9,6 +9,7 @@ import { getFieldInputRoot, } from 'test/utils/pickers'; import { DescribeValueOptions, DescribeValueTestSuite } from './describeValue.types'; +import { fireUserEvent } from '../../fireUserEvent'; export const testControlledUnControlled: DescribeValueTestSuite = ( ElementToTest, @@ -168,7 +169,7 @@ export const testControlledUnControlled: DescribeValueTestSuite = ( onChange: handleChange, }); v7Response.selectSection(undefined); - userEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowUp' }); + fireUserEvent.keyPress(v7Response.getActiveSection(0), { key: 'ArrowUp' }); expect(handleChange.callCount).to.equal(0); }); diff --git a/test/utils/pickers/describeValue/testPickerActionBar.tsx b/test/utils/pickers/describeValue/testPickerActionBar.tsx index adbb86a48967..850189c47294 100644 --- a/test/utils/pickers/describeValue/testPickerActionBar.tsx +++ b/test/utils/pickers/describeValue/testPickerActionBar.tsx @@ -1,13 +1,14 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { adapterToUse, getExpectedOnChangeCount, expectPickerChangeHandlerValue, } from 'test/utils/pickers'; import { DescribeValueTestSuite } from './describeValue.types'; +import { fireUserEvent } from '../../fireUserEvent'; export const testPickerActionBar: DescribeValueTestSuite = ( ElementToTest, @@ -49,7 +50,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( ); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(1); expectPickerChangeHandlerValue(pickerParams.type, onChange, emptyValue); expect(onAccept.callCount).to.equal(1); @@ -75,7 +76,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( ); // Clear the date - userEvent.mousePress(screen.getByText(/clear/i)); + fireUserEvent.mousePress(screen.getByText(/clear/i)); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); @@ -103,7 +104,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( setNewValue(values[0], { isOpened: true, selectSection, pressKey }); // Cancel the modifications - userEvent.mousePress(screen.getByText(/cancel/i)); + fireUserEvent.mousePress(screen.getByText(/cancel/i)); expect(onChange.callCount).to.equal( getExpectedOnChangeCount(componentFamily, pickerParams) + 1, ); @@ -137,7 +138,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( ); // Cancel the modifications - userEvent.mousePress(screen.getByText(/cancel/i)); + fireUserEvent.mousePress(screen.getByText(/cancel/i)); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); @@ -165,7 +166,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( setNewValue(values[0], { isOpened: true, selectSection, pressKey }); // Accept the modifications - userEvent.mousePress(screen.getByText(/ok/i)); + fireUserEvent.mousePress(screen.getByText(/ok/i)); expect(onChange.callCount).to.equal( getExpectedOnChangeCount(componentFamily, pickerParams), ); // The accepted value as already been committed, don't call onChange again @@ -192,7 +193,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( ); // Accept the modifications - userEvent.mousePress(screen.getByText(/ok/i)); + fireUserEvent.mousePress(screen.getByText(/ok/i)); expect(onChange.callCount).to.equal(1); expect(onAccept.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); @@ -217,7 +218,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( ); // Accept the modifications - userEvent.mousePress(screen.getByText(/ok/i)); + fireUserEvent.mousePress(screen.getByText(/ok/i)); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); @@ -242,7 +243,7 @@ export const testPickerActionBar: DescribeValueTestSuite = ( />, ); - userEvent.mousePress(screen.getByText(/today/i)); + fireUserEvent.mousePress(screen.getByText(/today/i)); let startOfToday: any; if (pickerParams.type === 'date') { diff --git a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx index b38b5a9d2bd3..d2e1d1494439 100644 --- a/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx +++ b/test/utils/pickers/describeValue/testPickerOpenCloseLifeCycle.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { getExpectedOnChangeCount, getFieldInputRoot, openPicker } from 'test/utils/pickers'; import { DescribeValueTestSuite } from './describeValue.types'; +import { fireUserEvent } from '../../fireUserEvent'; export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite = ( ElementToTest, @@ -272,7 +273,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite const newValue = setNewValue(values[0], { isOpened: true, selectSection, pressKey }); // Dismiss the picker - userEvent.keyPress(document.activeElement!, { key: 'Escape' }); + fireUserEvent.keyPress(document.activeElement!, { key: 'Escape' }); expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams)); expect(onAccept.callCount).to.equal(1); if (isRangeType) { @@ -308,7 +309,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite ); // Dismiss the picker - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(1); @@ -341,7 +342,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite const newValue = setNewValue(values[0], { isOpened: true, selectSection, pressKey }); // Dismiss the picker - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(onChange.callCount).to.equal(getExpectedOnChangeCount(componentFamily, pickerParams)); expect(onAccept.callCount).to.equal(1); expect(onAccept.lastCall.args[0]).toEqualDateTime(newValue as any); @@ -364,7 +365,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite ); // Dismiss the picker - userEvent.mousePress(document.body); + fireUserEvent.mousePress(document.body); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); @@ -385,7 +386,7 @@ export const testPickerOpenCloseLifeCycle: DescribeValueTestSuite ); // Dismiss the picker - userEvent.keyPress(document.body, { key: 'Escape' }); + fireUserEvent.keyPress(document.body, { key: 'Escape' }); expect(onChange.callCount).to.equal(0); expect(onAccept.callCount).to.equal(0); expect(onClose.callCount).to.equal(0); diff --git a/test/utils/pickers/describeValue/testShortcuts.tsx b/test/utils/pickers/describeValue/testShortcuts.tsx index bd7617b6dd98..4e4493b442c2 100644 --- a/test/utils/pickers/describeValue/testShortcuts.tsx +++ b/test/utils/pickers/describeValue/testShortcuts.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; import { expectPickerChangeHandlerValue } from 'test/utils/pickers'; -import { userEvent, screen } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { DescribeValueTestSuite } from './describeValue.types'; +import { fireUserEvent } from '../../fireUserEvent'; export const testShortcuts: DescribeValueTestSuite = (ElementToTest, options) => { const { @@ -49,7 +50,7 @@ export const testShortcuts: DescribeValueTestSuite = (ElementToTe ); const shortcut = screen.getByRole('button', { name: 'Test shortcut' }); - userEvent.mousePress(shortcut); + fireUserEvent.mousePress(shortcut); expect(onChange.callCount).to.equal(1); expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]); @@ -87,7 +88,7 @@ export const testShortcuts: DescribeValueTestSuite = (ElementToTe ); const shortcut = screen.getByRole('button', { name: 'Test shortcut' }); - userEvent.mousePress(shortcut); + fireUserEvent.mousePress(shortcut); expect(onChange.callCount).to.equal(1); expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]); @@ -125,7 +126,7 @@ export const testShortcuts: DescribeValueTestSuite = (ElementToTe ); const shortcut = screen.getByRole('button', { name: 'Test shortcut' }); - userEvent.mousePress(shortcut); + fireUserEvent.mousePress(shortcut); expect(onChange.callCount).to.equal(1); expectPickerChangeHandlerValue(pickerParams.type, onChange, values[1]); diff --git a/test/utils/pickers/fields.tsx b/test/utils/pickers/fields.tsx index fe3222a0c397..7fbed5eda3d8 100644 --- a/test/utils/pickers/fields.tsx +++ b/test/utils/pickers/fields.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import { expect } from 'chai'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { createRenderer, screen, userEvent, act, fireEvent } from '@mui/internal-test-utils'; +import { createRenderer, screen, act, fireEvent } from '@mui/internal-test-utils'; import { FieldRef, FieldSection, FieldSectionType } from '@mui/x-date-pickers/models'; import { pickersSectionListClasses } from '@mui/x-date-pickers/PickersSectionList'; import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; +import { fireUserEvent } from '../fireUserEvent'; import { expectFieldValueV7, expectFieldValueV6 } from './assertions'; export const getTextbox = (): HTMLInputElement => screen.getByRole('textbox'); @@ -210,7 +211,7 @@ export const buildFieldInteractions =

({ 'ArrowRight', ].includes(key) ) { - userEvent.keyPress(target, { key }); + fireUserEvent.keyPress(target, { key }); } else { fireEvent.input(target, { target: { textContent: key } }); } @@ -250,7 +251,7 @@ export const buildFieldInteractions =

({ } as any); v6Response.selectSection(selectedSection); const input = getTextbox(); - userEvent.keyPress(input, { key }); + fireUserEvent.keyPress(input, { key }); expectFieldValueV6(input, expectedValue); v6Response.unmount(); }; diff --git a/test/utils/pickers/openPicker.ts b/test/utils/pickers/openPicker.ts index ac9e934c55ea..67293e7a3cce 100644 --- a/test/utils/pickers/openPicker.ts +++ b/test/utils/pickers/openPicker.ts @@ -1,6 +1,7 @@ -import { screen, userEvent } from '@mui/internal-test-utils'; +import { screen } from '@mui/internal-test-utils'; import { getFieldSectionsContainer } from 'test/utils/pickers/fields'; import { pickersInputBaseClasses } from '@mui/x-date-pickers/PickersTextField'; +import { fireUserEvent } from '../fireUserEvent'; export type OpenPickerParams = | { @@ -24,21 +25,21 @@ export const openPicker = (params: OpenPickerParams) => { ); if (isRangeType) { - userEvent.mousePress(fieldSectionsContainer); + fireUserEvent.mousePress(fieldSectionsContainer); if (params.isSingleInput && params.initialFocus === 'end') { const sections = fieldSectionsContainer.querySelectorAll( `.${pickersInputBaseClasses.sectionsContainer}`, ); - userEvent.mousePress(sections[sections.length - 1]); + fireUserEvent.mousePress(sections[sections.length - 1]); } return undefined; } if (params.variant === 'mobile') { - return userEvent.mousePress(fieldSectionsContainer); + return fireUserEvent.mousePress(fieldSectionsContainer); } const target = @@ -46,5 +47,5 @@ export const openPicker = (params: OpenPickerParams) => { ? screen.getByLabelText(/choose time/i) : screen.getByLabelText(/choose date/i); - return userEvent.mousePress(target); + return fireUserEvent.mousePress(target); }; diff --git a/test/utils/pickers/viewHandlers.ts b/test/utils/pickers/viewHandlers.ts index cfc23d1b4d90..2b3ab36c387f 100644 --- a/test/utils/pickers/viewHandlers.ts +++ b/test/utils/pickers/viewHandlers.ts @@ -1,7 +1,8 @@ -import { fireTouchChangedEvent, userEvent, screen } from '@mui/internal-test-utils'; +import { fireTouchChangedEvent, screen } from '@mui/internal-test-utils'; import { getClockTouchEvent, formatFullTimeValue } from 'test/utils/pickers'; import { MuiPickersAdapter, TimeView } from '@mui/x-date-pickers/models'; import { formatMeridiem } from '@mui/x-date-pickers/internals'; +import { fireUserEvent } from '../fireUserEvent'; type TDate = any; @@ -35,7 +36,9 @@ export const timeClockHandler: ViewHandler = { export const digitalClockHandler: ViewHandler = { setViewValue: (adapter, value) => { - userEvent.mousePress(screen.getByRole('option', { name: formatFullTimeValue(adapter, value) })); + fireUserEvent.mousePress( + screen.getByRole('option', { name: formatFullTimeValue(adapter, value) }), + ); }, }; @@ -44,10 +47,10 @@ export const multiSectionDigitalClockHandler: ViewHandler = { const hasMeridiem = adapter.is12HourCycleInCurrentLocale(); const hoursLabel = parseInt(adapter.format(value, hasMeridiem ? 'hours12h' : 'hours24h'), 10); const minutesLabel = adapter.getMinutes(value).toString(); - userEvent.mousePress(screen.getByRole('option', { name: `${hoursLabel} hours` })); - userEvent.mousePress(screen.getByRole('option', { name: `${minutesLabel} minutes` })); + fireUserEvent.mousePress(screen.getByRole('option', { name: `${hoursLabel} hours` })); + fireUserEvent.mousePress(screen.getByRole('option', { name: `${minutesLabel} minutes` })); if (hasMeridiem) { - userEvent.mousePress( + fireUserEvent.mousePress( screen.getByRole('option', { name: formatMeridiem(adapter, adapter.getHours(value) >= 12 ? 'pm' : 'am'), }),