@wise/dynamic-flow-client 5.25.1 → 5.25.2

package/build/tests/Subflow.native.test.js

@@ -0,0 +1,448 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react';
+import { renderWithProviders, respondWith, respondWithDelay, wait } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTimeAsync });
+const NativeDummyComponent = ({ onCompletion, onCancellation, onError, }) => (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Native Flow" }), _jsx("button", { type: "button", onClick: () => onCompletion({ some: 'result' }), children: "Complete subflow" }), _jsx("button", { type: "button", onClick: () => onError(new Error('Subflow error')), children: "Error subflow" }), _jsx("button", { type: "button", onClick: () => onCancellation(), children: "Cancel subflow" })] }));
+const nativeSubflowHandlers = [
+    {
+        id: 'dummy-modal',
+        getPresentationMode: () => 'modal',
+        render: NativeDummyComponent,
+    },
+    {
+        id: 'dummy-push',
+        getPresentationMode: () => 'push',
+        render: NativeDummyComponent,
+    },
+];
+const getNativesubflowBehaviorOrBody = (nativeSubflowId, payload) => ({
+    type: 'subflow',
+    referrerId: 'subflow-referrer-id',
+    launchConfig: {
+        type: 'native',
+        id: nativeSubflowId,
+        payload,
+    },
+    resultKey: 'subflowResult',
+    onCompletion: {
+        type: 'action',
+        action: {
+            url: '/submit-subflow-result',
+            method: 'POST',
+        },
+    },
+    onError: {
+        type: 'modal',
+        title: 'Subflow failed',
+        content: [
+            {
+                text: 'OH NO!',
+                type: 'paragraph',
+            },
+            {
+                title: 'Try Again (refresh behavior)',
+                behavior: {
+                    type: 'refresh',
+                },
+                type: 'button',
+            },
+        ],
+    },
+});
+describe('Subflow (Native)', () => {
+    const getDefaultProps = () => ({
+        flowId: 'flow-id',
+        nativeSubflowHandlers,
+        httpClient: vi.fn(),
+        onCompletion: vi.fn(),
+        onError: vi.fn(),
+        onEvent: vi.fn(),
+        onLog: vi.fn(),
+    });
+    const cases = [
+        [
+            'given a subflow behavior on a button',
+            (subflow) => ({
+                mockHttpClient: vi.fn(),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open subflow',
+                            behavior: subflow,
+                        },
+                    ],
+                },
+            }),
+        ],
+        [
+            'given a subflow behavior on a call-to-action',
+            (subflow) => ({
+                mockHttpClient: vi.fn(),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'alert',
+                            markdown: 'An alert with a CTA that contains a subflow behavior.',
+                            callToAction: {
+                                title: 'Open subflow',
+                                behavior: subflow,
+                            },
+                        },
+                    ],
+                },
+            }),
+        ],
+        [
+            'given a subflow response',
+            (subflow) => ({
+                mockHttpClient: vi
+                    .fn()
+                    .mockImplementationOnce(async () => respondWith(subflow, { headers: [['X-DF-Response-Type', 'subflow']] })),
+                initialStep: {
+                    id: 'my-step',
+                    title: 'Step',
+                    schemas: [],
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Open subflow',
+                            behavior: {
+                                type: 'action',
+                                action: {
+                                    url: '/start-subflow',
+                                    method: 'POST',
+                                },
+                            },
+                        },
+                    ],
+                },
+            }),
+        ],
+    ];
+    describe.each(cases)('%s', (name, getProps) => {
+        describe('given the subflow is modally presented', () => {
+            const subflow = getNativesubflowBehaviorOrBody('dummy-modal', { some: 'data' });
+            it('displays the subflow modally with the correct events', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({}));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await waitFor(() => {
+                    expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                });
+                // content is still behind the modal
+                expect(screen.getByText('Open subflow')).toBeInTheDocument();
+                // expect(onEvent).toHaveBeenCalledWith(
+                //   'Dynamic Flow - Behavior Triggered',
+                //   expect.objectContaining({
+                //   }),
+                // );
+            });
+            it('refreshAfter is suspended when the subflow modal is open', async () => {
+                const refreshAfter = new Date(Date.now() + 1000).toISOString();
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockImplementation(async (input) => {
+                    if (input === '/polling-url') {
+                        return respondWith('', { status: 200 });
+                    }
+                    return respondWith({});
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { refreshAfter, refreshUrl: '/refresh' }), httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await act(async () => vi.advanceTimersByTimeAsync(1100));
+                expect(httpClient).not.toHaveBeenCalledWith('/refresh', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByRole('button', { name: /cancel subflow/i }));
+            });
+            it('refreshAfter is resumed when the subflow is cancelled', async () => {
+                const refreshAfter = new Date(Date.now() + 2000).toISOString();
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockReturnValueOnce(respondWith({}));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { refreshAfter, refreshUrl: '/refresh' }), httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                await act(async () => vi.advanceTimersByTimeAsync(5000));
+                await user.click(screen.getByRole('button', { name: /cancel subflow/i }));
+                // the timer isn't being started reliably in before the assertions
+                // (i.e. there are no fake timers to advance yet), so adding a manual wait
+                await act(async () => wait(500));
+                await waitFor(() => {
+                    expect(screen.queryByText('Native Flow')).not.toBeInTheDocument();
+                });
+                await act(async () => {
+                    await vi.advanceTimersByTimeAsync(1000);
+                });
+                await waitFor(async () => {
+                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                });
+            });
+        });
+        describe('given the subflow is push presented', () => {
+            const subflow = getNativesubflowBehaviorOrBody('dummy-push', { some: 'data' });
+            it('displays the subflow with the correct events', async () => {
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({}));
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                await user.click(screen.getByText('Open subflow'));
+                expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                // parent content is gone
+                expect(screen.queryByText('Open subflow')).not.toBeInTheDocument();
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Native Subflow Triggered', expect.objectContaining({
+                    nativeSubflowId: 'dummy-push',
+                    referrerId: 'subflow-referrer-id',
+                }));
+            });
+        });
+        describe('when a subflow completes', () => {
+            describe('the onCompletion behavior is an action', () => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'subflow-referrer-id',
+                    launchConfig: {
+                        type: 'native',
+                        id: 'dummy-push',
+                        payload: {},
+                    },
+                    resultKey: 'subflowResult',
+                    onCompletion: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-completion',
+                            data: {
+                                parentData: 'asdf',
+                                duplicatedData: 'abc',
+                            },
+                        },
+                    },
+                };
+                it('removes the subflow and the action is triggered merging the parent content with the subflow result', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                        id: 'step-2',
+                        title: 'Step 2',
+                        schemas: [],
+                        layout: [],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { features: { nativeBack: true }, initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    expect(httpClient).toHaveBeenCalledWith('/subflow-completion', expect.objectContaining({
+                        body: JSON.stringify({
+                            parentData: 'asdf',
+                            duplicatedData: 'abc',
+                            subflowResult: { some: 'result' },
+                        }),
+                    }));
+                    expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Native Subflow Succeeded', expect.objectContaining({
+                        nativeSubflowId: 'dummy-push',
+                        referrerId: 'subflow-referrer-id',
+                    }));
+                    await waitFor(() => {
+                        expect(screen.queryByText('Native Flow')).not.toBeInTheDocument();
+                    });
+                });
+                it('shows the loader on the final step of the subflow, while the onCompletion behavior is running', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient.mockImplementationOnce(async () => {
+                        return respondWithDelay({ id: 'second-step', title: 'Next parent step', layout: [], schemas: [] }, 1000);
+                    });
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Complete subflow' }));
+                    // the native component remains visible while the onCompletion action is running
+                    expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                    await waitFor(() => {
+                        expect(screen.getByText('Next parent step')).toBeInTheDocument();
+                    });
+                    expect(screen.queryByText('Native Flow')).not.toBeInTheDocument();
+                });
+            });
+        });
+        describe('when a subflow fails', () => {
+            describe('and the onError behavior is an action', () => {
+                const subflow = {
+                    type: 'subflow',
+                    referrerId: 'subflow-referrer-id',
+                    launchConfig: {
+                        type: 'native',
+                        id: 'dummy-push',
+                        payload: {},
+                    },
+                    onError: {
+                        type: 'action',
+                        action: {
+                            url: '/subflow-error',
+                        },
+                    },
+                };
+                it('removes the subflow and triggers the behavior', async () => {
+                    const onEvent = vi.fn();
+                    const { initialStep, mockHttpClient } = getProps(subflow);
+                    const httpClient = mockHttpClient.mockResolvedValueOnce(respondWith({
+                        id: 'step-2',
+                        title: 'Step 2',
+                        schemas: [],
+                        layout: [],
+                    }));
+                    renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { features: { nativeBack: true }, initialStep: initialStep, httpClient: httpClient, onEvent: onEvent })));
+                    await user.click(screen.getByText('Open subflow'));
+                    expect(screen.getByText('Native Flow')).toBeInTheDocument();
+                    await user.click(screen.getByRole('button', { name: 'Error subflow' }));
+                    expect(httpClient).toHaveBeenCalledWith('/subflow-error', expect.objectContaining({
+                        body: undefined,
+                    }));
+                    expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Native Subflow Failed', expect.objectContaining({
+                        nativeSubflowId: 'dummy-push',
+                        referrerId: 'subflow-referrer-id',
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                        error: expect.objectContaining({ message: 'Subflow error' }),
+                    }));
+                    await waitFor(() => {
+                        expect(screen.queryByText('Native Flow')).not.toBeInTheDocument();
+                    });
+                });
+            });
+        });
+    });
+    it('sends the X-DF-Native-Capabilities header on each HTTP request', async () => {
+        const initialStep = {
+            id: 'my-step',
+            title: 'Step',
+            schemas: [],
+            layout: [
+                {
+                    type: 'button',
+                    title: 'Click me',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: '/some-action',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        };
+        const httpClient = vi.fn().mockResolvedValueOnce(respondWith({}));
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { nativeSubflowHandlers: [
+                {
+                    id: 'banana',
+                    getCapabilityComments: () => ({ color: 'yellow', ripe: 'yes' }),
+                    getPresentationMode: () => 'modal',
+                    render: () => null,
+                },
+                {
+                    id: 'orange',
+                    getPresentationMode: () => 'push',
+                    render: () => null,
+                },
+            ], initialStep,
+            httpClient });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.click(screen.getByText('Click me'));
+        expect(httpClient).toHaveBeenCalledWith('/some-action', expect.objectContaining({
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            headers: expect.objectContaining({
+                'x-df-native-capabilities': 'banana(color:yellow,ripe:yes);orange',
+            }),
+        }));
+    });
+    it('does NOT send the X-DF-Native-Capabilities header when the request is made to a different origin', async () => {
+        const initialStep = {
+            id: 'my-step',
+            title: 'Step',
+            schemas: [],
+            layout: [
+                {
+                    type: 'button',
+                    title: 'Click me',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: 'https://other-origin.com/some-action',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        };
+        const httpClient = vi.fn().mockResolvedValueOnce(respondWith({}));
+        const props = Object.assign(Object.assign({}, getDefaultProps()), { nativeSubflowHandlers: [
+                {
+                    id: 'banana',
+                    getPresentationMode: () => 'modal',
+                    render: () => null,
+                },
+            ], initialStep,
+            httpClient });
+        renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, props)));
+        await user.click(screen.getByText('Click me'));
+        expect(httpClient).toHaveBeenCalledWith('https://other-origin.com/some-action', expect.not.objectContaining({
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+            headers: expect.objectContaining({
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                'x-df-native-capabilities': expect.anything(),
+            }),
+        }));
+    });
+    describe.each([cases[0], cases[1]])('%s', (_, getProps) => {
+        describe('given the subflow is modally presented', () => {
+            const subflow = getNativesubflowBehaviorOrBody('dummy-modal', { some: 'data' });
+            it('any polling requests are paused when the subflow modal is open, and resumed when the subflow modal is closed', async () => {
+                const polling = {
+                    url: '/polling-url',
+                    maxAttempts: 100,
+                    interval: 200,
+                    onError: { behavior: { type: 'link', url: '/error' } },
+                };
+                const onEvent = vi.fn();
+                const { initialStep, mockHttpClient } = getProps(subflow);
+                const httpClient = mockHttpClient.mockImplementation(async (input) => {
+                    if (input === '/polling-url') {
+                        return respondWith('', { status: 200 });
+                    }
+                    if (input === '/start-subflow') {
+                        return respondWith(subflow, { headers: [['X-DF-Response-Type', 'subflow']] });
+                    }
+                    return respondWith({
+                        id: 'subflow-step',
+                        title: 'Subflow Step',
+                        schemas: [],
+                        layout: [],
+                    });
+                });
+                renderWithProviders(_jsx(DynamicFlowWise, Object.assign({}, getDefaultProps(), { initialStep: Object.assign(Object.assign({}, initialStep), { polling }), httpClient: httpClient, onEvent: onEvent })));
+                await act(async () => vi.advanceTimersByTimeAsync(200));
+                expect(httpClient).toHaveBeenCalledWith('/polling-url', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByText('Open subflow'));
+                // await act(async () => vi.advanceTimersByTimeAsync(400));
+                expect(httpClient).not.toHaveBeenCalledWith('/polling-url', expect.anything());
+                httpClient.mockClear();
+                await user.click(screen.getByRole('button', { name: /cancel subflow/i }));
+                await waitFor(() => {
+                    expect(screen.queryByText('Native Flow')).not.toBeInTheDocument();
+                });
+                await act(async () => vi.advanceTimersByTimeAsync(200));
+                expect(httpClient).toHaveBeenCalledWith('/polling-url', expect.anything());
+            });
+        });
+    });
+});

