@wise/dynamic-flow-client 5.12.0 → 5.12.1

package/build/tests/ScrollToError.test.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders, respondWith, respondWithDelay } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import userEvent from '@testing-library/user-event';
+import { screen, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { act } from 'react';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const WINDOW_HEIGHT = 768;
+const WINDOW_WIDTH = 1024;
+const ELEMENT_HEIGHT = 100;
+const getDefaultProps = () => ({
+    flowId: 'flow-id',
+    onCompletion: vi.fn(),
+    onError: vi.fn(),
+    onEvent: vi.fn(),
+    onLog: vi.fn(),
+});
+const makeStep = (overrides = {}) => (Object.assign({ id: 'step-id', title: 'Step', schemas: [], layout: [] }, overrides));
+const getMockBoundingClientRect = (top) => vi.fn(() => ({
+    top,
+    bottom: top + ELEMENT_HEIGHT,
+    left: 0,
+    right: WINDOW_WIDTH,
+    width: WINDOW_WIDTH,
+    height: ELEMENT_HEIGHT,
+    x: 0,
+    y: top,
+    toJSON: () => { },
+}));
+describe('Scrolling to global error', () => {
+    beforeEach(() => {
+        // Mock window height
+        Object.defineProperty(window, 'innerHeight', {
+            writable: true,
+            configurable: true,
+            value: WINDOW_HEIGHT,
+        });
+    });
+    describe('when loading the initial step', () => {
+        it('does not attempt to scroll to the top of the step (initialStep)', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({ id: 'initial-step', title: 'Initial Step' }), httpClient: vi.fn() }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+        it('does not attempt to scroll to the top of the step (initialAction)', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'first-loaded-step', title: 'First Loaded Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialAction: { url: '/' }, httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('First Loaded Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when loading a step', () => {
+        it('attempts to scroll back up to the top of the step', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'second-step', title: 'Second Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({
+                    id: 'initial-step',
+                    title: 'Initial Step',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Next',
+                            behavior: { type: 'action', action: { url: '/next', method: 'POST' } },
+                        },
+                    ],
+                }), httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Next' }));
+            await waitFor(() => {
+                expect(screen.getByText('Second Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        });
+        it('does not attempt to scroll if the top of the step is already visible inside the viewport', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT / 2);
+            const httpClient = vi
+                .fn()
+                .mockImplementation(async () => respondWith(makeStep({ id: 'second-step', title: 'Second Step' })));
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: makeStep({
+                    id: 'initial-step',
+                    title: 'Initial Step',
+                    layout: [
+                        {
+                            type: 'button',
+                            title: 'Next',
+                            behavior: { type: 'action', action: { url: '/next', method: 'POST' } },
+                        },
+                    ],
+                }), httpClient: httpClient }, getDefaultProps())));
+            await waitFor(() => {
+                expect(screen.getByText('Initial Step')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Next' }));
+            await waitFor(() => {
+                expect(screen.getByText('Second Step')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when an action results in an error', () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementation(async () => respondWithDelay({ error: 'There was a problem' }, 100, { status: 400 }));
+        const initialStep = makeStep({
+            layout: [
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    behavior: {
+                        type: 'action',
+                        action: { url: '/submit', method: 'POST' },
+                    },
+                },
+            ],
+        });
+        it('shows a global error which is scrolled into view', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: initialStep, httpClient: httpClient }, getDefaultProps())));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('does not scroll to the error again if the button is clicked but the message does not change', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: initialStep, httpClient: httpClient }, getDefaultProps())));
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            await user.click(screen.getByRole('button', { name: 'Submit' }));
+            await waitFor(() => {
+                expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+            });
+        });
+    });
+    describe('when refresh on change returns a step with an error', () => {
+        const httpClient = vi
+            .fn()
+            .mockImplementation(async () => respondWith(Object.assign(Object.assign({}, step), { errors: { error: 'There was a problem' } }), { status: 200 }));
+        const step = {
+            id: 'step-id',
+            title: 'Step',
+            refreshUrl: '/refresh',
+            schemas: [
+                {
+                    $id: '#iban',
+                    type: 'string',
+                    title: 'IBAN',
+                    refreshStepOnChange: true,
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#iban',
+                },
+                {
+                    type: 'button',
+                    title: 'Submit',
+                    behavior: {
+                        type: 'action',
+                        action: {
+                            url: '/submit',
+                            method: 'POST',
+                        },
+                    },
+                },
+            ],
+        };
+        it('shows a global error which is scrolled into view', async () => {
+            const scrollIntoViewMock = vi.fn();
+            window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
+            // Element is not visible
+            window.HTMLElement.prototype.getBoundingClientRect = getMockBoundingClientRect(WINDOW_HEIGHT + 100);
+            renderWithProviders(_jsx(DynamicFlowWise, Object.assign({ initialStep: step, httpClient: httpClient }, getDefaultProps())));
+            await user.type(screen.getByLabelText('IBAN'), '12345');
+            await act(async () => vi.advanceTimersByTimeAsync(1000)); // wait for debounce
+            await waitFor(() => {
+                expect(screen.getByText('There was a problem')).toBeInTheDocument();
+            });
+            expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+        });
+    });
+});

