diff --git a/packages/module/src/BulkSelect/BulkSelect.test.tsx b/packages/module/src/BulkSelect/BulkSelect.test.tsx index b7963fa8..9e2d65e2 100644 --- a/packages/module/src/BulkSelect/BulkSelect.test.tsx +++ b/packages/module/src/BulkSelect/BulkSelect.test.tsx @@ -1,19 +1,22 @@ import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import BulkSelect from './BulkSelect'; +import BulkSelect, { BulkSelectSource, BulkSelectValue } from './BulkSelect'; describe('BulkSelect component', () => { test('should render', () => { - expect(render( - null} - />)).toMatchSnapshot(); + expect( + render( + null} + /> + ) + ).toMatchSnapshot(); }); test('should render with dropdownListProps', async () => { @@ -121,6 +124,7 @@ describe('BulkSelect component', () => { test('should enable Select none when at least one row is selected', async () => { const user = userEvent.setup(); + render( { await user.click(screen.getByLabelText('Bulk select toggle')); expect(screen.getByRole('menuitem', { name: 'Select none (0)' })).not.toBeDisabled(); }); -}); \ No newline at end of file + + test(`should call onSelect with source ${BulkSelectSource.dropdown} when choosing menu items`, async () => { + const user = userEvent.setup(); + const onSelect = jest.fn(); + + render( + + ); + + const openMenu = async () => { + await user.click(screen.getByLabelText('Bulk select toggle')); + }; + + await openMenu(); + await user.click(screen.getByRole('menuitem', { name: 'Select none (0)' })); + expect(onSelect).toHaveBeenLastCalledWith(BulkSelectValue.none, BulkSelectSource.dropdown); + + onSelect.mockClear(); + await openMenu(); + await user.click(screen.getByRole('menuitem', { name: 'Select page (5)' })); + expect(onSelect).toHaveBeenLastCalledWith(BulkSelectValue.page, BulkSelectSource.dropdown); + + onSelect.mockClear(); + await openMenu(); + await user.click(screen.getByRole('menuitem', { name: 'Select all (10)' })); + expect(onSelect).toHaveBeenLastCalledWith(BulkSelectValue.all, BulkSelectSource.dropdown); + }); + + test(`should call onSelect with source ${BulkSelectSource.checkbox} when using split checkbox`, async () => { + const user = userEvent.setup(); + const onSelect = jest.fn(); + render( + + ); + + await user.click(screen.getByRole('checkbox', { name: 'Select page' })); + expect(onSelect).toHaveBeenCalledWith(BulkSelectValue.page, BulkSelectSource.checkbox); + }); +}); diff --git a/packages/module/src/BulkSelect/BulkSelect.tsx b/packages/module/src/BulkSelect/BulkSelect.tsx index fd702886..5cfdcf2f 100644 --- a/packages/module/src/BulkSelect/BulkSelect.tsx +++ b/packages/module/src/BulkSelect/BulkSelect.tsx @@ -22,6 +22,13 @@ export const BulkSelectValue = { export type BulkSelectValue = (typeof BulkSelectValue)[keyof typeof BulkSelectValue]; +export const BulkSelectSource = { + dropdown: 'dropdown', + checkbox: 'checkbox' +} as const; + +export type BulkSelectSource = (typeof BulkSelectSource)[keyof typeof BulkSelectSource]; + const defaultSelectPageLabel = (pageCount?: number) => `Select page${pageCount ? ` (${pageCount})` : ''}`; const defaultSelectAllLabel = (totalCount?: number) => `Select all${totalCount ? ` (${totalCount})` : ''}`; const defaultSelectedLabel = (selectedCount: number) => `${selectedCount} selected`; @@ -45,7 +52,7 @@ export interface BulkSelectProps extends Omit void; + onSelect: (value: BulkSelectValue, source?: BulkSelectSource) => void; /** Custom OUIA ID */ ouiaId?: string; /** Additional props for MenuToggleCheckbox */ @@ -119,12 +126,12 @@ export const BulkSelect: FC = ({ const onToggleClick = () => setOpen(!isOpen); return ( - ( { setOpen(!isOpen); - onSelect?.(value as BulkSelectValue); + onSelect?.(value as BulkSelectValue, BulkSelectSource.dropdown); }} isOpen={isOpen} onOpenChange={(isOpen: boolean) => setOpen(isOpen)} @@ -147,7 +154,7 @@ export const BulkSelect: FC = ({ ? null : pageSelected || (selectedCount === totalCount && totalCount > 0) } - onChange={(checked) => onSelect?.(!checked || checked === null ? noneOption : allOption)} + onChange={(checked) => onSelect?.(!checked || checked === null ? noneOption : allOption, BulkSelectSource.checkbox)} {...menuToggleCheckboxProps} > {selectedCount > 0 ? ( @@ -163,7 +170,7 @@ export const BulkSelect: FC = ({ {...props} > {splitButtonDropdownItems} - ) + ); };