@wise/dynamic-flow-client 5.12.0 → 5.12.1

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

@@ -0,0 +1,501 @@
+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 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());
+                });
+            });
+        });
+    });
+});