@wise/dynamic-flow-client 5.11.0 → 5.12.0

package/build/tests/ScrollToError.test.js

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

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

@@ -1,168 +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 { 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

@@ -1,85 +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 { 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' }),
-                ],
-            }));
-        });
-    });
-});