{children || (
<>
diff --git a/src/DataTable/TableHeaderCell.jsx b/src/DataTable/TableHeaderCell.jsx
index d2426a573a..676ce865a8 100644
--- a/src/DataTable/TableHeaderCell.jsx
+++ b/src/DataTable/TableHeaderCell.jsx
@@ -6,14 +6,14 @@ import { ArrowDropDown, ArrowDropUp, ArrowDropUpDown } from '../../icons';
export function SortIndicator({ isSorted, isSortedDesc }) {
if (!isSorted) {
- return
;
+ return
;
}
if (isSortedDesc) {
- return
;
+ return
;
}
- return
;
+ return
;
}
SortIndicator.propTypes = {
diff --git a/src/DataTable/filters/tests/CheckboxFilter.test.jsx b/src/DataTable/filters/tests/CheckboxFilter.test.jsx
index 50b3d01c70..d593b7d706 100644
--- a/src/DataTable/filters/tests/CheckboxFilter.test.jsx
+++ b/src/DataTable/filters/tests/CheckboxFilter.test.jsx
@@ -1,8 +1,8 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import CheckboxFilter from '../CheckboxFilter';
-import Badge from '../../../Badge';
const setFilterMock = jest.fn();
const roan = { name: 'roan', number: 3, value: '10' };
@@ -25,49 +25,54 @@ describe('
', () => {
beforeEach(() => {
jest.resetAllMocks();
});
+
it('renders a list of checkboxes', () => {
- const wrapper = mount(
);
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input');
- expect(checkbox.length).toEqual(3);
+ render(
);
+ const checkboxes = screen.getAllByRole('checkbox');
+ expect(checkboxes.length).toEqual(3);
});
+
it('renders a title', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(props.column.Header);
+ render(
);
+ expect(screen.getByText(props.column.Header)).toBeInTheDocument();
});
- it('sets a filter - no initial filters', () => {
- const wrapper = mount(
);
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
- checkbox.simulate('change');
+
+ it('sets a filter - no initial filters', async () => {
+ render(
);
+ const checkbox = screen.getByLabelText(palomino.name);
+ await userEvent.click(checkbox);
expect(setFilterMock).toHaveBeenCalledWith([palomino.value]);
});
- it('sets a filter - initial filters', () => {
- const wrapper = mount(
);
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
- checkbox.simulate('change');
+
+ it('sets a filter - initial filters', async () => {
+ render(
);
+ const checkbox = screen.getByLabelText(palomino.name);
+ await userEvent.click(checkbox);
expect(setFilterMock).toHaveBeenCalledWith([roan.value, palomino.value]);
});
- it('removes a filter', () => {
- const wrapper = mount(
);
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
- checkbox.simulate('change');
+
+ it('removes a filter', async () => {
+ render(
);
+ const checkbox = screen.getByLabelText(palomino.name);
+ await userEvent.click(checkbox);
expect(setFilterMock).toHaveBeenCalledWith([]);
});
+
it('renders checkbox label with filter name', () => {
- const wrapper = mount(
);
- const label = wrapper.find('.pgn__form-checkbox').at(0);
- expect(label.text()).toContain(roan.name);
+ render(
);
+ const checkbox = screen.getByText(roan.name);
+ expect(checkbox).toBeInTheDocument();
});
+
it('renders checkbox label with number', () => {
- const wrapper = mount(
);
- const label = wrapper.find('.pgn__form-checkbox').at(0);
- const badge = label.find(Badge);
- expect(badge).toHaveLength(1);
- expect(badge.text()).toEqual(String(roan.number));
+ render(
);
+ const badge = screen.getByText(String(roan.number));
+ expect(badge).toBeInTheDocument();
});
- it('renders checkbox label with number', () => {
- const wrapper = mount(
);
- const label = wrapper.find('.pgn__form-checkbox').at(1);
- const badge = label.find(Badge);
- expect(badge).toHaveLength(0);
+
+ it('does not render badge if number is not present', () => {
+ render(
);
+ const badge = screen.queryByText(String(palomino.number));
+ expect(badge).toBeNull();
});
});
diff --git a/src/DataTable/filters/tests/DropdownFilter.test.jsx b/src/DataTable/filters/tests/DropdownFilter.test.jsx
index 64fd50347d..95acb02ebb 100644
--- a/src/DataTable/filters/tests/DropdownFilter.test.jsx
+++ b/src/DataTable/filters/tests/DropdownFilter.test.jsx
@@ -1,5 +1,6 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import DropdownFilter from '../DropdownFilter';
@@ -24,32 +25,45 @@ describe('
', () => {
beforeEach(() => {
jest.resetAllMocks();
});
+
it('renders a select button', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(props.column.Header);
+ render(
);
+ expect(screen.getByLabelText(props.column.Header)).toBeInTheDocument();
});
- it('sets a filter - no initial filters', () => {
- const wrapper = mount(
);
- wrapper.find('select').simulate('click');
- wrapper.find('option').at(2).simulate('change');
+
+ it('sets a filter - no initial filters', async () => {
+ render(
);
+ const select = screen.getByLabelText(props.column.Header);
+ await userEvent.click(select);
+ await userEvent.selectOptions(select, palomino.value);
expect(setFilterMock).toHaveBeenCalledWith(palomino.value);
});
- it('sets a filter - initial filters', () => {
- const wrapper = mount(
);
- wrapper.find('select').simulate('click');
- wrapper.find('option').at(2).simulate('change');
+
+ it('sets a filter - initial filters', async () => {
+ render(
+
,
+ );
+ const select = screen.getByLabelText(props.column.Header);
+ await userEvent.click(select);
+ await userEvent.selectOptions(select, palomino.value);
expect(setFilterMock).toHaveBeenCalledWith(palomino.value);
});
- it('removes filters when default option is clicked', () => {
- const wrapper = mount(
);
- wrapper.find('select').simulate('click');
- wrapper.find('option').at(0).simulate('change');
+
+ it('removes filters when default option is clicked', async () => {
+ render(
+
,
+ );
+ const select = screen.getByLabelText(props.column.Header);
+ await userEvent.click(select);
+ await userEvent.selectOptions(select, '');
expect(setFilterMock).toHaveBeenCalledWith(undefined);
});
- it('displays a number if a number is provided', () => {
- const wrapper = mount(
);
- wrapper.find('select').simulate('click');
- const option = wrapper.find('option').at(1);
- expect(option.text()).toEqual(`${roan.name} (${roan.number})`);
+
+ it('displays a number if a number is provided', async () => {
+ render(
);
+ const select = screen.getByLabelText(props.column.Header);
+ await userEvent.click(select);
+ const option = screen.getByText(`${roan.name} (${roan.number})`);
+ expect(option).toBeInTheDocument();
});
});
diff --git a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
index c8aa7e7b9c..a9ab8ff192 100644
--- a/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
+++ b/src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx
@@ -1,9 +1,8 @@
import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { render, screen, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import MultiSelectDropdownFilter from '../MultiSelectDropdownFilter';
-import Badge from '../../../Badge';
const setFilterMock = jest.fn();
const roan = { name: 'roan', number: 3, value: '10' };
@@ -27,71 +26,77 @@ describe('
', () => {
jest.resetAllMocks();
});
it('renders a list of checkboxes', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
+ render(
);
await act(async () => {
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input');
- expect(checkbox.length).toEqual(3);
+ await userEvent.click(screen.getByText(props.column.Header));
});
+ const checkboxes = screen.getAllByRole('checkbox');
+ expect(checkboxes.length).toEqual(3);
});
it('renders a title', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(props.column.Header);
+ render(
);
+ expect(screen.getByText(props.column.Header)).toBeInTheDocument();
});
it('sets a filter - no initial filters', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
+ render(
);
await act(async () => {
- checkbox.simulate('change');
+ await userEvent.click(screen.getByText(props.column.Header));
+ });
+ const checkbox = screen.getAllByRole('checkbox')[1];
+ await act(async () => {
+ await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
});
expect(setFilterMock).toHaveBeenCalledWith([palomino.value]);
});
it('sets a filter - initial filters', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
+ render(
);
+ await act(async () => {
+ await userEvent.click(screen.getByText(props.column.Header));
+ });
+ const checkbox = screen.getAllByRole('checkbox')[1];
await act(async () => {
- checkbox.simulate('change');
+ await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
});
expect(setFilterMock).toHaveBeenCalledWith([roan.value, palomino.value]);
});
it('removes a filter', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
- const checkbox = wrapper.find({ type: 'checkbox' }).find('input').at(1);
+ render(
);
await act(async () => {
- checkbox.simulate('change');
+ await userEvent.click(screen.getByText(props.column.Header));
+ });
+ const checkbox = screen.getAllByRole('checkbox')[1];
+ await act(async () => {
+ await userEvent.click(checkbox, undefined, { skipPointerEventsCheck: true });
});
expect(setFilterMock).toHaveBeenCalledWith([]);
});
it('renders checkbox label with filter name', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
+ render(
);
await act(async () => {
- const label = wrapper.find('.pgn__form-label').at(0);
- expect(label.text()).toContain(roan.name);
+ await userEvent.click(screen.getByText(props.column.Header));
});
+ const label = screen.getByText(roan.name);
+ expect(label).toBeInTheDocument();
});
- it('renders checkbox label with number', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
-
+ it('renders checkbox label with number - with badge', async () => {
+ render(
);
await act(async () => {
- const label = wrapper.find('.pgn__form-checkbox').at(0);
- const badge = label.find(Badge);
- expect(badge).toHaveLength(1);
- expect(badge.text()).toEqual(String(roan.number));
+ await userEvent.click(screen.getByText(props.column.Header));
});
+ const label = screen.getByText(roan.name);
+ expect(label).toBeInTheDocument();
+ const badge = screen.getByText(roan.number.toString());
+ expect(badge).toBeInTheDocument();
});
- it('renders checkbox label with number', async () => {
- const wrapper = mount(
);
- wrapper.find('button').simulate('click');
-
+ it('renders checkbox label with number - without badge', async () => {
+ render(
+
,
+ );
await act(async () => {
- const label = wrapper.find('.pgn__form-checkbox').at(1);
- const badge = label.find('.badge');
- expect(badge).toHaveLength(0);
+ await userEvent.click(screen.getByText(props.column.Header));
});
+ const label = screen.getByText(palomino.name);
+ expect(label).toBeInTheDocument();
+ expect(label.querySelector('.badge')).toBeNull();
});
});
diff --git a/src/DataTable/filters/tests/TextFilter.test.jsx b/src/DataTable/filters/tests/TextFilter.test.jsx
index 24a19889b9..0d6aef13ab 100644
--- a/src/DataTable/filters/tests/TextFilter.test.jsx
+++ b/src/DataTable/filters/tests/TextFilter.test.jsx
@@ -1,9 +1,10 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+
import TextFilter from '../TextFilter';
describe('
', () => {
- it('Header as function', () => {
+ it('renders Header as function', () => {
const mockKey = () => 'key';
const props = {
column: {
@@ -13,11 +14,11 @@ describe('
', () => {
getHeaderProps: jest.fn().mockImplementation(() => ({ key: mockKey })),
},
};
- const wrapper = mount(
);
- expect(wrapper.text()).toContain('Search test');
+ const { getByText } = render(
);
+ expect(getByText('Search test')).toBeInTheDocument();
});
- it('Header as string', () => {
+ it('renders Header as string', () => {
const mockKey = () => 'key';
const props = {
column: {
@@ -27,11 +28,11 @@ describe('
', () => {
getHeaderProps: jest.fn().mockImplementation(() => ({ key: mockKey })),
},
};
- const wrapper = mount(
);
- expect(wrapper.text()).toContain('Search test');
+ const { getByText } = render(
);
+ expect(getByText('Search test')).toBeInTheDocument();
});
- it('Header as component', () => {
+ it('renders Header as component', () => {
const mockKey = () => 'key';
const props = {
column: {
@@ -41,7 +42,7 @@ describe('
', () => {
getHeaderProps: jest.fn().mockImplementation(() => ({ key: mockKey })),
},
};
- const wrapper = mount(
);
- expect(wrapper.text()).toContain('test_component');
+ const { getByText } = render(
);
+ expect(getByText('test_component')).toBeInTheDocument();
});
});
diff --git a/src/DataTable/selection/BaseSelectionStatus.jsx b/src/DataTable/selection/BaseSelectionStatus.jsx
index e4d9d551ea..80039b245c 100644
--- a/src/DataTable/selection/BaseSelectionStatus.jsx
+++ b/src/DataTable/selection/BaseSelectionStatus.jsx
@@ -57,11 +57,13 @@ function BaseSelectionStatus({
const intlSelectedText = selectedText || defaultSelectedText;
return (
-
-
{isAllRowsSelected ? intlAllSelectedText : intlSelectedText}
+
+
+ {isAllRowsSelected ? intlAllSelectedText : intlSelectedText}
+
{!isAllRowsSelected && !hasMaxSelectedRows && (
);
diff --git a/src/DataTable/selection/ControlledSelectHeader.jsx b/src/DataTable/selection/ControlledSelectHeader.jsx
index d858a5c4bd..e59e6e2a0f 100644
--- a/src/DataTable/selection/ControlledSelectHeader.jsx
+++ b/src/DataTable/selection/ControlledSelectHeader.jsx
@@ -9,7 +9,7 @@ import {
setSelectedRowsAction,
} from './data/actions';
-function ControlledSelectHeader({ rows }) {
+function ControlledSelectHeader({ rows, ...rest }) {
const {
itemCount,
controlledTableSelections: [, dispatch],
@@ -44,6 +44,7 @@ function ControlledSelectHeader({ rows }) {
);
diff --git a/src/DataTable/selection/ControlledSelectionStatus.jsx b/src/DataTable/selection/ControlledSelectionStatus.jsx
index 3078dbf52e..f7a49e6dc4 100644
--- a/src/DataTable/selection/ControlledSelectionStatus.jsx
+++ b/src/DataTable/selection/ControlledSelectionStatus.jsx
@@ -14,7 +14,7 @@ import {
getRowIds,
} from './data/helpers';
-function ControlledSelectionStatus({ className, clearSelectionText }) {
+function ControlledSelectionStatus({ className, clearSelectionText, ...rest }) {
const {
itemCount,
page,
@@ -44,6 +44,7 @@ function ControlledSelectionStatus({ className, clearSelectionText }) {
clearSelectionText,
onSelectAll: () => dispatch(setSelectAllRowsAllPagesAction()),
onClear: () => dispatch(clearSelectionAction()),
+ ...rest,
};
return
;
}
diff --git a/src/DataTable/selection/tests/ControlledSelect.test.jsx b/src/DataTable/selection/tests/ControlledSelect.test.jsx
index 463628d072..2daded3660 100644
--- a/src/DataTable/selection/tests/ControlledSelect.test.jsx
+++ b/src/DataTable/selection/tests/ControlledSelect.test.jsx
@@ -1,16 +1,16 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import ControlledSelect from '../ControlledSelect';
import DataTable from '../..';
import * as selectActions from '../data/actions';
-import { toggleCheckbox } from './utils';
// eslint-disable-next-line react/prop-types
-function ControlledSelectWrapper({ tableProps, selectProps }) {
+function ControlledSelectWrapper({ tableProps, selectProps, ...rest }) {
return (
-
+
);
}
@@ -30,29 +30,33 @@ describe('
', () => {
beforeEach(() => {
jest.resetAllMocks();
});
- it('correctly selects a row', () => {
+
+ it('correctly selects a row', async () => {
const isChecked = true;
mockGetToggleRowSelectedProps.mockReturnValue({ checked: isChecked });
const spy = jest.spyOn(selectActions, 'addSelectedRowAction');
const row = { ...baseRow, isSelected: false };
const selectProps = { row };
- const wrapper = mount(
-
,
- );
- toggleCheckbox({ isChecked, wrapper });
+ render(
);
+
+ const checkbox = screen.getByRole('checkbox');
+ await userEvent.click(checkbox);
+
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith(row, tableProps.itemCount);
});
- it('correctly unselects a row', () => {
+
+ it('correctly unselects a row', async () => {
const isChecked = false;
mockGetToggleRowSelectedProps.mockReturnValue({ checked: isChecked });
const spy = jest.spyOn(selectActions, 'deleteSelectedRowAction');
const row = { ...baseRow, isSelected: true };
const selectProps = { row };
- const wrapper = mount(
-
,
- );
- toggleCheckbox({ isChecked, wrapper });
+ render(
);
+
+ const checkbox = screen.getByRole('checkbox');
+ await userEvent.click(checkbox);
+
expect(spy).toHaveBeenCalledWith(row.id);
});
});
diff --git a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
index f2bb6b6750..732c3cdb43 100644
--- a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
+++ b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
@@ -1,19 +1,18 @@
import React, { useContext } from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import ControlledSelectHeader from '../ControlledSelectHeader';
import DataTable from '../..';
-import { CheckboxControl } from '../../../Form';
import DataTableContext from '../../DataTableContext';
import * as selectActions from '../data/actions';
-import { toggleCheckbox } from './utils';
import { getRowIds } from '../data/helpers';
// eslint-disable-next-line react/prop-types
-function ControlledSelectHeaderWrapper({ tableProps, selectProps }) {
+function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
return (
-
+
);
@@ -42,6 +41,7 @@ describe('
', () => {
beforeEach(() => {
jest.resetAllMocks();
});
+
it('correctly selects all page rows', () => {
const isChecked = true;
mockToggleAllPageRowsSelectedProps.mockReturnValue({
@@ -50,13 +50,15 @@ describe('
', () => {
});
const spy = jest.spyOn(selectActions, 'setSelectedRowsAction');
const selectProps = { rows };
- const wrapper = mount(
-
,
- );
- toggleCheckbox({ isChecked, wrapper });
+ render(
);
+
+ const checkbox = screen.getByRole('checkbox');
+ userEvent.click(checkbox);
+
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenCalledWith(rows, tableProps.itemCount);
});
+
it('correctly unselects all page rows', () => {
const spy = jest.spyOn(selectActions, 'clearPageSelectionAction');
mockToggleAllPageRowsSelectedProps.mockReturnValue({
@@ -73,14 +75,16 @@ describe('
', () => {
state: { selectedRowIds },
isAllPageRowsSelected: true,
};
- const wrapper = mount(
-
,
- );
- toggleCheckbox({ isChecked: false, wrapper });
+ render(
);
+
+ const checkbox = screen.getByRole('checkbox');
+ userEvent.click(checkbox);
+
expect(spy).toHaveBeenCalledTimes(1);
const rowIds = getRowIds(rows).map(id => id.toString());
expect(spy).toHaveBeenCalledWith(rowIds);
});
+
it('correctly shows indeterminate checkbox when some page rows (not all) are selected', () => {
const isIndeterminate = true;
mockToggleAllPageRowsSelectedProps.mockReturnValue({
@@ -95,11 +99,9 @@ describe('
', () => {
},
},
};
- const wrapper = mount(
-
,
- );
+ render(
);
- const actualIsIndeterminate = wrapper.find(CheckboxControl).prop('isIndeterminate');
- expect(actualIsIndeterminate).toEqual(isIndeterminate);
+ const checkbox = screen.getByRole('checkbox');
+ expect(checkbox.indeterminate).toEqual(isIndeterminate);
});
});
diff --git a/src/DataTable/selection/tests/ControlledSelectionStatus.test.jsx b/src/DataTable/selection/tests/ControlledSelectionStatus.test.jsx
index cd2bdf2022..e7850350ef 100644
--- a/src/DataTable/selection/tests/ControlledSelectionStatus.test.jsx
+++ b/src/DataTable/selection/tests/ControlledSelectionStatus.test.jsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
import ControlledSelectionStatus from '../ControlledSelectionStatus';
import { clearSelectionAction, setSelectAllRowsAllPagesAction, setSelectedRowsAction } from '../data/actions';
@@ -24,11 +25,11 @@ const instance = {
};
// eslint-disable-next-line react/prop-types
-function ControlledSelectionStatusWrapper({ value, props = {} }) {
+function ControlledSelectionStatusWrapper({ value, props = {}, ...rest }) {
return (
-
+
);
@@ -37,13 +38,21 @@ function ControlledSelectionStatusWrapper({ value, props = {} }) {
describe('
', () => {
it('accepts a class name', () => {
const customClassName = 'classy';
- const wrapper = mount(
);
- expect(wrapper.find(ControlledSelectionStatus).props().className).toEqual(customClassName);
+ render(
+
,
+ );
+ const component = screen.getByTestId('selection-status-component');
+ expect(component).toHaveClass(customClassName);
});
+
describe('entire table selected', () => {
it('shows that entire table is selected', () => {
const selectedRows = Array(instance.itemCount).map((item, index) => ({ id: index + 1 }));
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- expect(wrapper.text()).toContain(`All ${instance.itemCount}`);
+ expect(screen.getByText(`All ${instance.itemCount} selected`)).toBeInTheDocument();
});
+
it('does not show select all button if entire table is selected', () => {
const selectedRows = Array(instance.itemCount).map((item, index) => ({ id: index + 1 }));
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- expect(button.length).toEqual(0);
+ const selectAllButton = screen.queryByTestId(SELECT_ALL_TEST_ID);
+ expect(selectAllButton).not.toBeInTheDocument();
});
+
it('selects any unselected page rows', () => {
const selectedRows = Array(instance.itemCount).map((item, index) => ({ id: index + 1 }));
const dispatchSpy = jest.fn();
- mount(
+ render(
', () => {
expect(dispatchSpy).toHaveBeenCalledWith(action);
});
});
+
describe('individual rows selected', () => {
it('shows the number of rows selected', () => {
- const wrapper = mount(
);
+ render(
);
const [selections] = instance.controlledTableSelections;
- expect(wrapper.text()).toContain(selections.selectedRows.length.toString());
+ expect(screen.getByText(`${selections.selectedRows.length.toString()} selected`)).toBeInTheDocument();
});
+
it('renders default selection text', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(CLEAR_SELECTION_TEXT);
+ render(
);
+ expect(screen.getByText(CLEAR_SELECTION_TEXT)).toBeInTheDocument();
});
+
it('can accept clear selection text as a prop', () => {
const customText = 'CLEAR ME';
- const wrapper = mount((
-
- ));
- expect(wrapper.text()).toContain(customText);
- expect(wrapper.text()).not.toContain(CLEAR_SELECTION_TEXT);
+ render(
+
,
+ );
+ expect(screen.getByText(customText)).toBeInTheDocument();
+ expect(screen.queryByText(CLEAR_SELECTION_TEXT)).not.toBeInTheDocument();
});
- it('toggles select all on select all button click', () => {
+
+ it('toggles select all on select all button click', async () => {
const dispatchSpy = jest.fn();
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- button.simulate('click');
+ const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+ await userEvent.click(selectAllButton);
expect(dispatchSpy).toHaveBeenCalledTimes(1);
const action = setSelectAllRowsAllPagesAction();
expect(dispatchSpy).toHaveBeenCalledWith(action);
});
- it('clears selection on clear selection button click', () => {
+
+ it('clears selection on clear selection button click', async () => {
const dispatchSpy = jest.fn();
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- const button = wrapper.find(`button.${CLEAR_SELECTION_TEST_ID}`);
- button.simulate('click');
+ const clearSelectionButton = screen.getByTestId(CLEAR_SELECTION_TEST_ID);
+ await userEvent.click(clearSelectionButton);
expect(dispatchSpy).toHaveBeenCalledTimes(1);
const action = clearSelectionAction();
expect(dispatchSpy).toHaveBeenCalledWith(action);
});
});
+
describe('no rows selected', () => {
it('does not render the clear selection button', () => {
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- expect(wrapper.find(CLEAR_SELECTION_TEST_ID).length).toEqual(0);
+ const clearSelectionButton = screen.queryByTestId(CLEAR_SELECTION_TEST_ID);
+ expect(clearSelectionButton).not.toBeInTheDocument();
});
});
});
diff --git a/src/DataTable/selection/tests/SelectionStatus.test.jsx b/src/DataTable/selection/tests/SelectionStatus.test.jsx
index f1b1a6e3ec..feb56ecf12 100644
--- a/src/DataTable/selection/tests/SelectionStatus.test.jsx
+++ b/src/DataTable/selection/tests/SelectionStatus.test.jsx
@@ -1,6 +1,7 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
import { IntlProvider } from 'react-intl';
+import userEvent from '@testing-library/user-event';
import SelectionStatus from '../SelectionStatus';
import DataTableContext from '../../DataTableContext';
@@ -11,7 +12,6 @@ import {
} from '../data/constants';
const instance = {
- // represents how `react-table` passes the row data for the current page
page: [1, 2, 3, 4],
toggleAllRowsSelected: () => {},
itemCount: 101,
@@ -39,9 +39,10 @@ function SelectionStatusWrapper({ value, props = {} }) {
describe('
', () => {
it('Shows the number of rows selected', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(instance.page.length.toString());
+ render(
);
+ expect(screen.getByTestId('selection-status')).toHaveTextContent(instance.page.length.toString());
});
+
it('Shows that all rows are selected', () => {
const selectedRowIds = {};
[...new Array(101)].forEach((_, index) => {
@@ -54,33 +55,39 @@ describe('
', () => {
selectedRowIds,
},
};
- const wrapper = mount(
+ render(
,
);
- expect(wrapper.text()).toContain('All 101');
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- expect(button.length).toEqual(0);
+ expect(screen.getByText('All 101 selected')).toBeInTheDocument();
+ const selectAllButton = screen.queryByTestId(SELECT_ALL_TEST_ID);
+ expect(selectAllButton).not.toBeInTheDocument();
});
- it('toggles select all on select all button click', () => {
+
+ it('toggles select all on select all button click', async () => {
const toggleAllRowsSpy = jest.fn();
- const wrapper = mount(
-
,
+ render(
+
,
);
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- button.simulate('click');
+ const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+ await userEvent.click(selectAllButton);
expect(toggleAllRowsSpy).toHaveBeenCalledTimes(1);
expect(toggleAllRowsSpy).toHaveBeenCalledWith(true);
});
+
it('updates select all button text after applying filters', () => {
- const wrapper = mount(
);
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- expect(button.text()).toContain('Select all 27');
+ render(
);
+ const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+ expect(selectAllButton).toHaveTextContent('Select all 27');
});
+
it('updates select all text if filters value is empty', () => {
- const wrapper = mount(
);
- const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
- expect(button.text()).toContain('Select all 101');
+ render(
);
+ const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+ expect(selectAllButton).toHaveTextContent('Select all 101');
});
+
it('does not render the clear selection button if there are no selected rows', () => {
const value = {
...instance,
@@ -90,34 +97,39 @@ describe('
', () => {
selectedRowIds: {},
},
};
- const wrapper = mount(
+ render(
,
);
- expect(wrapper.find(CLEAR_SELECTION_TEST_ID).length).toEqual(0);
+ expect(screen.queryByTestId(CLEAR_SELECTION_TEST_ID)).not.toBeInTheDocument();
});
- it('toggles select all on clear all button click', () => {
+
+ it('toggles select all on clear all button click', async () => {
const toggleAllRowsSpy = jest.fn();
- const wrapper = mount(
+ render(
,
);
- const button = wrapper.find(`button.${CLEAR_SELECTION_TEST_ID}`);
- button.simulate('click');
+ const clearSelectionButton = screen.getByTestId(CLEAR_SELECTION_TEST_ID);
+ await userEvent.click(clearSelectionButton);
expect(toggleAllRowsSpy).toHaveBeenCalledTimes(1);
expect(toggleAllRowsSpy).toHaveBeenCalledWith(false);
});
+
it('renders default selection text', () => {
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(CLEAR_SELECTION_TEXT);
+ render(
);
+ expect(screen.getByText(CLEAR_SELECTION_TEXT)).toBeInTheDocument();
});
+
it('can accept clear selection text as a prop', () => {
const customText = 'CLEAR ME';
- const wrapper = mount(
);
- expect(wrapper.text()).toContain(customText);
- expect(wrapper.text()).not.toContain(CLEAR_SELECTION_TEXT);
+ render(
);
+ expect(screen.getByText(customText)).toBeInTheDocument();
+ expect(screen.queryByText(CLEAR_SELECTION_TEXT)).not.toBeInTheDocument();
});
+
it('accepts a class name', () => {
const customClassName = 'classy';
- const wrapper = mount(
);
- expect(wrapper.find(SelectionStatus).props().className).toEqual(customClassName);
+ render(
);
+ const component = screen.getByTestId('selection-status-component');
+ expect(component).toHaveClass(customClassName);
});
});
diff --git a/src/DataTable/tests/ActionDisplay.test.jsx b/src/DataTable/tests/ActionDisplay.test.jsx
index e89489daac..68645a3c0d 100644
--- a/src/DataTable/tests/ActionDisplay.test.jsx
+++ b/src/DataTable/tests/ActionDisplay.test.jsx
@@ -1,11 +1,8 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { Button } from '../..';
import ActionDisplay from '../ActionDisplay';
import DataTableContext from '../DataTableContext';
-import BulkActions from '../BulkActions';
-import TableActions from '../TableActions';
const instance = {
selectedFlatRows: null,
@@ -39,52 +36,57 @@ function SecondAction({ as: Component }) {
}
// eslint-disable-next-line react/prop-types
-function ActionDisplayWrapper({ value = instance, props = {} }) {
- return
;
+function ActionDisplayWrapper({ value = instance, props = {}, ...rest }) {
+ return
;
}
describe('
', () => {
it('renders null if there are no actions', () => {
- const wrapper = mount(
);
- expect(wrapper.find(ActionDisplay).text()).toEqual('');
+ render(
);
+ expect(screen.queryByTestId('action-display')).not.toBeInTheDocument();
});
+
it('renders null if there are no rows', () => {
- const wrapper = mount(
+ render(
], bulkActions: [
],
}}
/>,
);
- const button = wrapper.find(Button);
- expect(button.length).toEqual(0);
+ expect(screen.queryByTestId('action-display')).not.toBeInTheDocument();
});
+
it('displays bulk actions when rows are selected', () => {
- const wrapper = mount(
+ render(
,
], selectedFlatRows: [{}, {}] }}
+ data-testid=""
/>,
);
- expect(wrapper.find(BulkActions)).toHaveLength(1);
+ expect(screen.queryByTestId('bulk-actions')).toBeInTheDocument();
});
+
it('does not display bulk actions when no rows are selected (no table actions)', () => {
- const wrapper = mount(
+ render(
,
], selectedFlatRows: [] }}
/>,
);
- expect(wrapper.find(ActionDisplay).text()).toEqual('');
+ expect(screen.queryByTestId('action-display')).not.toBeInTheDocument();
});
+
it('displays tableActions', () => {
- const wrapper = mount(
+ render(
,
], selectedFlatRows: [] }}
/>,
);
- expect(wrapper.find(TableActions)).toHaveLength(1);
+ expect(screen.queryByTestId('table-actions')).toBeInTheDocument();
});
+
it('displays table actions when both bulk actions and table actions are present - no selected rows', () => {
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- expect(wrapper.find(TableActions)).toHaveLength(1);
+ expect(screen.queryByTestId('table-actions')).toBeInTheDocument();
});
+
it('displays table actions with rows selected and no bulk actions', () => {
// This is an edge case
- const wrapper = mount(
+ render(
,
], selectedFlatRows: [{}, {}] }}
/>,
);
- expect(wrapper.find(TableActions)).toHaveLength(1);
+ expect(screen.queryByTestId('table-actions')).toBeInTheDocument();
});
+
it('displays bulk actions instead of table actions when rows are selected', () => {
- const wrapper = mount(
+ render(
', () => {
}}
/>,
);
- expect(wrapper.find(BulkActions)).toHaveLength(1);
+ expect(screen.queryByTestId('bulk-actions')).toBeInTheDocument();
});
});
diff --git a/src/DataTable/tests/BulkActions.test.jsx b/src/DataTable/tests/BulkActions.test.jsx
index f6d2cf504b..bb207b22b8 100644
--- a/src/DataTable/tests/BulkActions.test.jsx
+++ b/src/DataTable/tests/BulkActions.test.jsx
@@ -1,37 +1,49 @@
import React from 'react';
-import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
import classNames from 'classnames';
import BulkActions from '../BulkActions';
import {
ACTION_OVERFLOW_BUTTON_TEXT, SMALL_SCREEN_ACTION_OVERFLOW_BUTTON_TEXT,
} from '../CollapsibleButtonGroup';
-import {
- useWindowSize,
- Button,
- IconButton,
- ModalPopup,
-} from '../..';
+import { useWindowSize, Button } from '../..';
import DataTableContext from '../DataTableContext';
import { waitForComponentToPaint } from './utils';
jest.mock('../../hooks/useWindowSize');
useWindowSize.mockReturnValue({ width: 800 });
-// eslint-disable-next-line react/prop-types
-function FirstAction({ as: Component, onClick, className }) {
+const FIRST_ACTION = 'First Action';
+const SECOND_ACTION = 'Second Action';
+
+function FirstAction({
+ // eslint-disable-next-line react/prop-types
+ as: Component, onClick, className, ...rest
+}) {
return (
-
- First Action
+
+ {FIRST_ACTION}
);
}
// eslint-disable-next-line react/prop-types
-function SecondAction({ onClick, className }) {
+function SecondAction({ onClick, className, ...rest }) {
return (
-