@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/ModalBehavior.test.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('Modal Behavior', () => {
+    const step = {
+        id: 'step-id',
+        title: 'Modal Behavior',
+        schemas: [],
+        layout: [
+            {
+                type: 'review',
+                fields: [],
+                title: 'Review Layout',
+                callToAction: {
+                    title: 'Open Modal',
+                    behavior: {
+                        type: 'modal',
+                        content: [{ type: 'paragraph', text: 'This is a modal from a review' }],
+                    },
+                },
+            },
+            {
+                type: 'button',
+                title: 'Submit',
+                behavior: {
+                    type: 'modal',
+                    content: [
+                        {
+                            type: 'paragraph',
+                            text: 'This is paragraph body',
+                        },
+                        {
+                            type: 'button',
+                            title: 'Submit 2',
+                            behavior: {
+                                type: 'modal',
+                                title: 'Second Modal Title',
+                                content: [
+                                    {
+                                        type: 'button',
+                                        title: 'Dismiss second modal',
+                                        behavior: {
+                                            type: 'dismiss',
+                                        },
+                                    },
+                                    {
+                                        type: 'button',
+                                        title: 'Action',
+                                        behavior: {
+                                            type: 'action',
+                                            action: {
+                                                url: '/action',
+                                            },
+                                        },
+                                    },
+                                    {
+                                        type: 'button',
+                                        title: 'Refresh',
+                                        behavior: {
+                                            type: 'refresh',
+                                        },
+                                    },
+                                ],
+                            },
+                        },
+                        {
+                            type: 'button',
+                            title: 'Dismiss',
+                            behavior: {
+                                type: 'dismiss',
+                            },
+                        },
+                    ],
+                    title: 'This is the modal title',
+                },
+            },
+        ],
+    };
+    describe('given a button with a modal behavior', () => {
+        it('clicking the button opens the modal', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+            await user.click(screen.getByText('Submit'));
+            expect(screen.getByText('This is the modal title')).toBeInTheDocument();
+        });
+        describe('given a button with modal behavior inside that modal', () => {
+            it('clicking the button opens the modal', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+                await user.click(screen.getByText('Submit'));
+                expect(screen.getByText('This is the modal title')).toBeInTheDocument();
+                await user.click(screen.getByText('Submit 2'));
+                expect(screen.getByText('Second Modal Title')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a button with dismiss behavior is clicked from inside a modal', () => {
+        it('closees the topmost modal', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+            await user.click(screen.getByText('Submit'));
+            expect(screen.getByText('This is the modal title')).toBeInTheDocument();
+            await user.click(screen.getByRole('button', { name: 'Dismiss' }));
+            await waitFor(() => {
+                expect(screen.queryByText('This is the modal title')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when a button with action behavior is clicked from inside a modal', () => {
+        it('closes all modals', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+            await user.click(screen.getByText('Submit'));
+            await user.click(screen.getByText('Submit 2'));
+            await user.click(screen.getByRole('button', { name: 'Action' }));
+            await waitFor(() => {
+                expect(screen.queryByText('This is the modal title')).not.toBeInTheDocument();
+            });
+            expect(screen.queryByText('Second modal title')).not.toBeInTheDocument();
+        });
+    });
+    describe('when a button with refresh behavior is clicked from inside a modal', () => {
+        it('closes all modals (even when it returns a 304 Not Modified)', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn().mockImplementation(async () => respondWith(null, { status: 304 })), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+            await user.click(screen.getByText('Submit'));
+            await user.click(screen.getByText('Submit 2'));
+            await user.click(screen.getByRole('button', { name: 'Refresh' }));
+            await waitFor(() => {
+                expect(screen.queryByText('This is the modal title')).not.toBeInTheDocument();
+            });
+            expect(screen.queryByText('Second modal title')).not.toBeInTheDocument();
+        });
+    });
+    describe('when a review CTA with modal behavior is clicked', () => {
+        it('opens the modal', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: vi.fn(), onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(screen.getByText('Modal Behavior')).toBeInTheDocument();
+            await user.click(screen.getByText('Open Modal'));
+            await waitFor(() => {
+                expect(screen.getByText('This is a modal from a review')).toBeInTheDocument();
+            });
+        });
+    });
+});

package/build/tests/MoneyInput.test.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { act } from 'react';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('MoneyInput component', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const getInitialStep = (overrides) => {
+        var _a;
+        return ({
+            id: 'step',
+            title: 'Money Input',
+            description: 'A money input with amount and currency',
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#schema',
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    control: 'primary',
+                    action: {
+                        url: '/submit',
+                    },
+                },
+            ],
+            schemas: [
+                {
+                    $id: '#schema',
+                    type: 'object',
+                    title: 'Money Input (object schema title)',
+                    description: 'A money input with amount and currency (object schema description)',
+                    format: 'money',
+                    properties: Object.assign({ currency: Object.assign({ oneOf: [
+                                {
+                                    const: 'USD',
+                                    title: 'USD',
+                                    description: 'US Dollar',
+                                },
+                                {
+                                    const: 'EUR',
+                                    title: 'EUR',
+                                    description: 'Euro',
+                                },
+                                {
+                                    const: 'GBP',
+                                    title: 'GBP',
+                                    description: 'British Pound',
+                                },
+                            ] }, overrides === null || overrides === void 0 ? void 0 : overrides.currencySchemaOverrides), amount: Object.assign({ type: 'string', format: 'numeric', validationMessages: { required: 'Please enter an amount.' } }, overrides === null || overrides === void 0 ? void 0 : overrides.amountSchemaOverrides) }, overrides === null || overrides === void 0 ? void 0 : overrides.additionalProperties),
+                    displayOrder: ['currency', 'amount', ...Object.keys((_a = overrides === null || overrides === void 0 ? void 0 : overrides.additionalProperties) !== null && _a !== void 0 ? _a : [])],
+                    required: ['currency', 'amount'],
+                },
+            ],
+            refreshUrl: '/refresh',
+        });
+    };
+    describe('when the model contains an amount', () => {
+        describe('and the amount is valid', () => {
+            const cases = ['123', '10.1', '1', '0', '0.1', '000.000001', '.123', '123.'];
+            test.each(cases)('should initialise the component with amount: %s', async (amount) => {
+                const props = getDefaultProps();
+                const initialStep = getInitialStep();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: Object.assign(Object.assign({}, initialStep), { model: { amount } }) })));
+                await user.click(screen.getByRole('button', { name: 'Submit' }));
+                expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                    body: JSON.stringify({ amount, currency: 'USD' }),
+                }));
+            });
+        });
+        describe('and the amount is invalid (contains letters, thousand separator, multiple decimals, is negative)', () => {
+            const cases = ['abc', '123abc', '123,456', '1.2.3', '-1'];
+            test.each(cases)('should show validation error for amount: %s', async (amount) => {
+                const props = getDefaultProps();
+                const initialStep = getInitialStep();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: Object.assign(Object.assign({}, initialStep), { model: { amount } }) })));
+                await user.click(screen.getByRole('button', { name: 'Submit' }));
+                expect(screen.getByText('Please enter an amount.')).toBeInTheDocument();
+                expect(props.httpClient).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('When the "amount" schema is required', () => {
+        it('should show validation error when submitting empty form', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('Please enter an amount.')).toBeInTheDocument();
+            });
+        });
+        it('should show validation error when a value is cleared and then submitted', async () => {
+            const props = getDefaultProps();
+            const initialStep = Object.assign(Object.assign({}, getInitialStep()), { model: { amount: '50', currency: 'USD' } });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            const amountInput = screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            });
+            await user.clear(amountInput);
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('Please enter an amount.')).toBeInTheDocument();
+            });
+        });
+        it('should accept 0 as a valid amount', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            const amountInput = screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            });
+            await user.type(amountInput, '0');
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: JSON.stringify({ amount: '0', currency: 'USD' }),
+            }));
+        });
+    });
+    describe('When the "amount" schema has a "minimum" constraint', () => {
+        it('should show validation error when submitting an amount below the minimum', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep({
+                amountSchemaOverrides: {
+                    type: 'string',
+                    minimum: '4.25',
+                    validationMessages: { minimum: 'Amount must be at least 4.25.' },
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            const amountInput = screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            });
+            await user.type(amountInput, '4.10');
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('Amount must be at least 4.25.')).toBeInTheDocument();
+            });
+        });
+        it('should show validation error when submitting an amount above the maximum', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep({
+                amountSchemaOverrides: {
+                    type: 'string',
+                    maximum: '99.99',
+                    validationMessages: { maximum: 'Amount must be at most 99.99.' },
+                },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            const amountInput = screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            });
+            await user.type(amountInput, '100');
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('Amount must be at most 99.99.')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('When the "currency" schema has onChange behavior', () => {
+        it('should trigger the specified behavior when changing currency', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep({
+                currencySchemaOverrides: { onChange: { type: 'refresh' } },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            await user.click(screen.getByRole('combobox', { name: 'Select currency' }));
+            await user.click(screen.getByRole('option', { name: 'EUR Euro' }));
+            await waitFor(() => {
+                expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.any(Object));
+            });
+        });
+    });
+    describe('When the "amount" schema has onChange behavior', () => {
+        it('should trigger the specified behavior when changing amount (debounced)', async () => {
+            const localUser = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+            const props = getDefaultProps();
+            const initialStep = getInitialStep({
+                amountSchemaOverrides: { onChange: { type: 'refresh' } },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            const amountInput = screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            });
+            await localUser.type(amountInput, '123.45');
+            await act(async () => {
+                vi.runAllTimers();
+            });
+            await waitFor(() => {
+                expect(props.httpClient).toHaveBeenCalledWith('/refresh', expect.any(Object));
+            });
+        });
+    });
+    describe('when the object schema contains other const or hidden properties', () => {
+        const props = getDefaultProps();
+        const initialStep = Object.assign(Object.assign({}, getInitialStep({
+            additionalProperties: {
+                hiddenProp: { type: 'string', hidden: true, const: 'hiddenValue' },
+                constProp: { const: 'constValue' },
+            },
+        })), { model: { amount: '99.99', currency: 'USD' } });
+        it('should still render the money input correctly', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            expect(screen.getByRole('textbox', {
+                name: 'Money Input (object schema title)',
+            })).toBeInTheDocument();
+        });
+        it('should submit the correct model including the const and hidden properties', async () => {
+            const httpClient = vi.fn();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep, httpClient: httpClient })));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                body: JSON.stringify({
+                    amount: '99.99',
+                    currency: 'USD',
+                    hiddenProp: 'hiddenValue',
+                    constProp: 'constValue',
+                }),
+            }));
+        });
+    });
+    describe('Grouped currencies', () => {
+        describe('when grouping tags are NOT present in currencies', () => {
+            it('should render currencies without grouping', async () => {
+                const props = getDefaultProps();
+                const initialStep = getInitialStep();
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+                await user.click(screen.getByRole('combobox', { name: 'Select currency' }));
+                await waitFor(() => {
+                    expect(screen.getByRole('option', { name: 'USD US Dollar' })).toBeInTheDocument();
+                });
+                expect(screen.queryByText('All')).not.toBeInTheDocument();
+            });
+        });
+        describe('when grouping tags are present in currencies', () => {
+            it('should render currencies grouped by known tags', async () => {
+                const props = getDefaultProps();
+                const initialStep = getInitialStep();
+                const { oneOf } = initialStep.schemas[0].properties
+                    .currency;
+                // Add some grouping tags to the currency options
+                oneOf.forEach((option, index) => {
+                    const constSchemaOption = option;
+                    constSchemaOption.tags = [];
+                    if (index % 2 === 0) {
+                        constSchemaOption.tags.push('popular');
+                    }
+                    if (index % 4 === 0) {
+                        constSchemaOption.tags.push('recent');
+                    }
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+                await user.click(screen.getByRole('combobox', { name: 'Select currency' }));
+                await waitFor(() => {
+                    expect(screen.getByText('All')).toBeInTheDocument();
+                });
+                expect(screen.getByText('Popular')).toBeInTheDocument();
+                expect(screen.getByText('Recent')).toBeInTheDocument();
+            });
+        });
+    });
+    describe('When currency codes are not string values', () => {
+        it('should throw an error during rendering', async () => {
+            const props = getDefaultProps();
+            const initialStep = getInitialStep({
+                currencySchemaOverrides: { oneOf: [{ const: 123 }, { const: 456 }] },
+            });
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+            expect(props.onError).toHaveBeenCalledWith(expect.any(Error));
+            expect(props.onError.mock.calls[0][0].message).toMatch(/only supports string currency codes/i);
+        });
+    });
+    describe('When the step contains validation errors', () => {
+        describe('for the amount schema', () => {
+            it('should display the validation errors on the MoneyInput component', async () => {
+                const props = getDefaultProps();
+                const initialStep = Object.assign(Object.assign({}, getInitialStep()), { errors: { validation: { amount: 'Amount must be greater than zero.' } } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+                await waitFor(() => {
+                    expect(screen.getByText('Amount must be greater than zero.')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('for the currency schema', () => {
+            it('should display the validation errors on the MoneyInput component', async () => {
+                const props = getDefaultProps();
+                const initialStep = Object.assign(Object.assign({}, getInitialStep()), { errors: { validation: { currency: 'Please select a better currency.' } }, model: { amount: '50', currency: 'USD' } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+                await waitFor(() => {
+                    expect(screen.getByText('Please select a better currency.')).toBeInTheDocument();
+                });
+            });
+        });
+        describe('for the object schema', () => {
+            it('should display the validation errors on the MoneyInput component', async () => {
+                const props = getDefaultProps();
+                const initialStep = Object.assign(Object.assign({}, getInitialStep()), { errors: { validation: 'The money input is invalid.' }, model: { amount: '50', currency: 'USD' } });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props, { initialStep: initialStep })));
+                await waitFor(() => {
+                    expect(screen.getByText('The money input is invalid.')).toBeInTheDocument();
+                });
+            });
+        });
+    });
+});