@kadconsulting/dry
Version:
KAD Reusable Component Library
121 lines • 4.16 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import ColumnControls from './ColumnControls';
import { FilterType } from '../DataTableTypes';
// Mock the useModalState hook
jest.mock('../../../hooks/useModalState', () => ({
__esModule: true,
default: () => [true, jest.fn(), jest.fn()],
}));
const mockColumns = [
{
Header: 'Name',
accessor: 'name',
filterType: FilterType.Text,
},
{
Header: 'Age',
accessor: 'age',
filterType: FilterType.Number,
},
{
Header: 'Date',
accessor: 'date',
filterType: FilterType.DateRange,
},
];
const mockColumnUniqueValues = {
name: new Set(['John', 'Jane', 'Bob']),
age: new Set([25, 30, 35]),
date: new Set(['2023-01-01', '2023-02-01', '2023-03-01']),
};
const defaultProps = {
columns: mockColumns,
filters: {},
columnUniqueValues: mockColumnUniqueValues,
onFilterChange: jest.fn(),
columnOrder: ['name', 'age', 'date'],
onColumnOrderChange: jest.fn(),
columnWidths: { name: 100, age: 50, date: 150 },
onColumnResize: jest.fn(),
onColumnVisibilityChange: jest.fn(),
onColumnPinningChange: jest.fn(),
};
describe('ColumnControls', () => {
it('renders the filter button', () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ASSERT
expect(screen.getByText('filter')).toBeInTheDocument();
});
it('opens the modal when filter button is clicked', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
// ASSERT
await waitFor(() => {
expect(screen.getByText('Reset all filters')).toBeInTheDocument();
});
});
it('renders dropdown for text filter', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
// ASSERT
await waitFor(() => {
expect(screen.getByText('Name Options')).toBeInTheDocument();
});
});
it('renders number input for number filter', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
// ASSERT
await waitFor(() => {
expect(screen.getByText('Age')).toBeInTheDocument();
expect(screen.getByRole('spinbutton')).toBeInTheDocument();
});
});
it('renders date inputs for date range filter', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
// ASSERT
await waitFor(() => {
expect(screen.getByText('Date')).toBeInTheDocument();
const dateInputs = screen
.getAllByRole('textbox')
.filter((input) => input.getAttribute('type') === 'date');
expect(dateInputs).toHaveLength(2);
});
});
it('calls onFilterChange when a filter is changed', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
await waitFor(() => {
fireEvent.change(screen.getByRole('spinbutton'), {
target: { value: '30' },
});
});
// ASSERT
expect(defaultProps.onFilterChange).toHaveBeenCalledWith({ age: 30 });
});
it('resets all filters when "Reset all filters" button is clicked', async () => {
// ARRANGE
render(_jsx(ColumnControls, { ...defaultProps }));
// ACT
fireEvent.click(screen.getByText('filter'));
await waitFor(() => {
fireEvent.click(screen.getByText('Reset all filters'));
});
// ASSERT
expect(defaultProps.onFilterChange).toHaveBeenCalledWith({});
});
});
//# sourceMappingURL=ColumnControls.test.js.map