package/build/tests/Submission.Const.test.js

@@ -0,0 +1,70 @@
+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 });
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+    onLink: vi.fn(),
+});
+const getStep = () => ({
+    id: 'step-id',
+    title: 'Submission test',
+    schemas: [
+        {
+            $id: '#schema',
+            title: 'Select a one of the following options',
+            control: 'radio',
+            oneOf: [
+                {
+                    const: '',
+                    title: 'Empty String',
+                },
+                {
+                    const: 'banana',
+                    title: 'Banana',
+                },
+            ],
+        },
+    ],
+    layout: [
+        {
+            schemaId: '#schema',
+            type: 'form',
+        },
+        {
+            type: 'button',
+            title: 'Submit',
+            behavior: {
+                type: 'action',
+                action: { url: '/submit' },
+            },
+        },
+    ],
+});
+describe('Const schema submission', () => {
+    describe('when the const schema value is an empty string', () => {
+        it('should submit the value as an empty string, and not null', async () => {
+            const step = getStep();
+            const httpClient = vi.fn();
+            const props = getDefaultProps();
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ httpClient: httpClient, initialStep: step }, props)));
+            // select the Empty String option
+            const emptyStringOption = screen.getByLabelText('Empty String');
+            await user.click(emptyStringOption);
+            const submitButton = screen.getByText('Submit');
+            await user.click(submitButton);
+            await waitFor(() => {
+                expect(httpClient).toHaveBeenCalledWith('/submit', expect.objectContaining({
+                    body: '""',
+                }));
+            });
+        });
+    });
+});