@wise/dynamic-flow-client 5.25.2-experimental-a8a898e → 5.25.2

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('Actions', () => {
+    // TODO: Add more tests here / copy over to revamp when ready.
+    describe('given an action with `exit: true`', () => {
+        describe('when the response is OK', () => {
+            describe('and the body can be parsed to a JSON object', () => {
+                it('should exit the flow with the response body as a result when the action has no result', async () => {
+                    const onError = vi.fn();
+                    const onCompletion = vi.fn();
+                    const httpClient = vi.fn(async () => Promise.resolve(new Response('body', { status: 200 })));
+                    const step = {
+                        id: 'step-id',
+                        title: 'Step Title',
+                        layout: [{ type: 'button', action: { url: '/submit', exit: true } }],
+                        schemas: [],
+                    };
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                    await user.click(await screen.findByRole('button'));
+                    await waitFor(() => {
+                        expect(onCompletion).toHaveBeenCalledTimes(1);
+                    });
+                    expect(onError).not.toHaveBeenCalled();
+                });
+                it('should exit the flow with a merged object of the response body and result when the action has a result', async () => {
+                    const onError = vi.fn();
+                    const onCompletion = vi.fn();
+                    const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ key: 'response body value', extra_key: 'value' }), {
+                        status: 200,
+                    })));
+                    const step = {
+                        id: 'step-id',
+                        title: 'Step Title',
+                        layout: [
+                            {
+                                type: 'button',
+                                action: { url: '/submit', exit: true, result: { key: 'action result value' } },
+                            },
+                        ],
+                        schemas: [],
+                    };
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                    await user.click(await screen.findByRole('button'));
+                    await waitFor(() => {
+                        expect(onCompletion).toHaveBeenCalledTimes(1);
+                    });
+                    expect(onCompletion).toHaveBeenCalledWith(expect.objectContaining({ key: 'action result value', extra_key: 'value' }));
+                    expect(onError).not.toHaveBeenCalled();
+                });
+            });
+            describe('and the body cannot be parsed to a JSON object', () => {
+                it('should exit the flow with the contents of the action result', async () => {
+                    const onError = vi.fn();
+                    const onCompletion = vi.fn();
+                    const httpClient = vi.fn(async () => Promise.resolve(new Response(']} not valid json {[', { status: 200 })));
+                    const step = {
+                        id: 'step-id',
+                        title: 'Step Title',
+                        layout: [
+                            { type: 'button', action: { url: '/submit', exit: true, result: { key: 'value' } } },
+                        ],
+                        schemas: [],
+                    };
+                    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                    await user.click(await screen.findByRole('button'));
+                    await waitFor(() => {
+                        expect(onCompletion).toHaveBeenCalledTimes(1);
+                    });
+                    expect(onCompletion).toHaveBeenCalledWith(expect.objectContaining({ key: 'value' }));
+                    expect(onError).not.toHaveBeenCalled();
+                });
+            });
+        });
+        describe('when the response is NOT OK', () => {
+            it('should not exit the flow, and handle the error response as normal', async () => {
+                const onError = vi.fn();
+                const onCompletion = vi.fn();
+                const httpClient = vi.fn(async () => Promise.resolve(new Response('body', { status: 400 })));
+                const step = {
+                    id: 'step-id',
+                    title: 'Step Title',
+                    layout: [{ type: 'button', action: { url: '/submit', exit: true } }],
+                    schemas: [],
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                await user.click(await screen.findByRole('button'));
+                await waitFor(() => {
+                    expect(screen.getByText(/something went wrong, please try again/i)).toBeInTheDocument();
+                });
+                expect(onCompletion).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('given an non-exit action', () => {
+        describe('when the response contains "X-DF-ResponseType: exit" header', () => {
+            it('should exit the flow with a merged object of the response body and result when the action has a result', async () => {
+                const onError = vi.fn();
+                const onCompletion = vi.fn();
+                const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ key: 'response body value', extra_key: 'value' }), {
+                    status: 200,
+                    headers: { 'X-DF-Response-Type': 'exit' },
+                })));
+                const step = {
+                    id: 'step-id',
+                    title: 'Step Title',
+                    layout: [
+                        {
+                            type: 'button',
+                            action: { url: '/submit', result: { key: 'action result value' } },
+                        },
+                    ],
+                    schemas: [],
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                await user.click(await screen.findByRole('button'));
+                await waitFor(() => {
+                    expect(onCompletion).toHaveBeenCalledTimes(1);
+                });
+                expect(onCompletion).toHaveBeenCalledWith(expect.objectContaining({ key: 'action result value', extra_key: 'value' }));
+                expect(onError).not.toHaveBeenCalled();
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+        });
+        describe('when the response contains an exiting action', () => {
+            it('should exit the flow with the result of the exiting action and not make an additional network request', async () => {
+                const onError = vi.fn();
+                const onCompletion = vi.fn();
+                const httpClient = vi.fn(async () => Promise.resolve(new Response(JSON.stringify({ action: { exit: true, result: { abc: '123' } } }), {
+                    status: 200,
+                })));
+                const step = {
+                    id: 'step-id',
+                    title: 'Step Title',
+                    layout: [
+                        {
+                            type: 'button',
+                            action: { url: '/submit', result: { key: 'action result value' } },
+                        },
+                    ],
+                    schemas: [],
+                };
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", initialStep: step, httpClient: httpClient, onCompletion: onCompletion, onError: onError }));
+                await user.click(await screen.findByRole('button'));
+                await waitFor(() => {
+                    expect(onCompletion).toHaveBeenCalledTimes(1);
+                });
+                expect(onCompletion).toHaveBeenCalledWith(expect.objectContaining({ abc: '123' }));
+                expect(onError).not.toHaveBeenCalled();
+                expect(httpClient).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+});

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { renderWithProviders, respondWith } from '../../test-utils';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const getStepWithBack = (navigation) => ({
+    id: 'back-button-step',
+    title: 'Basic step',
+    navigation,
+    schemas: [
+        {
+            $id: 'schema',
+            type: 'object',
+            displayOrder: ['name'],
+            required: ['name'],
+            properties: {
+                name: {
+                    title: 'Full name',
+                    type: 'string',
+                },
+            },
+        },
+    ],
+    layout: [
+        {
+            type: 'form',
+            schemaId: 'schema',
+        },
+    ],
+});
+describe('DynamicFlow / Back Button', () => {
+    const onCompletion = vi.fn();
+    const onError = vi.fn();
+    const httpClient = vi.fn();
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('when the step contains a back navigation property', () => {
+        it('renders a back button', () => {
+            const backLabel = 'Back to payment methods';
+            const backAction = {
+                method: 'GET',
+                url: '/back',
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: getStepWithBack({ back: { title: backLabel, action: backAction } }), onCompletion: onCompletion, onError: onError }));
+            expect(screen.getByRole('button', { name: backLabel })).toBeInTheDocument();
+        });
+    });
+    describe('when the step contains the deprecated backButton navigation property', () => {
+        it('renders a back button', () => {
+            const backLabel = 'Back to payment methods';
+            const backAction = {
+                method: 'GET',
+                url: '/back',
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: httpClient, initialStep: getStepWithBack({ backButton: { title: backLabel, action: backAction } }), onCompletion: onCompletion, onError: onError }));
+            expect(screen.getByRole('button', { name: backLabel })).toBeInTheDocument();
+        });
+    });
+    it('performs (GET) action on back', async () => {
+        const backLabel = 'Back to payment methods';
+        const backAction = {
+            method: 'GET',
+            url: '/back',
+        };
+        const mockHttpClient = vi.fn();
+        mockHttpClient.mockImplementationOnce(async () => respondWith({
+            // once again bad steps in old tests!!
+            id: 'next-step',
+            title: 'Next step',
+            schemas: [],
+            layout: [],
+        }));
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: getStepWithBack({ back: { title: backLabel, action: backAction } }), onCompletion: onCompletion, onError: onError }));
+        const backButton = screen.getByRole('button', { name: backLabel });
+        await user.click(backButton);
+        expect(mockHttpClient).toHaveBeenCalledWith('/back', expect.objectContaining({ method: 'GET' }));
+        await expect(screen.findByRole('heading', { name: 'Next step' })).resolves.toBeInTheDocument();
+    });
+    describe('when the backButton action specified the POST method', () => {
+        const backLabel = 'Back to payment methods';
+        const backAction = {
+            method: 'POST',
+            url: '/back',
+        };
+        const mockHttpClient = vi.fn();
+        beforeEach(() => {
+            mockHttpClient.mockImplementationOnce(async () => respondWith({
+                // added
+                id: 'next-step',
+                title: 'Next step',
+                schemas: [],
+                layout: [],
+            }));
+        });
+        const initialStep = getStepWithBack({ back: { title: backLabel, action: backAction } });
+        it('performs (POST) action on back', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: initialStep, onCompletion: onCompletion, onError: onError }));
+            const backButton = screen.getByRole('button', { name: backLabel });
+            await user.click(backButton);
+            expect(mockHttpClient).toHaveBeenCalledWith('/back', expect.objectContaining({ method: 'POST' }));
+            await expect(screen.findByRole('heading', { name: 'Next step' })).resolves.toBeInTheDocument();
+        });
+        it('does not display client-side validation errors', async () => {
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "the-flow-id", httpClient: mockHttpClient, initialStep: initialStep, onCompletion: onCompletion, onError: onError }));
+            const backButton = screen.getByRole('button', { name: backLabel });
+            await user.click(backButton);
+            expect(screen.queryByText('Please fill out this field.')).not.toBeInTheDocument();
+            await expect(screen.findByRole('heading', { name: 'Next step' })).resolves.toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,250 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { renderWithProviders, respondWith } from '../../test-utils';
+import DynamicFlowWise from '../../test-utils/DynamicFlowWise';
+import { createEmptyStep } from '../../test-utils/step-utils';
+// This file is a copy of the E2E test in legacy. It should remain as unchanged
+// as possible, to ensure the new client functionality matches the old one.
+const emptyStep = createEmptyStep();
+const initialStep = (schema) => ({
+    id: 'hidden-schema-test-step-id',
+    title: 'Hidden Schema Step Title',
+    layout: [
+        { type: 'form', schemaId: '#schema' },
+        {
+            type: 'button',
+            title: 'Submit',
+            action: { url: '/submit', method: 'POST' },
+        },
+    ],
+    schemas: [
+        Object.assign(Object.assign({}, schema), { $id: '#schema' }),
+    ],
+});
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const mockHttpClient = vi.fn((async (input, init) => Promise.resolve(respondWith(emptyStep))));
+const getProps = (schema, overrides = {}) => (Object.assign({ flowId: 'allof-schema-test-flow-id', initialStep: initialStep(schema), httpClient: mockHttpClient, onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }, overrides));
+beforeEach(() => mockHttpClient.mockClear());
+describe('Given an object schema which is marked as hidden', () => {
+    const schema = {
+        type: 'object',
+        title: 'Hidden Object Schema Title',
+        hidden: true,
+        displayOrder: ['name', 'location'],
+        properties: {
+            name: { type: 'string', title: 'Name' },
+            location: { type: 'string', title: 'Location' },
+        },
+    };
+    it('does not render UI components for the hidden schema', async () => {
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema))));
+        expect(screen.queryByLabelText('Hidden Object Schema Title')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Name')).not.toBeInTheDocument();
+        expect(screen.queryByLabelText('Location')).not.toBeInTheDocument();
+    });
+});
+// this is a new test in revamp
+describe('Given an object schema which is marked as hidden with required properties', () => {
+    it('allows submission and ignores values that arent in the model', async () => {
+        var _a;
+        var _b;
+        const schema = {
+            type: 'object',
+            title: 'Hidden Object Schema Title',
+            hidden: true,
+            displayOrder: ['name', 'location'],
+            required: ['name', 'location'],
+            properties: {
+                name: { type: 'string', title: 'Name' },
+                location: { type: 'string', title: 'Location' },
+            },
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema, { initialStep: Object.assign(Object.assign({}, initialStep(schema)), { model: { name: 'Bob' } }) }))));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+        const lastCall = (_b = mockHttpClient.mock.lastCall) !== null && _b !== void 0 ? _b : [];
+        const requestBody = JSON.parse((_a = lastCall[1]) === null || _a === void 0 ? void 0 : _a.body);
+        expect(requestBody).toEqual({ name: 'Bob' });
+    });
+});
+// this is a new test in revamp
+describe('Given an array tuple schema which is marked as hidden with required properties', () => {
+    it('allows submission and submits nulls when values are missing', async () => {
+        var _a;
+        var _b;
+        const schema = {
+            type: 'array',
+            items: [
+                {
+                    type: 'string',
+                    title: 'name',
+                },
+                {
+                    type: 'number',
+                    title: 'age',
+                },
+            ],
+            hidden: true,
+            title: 'Hidden Array Schema Title',
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema, { initialStep: Object.assign(Object.assign({}, initialStep(schema)), { model: ['Bob'] }) }))));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+        const lastCall = (_b = mockHttpClient.mock.lastCall) !== null && _b !== void 0 ? _b : [];
+        const requestBody = JSON.parse((_a = lastCall[1]) === null || _a === void 0 ? void 0 : _a.body);
+        expect(requestBody).toEqual(['Bob', null]);
+    });
+});
+describe('Given a hidden object schema whose children have default values', () => {
+    it('submits the default values', async () => {
+        var _a;
+        var _b;
+        const schema = {
+            type: 'object',
+            title: 'Hidden Object Schema Title',
+            hidden: true,
+            displayOrder: ['name', 'location'],
+            properties: {
+                name: { type: 'string', title: 'Name', default: 'Bob' },
+                location: { type: 'string', title: 'Location', default: 'Earth' },
+            },
+        };
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema))));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(mockHttpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+        const lastCall = (_b = mockHttpClient.mock.lastCall) !== null && _b !== void 0 ? _b : [];
+        const requestBody = JSON.parse((_a = lastCall[1]) === null || _a === void 0 ? void 0 : _a.body);
+        expect(requestBody).toEqual({ name: 'Bob', location: 'Earth' });
+    });
+});
+describe('Given an object schema with one of its properties marked as hidden', () => {
+    const schema = {
+        type: 'object',
+        displayOrder: ['name', 'location'],
+        required: ['location'],
+        properties: {
+            name: { type: 'string', title: 'Name' },
+            location: { type: 'string', title: 'Location', hidden: true },
+        },
+    };
+    it('only renders the schemas that are not hidden', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema))));
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.queryByText('Location')).not.toBeInTheDocument();
+    });
+    it('allows submitting even if the required hidden schema is doesnt have a valid model', async () => {
+        const props = getProps(schema);
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+    });
+    it('only submits the valid model parts', async () => {
+        var _a;
+        var _b;
+        const step = Object.assign(Object.assign({}, initialStep(schema)), { model: { name: 'Bob', location: 123 } });
+        const props = getProps(schema, { initialStep: step });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+        const lastCall = (_b = mockHttpClient.mock.lastCall) !== null && _b !== void 0 ? _b : [];
+        const requestBody = JSON.parse((_a = lastCall[1]) === null || _a === void 0 ? void 0 : _a.body);
+        expect(requestBody).not.toHaveProperty('location');
+        expect(requestBody).toEqual({ name: 'Bob' });
+    });
+});
+describe('Given an object schema with one of its properties being a const and hidden', () => {
+    const schema = {
+        type: 'object',
+        displayOrder: ['name', 'profileId'],
+        required: ['profileId'],
+        properties: {
+            name: { type: 'string', title: 'Name' },
+            profileId: { const: '12345678', hidden: true },
+        },
+    };
+    it('allows submitting because the hidden const provides its own value', async () => {
+        const props = getProps(schema);
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+    });
+});
+describe('Given a oneOf schema with hidden const options', () => {
+    const schema = {
+        type: 'object',
+        displayOrder: ['currency'],
+        required: ['currency'],
+        properties: {
+            currency: {
+                title: 'Currency',
+                oneOf: [
+                    { const: 'EUR', title: 'EUR', hidden: true },
+                    { const: 'GBP', title: 'GBP', hidden: true },
+                    { const: 'USD', title: 'USD', hidden: true },
+                ],
+                control: 'radio',
+            },
+        },
+    };
+    it('renders all options, including the hidden ones', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema))));
+        // We cannot hide hidden options because of backwards compatibility
+        // some flows may have hidden options by accident
+        expect(screen.getByLabelText('EUR')).toBeInTheDocument();
+        expect(screen.getByLabelText('GBP')).toBeInTheDocument();
+        expect(screen.getByLabelText('USD')).toBeInTheDocument();
+    });
+});
+describe('Given a oneOf schema with hidden non-const options', () => {
+    const schema = {
+        type: 'object',
+        displayOrder: ['recipientType'],
+        required: ['recipientType'],
+        properties: {
+            recipientType: {
+                title: 'Recipient Type',
+                oneOf: [
+                    {
+                        type: 'object',
+                        title: 'Person',
+                        displayOrder: ['name', 'something'],
+                        required: ['name', 'something'],
+                        properties: {
+                            name: { type: 'string', title: 'Name' },
+                            something: { type: 'string', title: 'Something', hidden: true },
+                        },
+                    },
+                    {
+                        type: 'object',
+                        title: 'Company',
+                        displayOrder: ['companyName', 'something'],
+                        required: ['companyName', 'something'],
+                        properties: {
+                            companyName: { type: 'string', title: 'Company Name' },
+                            something: { type: 'string', title: 'Something', hidden: true },
+                        },
+                    },
+                ],
+                control: 'tab',
+            },
+        },
+    };
+    it('renders all options, including the hidden ones', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getProps(schema))));
+        // We cannot hide hidden options because of backwards compatibility
+        // some flows may have hidden options by accident
+        expect(screen.getByRole('tab', { name: 'Person' })).toBeInTheDocument();
+        expect(screen.getByRole('tab', { name: 'Company' })).toBeInTheDocument();
+        expect(screen.getByLabelText('Name')).toBeInTheDocument();
+        expect(screen.queryByLabelText('Something')).not.toBeInTheDocument();
+    });
+    it('allows submission even if hidden properties inside the oneOf schema are not valid', async () => {
+        const props = getProps(schema);
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.type(screen.getByLabelText('Name'), 'John Doe');
+        await user.click(screen.getByText('Submit'));
+        await waitFor(() => expect(props.httpClient).toHaveBeenCalledWith('/submit', expect.anything()));
+    });
+});