diff --git a/packages/wallets/src/components/FormDropdown/__tests__/FormDropdown.spec.tsx b/packages/wallets/src/components/FormDropdown/__tests__/FormDropdown.spec.tsx new file mode 100644 index 000000000000..25890a200f1f --- /dev/null +++ b/packages/wallets/src/components/FormDropdown/__tests__/FormDropdown.spec.tsx @@ -0,0 +1,100 @@ +import React, { ComponentProps } from 'react'; +import { Formik } from 'formik'; +import * as Yup from 'yup'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import FormDropdown from '../FormDropdown'; + +jest.mock('@deriv-com/ui', () => ({ + Dropdown: jest.fn(({ list, onBlur, onSearch, onSelect, ...props }) => { + return ( + <> + {list.map((item: { text: string; value: string }) => { + return ( +
+ onSearch(e.target.value)} placeholder='Search...' /> + +
+ ); + })} + + ); + }), +})); + +const setup = (props: ComponentProps) => { + return render( + + + + ); +}; +describe('FormDropdown', () => { + test('renders FormDropdown correctly', () => { + setup({ list: [{ text: 'Option 1', value: 'option1' }], name: 'test' }); + + expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument(); + }); + + test('applies validation schema', async () => { + const validationSchema = Yup.string().required('Required'); + + setup({ list: [{ text: 'Option 1', value: 'option1' }], name: 'test', validationSchema }); + + userEvent.click(screen.getByText('Select Option 1')); + + await waitFor(() => { + expect(screen.queryByText('Required')).not.toBeInTheDocument(); + }); + }); + + test('handles search and select for combobox variant', () => { + const onSelectMock = jest.fn(); + const onSearchMock = jest.fn(); + + setup({ + list: [{ text: 'Option 1', value: 'option1' }], + name: 'test', + onSearch: onSearchMock, + onSelect: onSelectMock, + variant: 'comboBox', + }); + userEvent.type(screen.getByPlaceholderText('Search...'), 'Option 1'); + userEvent.tab(); + userEvent.click(screen.getByText('Select Option 1')); + + expect(onSearchMock).toHaveBeenCalledWith('Option 1'); + expect(onSelectMock).toHaveBeenCalledWith('option1'); + }); + test('handles search and select for prompt variant', () => { + const onSelectMock = jest.fn(); + const onSearchMock = jest.fn(); + + setup({ + list: [{ text: 'Option 1', value: 'option1' }], + name: 'test', + onSearch: onSearchMock, + onSelect: onSelectMock, + variant: 'prompt', + }); + userEvent.type(screen.getByPlaceholderText('Search...'), 'Option 1'); + userEvent.tab(); + userEvent.click(screen.getByText('Select Option 1')); + + expect(onSearchMock).toHaveBeenCalledWith('Option 1'); + expect(onSelectMock).toHaveBeenCalledWith('option1'); + }); + + test('shows error message when field is invalid', async () => { + const validationSchema = Yup.string().nullable().required('Required'); + + setup({ list: [{ text: 'Option 1', value: '' }], name: 'test', validationSchema }); + + userEvent.type(screen.getByPlaceholderText('Search...'), 'Option 1'); + userEvent.click(screen.getByText('Select Option 1')); + + await waitFor(() => { + expect(screen.getByTestId('dt_test')).toHaveAttribute('errormessage', 'Required'); + }); + }); +});