@wise/dynamic-flow-client 5.12.1 → 5.13.0-experimental-13d828c

package/build/tests/ModalBehavior.test.js

@@ -1,149 +0,0 @@
-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

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