@wix/design-system
Version:
@wix/design-system
182 lines • 8.56 kB
JavaScript
import React from 'react';
import { act, render } from '../../utils/test-utils/react/index.ts';
import { BulkSelectionConsumer } from './BulkSelectionConsumer';
import { BulkSelection } from './BulkSelection';
describe('BulkSelection', () => {
let _selectionContext;
const renderBulkSelection = props => (React.createElement(BulkSelection, { ...props },
React.createElement(BulkSelectionConsumer, null, selectionContext => {
_selectionContext = selectionContext;
return React.createElement("div", null);
})));
it('setSelectionIds & isSelected', async () => {
let _setSelectedIds, _isSelected;
render(React.createElement(BulkSelection, { allIds: [1, 2, 3] },
React.createElement(BulkSelectionConsumer, null, ({ setSelectedIds, isSelected }) => {
_setSelectedIds = setSelectedIds;
_isSelected = isSelected;
return React.createElement("div", null);
})));
expect(_isSelected(1)).toBe(false);
expect(_isSelected(2)).toBe(false);
expect(_isSelected(3)).toBe(false);
await act(async () => {
_setSelectedIds([1, 2]);
});
expect(_isSelected(1)).toBe(true);
expect(_isSelected(2)).toBe(true);
expect(_isSelected(3)).toBe(false);
});
it('updates selectedIds when items are removed', async () => {
const { rerender } = render(renderBulkSelection({ allIds: [1, 2, 3] }));
await act(async () => {
_selectionContext.setSelectedIds([1, 2]);
});
expect(_selectionContext.getSelectedIds()).toEqual([1, 2]);
rerender(renderBulkSelection({ allIds: [2, 3] }));
expect(_selectionContext.getSelectedIds()).toEqual([2]);
});
describe('hasMoreInBulkSelection (infinite bulk selection mode)', () => {
it('should return correct totalCount when in infinite bulk selection', async () => {
render(renderBulkSelection({
hasMoreInBulkSelection: true,
allIds: [1, 2, 3],
totalCount: 100,
}));
expect(_selectionContext.selectedCount).toEqual(0);
await act(async () => {
_selectionContext.toggleAll();
});
expect(_selectionContext.selectedCount).toEqual(100);
await act(async () => {
_selectionContext.toggleSelectionById(1);
});
expect(_selectionContext.selectedCount).toEqual(99);
});
it('should have context with correct info when in infinite bulk selection', async () => {
render(renderBulkSelection({
hasMoreInBulkSelection: true,
allIds: [1, 2, 3],
totalCount: 100,
}));
expect(_selectionContext.getSelectedIds()).toEqual([]);
expect(_selectionContext.getNotSelectedIds()).toEqual(null);
expect(_selectionContext.infiniteBulkSelected).toEqual(false);
expect(_selectionContext.isSelected(1)).toEqual(false);
expect(_selectionContext.bulkSelectionState).toEqual('NONE');
await act(async () => {
_selectionContext.toggleAll();
});
expect(_selectionContext.getSelectedIds()).toEqual(null);
expect(_selectionContext.getNotSelectedIds()).toEqual([]);
expect(_selectionContext.infiniteBulkSelected).toEqual(true);
expect(_selectionContext.isSelected(1)).toEqual(true);
expect(_selectionContext.bulkSelectionState).toEqual('ALL');
await act(async () => {
_selectionContext.toggleSelectionById(1);
});
expect(_selectionContext.getSelectedIds()).toEqual(null);
expect(_selectionContext.getNotSelectedIds()).toEqual([1]);
expect(_selectionContext.infiniteBulkSelected).toEqual(true);
expect(_selectionContext.isSelected(1)).toEqual(false);
expect(_selectionContext.bulkSelectionState).toEqual('SOME');
});
it('should update selected ids when the list is fully loaded', async () => {
const { rerender } = render(renderBulkSelection({
hasMoreInBulkSelection: true,
allIds: [1, 2, 3],
totalCount: 100,
}));
await act(async () => {
_selectionContext.toggleAll();
});
await act(async () => {
_selectionContext.toggleSelectionById(1);
});
expect(_selectionContext.getSelectedIds()).toEqual(null);
expect(_selectionContext.getNotSelectedIds()).toEqual([1]);
expect(_selectionContext.infiniteBulkSelected).toEqual(true);
expect(_selectionContext.isSelected(1)).toEqual(false);
expect(_selectionContext.isSelected(2)).toEqual(true);
rerender(renderBulkSelection({
hasMoreInBulkSelection: false,
allIds: [1, 2, 3],
totalCount: 100,
}));
expect(_selectionContext.getSelectedIds()).toEqual([2, 3]);
expect(_selectionContext.getNotSelectedIds()).toEqual(null);
expect(_selectionContext.infiniteBulkSelected).toEqual(false);
expect(_selectionContext.isSelected(1)).toEqual(false);
expect(_selectionContext.isSelected(2)).toEqual(true);
});
it('should update bulkSelectionState after loading more when not in infinite bulk selection mode', async () => {
const { rerender } = render(renderBulkSelection({
hasMoreInBulkSelection: false,
allIds: [1, 2, 3],
totalCount: 100,
}));
await act(async () => {
_selectionContext.toggleAll();
});
expect(_selectionContext.bulkSelectionState).toEqual('ALL');
rerender(renderBulkSelection({ allIds: [1, 2, 3, 4, 5, 6] }));
expect(_selectionContext.bulkSelectionState).toEqual('SOME');
});
it('should not change bulkSelectionState after loading more when in infinite bulk selection mode', async () => {
const { rerender } = render(renderBulkSelection({
hasMoreInBulkSelection: true,
allIds: [1, 2, 3],
totalCount: 100,
}));
await act(async () => {
_selectionContext.toggleAll();
});
expect(_selectionContext.bulkSelectionState).toEqual('ALL');
rerender(renderBulkSelection({ allIds: [1, 2, 3, 4, 5, 6] }));
expect(_selectionContext.bulkSelectionState).toEqual('ALL');
});
});
describe('selectionDisabled', () => {
const randomRow = {};
it('should be false when prop is not set', () => {
render(renderBulkSelection({
allIds: [1, 2, 3],
}));
expect(_selectionContext.selectionDisabled).toBe(false);
});
it('should be false when there are items', () => {
render(renderBulkSelection({
allIds: [1, 2, 3],
selectionDisabled: () => false,
}));
expect(_selectionContext.selectionDisabled()).toBe(false);
});
it('should be true when disabled is set (boolean)', () => {
render(renderBulkSelection({
allIds: [1, 2, 3],
selectionDisabled: true,
}));
expect(_selectionContext.selectionDisabled).toBe(true);
});
it('should be true when disabled is set (function)', () => {
render(renderBulkSelection({
allIds: [1, 2, 3],
selectionDisabled: () => true,
}));
expect(_selectionContext.selectionDisabled(randomRow)).toBe(true);
});
it('should update to true when disabled is updated', () => {
const { rerender } = render(renderBulkSelection({
allIds: [1, 2, 3],
selectionDisabled: () => false,
}));
expect(_selectionContext.selectionDisabled(randomRow)).toBe(false);
rerender(renderBulkSelection({
allIds: [1, 2, 3],
selectionDisabled: () => true,
}));
expect(_selectionContext.selectionDisabled(randomRow)).toBe(true);
});
});
});
//# sourceMappingURL=BulkSelection.spec.js.map