@wise/dynamic-flow-client 5.28.0 → 5.29.0-experimental-f7c2300

package/build/tests/legacy/MultiSelect.test.js

@@ -1,546 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { renderWithProviders } from '../../test-utils';
-import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
-import { vi } from 'vitest';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const currencySelectSchema = (arraySchemaControl) => ({
-    $id: '#schema',
-    type: 'object',
-    displayOrder: ['currencies'],
-    required: [],
-    properties: {
-        currencies: {
-            type: 'array',
-            title: 'Select your currencies',
-            minItems: 2,
-            maxItems: 2,
-            description: 'This is an example of an array schema with const options.',
-            addItemTitle: '',
-            editItemTitle: '',
-            control: arraySchemaControl,
-            items: {
-                oneOf: [
-                    {
-                        title: 'EUR',
-                        description: 'Euro',
-                        icon: { name: 'flag-eur' },
-                        const: 'EUR',
-                    },
-                    {
-                        title: 'GBP',
-                        description: 'British pound',
-                        icon: { name: 'flag-gbp' },
-                        const: 'GBP',
-                    },
-                    {
-                        title: 'USD',
-                        description: 'US dollar',
-                        icon: { name: 'flag-usd' },
-                        const: 'USD',
-                    },
-                ],
-            },
-        },
-    },
-});
-const basicStep = (arraySchemaControl) => ({
-    id: 'MultiSelect',
-    title: '',
-    schemas: [currencySelectSchema(arraySchemaControl)],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#schema',
-        },
-        {
-            type: 'button',
-            title: 'Submit',
-            action: { url: '/submit', method: 'POST' },
-        },
-    ],
-});
-const mockHttpClient = vi.fn();
-const getProps = (overrides = {}) => (Object.assign({ flowId: 'repeatable-test-flow-id', initialStep: basicStep(undefined), httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn(), onLink: vi.fn() }, overrides));
-describe('Multi-Select', () => {
-    it('renders the SelectInput component', () => {
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps({}))));
-        expect(screen.getByRole('combobox', { name: /select your currencies/i })).toBeInTheDocument();
-    });
-    describe('when a model is provided', () => {
-        it('should initialise the component with pre-selected values from the model', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { model: { currencies: ['USD', 'GBP'] } }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText(/USD and 1 more/)).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['USD', 'GBP'] }),
-                }));
-            });
-        });
-        it('should only initialise with values in the OneOf', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { model: { currencies: ['GBP', 'USD', 'AUD'] } }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText(/GBP and 1 more/)).toBeInTheDocument();
-            await user.click(screen.getByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['GBP', 'USD'] }),
-                }));
-            });
-        });
-    });
-    describe('when validation errors are provided in the step', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { model: null, errors: { validation: { currencies: 'You cannot select USD and EUR' } } }),
-        });
-        it('should display initial errors', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText(/you cannot select usd and eur/i)).toBeInTheDocument();
-        });
-        it('should hide them when the selection has changed', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('combobox', { name: /Select your currencies/ }));
-            await waitFor(() => {
-                expect(screen.getByText(/gbp/i)).toBeInTheDocument();
-            });
-            await user.click(screen.getByText(/gbp/i));
-            await user.keyboard('{Escape}');
-            expect(screen.queryByText(/you cannot select usd and eur/i)).not.toBeInTheDocument();
-        });
-    });
-    describe('when the user selects an item', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { model: { currencies: ['USD'] } }),
-        });
-        it('should show in the input box', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-            await user.click(screen.getByText('EUR'));
-            expect(screen.getByText(/USD and 1 more/)).toBeInTheDocument();
-        });
-        it('should be added to the model', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-            await user.click(screen.getByText('EUR'));
-            await user.keyboard('{Escape}');
-            await user.click(await screen.findByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['USD', 'EUR'] }),
-                }));
-            });
-        });
-    });
-    describe('when the user de-selects an item', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { model: { currencies: ['USD', 'EUR', 'GBP'] } }),
-        });
-        it('should remove from the input box', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-            await user.click(screen.getByText('EUR'));
-            expect(screen.getByText(/USD and 1 more/)).toBeInTheDocument();
-        });
-        it('should be removed from the model', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-            await user.click(screen.getByText('EUR'));
-            await user.keyboard('{Escape}');
-            await user.click(await screen.findByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['USD', 'GBP'] }),
-                }));
-            });
-        });
-    });
-    // modified
-    describe('local validation', () => {
-        describe('when minItems is provided', () => {
-            it('should pass validation when no items are provided', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
-                await user.click(screen.getByRole('button', { name: 'Submit' }));
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.anything());
-                });
-            });
-            it('should show an error message onClose when selected is greater than 0 but below minItems', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
-                // open
-                await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-                await user.click(screen.getByText('EUR'));
-                // close
-                await user.keyboard('{Escape}');
-                await waitFor(() => {
-                    expect(screen.getByText(/please add at least 2/i)).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when maxItems is provided', () => {
-            it('should show an error message onClose', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps())));
-                // open
-                await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-                await user.click(screen.getByText('EUR'));
-                await user.click(screen.getByText('USD'));
-                await user.click(screen.getByText('GBP'));
-                // close
-                await user.keyboard('{Escape}');
-                await waitFor(() => {
-                    expect(screen.getByText(/please add 2 or fewer/i)).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when required is provided', () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { schemas: [
-                        Object.assign(Object.assign({}, currencySelectSchema(undefined)), { required: ['currencies'] }),
-                    ] }),
-            });
-            it('should show an error message when submission is attempted and no values selected', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('button', { name: /submit/i }));
-                expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
-            });
-            it('should show onClose after deselecting all options', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                // open
-                await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-                await user.click(screen.getByRole('option', { name: 'EUR Euro' }));
-                await user.click(screen.getByRole('option', { name: 'USD US dollar' }));
-                // close
-                await user.keyboard('{Escape}');
-                // open
-                await user.click(await screen.findByRole('combobox', { name: 'Select your currencies' }));
-                await user.click(screen.getByRole('option', { name: 'EUR Euro' }));
-                await user.click(screen.getByRole('option', { name: 'USD US dollar' }));
-                // close
-                await user.keyboard('{Escape}');
-                await waitFor(() => {
-                    expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when custom validation messages are provided', () => {
-            const schemaWithCustomValidationMessages = {
-                $id: '#schema',
-                type: 'object',
-                displayOrder: ['currencies'],
-                required: ['currencies'],
-                properties: {
-                    currencies: {
-                        type: 'array',
-                        title: 'Select your currencies',
-                        description: 'This is an example of an array schema with const options.',
-                        validationMessages: {
-                            required: 'custom required message',
-                        },
-                        addItemTitle: '',
-                        editItemTitle: '',
-                        items: {
-                            oneOf: [
-                                {
-                                    title: 'EUR',
-                                    description: 'Euro',
-                                    icon: { name: 'flag-eur' },
-                                    const: 'EUR',
-                                },
-                                {
-                                    title: 'GBP',
-                                    description: 'British pound',
-                                    icon: { name: 'flag-gbp' },
-                                    const: 'GBP',
-                                },
-                                {
-                                    title: 'USD',
-                                    description: 'US dollar',
-                                    icon: { name: 'flag-usd' },
-                                    const: 'USD',
-                                },
-                            ],
-                        },
-                    },
-                },
-            };
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { schemas: [schemaWithCustomValidationMessages] }),
-            });
-            it('should use those when showing errors', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('button', { name: /submit/i }));
-                await waitFor(() => {
-                    expect(screen.getByText(/custom required message/i)).toBeInTheDocument();
-                });
-            });
-        });
-    });
-    // NEW IN REVAMP
-    describe('async operations', () => {
-        describe('validation async', () => {
-            const currencySelectValidationAsyncSchema = {
-                $id: '#schema',
-                type: 'object',
-                displayOrder: ['currencies'],
-                required: [],
-                properties: {
-                    currencies: {
-                        type: 'array',
-                        title: 'Select your currencies',
-                        description: 'This is an example of an array schema with const options.',
-                        addItemTitle: '',
-                        editItemTitle: '',
-                        validationAsync: {
-                            param: 'value',
-                            method: 'POST',
-                            url: '/validate',
-                        },
-                        items: {
-                            oneOf: [
-                                {
-                                    title: 'EUR',
-                                    description: 'Euro',
-                                    icon: { name: 'flag-eur' },
-                                    const: 'EUR',
-                                },
-                                {
-                                    title: 'GBP',
-                                    description: 'British pound',
-                                    icon: { name: 'flag-gbp' },
-                                    const: 'GBP',
-                                },
-                                {
-                                    title: 'USD',
-                                    description: 'US dollar',
-                                    icon: { name: 'flag-usd' },
-                                    const: 'USD',
-                                },
-                            ],
-                        },
-                    },
-                },
-            };
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep(undefined)), { schemas: [currencySelectValidationAsyncSchema] }),
-            });
-            it('triggers validation async when the dropdown is closed', async () => {
-                mockHttpClient.mockReset();
-                const mockOnEvent = vi.fn();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { onEvent: mockOnEvent })));
-                // open
-                await user.click(screen.getByRole('combobox', { name: 'Select your currencies' }));
-                await user.click(screen.getByText('EUR'));
-                // close
-                await user.keyboard('{Escape}');
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenCalledWith('/validate', expect.anything());
-                });
-            });
-        });
-    });
-});
-describe('Inline Multi-Select', () => {
-    it('renders the ListItem components', () => {
-        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps({ initialStep: basicStep('inline') }))));
-        expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).toBeInTheDocument();
-        expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeInTheDocument();
-        expect(screen.getByRole('checkbox', { name: /USD US dollar/i })).toBeInTheDocument();
-    });
-    describe('when a model is provided', () => {
-        it('should initialise each list item with pre-selected values from the model', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { model: { currencies: ['USD', 'GBP'] } }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByRole('checkbox', { name: /USD US dollar/i })).toBeChecked();
-            expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeChecked();
-            expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).not.toBeChecked();
-        });
-    });
-    describe('when options are filtered', () => {
-        const schema = currencySelectSchema('inline');
-        const arraySchema = schema.properties.currencies;
-        arraySchema.tags = ['filtered'];
-        it('keeps the correct model value selected as the filter changes', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [schema], model: { currencies: ['USD'] } }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const filter = screen.getByPlaceholderText('Start typing to search');
-            expect(screen.getByRole('checkbox', { name: /USD US dollar/i })).toBeChecked();
-            await user.type(filter, 'eur');
-            expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).not.toBeChecked();
-            expect(screen.queryByRole('checkbox', { name: /USD US dollar/i })).not.toBeInTheDocument();
-            await user.clear(filter);
-            await user.type(filter, 'usd');
-            expect(screen.getByRole('checkbox', { name: /USD US dollar/i })).toBeChecked();
-            expect(screen.queryByRole('checkbox', { name: /EUR Euro/i })).not.toBeInTheDocument();
-        });
-        it('keeps a filtered selection on the correct option when the filter is cleared', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [schema] }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            const filter = screen.getByPlaceholderText('Start typing to search');
-            await user.type(filter, 'gbp');
-            await user.click(screen.getByRole('checkbox', { name: /GBP British pound/i }));
-            expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeChecked();
-            await user.clear(filter);
-            expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).not.toBeChecked();
-            expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeChecked();
-            expect(screen.getByRole('checkbox', { name: /USD US dollar/i })).not.toBeChecked();
-        });
-        it('keeps a filtered selection on the correct option when the filter is changed', async () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [schema] }),
-            });
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('checkbox', { name: /GBP British pound/i }));
-            expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeChecked();
-            const filter = screen.getByPlaceholderText('Start typing to search');
-            await user.type(filter, 'pound');
-            expect(screen.getByRole('checkbox', { name: /GBP British pound/i })).toBeChecked();
-        });
-    });
-    describe('when validation errors are provided in the step', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep('inline')), { model: null, errors: { validation: { currencies: 'You cannot select USD and EUR' } } }),
-        });
-        it('should display initial errors', () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            expect(screen.getByText(/you cannot select usd and eur/i)).toBeInTheDocument();
-        });
-    });
-    describe('when the user selects an item', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep('inline')), { model: { currencies: ['USD'] } }),
-        });
-        it('should show as checked', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-            expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).toBeChecked();
-        });
-        it('should be added to the model', async () => {
-            mockHttpClient.mockReset();
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-            await user.click(screen.getByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['USD', 'EUR'] }),
-                }));
-            });
-        });
-    });
-    describe('when the user de-selects an item', () => {
-        const props = getProps({
-            initialStep: Object.assign(Object.assign({}, basicStep('inline')), { model: { currencies: ['USD', 'EUR', 'GBP'] } }),
-        });
-        it('should show as unchecked', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-            expect(screen.getByRole('checkbox', { name: /EUR Euro/i })).not.toBeChecked();
-        });
-        it('should be removed from the model', async () => {
-            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-            await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-            await user.click(screen.getByRole('button', { name: /submit/i }));
-            await waitFor(() => {
-                expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
-                    body: JSON.stringify({ currencies: ['USD', 'GBP'] }),
-                }));
-            });
-        });
-    });
-    describe('local validation', () => {
-        describe('when minItems is provided', () => {
-            it('should show an error message when selected is below minItems', async () => {
-                const props = getProps({ initialStep: basicStep('inline') });
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-                await waitFor(() => {
-                    expect(screen.getByText(/please add at least 2/i)).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when maxItems is provided', () => {
-            it('should show an error message when selected is above maxItems', async () => {
-                const props = getProps({
-                    initialStep: Object.assign(Object.assign({}, basicStep('inline')), { model: { currencies: ['USD'] } }),
-                });
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-                await user.click(screen.getByRole('checkbox', { name: /GBP British pound/i }));
-                await waitFor(() => {
-                    expect(screen.getByText(/please add 2 or fewer/i)).toBeInTheDocument();
-                });
-            });
-        });
-        describe('when required is provided', () => {
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [
-                        Object.assign(Object.assign({}, currencySelectSchema('inline')), { required: ['currencies'] }),
-                    ] }),
-            });
-            it('should show an error message when submission is attempted and no values selected', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('button', { name: /submit/i }));
-                expect(screen.getByText(/please fill out this field/i)).toBeInTheDocument();
-            });
-        });
-        describe('when custom validation messages are provided', () => {
-            //
-            const schema = currencySelectSchema('inline');
-            schema.required = ['currencies'];
-            const arraySchema = schema.properties.currencies;
-            arraySchema.validationMessages = {
-                required: 'custom required message',
-            };
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [schema] }),
-            });
-            it('should use those when showing errors', async () => {
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
-                await user.click(screen.getByRole('button', { name: /submit/i }));
-                await waitFor(() => {
-                    expect(screen.getByText(/custom required message/i)).toBeInTheDocument();
-                });
-            });
-        });
-    });
-    describe('async operations', () => {
-        describe('validation async', () => {
-            const schema = currencySelectSchema('inline');
-            const arraySchema = schema.properties.currencies;
-            arraySchema.validationAsync = {
-                param: 'value',
-                method: 'POST',
-                url: '/validate',
-            };
-            const props = getProps({
-                initialStep: Object.assign(Object.assign({}, basicStep('inline')), { schemas: [schema] }),
-            });
-            it('triggers validation async when an item is selected', async () => {
-                mockHttpClient.mockReset();
-                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { onEvent: vi.fn() })));
-                await user.click(screen.getByRole('checkbox', { name: /EUR Euro/i }));
-                await user.click(screen.getByRole('checkbox', { name: /USD US dollar/i }));
-                await waitFor(() => {
-                    expect(mockHttpClient).toHaveBeenCalledWith('/validate', expect.anything());
-                });
-            });
-        });
-    });
-});