@epam/uui 5.5.2 → 5.5.3

package/components/pickers/__tests__/PickerInput.test.tsx

@@ -1,1073 +0,0 @@
-import React, { ReactNode } from 'react';
-import { ArrayDataSource, CascadeSelection } from '@epam/uui-core';
-import {
-    renderSnapshotWithContextAsync, setupComponentForTest, screen, within, fireEvent, waitFor, userEvent, PickerInputTestObject,
-} from '@epam/uui-test-utils';
-import { Modals, PickerToggler } from '@epam/uui-components';
-import { DataPickerRow, FlexCell, PickerItem, Text, Button } from '../../';
-import { PickerInput, PickerInputProps } from '../PickerInput';
-import { IHasEditMode } from '../../types';
-import { TestItemType, mockDataSource, mockDataSourceAsync, mockSmallDataSourceAsync, mockTreeLikeDataSourceAsync } from './mocks';
-
-type PickerInputComponentProps<TItem, TId> = PickerInputProps<TItem, TId>;
-
-async function setupPickerInputForTest<TItem = TestItemType, TId = number>(params: Partial<PickerInputComponentProps<TItem, TId>>) {
-    const { result, mocks, setProps } = await setupComponentForTest<PickerInputComponentProps<TItem, TId>>(
-        (context): PickerInputComponentProps<TItem, TId> => {
-            if (params.selectionMode === 'single') {
-                return Object.assign({
-                    onValueChange: jest.fn().mockImplementation((newValue) => context.current?.setProperty('value', newValue)),
-                    dataSource: mockDataSourceAsync,
-                    disableClear: false,
-                    searchPosition: 'input',
-                    getName: (item: TestItemType) => item.level,
-                    value: params.value as TId,
-                    selectionMode: 'single',
-                    searchDebounceDelay: 0,
-                }, params) as PickerInputComponentProps<TItem, TId>;
-            }
-
-            return Object.assign({
-                onValueChange: jest.fn().mockImplementation((newValue) => context.current?.setProperty('value', newValue)),
-                dataSource: mockDataSourceAsync,
-                disableClear: false,
-                searchPosition: 'input',
-                getName: (item: TestItemType) => item.level,
-                value: params.value as number[],
-                selectionMode: 'multi',
-                searchDebounceDelay: 0,
-            }, params) as PickerInputComponentProps<TItem, TId>;
-        },
-        (props) => (
-            <>
-                <PickerInput { ...props } />
-                <Modals />
-            </>
-        ),
-    );
-    const input = screen.queryByRole('textbox') as HTMLElement;
-
-    return {
-        setProps,
-        result,
-        mocks,
-        dom: { input, container: result.container, target: result.container.firstElementChild as HTMLElement },
-    };
-}
-
-describe('PickerInput', () => {
-    it('should render with minimum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <PickerInput value={ null } onValueChange={ jest.fn } selectionMode="single" dataSource={ mockDataSource } disableClear searchPosition="input" />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should render with maximum props', async () => {
-        const tree = await renderSnapshotWithContextAsync(
-            <PickerInput
-                value={ [2, 3] }
-                onValueChange={ jest.fn }
-                selectionMode="multi"
-                dataSource={ mockDataSource }
-                size="48"
-                maxItems={ 20 }
-                editMode="modal"
-                valueType="id"
-                getName={ (item) => item?.level ?? '' }
-                autoFocus
-                placeholder="Test placeholder"
-                filter={ (item: any) => item.level === 'A1' }
-                sorting={ { direction: 'desc', field: 'level' } }
-                searchPosition="body"
-                minBodyWidth={ 900 }
-                renderNotFound={ () => null }
-                renderFooter={ (props) => <div>{props as unknown as ReactNode}</div> }
-                cascadeSelection
-                dropdownHeight={ 48 }
-                minCharsToSearch={ 4 }
-            />,
-        );
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should open body', async () => {
-        const { dom, result } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            dataSource: mockSmallDataSourceAsync,
-            getName: ({ name }) => name,
-        });
-
-        fireEvent.click(dom.input);
-
-        await PickerInputTestObject.waitForOptionsToBeReady();
-
-        expect(result.baseElement).toMatchSnapshot();
-    });
-
-    describe('[selectionMode single]', () => {
-        it('[valueType id] should select & clear option', async () => {
-            const { dom, mocks } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'single',
-            });
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-            const optionC2 = await screen.findByText('C2');
-            fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
-            fireEvent.click(window.document.body);
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-            expect(screen.getByPlaceholderText('C2')).toBeInTheDocument();
-            const clear = screen.getByRole('button');
-            fireEvent.click(clear);
-            expect(screen.queryByText('C2')).not.toBeInTheDocument();
-        });
-
-        it('[valueType entity] should select & clear option', async () => {
-            const { dom, mocks } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'single',
-                valueType: 'entity',
-            });
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-            const optionC2 = await screen.findByText('C2');
-            fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith({ id: 12, level: 'C2', name: 'Proficiency' });
-            fireEvent.click(window.document.body);
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-            expect(screen.getByPlaceholderText('C2')).toBeInTheDocument();
-            const clear = screen.getByRole('button');
-            fireEvent.click(clear);
-            expect(screen.queryByText('C2')).not.toBeInTheDocument();
-        });
-
-        it('should render names of items by getName', async () => {
-            const { mocks, dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: 3,
-                selectionMode: 'single',
-                getName: ({ name }) => name,
-            });
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toBeUndefined();
-            await waitFor(async () => expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Elementary+'));
-
-            fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-            const optionC2 = await screen.findByText('Proficiency');
-            fireEvent.click(optionC2);
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(12);
-        });
-
-        it('should render entity name in placeholder', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'single',
-                entityName: 'Language Level',
-            });
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select Language Level');
-        });
-
-        it('should ignore plural entity name in placeholder', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'single',
-                entityName: 'Language Level',
-                entityPluralName: 'Multiple Language Levels',
-            });
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select Language Level');
-        });
-
-        it.each<[CascadeSelection]>(
-            [[false], [true], ['implicit'], ['explicit']],
-        )
-        ('should pick single element with cascadeSelection = %s', async (cascadeSelection) => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                getName: ({ name }) => name,
-                selectionMode: 'single',
-                cascadeSelection,
-                dataSource: mockTreeLikeDataSourceAsync,
-            });
-            fireEvent.click(dom.input);
-
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            // Check parent
-            await PickerInputTestObject.clickOptionByText('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(2);
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Parent 2');
-        });
-
-        it('should work with maxItems properly', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                maxItems: 1,
-                selectionMode: 'single',
-            });
-
-            fireEvent.click(dom.input);
-
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            // Check parent
-            await PickerInputTestObject.clickOptionByText('A1');
-            fireEvent.click(dom.input);
-            await PickerInputTestObject.clickOptionByText('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith(3);
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1+');
-        });
-
-        it('should disable clear', async () => {
-            const { dom, setProps } = await setupPickerInputForTest({
-                value: 2,
-                selectionMode: 'single',
-                disableClear: false,
-            });
-
-            await waitFor(() => expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1'));
-
-            const clearButton = within(dom.container).getByRole('button', { name: 'Clear' });
-            expect(clearButton).toBeInTheDocument();
-            fireEvent.click(clearButton);
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            setProps({ disableClear: true, value: 2 });
-            expect(within(dom.container).queryByRole('button', { name: 'Clear' })).not.toBeInTheDocument();
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1');
-        });
-
-        it('should clear selected item', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'single',
-                maxItems: 100,
-            });
-            fireEvent.click(dom.input);
-
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-
-            const clearButton = within(screen.getByRole('dialog')).getByRole('button', { name: 'CLEAR' });
-            expect(clearButton).toBeInTheDocument();
-            expect(clearButton).toHaveAttribute('aria-disabled', 'true');
-
-            await PickerInputTestObject.clickOptionByText('A1');
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('A1');
-
-            fireEvent.click(dom.input);
-
-            const clearButton2 = within(screen.getByRole('dialog')).getByRole('button', { name: 'CLEAR' });
-            expect(clearButton2).toHaveAttribute('aria-disabled', 'false');
-
-            fireEvent.click(clearButton2);
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            const clearButton3 = within(screen.getByRole('dialog')).getByRole('button', { name: 'CLEAR' });
-            expect(clearButton3).toHaveAttribute('aria-disabled', 'true');
-        });
-    });
-
-    describe('[selectionMode multi]', () => {
-        it('[valueType id] should select & clear several options', async () => {
-            const { dom, mocks } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'multi',
-            });
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-            await PickerInputTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
-
-            await PickerInputTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
-
-            fireEvent.click(window.document.body);
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
-
-            PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1+');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
-
-            PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
-        });
-
-        it('[valueType entity] should select & clear several options', async () => {
-            const { dom, mocks } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'multi',
-                valueType: 'entity',
-            });
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            fireEvent.click(dom.input);
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-
-            await PickerInputTestObject.clickOptionCheckbox('A1');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([{ id: 2, level: 'A1', name: 'Elementary' }]);
-
-            await PickerInputTestObject.clickOptionCheckbox('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([
-                { id: 2, level: 'A1', name: 'Elementary' },
-                { id: 3, level: 'A1+', name: 'Elementary+' },
-            ]);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
-
-            fireEvent.click(window.document.body);
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
-
-            PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1+');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1']);
-
-            PickerInputTestObject.removeSelectedTagByText(dom.input, 'A1');
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
-        });
-        it('should render names of items by getName', async () => {
-            const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: [3, 4],
-                selectionMode: 'multi',
-                getName: ({ name }) => name,
-            });
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['', '']);
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select');
-            await waitFor(() => expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Elementary+', 'Pre-Intermediate']));
-        });
-
-        it('should render entity name with \'s\' in placeholder', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'multi',
-                entityName: 'Language Level',
-            });
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select Language Levels');
-        });
-
-        it('should render plural entity name in placeholder', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode: 'multi',
-                entityName: 'Language Level',
-                entityPluralName: 'Multiple Language Levels',
-            });
-
-            expect(PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Please select Multiple Language Levels');
-        });
-
-        it('should pick single element with cascadeSelection = false', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                getName: ({ name }) => name,
-                selectionMode: 'multi',
-                cascadeSelection: false,
-                dataSource: mockTreeLikeDataSourceAsync,
-            });
-            fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-            await PickerInputTestObject.clickOptionCheckbox('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
-
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Parent 2']);
-        });
-
-        it.each<[CascadeSelection]>(
-            [[true], ['explicit']],
-        )
-        ('should pick multiple elements with cascadeSelection = %s', async (cascadeSelection) => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                getName: ({ name }) => name,
-                selectionMode: 'multi',
-                cascadeSelection,
-                dataSource: mockTreeLikeDataSourceAsync,
-            });
-
-            fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-            // Check parent
-            await PickerInputTestObject.clickOptionCheckbox('Parent 2');
-            // Unfold parent
-            await PickerInputTestObject.clickOptionUnfold('Parent 2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 2.1, 2.2, 2.3]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
-
-            // Check child
-            await PickerInputTestObject.clickOptionCheckbox('Child 2.2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Child 2.1', 'Child 2.3']);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Child 2.1', 'Child 2.3']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
-        });
-
-        it('should pick single element with cascadeSelection = implicit', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                getName: ({ name }) => name,
-                selectionMode: 'multi',
-                cascadeSelection: 'implicit',
-                dataSource: mockTreeLikeDataSourceAsync,
-            });
-
-            fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-
-            // Check parent
-            await PickerInputTestObject.clickOptionCheckbox('Parent 2');
-            // Unfold parent
-            await PickerInputTestObject.clickOptionUnfold('Parent 2');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Parent 2']);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Parent 2', 'Child 2.1', 'Child 2.2', 'Child 2.3']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 3']);
-
-            // Check child
-            await PickerInputTestObject.clickOptionCheckbox('Child 2.2');
-            // Test if checkboxes are checked/unchecked
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2.1, 2.3]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['Child 2.1', 'Child 2.3']);
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['Child 2.1', 'Child 2.3']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['Parent 1', 'Parent 2', 'Child 2.2', 'Parent 3']);
-        });
-
-        it('should wrap up if number of elements is greater than maxItems', async () => {
-            const { mocks, dom } = await setupPickerInputForTest({
-                value: undefined,
-                maxItems: 3,
-                entityPluralName: 'languages',
-                selectionMode: 'multi',
-            });
-
-            fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-
-            // Check parent
-            await PickerInputTestObject.clickOptionByText('A1');
-            await PickerInputTestObject.clickOptionByText('A1+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
-
-            await PickerInputTestObject.clickOptionByText('A2');
-            await PickerInputTestObject.clickOptionByText('A2+');
-            expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3, 4, 5]);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['4 languages selected']);
-        });
-
-        it('should disable clear', async () => {
-            const { setProps, dom, result } = await setupPickerInputForTest({
-                value: [2, 3],
-                selectionMode: 'multi',
-                disableClear: false,
-            });
-            await waitFor(() => expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']));
-            PickerInputTestObject.clearInput(result.container);
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
-
-            setProps({ disableClear: true, value: [2, 3] });
-            expect(PickerInputTestObject.hasClearInputButton(result.container)).toBeFalsy();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+']);
-        });
-
-        it('should select all', async () => {
-            const { dom } = await setupPickerInputForTest({
-                value: [],
-                selectionMode: 'multi',
-                maxItems: 100,
-            });
-
-            fireEvent.click(dom.input);
-            expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-
-            await PickerInputTestObject.clickSelectAllOptions();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual(['A1', 'A1+', 'A2', 'A2+', 'B1', 'B1+', 'B2', 'B2+', 'C1', 'C1+', 'C2']);
-
-            await PickerInputTestObject.clickClearAllOptions();
-            expect(PickerInputTestObject.getSelectedTagsText(dom.input)).toEqual([]);
-        });
-        
-        describe('show only selected', () => {
-            it('should show only selected items', async () => {
-                const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                    value: [4, 2, 6, 8],
-                    selectionMode: 'multi',
-                });
-    
-                fireEvent.click(dom.input);
-    
-                const dialog = await screen.findByRole('dialog');
-                expect(dialog).toBeInTheDocument();
-    
-                await PickerInputTestObject.waitForOptionsToBeReady();
-    
-                expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A2', 'B1', 'B2']);
-                expect(await PickerInputTestObject.findUncheckedOptions()).toEqual(['A1+', 'A2+', 'B1+', 'B2+', 'C1', 'C1+', 'C2']);
-    
-                await PickerInputTestObject.clickShowOnlySelected();
-    
-                expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
-                expect(await PickerInputTestObject.findUncheckedOptions()).toEqual([]);
-            });
-        });
-    
-        it('should clear search on show only selected toggle', async () => {
-            const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: [4, 2, 6, 8],
-                selectionMode: 'multi',
-                searchPosition: 'body',
-            });
-    
-            fireEvent.click(dom.target);
-    
-            const dialog = await PickerInputTestObject.findDialog();
-            expect(dialog).toBeInTheDocument();
-    
-            await PickerInputTestObject.waitForOptionsToBeReady();
-    
-            const searchInput = within(dialog).queryByRole('searchbox') as HTMLInputElement;
-            fireEvent.change(searchInput, { target: { value: 'search' } });
-
-            await PickerInputTestObject.clickShowOnlySelected();
-
-            await waitFor(() => expect(searchInput.value).toEqual(''));
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual([]);
-        });
-
-        it('should turn off show only selected mode on search change', async () => {
-            const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: [4, 2, 6, 8],
-                selectionMode: 'multi',
-                searchPosition: 'body',
-            });
-    
-            fireEvent.click(dom.target);
-    
-            const dialog = screen.queryByRole('dialog');
-            expect(dialog).toBeInTheDocument();
-            await PickerInputTestObject.waitForOptionsToBeReady();
-    
-            await PickerInputTestObject.clickShowOnlySelected();
-    
-            expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A2', 'A1', 'B1', 'B2']);
-            expect(await PickerInputTestObject.findUncheckedOptions()).toEqual([]);
-    
-            const searchInput = within(dialog).getByRole('searchbox') as HTMLInputElement;
-            fireEvent.change(searchInput, { target: { value: 'search' } });
-
-            const showOnlySelectedSwitch = within(dialog).queryByRole('switch', { name: 'Show only selected' }) as HTMLInputElement;
-
-            await waitFor(() => expect(showOnlySelectedSwitch.checked).toEqual(false));
-        });
-    });
-
-    it('should disable input', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            isDisabled: true,
-        });
-
-        expect(dom.input.hasAttribute('disabled')).toBeTruthy();
-        expect(dom.input.getAttribute('aria-disabled')?.trim()).toEqual('true');
-
-        fireEvent.click(dom.input);
-        expect(screen.queryByRole('dialog')).toBeNull();
-    });
-
-    it('should make an input readonly', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            isReadonly: true,
-        });
-
-        expect(dom.input.hasAttribute('readonly')).toBeTruthy();
-        expect(dom.input.getAttribute('aria-readonly')?.trim()).toEqual('true');
-
-        fireEvent.click(dom.input);
-        expect(screen.queryByRole('dialog')).toBeNull();
-    });
-
-    it.each<[IHasEditMode['mode'] | undefined]>(
-        [[undefined], ['form'], ['cell'], ['inline']],
-    )('should render with mode = %s', async (mode) => {
-        const props: PickerInputComponentProps<TestItemType, number> = {
-            value: [],
-            onValueChange: () => {},
-            valueType: 'id',
-            dataSource: mockDataSourceAsync,
-            disableClear: false,
-            searchPosition: 'input',
-            getName: (item: TestItemType) => item.level,
-            selectionMode: 'multi',
-            mode,
-        };
-        expect(await renderSnapshotWithContextAsync(<PickerInput { ...props } />)).toMatchSnapshot();
-    });
-
-    it.each<['left' | 'right' | undefined]>(
-        [[undefined], ['left'], ['right']],
-    )('should render icon at specific position', async (iconPosition) => {
-        const props: PickerInputComponentProps<TestItemType, number> = {
-            value: [],
-            onValueChange: () => {},
-            valueType: 'id',
-            dataSource: mockDataSourceAsync,
-            disableClear: false,
-            searchPosition: 'input',
-            getName: (item: TestItemType) => item.level,
-            selectionMode: 'multi',
-            icon: () => <div data-testid = "test-icon" />,
-            iconPosition,
-        };
-        expect(await renderSnapshotWithContextAsync(<PickerInput { ...props } />)).toMatchSnapshot();
-    });
-
-    it('should pass onClick to the icon', async () => {
-        const { mocks } = await setupPickerInputForTest({
-            value: undefined,
-            onIconClick: jest.fn(),
-            icon: () => <div data-testid = "test-icon" />,
-        });
-
-        const iconContainer = screen.getByTestId('test-icon').parentElement as Element;
-        fireEvent.click(iconContainer);
-        expect(mocks.onIconClick).toBeCalledTimes(1);
-    });
-
-    it('should open dialog only when minCharsToSearch is reached', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            minCharsToSearch: 1,
-        });
-
-        fireEvent.click(dom.input);
-
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        fireEvent.change(dom.input, { target: { value: 'A' } });
-        expect(await screen.findByRole('dialog')).toBeInTheDocument();
-    });
-
-    it('should use modal edit mode', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            editMode: 'modal',
-        });
-        fireEvent.click(dom.input);
-        expect(screen.getByAria('modal', 'true')).toBeInTheDocument();
-
-        expect(
-            await PickerInputTestObject.findOptionsText({ busy: false, editMode: 'modal' }),
-        ).toEqual(
-            ['A1', 'A1+', 'A2', 'A2+', 'B1', 'B1+', 'B2', 'B2+', 'C1', 'C1+', 'C2'],
-        );
-    });
-
-    it('should render input as invalid', async () => {
-        const props: PickerInputComponentProps<TestItemType, number | undefined> = {
-            value: undefined,
-            onValueChange: () => {},
-            valueType: 'id',
-            dataSource: mockDataSourceAsync,
-            disableClear: false,
-            searchPosition: 'input',
-            getName: (item: TestItemType) => item.level,
-            selectionMode: 'single',
-            isInvalid: true,
-        };
-        expect(await renderSnapshotWithContextAsync(<PickerInput { ...props } />)).toMatchSnapshot();
-    });
-
-    it('should support single line', async () => {
-        const props: PickerInputComponentProps<TestItemType, number> = {
-            value: [],
-            onValueChange: () => {},
-            dataSource: mockDataSourceAsync,
-            disableClear: false,
-            searchPosition: 'input',
-            getName: (item: TestItemType) => item.level,
-            selectionMode: 'multi',
-            isSingleLine: true,
-        };
-        expect(await renderSnapshotWithContextAsync(<PickerInput { ...props } />)).toMatchSnapshot();
-    });
-
-    it('should provide custom placeholder', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            placeholder: 'Custom placeholder',
-        });
-        expect(await PickerInputTestObject.getPlaceholderText(dom.input)).toEqual('Custom placeholder');
-    });
-
-    it('should define minBodyWidth', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            minBodyWidth: 300,
-        });
-
-        fireEvent.click(dom.input);
-
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-
-        const dialogBody = dialog.getElementsByClassName('uui-dropdown-body')[0];
-        expect(dialogBody).toHaveStyle('min-width: 300px');
-    });
-
-    it('should define dropdownHeight', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            dropdownHeight: 100,
-        });
-
-        fireEvent.click(dom.input);
-
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-
-        const dialogBody = dialog.firstElementChild?.firstElementChild;
-        expect(dialogBody).toHaveStyle('max-height: 100px');
-    });
-
-    it('should render custom toggler', async () => {
-        const { mocks, dom } = await setupPickerInputForTest<TestItemType, number>({
-            value: undefined,
-            selectionMode: 'multi',
-            renderToggler: (props) => (
-                <Button
-                    rawProps={ {
-                        ...props.rawProps,
-                        'data-testid': 'test-toggler',
-                    } }
-                    size="36"
-                    onClick={ props.onClick }
-                    ref={ props.ref }
-                    iconPosition="left"
-                    fill="ghost"
-                    caption={ props.selection?.map((s) => s.value?.name).join(', ') }
-                />
-            ),
-        });
-
-        expect(dom.target.getAttribute('type')).toBe('button');
-
-        fireEvent.click(dom.target);
-        expect(await PickerInputTestObject.hasOptions()).toBeTruthy();
-
-        await PickerInputTestObject.clickOptionCheckbox('A1');
-        await PickerInputTestObject.clickOptionCheckbox('A1+');
-        expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
-
-        expect(await PickerInputTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
-        expect(screen.getByTestId('test-toggler').textContent?.trim()).toEqual('Elementary, Elementary+');
-    });
-
-    it('Should render toggler without arrow icon', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            entityName: 'Language Level',
-            searchPosition: 'input',
-            renderToggler: () => <PickerToggler dropdownIcon={ () => <div data-testid = "arrow-icon" /> } pickerMode="single" searchPosition="none" closePickerBody={ () => {} } />,
-            minCharsToSearch: 3,
-        });
-
-        expect(within(dom.container).queryByTestId('arrow-icon')).not.toBeInTheDocument();
-    });
-
-    it('Should render toggler with arrow icon', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'single',
-            entityName: 'Language Level',
-            renderToggler: () => <PickerToggler isDropdown dropdownIcon={ () => <div data-testid = "arrow-icon" /> } pickerMode="single" searchPosition="none" closePickerBody={ () => {} } />,
-            minCharsToSearch: undefined,
-        });
-
-        expect(within(dom.container).getByTestId('arrow-icon')).toBeInTheDocument();
-    });
-
-    it('should render search in input', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            searchPosition: 'input',
-        });
-
-        expect(dom.input.getAttribute('readonly')).toBeNull();
-        fireEvent.click(dom.input);
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-
-        const bodyInput = within(dialog).queryByPlaceholderText('Search');
-        expect(bodyInput).not.toBeInTheDocument();
-    });
-
-    it('should render search in body', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            searchPosition: 'body',
-        });
-
-        expect(dom.input.hasAttribute('readonly')).toBeTruthy();
-        fireEvent.click(dom.input);
-
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        const bodyInput = within(dialog).getByPlaceholderText('Search');
-        expect(bodyInput).toBeInTheDocument();
-        expect(bodyInput.hasAttribute('readonly')).toBeFalsy();
-    });
-
-    it('should not render search in none mode', async () => {
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            searchPosition: 'none',
-        });
-
-        expect(dom.input.hasAttribute('readonly')).toBeTruthy();
-        fireEvent.click(dom.input);
-
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-        expect(within(dialog).queryByPlaceholderText('Search')).not.toBeInTheDocument();
-    });
-
-    it('should render custom not found', async () => {
-        const mockEmptyDS = new ArrayDataSource<TestItemType, number, any>({
-            items: [],
-            getId: ({ id }) => id,
-        });
-
-        const customText = 'Custom Text or Component';
-
-        const { dom } = await setupPickerInputForTest({
-            value: undefined,
-            selectionMode: 'multi',
-            dataSource: mockEmptyDS,
-            renderNotFound: () => (
-                <FlexCell grow={ 1 } textAlign="center" rawProps={ { 'data-testid': 'test-custom-not-found' } }>
-                    <Text>{customText}</Text>
-                </FlexCell>
-            ),
-        });
-
-        fireEvent.click(dom.input);
-        const notFound = within(await screen.findByRole('dialog')).getByTestId('test-custom-not-found');
-        expect(notFound).toHaveTextContent(customText);
-    });
-
-    it('should render custom row', async () => {
-        const { dom } = await setupPickerInputForTest<TestItemType, number>({
-            value: undefined,
-            selectionMode: 'multi',
-            renderRow: (props) => (
-                <DataPickerRow
-                    { ...props }
-                    key={ props.rowKey }
-                    alignActions="center"
-                    renderItem={ (item, rowProps) => <PickerItem { ...rowProps } title={ item.name } /> }
-                />
-            ),
-        });
-
-        fireEvent.click(dom.input);
-        expect(await screen.findByRole('dialog')).toBeInTheDocument();
-
-        await PickerInputTestObject.waitForOptionsToBeReady();
-
-        expect(await PickerInputTestObject.findOptionsText({ busy: false })).toEqual([
-            'Elementary',
-            'Elementary+',
-            'Pre-Intermediate',
-            'Pre-Intermediate+',
-            'Intermediate',
-            'Intermediate+',
-            'Upper-Intermediate',
-            'Upper-Intermediate+',
-            'Advanced',
-            'Advanced+',
-            'Proficiency',
-        ]);
-    });
-
-    it('should search items', async () => {
-        const { dom } = await setupPickerInputForTest<TestItemType, number>({
-            value: undefined,
-            selectionMode: 'multi',
-            searchPosition: 'body',
-            getSearchFields: (item) => [item!.level],
-        });
-
-        expect(dom.input.hasAttribute('readonly')).toBeTruthy();
-        fireEvent.click(dom.input);
-
-        const dialog = await screen.findByRole('dialog');
-        expect(dialog).toBeInTheDocument();
-
-        await PickerInputTestObject.waitForOptionsToBeReady();
-
-        expect(await PickerInputTestObject.findOptionsText({ busy: false })).toEqual([
-            'A1',
-            'A1+',
-            'A2',
-            'A2+',
-            'B1',
-            'B1+',
-            'B2',
-            'B2+',
-            'C1',
-            'C1+',
-            'C2',
-        ]);
-
-        const bodyInput = within(dialog).getByPlaceholderText('Search');
-        fireEvent.change(bodyInput, { target: { value: 'A' } });
-
-        await waitFor(() => expect(PickerInputTestObject.getOptions({ busy: false }).length).toBe(4));
-
-        expect(await PickerInputTestObject.findOptionsText({ busy: false })).toEqual([
-            'A1',
-            'A1+',
-            'A2',
-            'A2+',
-        ]);
-    });
-
-    describe('keyboard navigation', () => {
-        let btn;
-        function addFocusableElementBefore() {
-            const btnEl = document.createElement('button');
-            document.body.prepend(btnEl);
-            return btnEl;
-        }
-
-        beforeAll(() => {
-            btn = addFocusableElementBefore();
-        });
-
-        const testInputFocus = async (selectionMode, searchPosition?) => {
-            const user = userEvent.setup();
-            const { dom } = await setupPickerInputForTest({
-                value: undefined,
-                selectionMode,
-                searchPosition,
-            });
-
-            // click the button just before PickerInput
-            await user.click(btn);
-            // move to PickerInput by Tab key
-            await user.tab();
-
-            expect(dom.input).not.toHaveAttribute('readOnly');
-            expect(dom.input).toEqual(document.activeElement);
-
-            return user;
-        };
-
-        it('[selectionMode single] should focus input on Tab', async () => await testInputFocus('single'));
-
-        it('[selectionMode multi] should focus input on Tab', async () => await testInputFocus('multi', 'input'));
-
-        it('[selectionMode single] should open dropdown when start typing', async () => {
-            const user = await testInputFocus('single');
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-
-            await user.keyboard('a');
-            expect(await screen.findByRole('dialog')).toBeInTheDocument();
-        });
-
-        it('should focus on first item on open and then move focus by arrows', async () => {
-            const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: undefined,
-                selectionMode: 'multi',
-            });
-
-            fireEvent.click(dom.input);
-
-            const dialog = await screen.findByRole('dialog');
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            let focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
-
-            fireEvent.keyDown(dom.input, { key: 'ArrowDown', code: 'ArrowDown', charCode: 40 });
-            focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('2');
-
-            fireEvent.keyDown(dom.input, { key: 'ArrowUp', code: 'ArrowUp', charCode: 38 });
-            focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
-        });
-
-        it('should focus first founded item after search', async () => {
-            const { dom } = await setupPickerInputForTest<TestItemType, number>({
-                value: undefined,
-                selectionMode: 'single',
-            });
-
-            fireEvent.click(dom.input);
-
-            const dialog = await screen.findByRole('dialog');
-
-            fireEvent.change(dom.input, { target: { value: 'A' } });
-
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            const focusedItem = dialog.querySelector('.uui-focus');
-            expect(focusedItem.getAttribute('aria-posinset')).toBe('1');
-        });
-
-        it('should select focused item by enter', async () => {
-            const { dom, mocks } = await setupPickerInputForTest<TestItemType, number>({
-                value: undefined,
-                selectionMode: 'single',
-            });
-
-            fireEvent.click(dom.input);
-
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            fireEvent.keyDown(dom.input, { key: 'Enter', code: 'Enter', charCode: 13 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith(2);
-        });
-
-        it('should remove last item from selection by backspace in case of searchPosition="input"', async () => {
-            const { dom, mocks } = await setupPickerInputForTest<TestItemType, number>({
-                value: [2, 3, 4],
-                selectionMode: 'multi',
-                searchPosition: 'input',
-            });
-
-            fireEvent.click(dom.input);
-
-            await PickerInputTestObject.waitForOptionsToBeReady();
-
-            fireEvent.keyDown(dom.input, { key: 'Backspace', code: 'Backspace', charCode: 8 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith([2, 3]);
-
-            fireEvent.keyDown(dom.input, { key: 'Backspace', code: 'Backspace', charCode: 8 });
-            expect(mocks.onValueChange).toHaveBeenCalledWith([2]);
-        });
-    });
-});