@wise/dynamic-flow-client 5.9.0 → 5.9.2-logging-bf0bd22

package/build/tests/OneOfInitialisation.test.js

@@ -1,571 +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 { vi } from 'vitest';
-import { renderWithProviders, respondWith } from '../test-utils';
-import DynamicFlowWise from '../test-utils/DynamicFlowWise';
-const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
-const getStepWithOneOf = (options) => ({
-    id: 'step-id',
-    title: 'Step Title',
-    schemas: [
-        {
-            $id: '#root',
-            oneOf: options,
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#root',
-        },
-    ],
-});
-const getStepWithOneOfAndAllOf = (allOfOptions, oneOfOptions) => ({
-    id: 'step-id',
-    title: 'Step Title',
-    schemas: [
-        {
-            $id: '#oneOf',
-            oneOf: oneOfOptions,
-        },
-        {
-            $id: '#allOf',
-            allOf: allOfOptions,
-        },
-    ],
-    layout: [
-        {
-            type: 'form',
-            schemaId: '#oneOf',
-        },
-        {
-            type: 'form',
-            schemaId: '#allOf',
-        },
-    ],
-});
-const renderWithModel = ({ step, model, httpClient = vi.fn(), }) => {
-    renderWithProviders(_jsx(DynamicFlowWise, { flowId: "flow-id", httpClient: httpClient, initialStep: Object.assign(Object.assign({}, step), { model }), onCompletion: vi.fn(), onError: vi.fn(), onEvent: vi.fn(), onLog: vi.fn() }));
-};
-describe('initialisation with a single oneOf schema', () => {
-    describe('when options are objects', () => {
-        const options = [
-            {
-                title: 'Iban option',
-                type: 'object',
-                displayOrder: ['iban', 'name', 'type'],
-                properties: {
-                    type: { const: 'IBAN' },
-                    iban: { type: 'string', title: 'IBAN' },
-                    name: { type: 'string', title: 'Name' },
-                },
-            },
-            {
-                title: 'Bic option',
-                type: 'object',
-                displayOrder: ['bic', 'name', 'type'],
-                properties: {
-                    type: { const: 'BIC' },
-                    bic: { type: 'string', title: 'BIC' },
-                    name: { type: 'string', title: 'Name' },
-                },
-            },
-            {
-                title: 'Sort code option',
-                type: 'object',
-                displayOrder: ['sortCode', 'type'],
-                properties: {
-                    type: { const: 'CODE' },
-                    sortCode: {
-                        title: 'Nested object',
-                        type: 'object',
-                        displayOrder: ['code', 'name'],
-                        properties: {
-                            code: { type: 'string', title: 'Code' },
-                            name: { type: 'string', title: 'Name' },
-                        },
-                    },
-                },
-            },
-        ];
-        it('should choose the option with uniquely matching props', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: {
-                    iban: 'value',
-                },
-            });
-            expect(screen.getByText(/Iban option/)).toBeInTheDocument();
-            expect(screen.getByText(/IBAN/)).toBeInTheDocument();
-            expect(screen.queryByText(/Bic option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Sort code option/)).not.toBeInTheDocument();
-        });
-        it('should choose the option with distinguishing matching props', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: {
-                    type: 'BIC',
-                    name: 'shared value',
-                },
-            });
-            expect(screen.getByText(/Bic option/)).toBeInTheDocument();
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Sort code option/)).not.toBeInTheDocument();
-        });
-        it('should match on nested props', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: {
-                    sortCode: {
-                        name: 'Nested name',
-                    },
-                },
-            });
-            expect(screen.getByText(/Sort code option/)).toBeInTheDocument();
-            expect(screen.getByText(/Sort code/)).toBeInTheDocument();
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Bic option/)).not.toBeInTheDocument();
-        });
-        it('should not select anything if there are no matches', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: {
-                    code: 'Not nested',
-                    missingProp: 'Not present',
-                },
-            });
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Bic option/)).not.toBeInTheDocument();
-        });
-        it('should not select anything if there are multiple matches', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: {
-                    name: 'A name',
-                },
-            });
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Bic option/)).not.toBeInTheDocument();
-        });
-    });
-    describe('when options are objects with nested repeatable schemas', () => {
-        const options = [
-            {
-                type: 'object',
-                title: 'Option AB LIST',
-                displayOrder: ['type', 'list'],
-                properties: {
-                    type: { const: 'ABLIST' },
-                    list: {
-                        type: 'array',
-                        addItemTitle: 'Add item',
-                        editItemTitle: 'Edit item',
-                        items: {
-                            type: 'object',
-                            displayOrder: ['a', 'b'],
-                            properties: {
-                                a: { title: 'a', type: 'string' },
-                                b: { title: 'b', type: 'string' },
-                            },
-                        },
-                    },
-                },
-            },
-            {
-                type: 'object',
-                title: 'Option XY LIST',
-                displayOrder: ['type', 'list'],
-                properties: {
-                    type: { const: 'XYLIST' },
-                    list: {
-                        type: 'array',
-                        addItemTitle: 'Add item',
-                        editItemTitle: 'Edit item',
-                        items: {
-                            type: 'object',
-                            displayOrder: ['x', 'y'],
-                            properties: {
-                                x: { title: 'x', type: 'string', summary: { providesTitle: true } },
-                                y: { title: 'y', type: 'string', summary: { providesDescription: true } },
-                            },
-                        },
-                    },
-                },
-            },
-        ];
-        it('should choose the option that matches the type', async () => {
-            const step = getStepWithOneOf(options);
-            renderWithModel({
-                step,
-                model: { type: 'XYLIST', list: [{ x: 'Xxxxx', y: 'Yyyyy' }] },
-            });
-            expect(screen.getByText(/Option XY LIST/)).toBeInTheDocument();
-            expect(screen.getByText('Xxxxx')).toBeInTheDocument(); // sumary title
-            expect(screen.getByText('Yyyyy')).toBeInTheDocument(); // summary description
-        });
-    });
-    describe('when options are tuples', () => {
-        const tuples = [
-            {
-                type: 'array',
-                title: 'Option A',
-                items: [
-                    {
-                        const: 'A',
-                    },
-                    {
-                        type: 'string',
-                        title: 'One A',
-                    },
-                ],
-            },
-            {
-                type: 'array',
-                title: 'Option B',
-                items: [
-                    {
-                        const: 'B',
-                    },
-                    {
-                        type: 'string',
-                        title: 'One B',
-                    },
-                ],
-            },
-        ];
-        it('should choose the option with matching props', async () => {
-            const step = getStepWithOneOf(tuples);
-            renderWithModel({
-                step,
-                model: ['A', 'One A'],
-            });
-            expect(screen.getByText(/Option A/)).toBeInTheDocument();
-            expect(screen.queryByText(/Option B/)).not.toBeInTheDocument();
-        });
-    });
-    describe('when options are allOfs', () => {
-        const allOfs = [
-            {
-                allOf: [
-                    {
-                        title: 'Iban option',
-                        type: 'object',
-                        displayOrder: ['iban'],
-                        properties: {
-                            iban: { type: 'string', title: 'IBAN' },
-                        },
-                    },
-                ],
-            },
-            {
-                allOf: [
-                    {
-                        title: 'Bic option',
-                        type: 'object',
-                        displayOrder: ['bic'],
-                        properties: {
-                            bic: { type: 'string', title: 'BIC' },
-                        },
-                    },
-                ],
-            },
-        ];
-        it('should choose the option with matching props', async () => {
-            const step = getStepWithOneOf(allOfs);
-            renderWithModel({
-                step,
-                model: { bic: '123' },
-            });
-            expect(screen.getByText(/Bic option/)).toBeInTheDocument();
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-        });
-    });
-    describe('when options are of different types', () => {
-        const objectAndArray = [
-            {
-                title: 'Object option',
-                type: 'object',
-                displayOrder: ['a'],
-                properties: {
-                    a: { type: 'string', title: 'A' },
-                },
-            },
-            {
-                type: 'array',
-                title: 'Array option',
-                items: [
-                    {
-                        const: 'B',
-                    },
-                    { type: 'string', title: 'B' },
-                ],
-            },
-        ];
-        const allOfOneOf = [
-            {
-                title: 'All of',
-                allOf: [
-                    {
-                        type: 'object',
-                        title: 'Name option',
-                        displayOrder: ['name', 'type'],
-                        properties: {
-                            name: { type: 'string', title: 'Name' },
-                            type: { const: 'NAME' },
-                        },
-                    },
-                    {
-                        title: 'Bank Details Option',
-                        oneOf: [
-                            {
-                                type: 'object',
-                                title: 'Iban option',
-                                displayOrder: ['iban', 'type'],
-                                properties: {
-                                    iban: { type: 'string', title: 'Iban' },
-                                    type: { const: 'IBAN' },
-                                },
-                            },
-                            {
-                                type: 'object',
-                                title: 'Bic option',
-                                displayOrder: ['bic', 'type'],
-                                properties: {
-                                    bic: { type: 'string', title: 'Bic' },
-                                    type: { const: 'BIC' },
-                                },
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                type: 'object',
-                title: 'Code option',
-                displayOrder: ['code', 'type'],
-                properties: {
-                    code: { type: 'string', title: 'Code' },
-                    type: { const: 'CODE' },
-                },
-            },
-        ];
-        it('should choose the option with matching props', async () => {
-            const step = getStepWithOneOf(objectAndArray);
-            renderWithModel({
-                step,
-                model: ['B', 'b'],
-            });
-            expect(screen.getByText(/Array option/)).toBeInTheDocument();
-            expect(screen.queryByText(/Object option/)).not.toBeInTheDocument();
-        });
-        it('should choose the correct option when oneOf is nested', async () => {
-            const step = getStepWithOneOf(allOfOneOf);
-            renderWithModel({
-                step,
-                model: { type: 'BIC', name: 'Name' },
-            });
-            expect(screen.getByText(/Bic option/)).toBeInTheDocument();
-            expect(screen.getByText(/Name option/)).toBeInTheDocument();
-            expect(screen.queryByText(/Iban option/)).not.toBeInTheDocument();
-            expect(screen.queryByText(/Code option/)).not.toBeInTheDocument();
-        });
-    });
-});
-describe('initialisation with a mix of schemas', () => {
-    describe('when options inside both are all objects', () => {
-        const allOfOptions = [
-            {
-                title: 'String one',
-                type: 'object',
-                displayOrder: ['one'],
-                properties: {
-                    one: { type: 'string', title: 'One' },
-                },
-            },
-            {
-                title: 'String two',
-                type: 'object',
-                displayOrder: ['two'],
-                properties: {
-                    two: { type: 'string', title: 'Two' },
-                },
-            },
-        ];
-        const oneOfOptions = [
-            {
-                title: 'Iban option',
-                type: 'object',
-                displayOrder: ['iban', 'name'],
-                properties: {
-                    iban: { type: 'string', title: 'IBAN' },
-                    name: { type: 'string', title: 'Name' },
-                },
-            },
-            {
-                title: 'Bic option',
-                type: 'object',
-                displayOrder: ['bic', 'name'],
-                properties: {
-                    bic: { type: 'string', title: 'BIC' },
-                    name: { type: 'string', title: 'Name' },
-                },
-            },
-        ];
-        it('should choose the oneOf option with matching props and show the all ofs', async () => {
-            const step = getStepWithOneOfAndAllOf(allOfOptions, oneOfOptions);
-            renderWithModel({
-                step,
-                model: {
-                    one: 'one',
-                    iban: 'iban',
-                },
-            });
-            expect(screen.getByText(/String one/)).toBeInTheDocument();
-            expect(screen.getByText(/String two/)).toBeInTheDocument();
-            expect(screen.getByText(/Iban option/)).toBeInTheDocument();
-            expect(screen.queryByText(/Bic option/)).not.toBeInTheDocument();
-        });
-    });
-});
-describe('initialisation after refresh-on-change', () => {
-    describe('when the oneOf schema contains a persist-async schema', () => {
-        const allOfOptions = [
-            {
-                type: 'object',
-                displayOrder: ['tnc'],
-                properties: {
-                    tnc: {
-                        type: 'boolean',
-                        title: 'I accept the terms and conditions',
-                        refreshStepOnChange: true,
-                    },
-                },
-            },
-        ];
-        it('should select the correct option and preserve the local value of persisted string schemas', async () => {
-            const optionsWithPersistAsync = [
-                {
-                    title: 'Iban Option',
-                    type: 'object',
-                    displayOrder: ['iban', 'type'],
-                    properties: {
-                        iban: { type: 'string', title: 'IBAN' },
-                        type: { const: 'IBAN' },
-                    },
-                },
-                {
-                    title: 'Card Option',
-                    type: 'object',
-                    displayOrder: ['cardToken', 'type'],
-                    properties: {
-                        cardToken: {
-                            type: 'string',
-                            title: 'CARD',
-                            persistAsync: {
-                                url: '/persist',
-                                method: 'POST',
-                                param: 'cardNumber',
-                                idProperty: 'token',
-                                schema: { type: 'string', title: 'CARD NUMBER' },
-                            },
-                        },
-                        type: { const: 'CARD' },
-                    },
-                },
-            ];
-            const step = Object.assign(Object.assign({}, getStepWithOneOfAndAllOf(allOfOptions, optionsWithPersistAsync)), { refreshUrl: '/refresh' });
-            const httpClient = vi.fn(async (input) => {
-                switch (input) {
-                    case '/persist':
-                        return respondWith({ token: 'TOKEN-QWERTY' });
-                    case '/refresh':
-                        return respondWith(Object.assign(Object.assign({}, step), { model: { cardToken: 'TOKEN-QWERTY', type: 'CARD' } }));
-                    default:
-                        return respondWith(null, { status: 404 });
-                }
-            });
-            renderWithModel({ step, httpClient, model: {} });
-            await user.click(screen.getByRole('combobox'));
-            await user.click(screen.getByText(/Card Option/));
-            expect(screen.getByText(/CARD NUMBER/)).toBeInTheDocument();
-            await user.type(screen.getByLabelText(/CARD NUMBER/), '1234 5678 1234 5678');
-            await user.tab();
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/persist', expect.anything());
-            });
-            await user.click(screen.getByLabelText(/I accept the terms and conditions/));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
-            });
-            expect(screen.getByText(/CARD NUMBER/)).toBeInTheDocument();
-            expect(screen.getByDisplayValue(/1234 5678 1234 5678/)).toBeInTheDocument();
-        });
-        it('should select the correct option and preserve the local value of persisted blob schemas', async () => {
-            const optionsWithPersistAsync = [
-                {
-                    title: 'Iban Option',
-                    type: 'object',
-                    displayOrder: ['iban', 'type'],
-                    properties: {
-                        iban: { type: 'string', title: 'IBAN' },
-                        type: { const: 'IBAN' },
-                    },
-                },
-                {
-                    title: 'Passport Option',
-                    type: 'object',
-                    displayOrder: ['passportToken', 'type'],
-                    properties: {
-                        passportToken: {
-                            type: 'string',
-                            title: 'PASSPORT',
-                            persistAsync: {
-                                url: '/persist',
-                                method: 'POST',
-                                param: 'passport',
-                                idProperty: 'token',
-                                schema: { type: 'blob', title: 'PASSPORT PHOTO', accepts: ['image/*'] },
-                            },
-                        },
-                        type: { const: 'PASSPORT' },
-                    },
-                },
-            ];
-            const step = Object.assign(Object.assign({}, getStepWithOneOfAndAllOf(allOfOptions, optionsWithPersistAsync)), { refreshUrl: '/refresh' });
-            const httpClient = vi.fn(async (input) => {
-                switch (input) {
-                    case '/persist':
-                        return respondWith({ token: 'TOKEN-QWERTY' });
-                    case '/refresh':
-                        return respondWith(Object.assign(Object.assign({}, step), { model: { passportToken: 'TOKEN-QWERTY', type: 'PASSPORT' } }));
-                    default:
-                        return respondWith(null, { status: 404 });
-                }
-            });
-            renderWithModel({ step, httpClient, model: {} });
-            await user.click(screen.getByRole('combobox'));
-            await user.click(screen.getByText('Passport Option'));
-            expect(screen.getByText('PASSPORT PHOTO')).toBeInTheDocument();
-            const file = new File(['foo'], 'passport.png', { type: 'image/png' });
-            await user.upload(screen.getByTestId('uploadInput'), file);
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/persist', expect.anything());
-            });
-            await user.click(screen.getByLabelText('I accept the terms and conditions'));
-            await waitFor(() => {
-                expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
-            });
-            // Unfortunately, the Neptune component doesn't show the label (PASSPORT PHOTO)
-            // after a file has been selected, so we can't check for it here.
-            // instead we assert the file name in the summary
-            expect(screen.getByText('Uploaded')).toBeInTheDocument();
-            expect(screen.getByText('passport.png')).toBeInTheDocument();
-        });
-    });
-});