diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx index 1645ef301..edae4e3d4 100644 --- a/src/components/Accordion/Accordion.test.tsx +++ b/src/components/Accordion/Accordion.test.tsx @@ -2,7 +2,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; import Accordion, { filterState } from './Accordion'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; describe('Accordion/filterState', () => { it('should correctly add an item to the state if it is not already included and `isCollapsedOnOpen` is false', () => { diff --git a/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/src/components/Breadcrumbs/Breadcrumbs.test.tsx index 72357c84b..043650b0e 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.test.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -1,12 +1,12 @@ import { fireEvent, screen, waitFor } from '@testing-library/react'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import BreadcrumbItem from './BreadcrumbItem'; import Breadcrumbs from './Breadcrumbs'; describe('Breadcrumbs', () => { it('should not show a dropdown button when breadcrumb have less than 5 items', () => { - renderWithProviders( + setup( Root Parent @@ -19,7 +19,7 @@ describe('Breadcrumbs', () => { }); it('should show a dropdown button when breadcrumb have more than 5 items', () => { - renderWithProviders( + setup( Root Parent1 @@ -42,7 +42,7 @@ describe('Breadcrumbs', () => { }); it('should show all items inside dropdown when dropdown is opened', async () => { - renderWithProviders( + setup( Root Parent1 @@ -70,7 +70,7 @@ describe('Breadcrumbs', () => { }); it('should show items within dropdown using correct order ', async () => { - renderWithProviders( + setup( Link1 Link2 @@ -97,7 +97,7 @@ describe('Breadcrumbs', () => { }); it('should be the last breadcrumb item not a link', async () => { - renderWithProviders( + setup( Link1 Link2 diff --git a/src/components/Collapsible/Collapsible.test.tsx b/src/components/Collapsible/Collapsible.test.tsx index 1d3ad9460..88bdc24dd 100644 --- a/src/components/Collapsible/Collapsible.test.tsx +++ b/src/components/Collapsible/Collapsible.test.tsx @@ -2,7 +2,7 @@ import { ReactNode, useState } from 'react'; import { screen } from '@testing-library/react'; import { type Mock, vi } from 'vitest'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import { Collapsible } from './index'; const ControllingComponent = ({ diff --git a/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx b/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx index c6372369b..88eeb7da4 100644 --- a/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx +++ b/src/components/Datatable/BatchModule/BatchActions/BatchActions.test.tsx @@ -1,7 +1,7 @@ import { act, fireEvent, screen, waitFor } from '@testing-library/react'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../../../utils/tests/renderWithProviders'; +import { setup } from '../../../../utils/tests/setup'; import { DatatableStore, datatableInitialState } from '../../Datatable.store'; import BatchActions from './BatchActions'; @@ -45,7 +45,7 @@ describe('Datatable/BatchActions', () => { }); }); it('should call onClick handler on top-level action with correct parameters', () => { - renderWithProviders(); + setup(); fireEvent.click(screen.getByRole('button', { name: /Action/i })); expect(actionFnMock).toBeCalledWith( @@ -56,7 +56,7 @@ describe('Datatable/BatchActions', () => { }); it('should call onClick handler in dropdown action with correct parameters', () => { - renderWithProviders(); + setup(); fireEvent.click(screen.getByRole('button', { name: /Dropdown/i })); fireEvent.click(screen.getByRole('button', { name: /Dropdown Item/i })); @@ -78,7 +78,7 @@ describe('Datatable/BatchActions', () => { }); }); it('should call onClick handler on top-level action with correct parameters', () => { - renderWithProviders(); + setup(); act(() => { DatatableStore.update((s) => { s.selectedIds = selectedIds; @@ -94,7 +94,7 @@ describe('Datatable/BatchActions', () => { }); it('should call onClick handler in dropdown action with correct parameters', async () => { - renderWithProviders(); + setup(); act(() => { DatatableStore.update((s) => { s.selectedIds = selectedIds; @@ -117,7 +117,7 @@ describe('Datatable/BatchActions', () => { }); describe('given subactions are defined', () => { it('should create dropdown button', async () => { - renderWithProviders(); + setup(); fireEvent.click(screen.getByRole('button', { name: /Dropdown/i })); diff --git a/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx b/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx index 034bd843e..bf811cccf 100644 --- a/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx +++ b/src/components/Datatable/BatchModule/ElementCounter/ElementCounter.test.tsx @@ -1,26 +1,26 @@ -import { act, fireEvent, render, screen } from '@testing-library/react'; +import { act, fireEvent, screen } from '@testing-library/react'; import ElementCounter, { getCounterContent } from './ElementCounter'; -import { renderWithProviders } from '../../../../utils/tests/renderWithProviders'; +import { setup } from '../../../../utils/tests/setup'; import { DatatableStore, datatableInitialState } from '../../Datatable.store'; describe('getCounterContent', () => { it('should return No Data when "totalLength" is 0', () => { - render(getCounterContent(0)); + setup(getCounterContent(0)); expect(screen.getByTestId('counter-content')).toHaveTextContent('No data'); }); it('should return No Data when "totalLength" is 0 and "selectedLength" is greater than 0', () => { - render(getCounterContent(0, 500)); + setup(getCounterContent(0, 500)); expect(screen.getByTestId('counter-content')).toHaveTextContent('No data'); }); it('should return correct count when "totalLength" is greater than 0', () => { - render(getCounterContent(1000)); + setup(getCounterContent(1000)); expect(screen.getByTestId('counter-content')).toHaveTextContent('1K'); }); it('should return correct count when "totalLength" and "selectedLength" are greater than 0', () => { - render(getCounterContent(1000, 500)); + setup(getCounterContent(1000, 500)); expect(screen.getByTestId('counter-content')).toHaveTextContent( '500 of 1K selected', ); @@ -33,7 +33,7 @@ describe('Datatable/ElementCounter', () => { }); it('should show Select None button when there are selected rows', () => { - renderWithProviders( + setup( , ); @@ -55,7 +55,7 @@ describe('Datatable/ElementCounter', () => { describe('DatatableStore actions', () => { describe('given selection dropdown is visible', () => { it('should set "hasExclusiveSelection" to "true" on Select All click', () => { - renderWithProviders( + setup( { expect(DatatableStore.getRawState().hasExclusiveSelection).toBe(true); }); it('should set "hasExclusiveSelection" to "false" on Select None click', () => { - renderWithProviders( + setup( { expect(DatatableStore.getRawState().hasExclusiveSelection).toBe(false); }); it('should set "shouldResetSelectedRows" to "true" on Select All click', () => { - renderWithProviders( + setup( { expect(DatatableStore.getRawState().shouldResetSelectedRows).toBe(true); }); it('should set "shouldResetSelectedRows" to "true" on Select None click', () => { - renderWithProviders( + setup( { expect(DatatableStore.getRawState().shouldResetSelectedRows).toBe(true); }); it('should react on "selectedIds" change', () => { - renderWithProviders( + setup( { expect(counter).toHaveTextContent('3 of 1K selected'); }); it('should react on "hasExclusiveSelection" change', () => { - renderWithProviders( + setup( { }); describe('given selection dropdown is hidden', () => { it('should set "shouldResetSelectedRows" to "true" on Select None click', () => { - renderWithProviders( + setup( { diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx index 0820f605f..4bf016ce3 100644 --- a/src/components/Drawer/Drawer.test.tsx +++ b/src/components/Drawer/Drawer.test.tsx @@ -2,7 +2,7 @@ import { screen } from '@testing-library/react'; import { act } from 'react'; import { vi } from 'vitest'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Drawer from './Drawer'; import Button from '../ButtonV2/Button'; import { Icon } from '../Icon'; diff --git a/src/components/ErrorBoundary/ErrorBoundary.test.tsx b/src/components/ErrorBoundary/ErrorBoundary.test.tsx index e65ff8490..59d965673 100644 --- a/src/components/ErrorBoundary/ErrorBoundary.test.tsx +++ b/src/components/ErrorBoundary/ErrorBoundary.test.tsx @@ -3,7 +3,7 @@ import { vi } from 'vitest'; import ErrorBoundary, { DEFAULT_CONTENT, DEFAULT_TITLE } from './ErrorBoundary'; import { ErrorBoundaryProps } from './ErrorBoundary.types'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; describe('ErrorBoundary Component', () => { it('should render component properly', () => { diff --git a/src/components/Filters/Filters.test.tsx b/src/components/Filters/Filters.test.tsx index f581e5cfa..b4f61d5d1 100644 --- a/src/components/Filters/Filters.test.tsx +++ b/src/components/Filters/Filters.test.tsx @@ -2,7 +2,7 @@ import { fireEvent, screen, waitFor } from '@testing-library/react'; import selectEvent from 'react-select-event'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Filters from './Filters'; import { mockTestFields, mockTestState } from './mocks/options'; @@ -15,9 +15,7 @@ describe('Filters', () => { }); it('should display remove button when value exists', () => { - renderWithProviders( - , - ); + setup(); fireEvent.change(screen.getByPlaceholderText('String'), { target: { value: 'a' }, @@ -26,9 +24,7 @@ describe('Filters', () => { expect(screen.getByRole('button', { name: /remove/i })).toBeInTheDocument(); }); it('should call onApply when value exists and clicked on Apply button', () => { - renderWithProviders( - , - ); + setup(); fireEvent.change(screen.getByPlaceholderText('String'), { target: { value: 'a' }, @@ -39,9 +35,7 @@ describe('Filters', () => { }); it('should add filter when clicked on Add button', () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); @@ -51,9 +45,7 @@ describe('Filters', () => { }); it('should set default filter when clicked on Clear all button', () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); fireEvent.click(screen.getByRole('button', { name: /Add/i })); @@ -65,7 +57,7 @@ describe('Filters', () => { }); it('should call onClose when clicked on Close button', () => { - renderWithProviders( + setup( { }); it('should remain only filter with value when clicked on Apply button', () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); fireEvent.click(screen.getByRole('button', { name: /Add/i })); @@ -96,9 +86,7 @@ describe('Filters', () => { }); it('should display message when new filter is added to applied filters', () => { - renderWithProviders( - , - ); + setup(); fireEvent.change(screen.getByPlaceholderText('String'), { target: { value: 'a' }, @@ -110,9 +98,7 @@ describe('Filters', () => { }); it('should display message when applied filter is changed', () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); fireEvent.change(screen.queryAllByPlaceholderText('String')[0], { @@ -130,9 +116,7 @@ describe('Filters', () => { }); it('should remove filter when clicked on Remove button', () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); fireEvent.click(screen.getAllByRole('button', { name: /remove/i })[0]); @@ -143,9 +127,7 @@ describe('Filters', () => { }); it('should select default condition and component when field changed', async () => { - renderWithProviders( - , - ); + setup(); await waitFor(() => { selectEvent.select(screen.getByText('Option A'), 'Option B'); @@ -156,9 +138,7 @@ describe('Filters', () => { }); it("should select first condition and component when field changed and hasn't set default", async () => { - renderWithProviders( - , - ); + setup(); await waitFor(() => { selectEvent.select(screen.getByText('Option A'), 'Option C'); @@ -169,9 +149,7 @@ describe('Filters', () => { }); it('should persist value when condition changed and components are the same', async () => { - renderWithProviders( - , - ); + setup(); fireEvent.change(screen.getByPlaceholderText('String'), { target: { value: 'a' }, @@ -185,9 +163,7 @@ describe('Filters', () => { }); it('should keep same operators when operator select changed', async () => { - renderWithProviders( - , - ); + setup(); fireEvent.click(screen.getByRole('button', { name: /Add/i })); fireEvent.click(screen.getByRole('button', { name: /Add/i })); @@ -199,7 +175,7 @@ describe('Filters', () => { }); it('should preselect filters when state was applied', () => { - renderWithProviders( + setup( { it('should call "onCancel" when cancel button was clicked', () => { const onCancel = vi.fn(); - renderWithProviders( + setup( { const renderComponent = (size = undefined) => - render(Heading); + setup(Heading); it("should render 'h1' element by default", () => { renderComponent(); @@ -38,7 +39,7 @@ describe('Heading', () => { describe("given 'as' prop is provided to the component", () => { it('should take precedence over default element', () => { - render( + setup( Heading , diff --git a/src/components/Link/Link.test.tsx b/src/components/Link/Link.test.tsx index 7c36dff74..6887598ff 100644 --- a/src/components/Link/Link.test.tsx +++ b/src/components/Link/Link.test.tsx @@ -1,32 +1,32 @@ -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import * as requireRouterLink from '../../utils/require-router-link'; import Link from './Link'; describe('Link', () => { it('should render react-router link if `to` prop is provided', () => { - renderWithProviders(RouterLink); + setup(RouterLink); const link = screen.getByRole('link', { name: /RouterLink/i }); expect(link).toBeInTheDocument(); expect(link).toHaveAttribute('href', '/path'); }); it('should render anchor tag if `href` prop is provided', () => { - render(AbsoluteLink); + setup(AbsoluteLink); const link = screen.getByRole('link', { name: /AbsoluteLink/i }); expect(link).toBeInTheDocument(); expect(link).toHaveAttribute('href', 'https://test.com'); }); it('should render button if `to` an `href` props are not provided', () => { - render(Button); + setup(Button); expect(screen.getByRole('button', { name: /Button/i })).toBeInTheDocument(); }); it('should return null if react-router link import fails', () => { vi.spyOn(requireRouterLink, 'requireRouterLink').mockReturnValue(null); - renderWithProviders(Empty); + setup(Empty); expect( screen.queryByRole('link', { name: /Empty/i }), ).not.toBeInTheDocument(); diff --git a/src/components/ListView/ListView.test.tsx b/src/components/ListView/ListView.test.tsx index 8b3d781be..a65c26925 100644 --- a/src/components/ListView/ListView.test.tsx +++ b/src/components/ListView/ListView.test.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import ListView from './ListView'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; const data = [{ name: 'abc' }, { name: 'xyz' }]; describe('ListView', () => { diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx index 2ddb9683d..3d06c28df 100644 --- a/src/components/Modal/Modal.test.tsx +++ b/src/components/Modal/Modal.test.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Modal from './Modal'; describe('Modal', () => { diff --git a/src/components/Pagination/PageButtons.test.tsx b/src/components/Pagination/PageButtons.test.tsx index 36635441c..f69a66029 100644 --- a/src/components/Pagination/PageButtons.test.tsx +++ b/src/components/Pagination/PageButtons.test.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import PageButtons, { calculatePagePositions } from './PageButtons'; describe('calculatePageButtons', () => { diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx index 572495258..e7f368b69 100644 --- a/src/components/Pagination/Pagination.test.tsx +++ b/src/components/Pagination/Pagination.test.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Pagination from './Pagination'; describe('Custom renderItem prop', () => { @@ -14,7 +14,7 @@ describe('Custom renderItem prop', () => {
)); - renderWithProviders( + setup( { )); - renderWithProviders( + setup( { it('should not call onClick handler for current page', async () => { diff --git a/src/components/Signal/Signal.test.tsx b/src/components/Signal/Signal.test.tsx index b06445e30..4c411b981 100644 --- a/src/components/Signal/Signal.test.tsx +++ b/src/components/Signal/Signal.test.tsx @@ -1,34 +1,34 @@ import { screen } from '@testing-library/react'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import { Signal } from './index'; describe('Signal', () => { it('should not render if empty "kind" prop is provided', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - renderWithProviders(); + setup(); expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument(); }); it('should not render if "kind" prop is null', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - renderWithProviders(); + setup(); expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument(); }); it('should not render if "kind" prop is undefined', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - renderWithProviders(); + setup(); expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument(); }); it('should not render if unknown "kind" prop is provided', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - renderWithProviders(); + setup(); expect(screen.queryByTestId('ds-severity-icon')).not.toBeInTheDocument(); }); diff --git a/src/components/SingleDatePicker/SingleDatePicker.test.tsx b/src/components/SingleDatePicker/SingleDatePicker.test.tsx index b9b57c906..d0d428b3a 100644 --- a/src/components/SingleDatePicker/SingleDatePicker.test.tsx +++ b/src/components/SingleDatePicker/SingleDatePicker.test.tsx @@ -1,7 +1,7 @@ import { screen, waitFor } from '@testing-library/react'; import { vi } from 'vitest'; -import { setup } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import SingleDatePicker from './SingleDatePicker'; describe('SingleDatePicker', () => { diff --git a/src/components/Stepper/Stepper.test.tsx b/src/components/Stepper/Stepper.test.tsx index 6ede1aee9..3941bf055 100644 --- a/src/components/Stepper/Stepper.test.tsx +++ b/src/components/Stepper/Stepper.test.tsx @@ -1,13 +1,14 @@ -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { vi } from 'vitest'; import Step from './Step'; import Stepper from './Stepper'; import { StepperOrientations } from './Stepper.enums'; +import { setup } from '../../utils/tests/setup'; describe('Stepper', () => { it('should render only "Step" components as children', () => { - render( + setup( @@ -22,7 +23,7 @@ describe('Stepper', () => { }); it('should have clickable only done steps with callback', () => { - render( + setup( {/* done, without callback */} @@ -54,7 +55,7 @@ describe('Stepper', () => { }); it('should not render "StepContent" in "horizontal" orientation', () => { - render( + setup(
Step content
@@ -70,7 +71,7 @@ describe('Stepper', () => { // We are skipping this test because the container query is not reliable in tests it.skip('should not render Step text if container width is lower than the text breakpoint ', () => { - render( + setup(
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx index e664367be..b1c8c3bad 100644 --- a/src/components/Table/Table.test.tsx +++ b/src/components/Table/Table.test.tsx @@ -2,7 +2,7 @@ import { screen } from '@testing-library/react'; import { Column } from 'react-table'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Table from './Table'; type Data = { @@ -40,7 +40,7 @@ describe('DatatableLight/Table', () => { describe('given isDataLoading', () => { it('should display empty loading page when no data is present', () => { - renderWithProviders( + setup( data={[]} columns={columns} dataSize={0} isDataLoading />, ); @@ -52,7 +52,7 @@ describe('DatatableLight/Table', () => { }); it('should display loading overlay without Cancel button when data is present and canceling is disabled', () => { - renderWithProviders( + setup( data={data} columns={columns} diff --git a/src/components/Tabs/Tabs.test.tsx b/src/components/Tabs/Tabs.test.tsx index 3ede66aca..4a4f33b91 100644 --- a/src/components/Tabs/Tabs.test.tsx +++ b/src/components/Tabs/Tabs.test.tsx @@ -1,13 +1,13 @@ import { screen } from '@testing-library/react'; import { startsWith } from 'ramda'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; import Tab from './Tab'; import Tabs from './Tabs'; describe('Tabs', () => { it('should determine selected tab by strict equality by default', () => { - renderWithProviders( + setup( Overview section Overview @@ -26,7 +26,7 @@ describe('Tabs', () => { }); it('should determine selected tab by custom pattern matcher if provided', () => { - renderWithProviders( + setup( { const onCloseHandler = vi.fn(); @@ -11,11 +11,7 @@ describe('Toast', () => { describe('when close button is clicked', () => { it('should call onClose handler', () => { - render( - - Toast notification - , - ); + setup(Toast notification); const closeButton = screen.getByRole('button'); fireEvent.click(closeButton); diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx index 613aaa0ff..ade8c1676 100644 --- a/src/components/Tooltip/Tooltip.test.tsx +++ b/src/components/Tooltip/Tooltip.test.tsx @@ -1,7 +1,7 @@ import { fireEvent, screen } from '@testing-library/react'; import Tooltip from './Tooltip'; -import { renderWithProviders } from '../../utils/tests/renderWithProviders'; +import { setup } from '../../utils/tests/setup'; const popupText = 'Popup'; const childrenText = 'Tooltip'; @@ -9,9 +9,7 @@ const childrenText = 'Tooltip'; describe('Tooltip', () => { describe('when popup is defined', () => { it('should appear on pointermove event', async () => { - renderWithProviders( - {popupText}}>{childrenText}, - ); + setup({popupText}}>{childrenText}); const tooltipParent = screen.getByText(childrenText); fireEvent.pointerMove(tooltipParent); expect(tooltipParent).toBeInTheDocument(); @@ -20,7 +18,7 @@ describe('Tooltip', () => { }); describe('when popup is not defined', () => { it('should display children', async () => { - renderWithProviders({childrenText}); + setup({childrenText}); const tooltipParent = screen.getByText(childrenText); fireEvent.pointerMove(tooltipParent); diff --git a/src/components/TreeView/TreeView.test.tsx b/src/components/TreeView/TreeView.test.tsx index 7b196df4b..968762bbb 100644 --- a/src/components/TreeView/TreeView.test.tsx +++ b/src/components/TreeView/TreeView.test.tsx @@ -1,6 +1,7 @@ -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import TreeView from './TreeView'; +import { setup } from '../../utils/tests/setup'; const mockData = [ { id: '1', name: 'Item 1', subRows: [{ id: '1-1', name: 'SubItem 1-1' }] }, @@ -11,7 +12,7 @@ const renderPrimaryContent = (row) =>
{row.name}
; describe('TreeView', () => { test('should render correct number of rows', () => { - render( + setup( , ); const rows = screen.getAllByRole('listitem'); @@ -19,7 +20,7 @@ describe('TreeView', () => { }); test('should correctly collapse and expand rows', () => { - render( + setup( , ); @@ -43,7 +44,7 @@ describe('TreeView', () => { expect(screen.getByText('SubItem 1-1')).toBeInTheDocument(); }); test('should rerender items when data change', () => { - const { rerender } = render( + const { rerender } = setup( , ); diff --git a/src/components/TreeView/components/CollapsibleHandle.test.tsx b/src/components/TreeView/components/CollapsibleHandle.test.tsx index 41a752a58..c8ee68380 100644 --- a/src/components/TreeView/components/CollapsibleHandle.test.tsx +++ b/src/components/TreeView/components/CollapsibleHandle.test.tsx @@ -1,24 +1,25 @@ -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent, screen } from '@testing-library/react'; import { noop } from 'ramda-adjunct'; import { vi } from 'vitest'; import CollapsibleHandle from './CollapsibleHandle'; +import { setup } from '../../../utils/tests/setup'; describe('CollapsibleHandle', () => { test('should render placeholder when `onCollapse` is undefined', () => { - render(); + setup(); expect(screen.queryByRole('button')).not.toBeInTheDocument(); }); test('should render button when `onCollapse` is defined', () => { - render(); + setup(); expect(screen.getByRole('button')).toBeInTheDocument(); }); test('should call `onCollapse` when is clicked', () => { const onCollapseMock = vi.fn(); - render(); + setup(); fireEvent.click(screen.getByRole('button')); expect(onCollapseMock).toHaveBeenCalled(); diff --git a/src/components/TreeView/components/RowActions.test.tsx b/src/components/TreeView/components/RowActions.test.tsx index 198ed0078..05ae46c0a 100644 --- a/src/components/TreeView/components/RowActions.test.tsx +++ b/src/components/TreeView/components/RowActions.test.tsx @@ -2,7 +2,7 @@ import { screen, waitFor } from '@testing-library/react'; import { noop } from 'ramda-adjunct'; import { vi } from 'vitest'; -import { setup } from '../../../utils/tests/renderWithProviders'; +import { setup } from '../../../utils/tests/setup'; import RowActions from './RowActions'; import { RowAction } from '../TreeView.types'; diff --git a/src/components/TreeView/components/SortableTreeItem.test.tsx b/src/components/TreeView/components/SortableTreeItem.test.tsx index 2852bb5a0..89e7d6578 100644 --- a/src/components/TreeView/components/SortableTreeItem.test.tsx +++ b/src/components/TreeView/components/SortableTreeItem.test.tsx @@ -1,8 +1,9 @@ -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import { useSortable } from '@dnd-kit/sortable'; import { type Mock, vi } from 'vitest'; import SortableTreeItem from './SortableTreeItem'; +import { setup } from '../../../utils/tests/setup'; vi.mock('@dnd-kit/sortable', () => ({ useSortable: vi.fn(), @@ -23,7 +24,7 @@ describe('SortableTreeItem', () => { setDroppableNodeRef: vi.fn(), }); - render( + setup( { it('should toggle pane on click', async () => { - renderWithProviders( + setup( , @@ -41,7 +41,7 @@ describe('_internal/BaseDropdownMenu', () => { expect(dropdownItem).not.toBeInTheDocument(); }); it('should close pane on click outside of Dropdown', async () => { - renderWithProviders( + setup( , @@ -58,7 +58,7 @@ describe('_internal/BaseDropdownMenu', () => { ).not.toBeInTheDocument(); }); it('should create "button" tag when "onClick" prop is provided', async () => { - renderWithProviders( + setup( , @@ -77,7 +77,7 @@ describe('_internal/BaseDropdownMenu', () => { }); it('should create "a" tag when "href" prop is provided', async () => { const href = 'http://example.com'; - renderWithProviders( + setup( , @@ -102,7 +102,7 @@ describe('_internal/BaseDropdownMenu', () => { search: '?sort=name', hash: '#the-hash', }; - renderWithProviders( + setup( , @@ -127,7 +127,7 @@ describe('_internal/BaseDropdownMenu', () => { describe('given children is function', () => { it('should pass isPaneDisplayed as a argument', async () => { - renderWithProviders( + setup( {(isPaneDisplayed) => ( diff --git a/src/components/_internal/BaseTable/Footer/GoToPage.test.tsx b/src/components/_internal/BaseTable/Footer/GoToPage.test.tsx index a23f31aba..b0c0a1dc3 100644 --- a/src/components/_internal/BaseTable/Footer/GoToPage.test.tsx +++ b/src/components/_internal/BaseTable/Footer/GoToPage.test.tsx @@ -1,7 +1,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; -import { setup } from '../../../../utils/tests/renderWithProviders'; +import { setup } from '../../../../utils/tests/setup'; import GoToPage from './GoToPage'; const pageChangeMock = vi.fn(); diff --git a/src/components/_internal/BaseTable/renderers/CellRenderer.test.tsx b/src/components/_internal/BaseTable/renderers/CellRenderer.test.tsx index eca7b1b3b..3ac1b50fa 100644 --- a/src/components/_internal/BaseTable/renderers/CellRenderer.test.tsx +++ b/src/components/_internal/BaseTable/renderers/CellRenderer.test.tsx @@ -3,7 +3,7 @@ import { identity, F as stubFalse } from 'ramda'; import { Row } from 'react-table'; import { vi } from 'vitest'; -import { renderWithProviders } from '../../../../utils/tests/renderWithProviders'; +import { setup } from '../../../../utils/tests/setup'; import CellRenderer from './CellRenderer'; import { CellTypes } from './renderers.enums'; import { abbreviateNumber } from '../../../../utils'; @@ -18,7 +18,7 @@ describe('Datatable/CellRenderer', () => { describe('given cell type is multiValue', () => { it('should pass "cellOnClick" handler', async () => { const onClickMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellToComposer" handler', () => { const toComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellHrefComposer" handler', () => { const hrefComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellFormatter" handler', () => { const formatterMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellTooltipPopupComposer" handler', () => { const tooltipComposerMock = vi.fn(); - renderWithProviders( + setup( { describe('given cell type is link', () => { it('should pass "cellOnClick" handler', () => { const onClickMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellToComposer" handler', () => { const toComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellHrefComposer" handler', () => { const hrefComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellFormatter" handler', () => { const formatterMock = vi.fn(); - renderWithProviders( + setup( { describe('given cell type is discrete link', () => { it('should pass "cellOnClick" handler', () => { const onClickMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellToComposer" handler', () => { const toComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellHrefComposer" handler', () => { const hrefComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should pass "cellFormatter" handler', () => { const formatterMock = vi.fn(); - renderWithProviders( + setup( { describe('given cell type is not multivalue', () => { it('should open tooltip when hover on value', async () => { - renderWithProviders( + setup( { }); it('should call "tooltipComposer" with correct arguments for each visible value', () => { const tooltipComposerMock = vi.fn(); - renderWithProviders( + setup( { expect(tooltipComposerMock).toBeCalledTimes(1); }); it('should format value when "cellFormatter" is provided', () => { - renderWithProviders( + setup( { it('should call "hrefComposer" with correct arguments', () => { const hrefComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should call "onClick" with correct arguments on value click', () => { const onClickMock = vi.fn(); - renderWithProviders( + setup( , ); @@ -47,7 +47,7 @@ describe('Datatable/LinkRenderer', () => { console.error = vi.fn(); expect(() => - renderWithProviders( + setup( , ), ).toThrowError(); @@ -58,7 +58,7 @@ describe('Datatable/LinkRenderer', () => { }); it('should call "toComposer" with correct arguments', () => { const toComposerMock = vi.fn(); - renderWithProviders( + setup( { it('should open tooltip with rest of values when hover on rest values pill', async () => { const restValuesCount = values.length - numberOfVisibleItems; - renderWithProviders( + setup( { /* eslint-enable testing-library/no-node-access */ }); it('should open tooltip when hover on value pill', async () => { - renderWithProviders( + setup( { }); it('should call "tooltipComposer" with correct arguments for each visible value', () => { const tooltipComposerMock = vi.fn(); - renderWithProviders( + setup( { it('should call "hrefComposer" with correct arguments for each visible value', () => { const hrefComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should call "toComposer" with correct arguments for each visible value', () => { const toComposerMock = vi.fn(); - renderWithProviders( + setup( { }); it('should call "onClick" with correct arguments on value click', async () => { const onClickMock = vi.fn(); - renderWithProviders( + setup( { it('should call "valueFormatter" with correct arguments for each value', () => { const formatterMock = vi.fn(); const shortValues = ['a', 'b', 'c']; - renderWithProviders( + setup( { }); it('should format all values when "valueFormatter" is provided', async () => { const numericValues = [1000, 2000, 3000]; - renderWithProviders( + setup( { it('should calculate correct default value if not provided', () => { - render(); + setup(); expect(screen.getByRole('slider')).toHaveValue('30'); // Default value should be mean of min and max (10 + 50) / 2 }); it('should change value', async () => { - render(); + setup(); const input = screen.getByRole('slider'); fireEvent.change(input, { target: { value: 47 } }); expect(input).toHaveValue('47'); diff --git a/src/components/forms/SegmentedToggle/SegmentedToggle.test.tsx b/src/components/forms/SegmentedToggle/SegmentedToggle.test.tsx index 78eafd91d..10de84ebf 100644 --- a/src/components/forms/SegmentedToggle/SegmentedToggle.test.tsx +++ b/src/components/forms/SegmentedToggle/SegmentedToggle.test.tsx @@ -3,11 +3,11 @@ import { screen } from '@testing-library/react'; import { map } from 'ramda'; import { SegmentedToggle, SegmentedToggleItem } from './SegmentedToggle'; -import { renderWithProviders } from '../../../utils/tests/renderWithProviders'; +import { setup } from '../../../utils/tests/setup'; describe('SegmentedToggle', () => { it('should determine selected tab and input element by strict equality', () => { - renderWithProviders( + setup( @@ -49,7 +49,7 @@ describe('SegmentedToggle', () => { const Items = map(Item); - renderWithProviders( + setup( {Items(itemsArray)}, ); diff --git a/src/components/forms/TextArea/TextArea.test.tsx b/src/components/forms/TextArea/TextArea.test.tsx index 8f12c249c..9ba810b06 100644 --- a/src/components/forms/TextArea/TextArea.test.tsx +++ b/src/components/forms/TextArea/TextArea.test.tsx @@ -3,7 +3,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; import TextArea from './TextArea'; -import { setup } from '../../../utils/tests/renderWithProviders'; +import { setup } from '../../../utils/tests/setup'; const ControlledTextArea = ({ mockOnChange, ...props }) => { const [value, setValue] = useState(''); diff --git a/src/components/layout/Grid/Grid.test.tsx b/src/components/layout/Grid/Grid.test.tsx index cf6e7e517..b3e9d0689 100644 --- a/src/components/layout/Grid/Grid.test.tsx +++ b/src/components/layout/Grid/Grid.test.tsx @@ -2,7 +2,7 @@ import { screen } from '@testing-library/react'; import { vi } from 'vitest'; import Grid from './Grid'; -import { renderWithProviders } from '../../../utils/tests/renderWithProviders'; +import { setup } from '../../../utils/tests/setup'; describe('Grid', () => { it('should throw error when `cols` is set to 1', () => { @@ -10,7 +10,7 @@ describe('Grid', () => { .spyOn(console, 'error') .mockImplementation(() => vi.fn()); expect(() => - renderWithProviders( + setup( one , @@ -22,7 +22,7 @@ describe('Grid', () => { }); it('should apply the correct CSS properties based on the `wrapperOverflow` and `wrapperEl` properties', () => { - renderWithProviders( + setup(
Content
, diff --git a/src/utils/tests/renderWithProviders.tsx b/src/utils/tests/setup.tsx similarity index 94% rename from src/utils/tests/renderWithProviders.tsx rename to src/utils/tests/setup.tsx index dc321f30f..f5b5dcd56 100644 --- a/src/utils/tests/renderWithProviders.tsx +++ b/src/utils/tests/setup.tsx @@ -26,5 +26,3 @@ export const setup = ( options?.renderOptions, ), }); - -export const renderWithProviders = setup;