package/build/tests/SegmentedControl.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { screen } from '@testing-library/react';
+import { vi } from 'vitest';
+describe('given a step with a oneOf schema with control segmented', () => {
+    const makeConstSchema = (options) => ({
+        oneOf: Array(options)
+            .fill(0)
+            .map((value, index) => ({
+            const: String(index),
+            title: `Option ${index + 1}`,
+        })),
+        title: '',
+        control: 'segmented',
+    });
+    const initialStep = (options) => ({
+        id: 'step-id',
+        title: 'title',
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#schema',
+            },
+        ],
+        schemas: [
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['paymentMethod'],
+                properties: {
+                    paymentMethod: makeConstSchema(options),
+                },
+            },
+        ],
+    });
+    it('when it has 3 or fewer children, a SegmentedControl is rendered', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow", initialStep: initialStep(3), httpClient: vi.fn(), onError: vi.fn(), onCompletion: vi.fn() }));
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        expect(screen.getByText('Option 2')).toBeInTheDocument();
+        expect(screen.getByText('Option 3')).toBeInTheDocument();
+    });
+    it('when it has more than 3 children, a select is rendered', () => {
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow", initialStep: initialStep(4), httpClient: vi.fn(), onError: vi.fn(), onCompletion: vi.fn() }));
+        expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+        expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+        expect(screen.queryByText('Option 3')).not.toBeInTheDocument();
+    });
+});

package/build/tests/SingleFileUpload.test.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders, respondWith } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+const cases = [
+    [
+        'blob schema',
+        {
+            type: 'blob',
+            source: 'file',
+            title: 'Upload label (from innner schema title)',
+            accepts: ['image/png', 'image/jpeg', 'application/pdf'],
+        },
+    ],
+    [
+        'string schema with base64url format',
+        {
+            type: 'string',
+            format: 'base64url',
+            source: 'file',
+            title: 'Upload label',
+            accepts: ['image/png', 'image/jpeg', 'application/pdf'],
+        },
+    ],
+];
+describe.each(cases)(`given a %s with persist-async`, (_, schema) => {
+    const persistAsync = {
+        method: 'POST',
+        url: '/persist-async',
+        param: 'param',
+        idProperty: 'token',
+        schema,
+    };
+    describe('when the schema is required', () => {
+        const step = {
+            id: 'step-id',
+            title: 'Blob Upload with Persist Async',
+            schemas: [{ $id: '#schema-id', type: 'string', persistAsync }],
+            layout: [
+                { type: 'form', schemaId: '#schema-id' },
+                { type: 'button', title: 'Submit', action: { url: '/submit', method: 'POST' } },
+            ],
+        };
+        describe("and the schema doesn't have a maxSize", () => {
+            const httpClient = vi.fn();
+            it('should render the upload input without maxSize', () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.queryByText(/less than/i)).not.toBeInTheDocument();
+            });
+        });
+        describe('and the schema has a maxSize', () => {
+            const httpClient = vi.fn();
+            const stepWithMaxSize = Object.assign(Object.assign({}, step), { schemas: [
+                    {
+                        $id: '#schema-id',
+                        type: 'string',
+                        persistAsync: Object.assign(Object.assign({}, persistAsync), { schema: Object.assign(Object.assign({}, schema), { maxSize: 10 * 1024 * 1024 }) }),
+                    },
+                ] });
+            it('should render the upload input with maxSize', () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: stepWithMaxSize, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.getByText(/less than 10MB/i)).toBeInTheDocument();
+            });
+        });
+        describe('and the file upload failed', () => {
+            const httpClient = vi
+                .fn()
+                .mockResolvedValueOnce(new Response('', { status: 500 }))
+                .mockResolvedValueOnce(new Response(JSON.stringify({
+                id: 'step',
+                title: 'This is the next step',
+                schemas: [],
+                layout: [],
+            })));
+            it('submission is suppressed', async () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: step, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
+                await user.click(screen.getByText('Submit'));
+                await waitFor(() => {
+                    expect(screen.queryByText('This is the next step')).not.toBeInTheDocument();
+                });
+            });
+        });
+    });
+});
+describe('given a blob schema on a step that refreshes', () => {
+    const uploadSchema = {
+        $id: '#upload-national-id',
+        type: 'object',
+        displayOrder: ['fileUpload'],
+        properties: {
+            fileUpload: {
+                type: 'string',
+                persistAsync: {
+                    method: 'POST',
+                    url: '/persist-async',
+                    param: 'param',
+                    idProperty: 'token',
+                    schema: {
+                        type: 'blob',
+                        source: 'file',
+                        title: 'Upload label (from innner schema title)',
+                        accepts: ['image/png', 'image/jpeg', 'application/pdf'],
+                    },
+                },
+            },
+        },
+    };
+    const step = {
+        id: 'step-id',
+        title: 'Step',
+        schemas: [
+            {
+                $id: '#schema',
+                type: 'object',
+                displayOrder: ['type'],
+                properties: {
+                    type: {
+                        title: 'Select document',
+                        refreshStepOnChange: true,
+                        oneOf: [
+                            {
+                                title: 'National ID',
+                                const: 'national-id',
+                            },
+                            {
+                                title: 'Passport',
+                                const: 'passport',
+                            },
+                        ],
+                    },
+                },
+            },
+        ],
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#schema',
+            },
+        ],
+    };
+    it('clears the value when the model is nullified', async () => {
+        const initialStep = Object.assign(Object.assign({}, step), { schemas: [...step.schemas, uploadSchema], layout: [...step.layout, { type: 'form', schemaId: '#upload-national-id' }] });
+        const httpClient = vi
+            .fn()
+            .mockResolvedValueOnce(respondWith({ token: 123 }))
+            .mockResolvedValueOnce(respondWith(Object.assign(Object.assign({}, step), { schemas: [...step.schemas, Object.assign(Object.assign({}, uploadSchema), { $id: '#upload-passport' })], layout: [...step.layout, { type: 'form', schemaId: '#upload-passport' }], title: 'Step refreshed', model: {
+                type: 'passport',
+                fileUpload: null,
+            } }), { status: 200 }));
+        renderWithProviders(_jsx(DynamicFlowWise, { flowId: "id", initialStep: initialStep, httpClient: httpClient, onCompletion: vi.fn(), onError: vi.fn() }));
+        await user.upload(screen.getByTestId('uploadInput'), new File([''], 'file.png', { type: 'image/png' }));
+        await waitFor(() => {
+            expect(screen.getByText('Uploaded')).toBeInTheDocument();
+        });
+        await user.click(screen.getByLabelText('Select document'));
+        await user.click(screen.getByText('Passport'));
+        await waitFor(() => {
+            expect(screen.getByText('Step refreshed')).toBeInTheDocument();
+        });
+        await waitFor(() => {
+            expect(screen.queryByText('Uploaded')).not.toBeInTheDocument();
+        });
+    });
+});

