diff --git a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx index 66850084..85c8f193 100644 --- a/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx +++ b/packages/module/src/DataViewTextFilter/DataViewTextFilter.test.tsx @@ -1,4 +1,4 @@ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import DataViewTextFilter, { DataViewTextFilterProps } from './DataViewTextFilter'; import DataViewToolbar from '../DataViewToolbar'; @@ -22,6 +22,16 @@ describe('DataViewTextFilter component', () => { expect(container).toMatchSnapshot(); }); + it('should use chipTitle for the filter chip category when provided', () => { + render( + } + />); + expect(screen.getByText('Short name')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('Filter by Test Filter')).toBeInTheDocument(); + }); + it('should focus the search input when "/" key is pressed and filter is visible', () => { render( | undefined, value: string) => void; /** Controls visibility of the filter in the toolbar */ @@ -24,6 +26,7 @@ export interface DataViewTextFilterProps extends SearchInputProps { export const DataViewTextFilter: FC = ({ filterId, title, + chipTitle, value = '', onChange, onClear = () => onChange?.(undefined, ''), @@ -33,6 +36,8 @@ export const DataViewTextFilter: FC = ({ enableShortcut = true, ...props }: DataViewTextFilterProps) => { + const categoryName = chipTitle ?? title; + useEffect(() => { if (!enableShortcut) { return; @@ -68,9 +73,9 @@ export const DataViewTextFilter: FC = ({ 0 ? [ { key: title, node: value } ] : []} + labels={value.length > 0 ? [ { key: categoryName, node: value } ] : []} deleteLabel={() => onChange?.(undefined, '')} - categoryName={title} + categoryName={categoryName} showToolbarItem={showToolbarItem} >