@wix/design-system
Version:
@wix/design-system
555 lines • 33.6 kB
JavaScript
import React from 'react';
import { createRendererWithUniDriver, cleanup, act, } from '../utils/test-utils/react';
import { Table } from './Table';
import { tablePrivateUniDriverFactory } from './Table.private.uni.driver';
import { TableFloatingScrollBar } from './components/TableFloatingScrollBar';
describe('Table', () => {
const render = createRendererWithUniDriver(tablePrivateUniDriverFactory);
const ID_1 = 'aaa', ID_2 = 'bbb';
const defaultProps = {
id: 'id',
data: [
{ id: ID_1, a: 'value 1', b: 'value 2' },
{ id: ID_2, a: 'value 3', b: 'value 4' },
],
columns: [
{ title: 'Row Num', render: (row, rowNum) => rowNum },
{ title: 'A', render: row => row.a },
{ title: 'B', render: row => row.b },
],
rowClass: 'class-name',
showSelection: true,
children: React.createElement(Table.Content, null),
};
const noneSelected = () => [];
const firstSelected = () => [ID_1];
const secondSelected = () => [ID_2];
const allSelected = () => [ID_1, ID_2];
afterEach(() => cleanup());
it('should render the table', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps }));
expect(await driver.getRowsCount()).toBe(2);
expect(await driver.getCellTextValue(0, 1)).toBe('0');
expect(await driver.getCellTextValue(0, 2)).toBe(defaultProps.data[0].a);
expect(await driver.getCellTextValue(0, 3)).toBe(defaultProps.data[0].b);
expect(await driver.getCellTextValue(1, 1)).toBe('1');
expect(await driver.getCellTextValue(1, 2)).toBe(defaultProps.data[1].a);
expect(await driver.getCellTextValue(1, 3)).toBe(defaultProps.data[1].b);
});
it('should pass id prop to child', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps }));
expect(await driver.hasChildWithId(defaultProps.id)).toBe(true);
});
describe('showSelection prop', () => {
it('should display selection column', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: firstSelected() }));
const rowCheckboxDriver = await driver.getRowCheckboxDriver(1);
expect(await rowCheckboxDriver.exists()).toBe(true);
const bulkSelectionCheckboxDriver = await driver.getBulkSelectionCheckboxDriver();
expect(await bulkSelectionCheckboxDriver.exists()).toBe(true);
});
it('should not display selection column', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: false }));
const rowCheckboxDriver = await driver.getRowCheckboxDriver(1);
expect(await rowCheckboxDriver.exists()).toBe(false);
const bulkSelectionCheckboxDriver = await driver.getBulkSelectionCheckboxDriver();
expect(await bulkSelectionCheckboxDriver.exists()).toBe(false);
});
});
describe('unselectable prop', () => {
it('should not display selection checkbox when row.unselectable is true', async () => {
const { data, ...otherDefaultProps } = defaultProps;
const dataWithUnselectable = [
{ a: 'value 3', b: 'value 4', unselectable: true },
...data,
];
const { driver } = render(React.createElement(Table, { data: dataWithUnselectable, ...otherDefaultProps }));
const firstRowCheckboxDriver = await driver.getRowCheckboxDriver(0);
expect(await firstRowCheckboxDriver.exists()).toBe(false);
const secondRowCheckboxDriver = await driver.getRowCheckboxDriver(1);
expect(await secondRowCheckboxDriver.exists()).toBe(true);
});
});
describe('hideBulkSelectionCheckbox prop', () => {
it('should display selection checkbox in header by default', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: firstSelected() }));
const rowCheckboxDriver = await driver.getRowCheckboxDriver(1);
expect(await rowCheckboxDriver.exists()).toBe(true);
const bulkSelectionCheckboxDriver = await driver.getBulkSelectionCheckboxDriver();
expect(await bulkSelectionCheckboxDriver.exists()).toBe(true);
});
it('should not display selection checkbox in header when set to true', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, hideBulkSelectionCheckbox: true }));
const rowCheckboxDriver = await driver.getRowCheckboxDriver(1);
expect(await rowCheckboxDriver.exists()).toBe(true);
const bulkSelectionCheckboxDriver = await driver.getBulkSelectionCheckboxDriver();
expect(await bulkSelectionCheckboxDriver.exists()).toBe(false);
});
});
describe('selectedIds prop', () => {
it('should select rows according to selectedIds prop given string ids', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: firstSelected() }));
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(false);
});
it('should select rows according to selectedIds prop given numeric ids', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, data: [
{ id: 1111, a: 'value 1', b: 'value 2' },
{ id: 2222, a: 'value 3', b: 'value 4' },
], selectedIds: [1111] }));
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(false);
});
it('should select rows according to selectedIds prop given row index as ids', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, data: [
{ a: 'value 1', b: 'value 2' },
{ a: 'value 3', b: 'value 4' },
], selectedIds: [0] }));
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(false);
});
it('should update selection if selection prop has change', async () => {
const selectedIds = [];
const { driver, rerender } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
expect(await driver.isRowSelected(0)).toBe(false);
rerender(React.createElement(Table, { ...defaultProps, selectedIds: firstSelected() }));
expect(await driver.isRowSelected(0)).toBe(true);
});
});
describe('stickyColumns prop', () => {
it('should display sticky columns', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, stickyColumns: 2 }));
expect(await driver.getStickyColumnsCount()).toBe(2);
});
});
describe('setSelectedIds', () => {
it('should select rows when setSelectedIds is called', async () => {
let tableInst;
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: noneSelected(), ref: c => (tableInst = c) }));
expect(await driver.isRowSelected(0)).toBe(false);
expect(await driver.isRowSelected(1)).toBe(false);
await act(async () => {
tableInst.setSelectedIds(allSelected());
});
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(true);
});
});
describe('row selection', () => {
it('should select row when checkbox clicked given row not selected', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: firstSelected() }));
await driver.clickRowCheckbox(1);
expect(await driver.isRowSelected(1)).toBe(true);
});
it('should unselect row when checkbox clicked given row selected', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: allSelected() }));
await driver.clickRowCheckbox(1);
expect(await driver.isRowSelected(1)).toBe(false);
});
it(`should disable bulk selection when passed 'selectionDisabled' prop`, async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectionDisabled: true }));
expect(await driver.isBulkSelectionDisabled()).toBe(true);
});
it(`should disable bulk selection when no item is selectable`, async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectionDisabled: () => true }));
expect(await driver.isBulkSelectionDisabled()).toBe(true);
});
it(`should not disable bulk selection when some items are selectable`, async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectionDisabled: rowData => rowData.id === ID_1 }));
expect(await driver.isBulkSelectionDisabled()).toBe(false);
});
it(`should disable row selection when passed 'selectionDisabled' prop`, async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectionDisabled: true }));
expect(await driver.isRowSelectionDisabled(0)).toBe(true);
});
it(`should disable row selection when passed selectionDisabled true`, async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: [], selectionDisabled: true }));
await driver.clickRowCheckbox(0);
expect(await driver.isRowSelected(0)).toBe(false);
});
describe('checkbox column sticky', () => {
const dragAndDrop = {
DroppableTableContext: ({ children }) => children,
DraggableTableRow: ({ children }) => children,
createDragHandleColumn: () => ({
key: 'drag-handle',
dataHook: 'drag-handle',
title: '',
width: '14px',
render: () => React.createElement("span", null, "::"),
}),
};
it('should set checkbox column large width when it is the last sticky column', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, horizontalScroll: true, stickyColumns: 1 }));
expect(await driver.getStickyColumnsCount()).toBe(1);
expect(await driver.getHeaderCellStyle(0)).toEqual(expect.objectContaining({
width: '34px',
}));
});
it('should set checkbox column large width when it is the last sticky column with drag handle', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, horizontalScroll: true, stickyColumns: 2, dragAndDrop: dragAndDrop }));
expect(await driver.getStickyColumnsCount()).toBe(2);
expect(await driver.getHeaderCellStyle(1)).toEqual(expect.objectContaining({
width: '34px',
}));
});
it('should set checkbox column small width when it is not the last sticky column with drag handle', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, horizontalScroll: true, stickyColumns: 3, dragAndDrop: dragAndDrop }));
expect(await driver.getStickyColumnsCount()).toBe(3);
expect(await driver.getHeaderCellStyle(1)).toEqual(expect.objectContaining({
width: '12px',
}));
});
});
describe('when passed selectionDisabled prop as function', () => {
let tableProps;
const selectionDisabled = rowData => rowData.id === ID_1;
beforeEach(() => {
tableProps = {
...defaultProps,
selectionDisabled,
};
});
it(`should disable checkboxes that match 'selectionDisabled' prop`, async () => {
const { driver } = render(React.createElement(Table, { ...tableProps }));
expect(await driver.isRowSelectionDisabled(0)).toBe(true);
expect(await driver.isRowSelectionDisabled(1)).toBe(false);
});
it(`should disable row selection when it matches 'selectionDisabled' prop`, async () => {
const { driver } = render(React.createElement(Table, { ...tableProps }));
await driver.clickRowCheckbox(0);
expect(await driver.isRowSelected(0)).toBe(false);
});
it(`should not disable row selection when it does not match 'selectionDisabled' prop`, async () => {
const { driver } = render(React.createElement(Table, { ...tableProps }));
await driver.clickRowCheckbox(1);
expect(await driver.isRowSelected(1)).toBe(true);
});
});
describe('tooltip on checkbox', () => {
it('should not be displayed if checkboxTooltipContent is not passed', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps }));
expect(await driver.isSelectionTooltipEnabled(0)).toBe(false);
});
it('should be displayed if checkboxTooltipContent returns a truthy value', async () => {
const tooltipContent = 'some tooltip content';
const props = { ...defaultProps };
props.data[1].checkboxTooltipContent = tooltipContent;
const { driver } = render(React.createElement(Table, { ...props }));
expect(await driver.isSelectionTooltipEnabled(1)).toBe(true);
});
it('should display with content of returned value from checkboxTooltipContent', async () => {
const tooltipContent = 'some tooltip content';
const props = { ...defaultProps };
props.data[1].checkboxTooltipContent = tooltipContent;
const { driver } = render(React.createElement(Table, { ...props }));
expect(await driver.getSelectionTooltipContent(1)).toBe(tooltipContent);
});
});
});
describe('re-render', () => {
it('should re-render on data update', async () => {
const props = {
id: 'id',
columns: [
{ title: 'Row Num', render: (row, rowNum) => rowNum },
{ title: 'A', render: row => row.a },
{ title: 'B', render: row => row.b },
],
rowClass: 'class-name',
};
const data = [
{ a: 'value 1', b: 'value 2' },
{ a: 'value 3', b: 'value 4' },
];
const { driver, rerender } = render(React.createElement(Table, { ...props, data: data }));
const newValue = 'value 1 changed';
const COLUMN_A_INDEX = 1;
const ROW_INDEX = 0;
data[ROW_INDEX].a = newValue;
rerender(React.createElement(Table, { ...props, data: data }));
expect(await driver.getCellTextValue(ROW_INDEX, COLUMN_A_INDEX)).toBe(newValue);
});
it('should keep selection when re-rendered given selectedIds not provided (Uncontrolled)', async () => {
const { driver, rerender } = render(React.createElement(Table, { ...defaultProps }));
expect(await driver.isRowSelected(1)).toBe(false);
await driver.clickRowCheckbox(1);
expect(await driver.isRowSelected(1)).toBe(true);
rerender(React.createElement(Table, { ...defaultProps }));
expect(await driver.isRowSelected(1)).toBe(true);
});
});
describe('BulkSelection', () => {
describe('initial render', () => {
it('should display bulk-selection as checked when all rows are selected', async () => {
const selectedIds = allSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
expect((await driver.getBulkSelectionState()) === 'ALL').toBe(true);
expect((await driver.getBulkSelectionState()) === 'NONE').toBe(false);
expect((await driver.getBulkSelectionState()) === 'SOME').toBe(false);
});
it('should display bulk-selection as unchecked when no rows are selected', async () => {
const selectedIds = noneSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
expect((await driver.getBulkSelectionState()) === 'NONE').toBe(true);
expect((await driver.getBulkSelectionState()) === 'ALL').toBe(false);
});
it('should display bulk-selection as partial when some rows are selected', async () => {
const selectedIds = secondSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
expect((await driver.getBulkSelectionState()) === 'SOME').toBe(true);
});
it('should display bulk-selection as checked when data and selectedIds change', async () => {
const { driver, rerender } = render(React.createElement(Table, { ...defaultProps, data: [{ id: ID_1, a: 'value 1', b: 'value 2' }], selectedIds: [ID_1] }));
expect((await driver.getBulkSelectionState()) === 'ALL').toBe(true);
rerender(React.createElement(Table, { ...defaultProps, data: [
{ id: ID_1, a: 'value 1', b: 'value 2' },
{ id: ID_2, a: 'value 3', b: 'value 4' },
], selectedIds: [ID_1, ID_2] }));
expect((await driver.getBulkSelectionState()) === 'ALL').toBe(true);
});
});
describe('Update row selection', () => {
it('should select all rows when bulk-selection checkbox clicked given no checkboxes are checked', async () => {
const selectedIds = noneSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickBulkSelectionCheckbox();
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(true);
});
it('should select only selectable rows when bulk-selection checkbox clicked given no checkboxes are checked', async () => {
const { data, ...otherDefaultProps } = defaultProps;
const dataWithUnselectable = [
{ a: 'value 3', b: 'value 4', unselectable: true },
...data,
];
let tableSelectionContext;
const { driver } = render(React.createElement(Table, { data: dataWithUnselectable, selectedIds: noneSelected(), ...otherDefaultProps },
React.createElement(Table.ToolbarContainer, null, selectionContext => {
tableSelectionContext = selectionContext;
return null;
}),
React.createElement(Table.Content, null)));
await driver.clickBulkSelectionCheckbox();
expect(await driver.isRowSelected(1)).toBe(true);
expect(await driver.isRowSelected(2)).toBe(true);
expect(tableSelectionContext.selectedCount).toBe(data.length);
expect(tableSelectionContext.bulkSelectionState).toBe('ALL');
expect(tableSelectionContext.getSelectedIds()).toEqual(data.map(row => row.id));
});
it('should select all rows when bulk-selection checkbox clicked given some checkboxes are checked', async () => {
const selectedIds = secondSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickBulkSelectionCheckbox();
expect(await driver.isRowSelected(0)).toBe(true);
expect(await driver.isRowSelected(1)).toBe(true);
});
it('should unselect all rows when bulk-selection checkbox clicked given all checkboxes are checked', async () => {
const selectedIds = allSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickBulkSelectionCheckbox();
expect(await driver.isRowSelected(0)).toBe(false);
expect(await driver.isRowSelected(1)).toBe(false);
});
});
describe('onSelectionChanged & onSelectionStarted', () => {
it('should call onSelectionChanged when bulk-selection checkbox clicked given none selected', async () => {
const onSelectionChanged = vi.fn();
const onSelectionStarted = vi.fn();
const selectedIds = noneSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds, onSelectionChanged: onSelectionChanged, onSelectionStarted: onSelectionStarted }));
await driver.clickBulkSelectionCheckbox();
expect(onSelectionStarted).toHaveBeenCalled();
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'ALL',
origin: 'TableBulkSelectionCheckbox',
});
});
it('should call onSelectionChanged when bulk-selection checkbox clicked given all selected', async () => {
const onSelectionChanged = vi.fn();
const onSelectionStarted = vi.fn();
const selectedIds = allSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds, onSelectionChanged: onSelectionChanged, onSelectionStarted: onSelectionStarted }));
await driver.clickBulkSelectionCheckbox();
expect(onSelectionStarted).toHaveBeenCalled();
expect(onSelectionChanged).toHaveBeenCalledWith(noneSelected(), {
type: 'NONE',
origin: 'TableBulkSelectionCheckbox',
});
});
it('should call onSelectionChanged when row selected given no checkboxes are checked', async () => {
const onSelectionChanged = vi.fn();
const onSelectionStarted = vi.fn();
const selectedIds = firstSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds, onSelectionChanged: onSelectionChanged, onSelectionStarted: onSelectionStarted }));
await driver.clickRowCheckbox(1);
expect(onSelectionStarted).toHaveBeenCalled();
expect(onSelectionChanged.mock.calls).toHaveLength(1);
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'SINGLE_TOGGLE',
id: ID_2,
origin: 'Checkbox',
value: true,
});
});
});
describe('Update BulkSelection', () => {
it('should check bulk-selection checkbox when all rows change to check', async () => {
const selectedIds = secondSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickRowCheckbox(0);
expect((await driver.getBulkSelectionState()) === 'ALL').toBe(true);
});
it('should uncheck bulk-selection checkbox when all rows change to not-selected', async () => {
const selectedIds = secondSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickRowCheckbox(1);
expect((await driver.getBulkSelectionState()) === 'NONE').toBe(true);
});
it('should uncheck bulk-selection checkbox when deselectRowsByDefault', async () => {
const selectedIds = secondSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, deselectRowsByDefault: true, selectedIds: selectedIds }));
await driver.clickBulkSelectionCheckbox();
expect((await driver.getBulkSelectionState()) === 'NONE').toBe(true);
});
it('should show partial in bulk-selection checkbox when row unselected given all rows selected', async () => {
const selectedIds = allSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickRowCheckbox(1);
expect((await driver.getBulkSelectionState()) === 'SOME').toBe(true);
});
it('should show partial in bulk-selection checkbox when row selected given all rows not selected', async () => {
const selectedIds = noneSelected();
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: selectedIds }));
await driver.clickRowCheckbox(1);
expect((await driver.getBulkSelectionState()) === 'SOME').toBe(true);
});
});
});
describe('Compound components', () => {
it('should NOT have any compound components', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, selectedIds: noneSelected() }));
expect(!!(await driver.getTitlebar())).toBe(false);
});
it('should have Table.ToolbarContainer with SelectionContext', async () => {
let toggle;
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, selectedIds: allSelected() },
React.createElement(Table.ToolbarContainer, null, ({ selectedCount, toggleSelectionById }) => {
toggle = toggleSelectionById;
return React.createElement("div", null, `${selectedCount} Selected`);
}),
React.createElement(Table.Content, null)));
expect(await driver.getInnerHtml()).toMatch('2 Selected');
await act(async () => {
toggle(ID_1);
});
expect(await driver.getInnerHtml()).toMatch('1 Selected');
});
it('should enable passing origin to SelectionContext methods', async () => {
let selectionContext;
const onSelectionChanged = vi.fn();
const onSelectionStarted = vi.fn();
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, selectedIds: noneSelected(), onSelectionChanged: onSelectionChanged, onSelectionStarted: onSelectionStarted },
React.createElement(Table.ToolbarContainer, null, bulkSelectionContext => {
selectionContext = bulkSelectionContext;
return (React.createElement("div", null, `${bulkSelectionContext.selectedCount} Selected`));
}),
React.createElement(Table.Content, null)));
await act(async () => {
selectionContext.toggleSelectionById(ID_1, 'toggleSelectionById origin');
});
expect(onSelectionStarted).toHaveBeenCalled();
expect(onSelectionChanged).toHaveBeenCalledWith(firstSelected(), {
type: 'SINGLE_TOGGLE',
id: ID_1,
origin: 'toggleSelectionById origin',
value: true,
});
await act(async () => {
selectionContext.selectAll('selectAll origin');
});
expect(onSelectionStarted).toHaveBeenCalledTimes(2);
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'ALL',
origin: 'selectAll origin',
});
await act(async () => {
selectionContext.deselectAll('deselectAll origin');
});
expect(onSelectionStarted).toHaveBeenCalledTimes(3);
expect(onSelectionChanged).toHaveBeenCalledWith(noneSelected(), {
type: 'NONE',
origin: 'deselectAll origin',
});
await act(async () => {
selectionContext.toggleAll(false, 'toggleAll origin');
});
expect(onSelectionStarted).toHaveBeenCalledTimes(4);
expect(onSelectionChanged).toHaveBeenCalledWith(allSelected(), {
type: 'ALL',
origin: 'toggleAll origin',
});
});
it('should have Table.Titlebar', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, showSelection: true, selectedIds: allSelected() },
React.createElement("div", null,
React.createElement(Table.Titlebar, null)),
React.createElement("div", null,
React.createElement(Table.Content, { titleBarVisible: false }))));
expect(!!(await driver.getTitlebar())).toBe(true);
});
});
describe('Floating scroll bar', () => {
it('should display floating scroll bar when horizontal scroll is enabled', async () => {
const viewportRef = React.createRef();
const { driver } = render(React.createElement("div", { ref: viewportRef, style: { height: '500px', overflow: 'auto' } },
React.createElement(Table, { ...defaultProps, horizontalScroll: true, viewportRef: viewportRef },
React.createElement(TableFloatingScrollBar, null),
React.createElement(Table.Content, { titleBarVisible: false }))));
const floatingScrollBarDriver = driver.getFloatingScrollBarDriver();
expect(await floatingScrollBarDriver.exists()).toBe(true);
});
it('should not display floating scroll bar when horizontal scroll is disabled', async () => {
const viewportRef = React.createRef();
const { driver } = render(React.createElement("div", { ref: viewportRef, style: { height: '500px', overflow: 'auto' } },
React.createElement(Table, { ...defaultProps, viewportRef: viewportRef },
React.createElement(TableFloatingScrollBar, null),
React.createElement(Table.Content, { titleBarVisible: false }))));
const floatingScrollBarDriver = driver.getFloatingScrollBarDriver();
expect(await floatingScrollBarDriver.exists()).toBe(false);
});
});
describe('showRowNumbers prop', () => {
const rowNumberProps = {
...defaultProps,
showRowNumbers: true,
selectedIds: [],
};
it('should display row numbers when showRowNumbers is true', async () => {
const { driver } = render(React.createElement(Table, { ...rowNumberProps }));
expect(await driver.hasRowNumberCell(0)).toBe(true);
expect(await driver.getRowNumberText(0)).toBe('1');
expect(await driver.getRowNumberText(1)).toBe('2');
});
it('should not display row numbers when showRowNumbers is false', async () => {
const { driver } = render(React.createElement(Table, { ...defaultProps, selectedIds: [] }));
expect(await driver.hasRowNumberCell(0)).toBe(false);
});
it('should show checked checkbox and hide row number when row is selected', async () => {
const { driver } = render(React.createElement(Table, { ...rowNumberProps, selectedIds: firstSelected() }));
// Selected row: checkbox visible, row number text not rendered
const checkboxDriver = await driver.getRowCheckboxDriver(0);
expect(await checkboxDriver.isChecked()).toBe(true);
expect(await driver.hasRowNumberText(0)).toBe(false);
// Unselected row: row number text rendered
expect(await driver.getRowNumberText(1)).toBe('2');
});
it('should toggle selection when clicking', async () => {
const onSelectionChanged = jest.fn();
const { driver } = render(React.createElement(Table, { ...rowNumberProps, onSelectionChanged: onSelectionChanged }));
await driver.clickRowCheckbox(0);
expect(onSelectionChanged).toHaveBeenCalled();
});
});
});
//# sourceMappingURL=Table.spec.js.map