package/build/tests/StatusList.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithProviders } from '../test-utils';
+import DynamicFlowWise from '../test-utils/DynamicFlowWise';
+import { vi } from 'vitest';
+const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+describe('StatusList component', () => {
+    const getInitialStep = (behaviors) => ({
+        id: 'step-id',
+        title: 'Step with button',
+        layout: [
+            {
+                type: 'status-list',
+                title: 'Status List',
+                items: [
+                    {
+                        title: 'Item 1',
+                        icon: { name: 'bank' },
+                        description: 'This is a description',
+                        callToAction: {
+                            title: 'Click Link',
+                            behavior: behaviors[0],
+                        },
+                        tag: 'tag 1',
+                    },
+                    {
+                        title: 'Item 2',
+                        icon: { name: 'bank' },
+                        description: 'This is a description',
+                        callToAction: {
+                            title: 'Click Action',
+                            behavior: behaviors[1],
+                        },
+                        tag: 'tag 2',
+                    },
+                ],
+            },
+        ],
+        schemas: [],
+    });
+    const oldBehaviourStep = getInitialStep([
+        { link: { url: 'https://google.com' } },
+        { action: { url: '/action' } },
+    ]);
+    const newBehaviourStep = getInitialStep([
+        { type: 'link', url: 'https://google.com' },
+        { type: 'action', action: { url: '/action' } },
+    ]);
+    describe.each([
+        [`Old "container" behavior type`, oldBehaviourStep],
+        [`New "discriminated union" behavior type`, newBehaviourStep],
+    ])('%s', (_, step) => {
+        describe('given a StatusList component with items that have behavior', () => {
+            it('should render link behavior as a link (and not use onLink)', () => {
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "", httpClient: vi.fn(), initialStep: step, onCompletion: vi.fn(), onError: vi.fn() }));
+                expect(screen.getByRole('link', { name: /Click Link/ })).toBeInTheDocument();
+                expect(screen.getByRole('link', { name: /Click Link/ })).toHaveAttribute('href', 'https://google.com');
+            });
+            it('should render action behavior as a button which performs an action when clicked', async () => {
+                const httpClient = vi.fn();
+                renderWithProviders(_jsx(DynamicFlowWise, { flowId: "", httpClient: httpClient, initialStep: step, onCompletion: vi.fn(), onError: vi.fn() }));
+                await user.click(screen.getByText('Click Action'));
+                await waitFor(() => {
+                    expect(httpClient).toHaveBeenCalledWith('/action', expect.anything());
+                });
+            });
+        });
+    });
+    describe('Extra props', () => {
+        it('should pass the tag property of list items to the renderer', () => {
+            const customRenderer = {
+                canRenderType: 'status-list',
+                render: vi.fn(),
+            };
+            renderWithProviders(_jsx(DynamicFlowWise, { flowId: "", httpClient: vi.fn(), initialStep: newBehaviourStep, renderers: [customRenderer], onCompletion: vi.fn(), onError: vi.fn() }));
+            expect(customRenderer.render).toHaveBeenCalledWith(expect.objectContaining({
+                items: [
+                    expect.objectContaining({ tag: 'tag 1' }),
+                    expect.objectContaining({ tag: 'tag 2' }),
+                ],
+            }));
+        });
+    });
+});