@wise/dynamic-flow-client 5.8.1 → 5.9.0

package/build/tests/OneOfInitialisation.test.js

@@ -0,0 +1,571 @@
+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();
+        });
+    });
+});