@wise/dynamic-flow-client 3.7.1 → 3.8.0-beta-ba9b66e

package/build/revamp/tests/OneOfInitialisation.spec.js

@@ -0,0 +1,654 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 '../DynamicFlowWise';
+import { createEmptyStep } from '../test-utils/step-utils';
+describe('OneOf Initialisation', function () {
+    var step = {
+        id: 'step-id',
+        title: 'Step Title',
+        schemas: [
+            {
+                $id: '#root',
+                allOf: [
+                    {
+                        type: 'object',
+                        displayOrder: ['email'],
+                        properties: { email: { type: 'string', title: 'Email' } },
+                    },
+                    {
+                        oneOf: [
+                            {
+                                title: 'Iban Option',
+                                type: 'object',
+                                displayOrder: ['iban', 'type'],
+                                properties: { iban: { type: 'string', title: 'IBAN' }, type: { const: 'IBAN' } },
+                            },
+                            {
+                                title: 'Bic Option',
+                                type: 'object',
+                                required: ['bic'],
+                                displayOrder: ['bic', 'type'],
+                                properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                            },
+                            {
+                                title: 'Name Option',
+                                type: 'object',
+                                displayOrder: ['name', 'type'],
+                                properties: { name: { type: 'string', title: 'NAME' }, type: { const: 'NAME' } },
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        layout: [
+            {
+                type: 'form',
+                schemaId: '#root',
+            },
+        ],
+    };
+    var getDefaultProps = function () { return ({
+        flowId: 'flow-id',
+        httpClient: jest.fn().mockResolvedValue(respondWith(createEmptyStep())),
+        onCompletion: jest.fn(),
+        onError: jest.fn(),
+        onEvent: jest.fn(),
+        onLog: jest.fn(),
+    }); };
+    describe('when the root schema contains an allOf and a oneOf', function () {
+        it('should select the an option even if the model only partially matches', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, step), { model: {
+                            email: 'marty.mcfly@wise.com',
+                            iban: 'GB33BUKB20201555555555',
+                            type: 'IBAN',
+                        } }) })));
+                expect(screen.getByText(/Iban Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Bic Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/IBAN/)).toBeInTheDocument();
+                expect(screen.queryByText(/BIC/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe("when the model doesn't match any of the options in a oneOf schem", function () {
+        it('should not select any options', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, step), { model: {} }) })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/Bic Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/BIC/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when the model matches only one option in a oneOf schema', function () {
+        it('should select the correct option', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, step), { model: { name: 'Marty', type: 'NAME' } }) })));
+                expect(screen.getByText(/Name Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/Bic Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/NAME/)).toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/BIC/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when the model matches more than one option in a oneOf schema', function () {
+        it('should not select any options', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, step), { model: { name: 'Marty', iban: 'GB33BUKB20201555555555' } }) })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/Bic Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/BIC/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when the model matches one option, but object schemas contain an alert', function () {
+        var contrivedStep = {
+            id: 'step-id',
+            title: 'Step Title',
+            schemas: [
+                {
+                    $id: '#root',
+                    oneOf: [
+                        {
+                            type: 'object',
+                            title: 'Iban Option',
+                            alert: { type: 'alert', markdown: 'This is an info alert' },
+                            displayOrder: ['bic', 'iban', 'type'],
+                            properties: {
+                                bic: { type: 'string', hidden: true },
+                                iban: { type: 'string', title: 'IBAN' },
+                                type: { const: 'IBAN' },
+                            },
+                        },
+                        {
+                            type: 'object',
+                            title: 'Bic Option',
+                            alert: { type: 'alert', markdown: 'This is an info alert' },
+                            required: ['bic'],
+                            displayOrder: ['bic', 'type'],
+                            properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                        },
+                        {
+                            type: 'object',
+                            title: 'Name Option',
+                            alert: { type: 'alert', markdown: 'This is an info alert' },
+                            displayOrder: ['name', 'type'],
+                            properties: {
+                                name: { type: 'string', title: 'NAME' },
+                                type: { const: 'NAME' },
+                            },
+                        },
+                    ],
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#root',
+                },
+            ],
+        };
+        it('should select the matched option anyways', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, contrivedStep), { model: { bic: 'QWERTY1234', type: 'BIC' } }) })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/Bic Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.getByText(/BIC/)).toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when the model matches one option, but object schemas are wrapped in all-of schemas', function () {
+        var contrivedStep = {
+            id: 'step-id',
+            title: 'Step Title',
+            schemas: [
+                {
+                    $id: '#root',
+                    oneOf: [
+                        {
+                            allOf: [
+                                {
+                                    title: 'Iban Option',
+                                    type: 'object',
+                                    displayOrder: ['bic', 'iban', 'type'],
+                                    properties: {
+                                        bic: { type: 'string', hidden: true },
+                                        iban: { type: 'string', title: 'IBAN' },
+                                        type: { const: 'IBAN' },
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            allOf: [
+                                {
+                                    title: 'Bic Option',
+                                    type: 'object',
+                                    required: ['bic'],
+                                    displayOrder: ['bic', 'type'],
+                                    properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                                },
+                            ],
+                        },
+                        {
+                            allOf: [
+                                {
+                                    title: 'Name Option',
+                                    type: 'object',
+                                    displayOrder: ['name', 'type'],
+                                    properties: {
+                                        name: { type: 'string', title: 'NAME' },
+                                        type: { const: 'NAME' },
+                                    },
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#root',
+                },
+            ],
+        };
+        it('should select the matched option anyways', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, contrivedStep), { model: { bic: 'QWERTY1234', type: 'BIC' } }) })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/Bic Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.getByText(/BIC/)).toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when the model matches one option, but object option schemas are oneOf schemas themselves', function () {
+        var contrivedStep = {
+            id: 'step-id',
+            title: 'Step Title',
+            schemas: [
+                {
+                    $id: '#root',
+                    title: 'Root Option',
+                    oneOf: [
+                        {
+                            title: 'Second Option',
+                            oneOf: [
+                                {
+                                    type: 'object',
+                                    title: 'Iban Option',
+                                    alert: { type: 'alert', markdown: 'This is an info alert' },
+                                    displayOrder: ['iban', 'type'],
+                                    properties: {
+                                        iban: { type: 'string', title: 'IBAN' },
+                                        type: { const: 'IBAN' },
+                                    },
+                                },
+                                {
+                                    type: 'object',
+                                    title: 'Bic Option',
+                                    required: ['bic'],
+                                    displayOrder: ['bic', 'type'],
+                                    properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'object',
+                            title: 'Name Option',
+                            alert: { type: 'alert', markdown: 'This is an info alert' },
+                            displayOrder: ['name', 'type'],
+                            properties: {
+                                name: { type: 'string', title: 'NAME' },
+                                type: { const: 'NAME' },
+                            },
+                        },
+                    ],
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#root',
+                },
+            ],
+        };
+        it('should select the matched option anyways', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: __assign(__assign({}, contrivedStep), { model: { bic: 'QWERTY1234', type: 'BIC' } }) })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/Bic Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.getByText(/BIC/)).toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('when one of the oneOf options is an allOf schema with an object schema that has a const type', function () {
+        var contrivedStep = {
+            id: 'step-id',
+            title: 'Step Title',
+            schemas: [
+                {
+                    $id: '#root',
+                    title: 'Root Option',
+                    oneOf: [
+                        {
+                            title: 'Bank Details Option (AllOf)',
+                            allOf: [
+                                {
+                                    type: 'object',
+                                    title: 'Bananas (with const type: "BANANAS")',
+                                    displayOrder: ['bananas', 'type'],
+                                    properties: {
+                                        bananas: { type: 'string', title: 'BANANAS' },
+                                        type: { const: 'BANANAS' },
+                                    },
+                                },
+                                {
+                                    title: 'Bank Details Option',
+                                    oneOf: [
+                                        {
+                                            type: 'object',
+                                            title: 'Iban Option',
+                                            alert: { type: 'alert', markdown: 'This is an info alert' },
+                                            displayOrder: ['iban', 'type'],
+                                            properties: {
+                                                iban: { type: 'string', title: 'IBAN' },
+                                                type: { const: 'IBAN' },
+                                            },
+                                        },
+                                        {
+                                            type: 'object',
+                                            title: 'Bic Option',
+                                            required: ['bic'],
+                                            displayOrder: ['bic', 'type'],
+                                            properties: { bic: { type: 'string', title: 'BIC' }, type: { const: 'BIC' } },
+                                        },
+                                    ],
+                                },
+                            ],
+                        },
+                        {
+                            type: 'object',
+                            title: 'Name Option',
+                            displayOrder: ['name', 'type'],
+                            properties: {
+                                name: { type: 'string', title: 'NAME' },
+                                type: { const: 'NAME' },
+                            },
+                        },
+                    ],
+                },
+            ],
+            layout: [
+                {
+                    type: 'form',
+                    schemaId: '#root',
+                },
+            ],
+            model: { type: 'BIC', bananas: 'bananas from step model' },
+        };
+        it('should select the matched option anyways', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                renderWithProviders(_jsx(DynamicFlowWise, __assign({}, getDefaultProps(), { initialStep: contrivedStep })));
+                expect(screen.queryByText(/Iban Option/)).not.toBeInTheDocument();
+                expect(screen.getByText(/Bic Option/)).toBeInTheDocument();
+                expect(screen.queryByText(/Name Option/)).not.toBeInTheDocument();
+                expect(screen.queryByText(/IBAN/)).not.toBeInTheDocument();
+                expect(screen.getByText(/BIC/)).toBeInTheDocument();
+                expect(screen.queryByText(/NAME/)).not.toBeInTheDocument();
+                return [2 /*return*/];
+            });
+        }); });
+    });
+    describe('with refresh-on-change', function () {
+        describe('when the oneOf schema contains a persist-async schema and the step is refreshed', function () {
+            it('should select the correct option after the refresh, and preserve the local value of the persisted field', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var schemas, initialStep, httpClient, props;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            schemas = [
+                                {
+                                    $id: '#root',
+                                    allOf: [
+                                        {
+                                            type: 'object',
+                                            displayOrder: ['email', 'tnc'],
+                                            properties: {
+                                                email: { type: 'string', title: 'Email' },
+                                                tnc: {
+                                                    type: 'boolean',
+                                                    title: 'I accept the terms and conditions',
+                                                    refreshStepOnChange: true,
+                                                },
+                                            },
+                                        },
+                                        {
+                                            control: 'radio',
+                                            oneOf: [
+                                                {
+                                                    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' },
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ];
+                            initialStep = __assign(__assign({}, step), { schemas: schemas, refreshUrl: '/refresh', model: {} });
+                            httpClient = jest.fn(function (input) { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (input) {
+                                        case '/persist':
+                                            return [2 /*return*/, respondWith({ token: 'TOKEN-QWERTY' })];
+                                        case '/refresh':
+                                            return [2 /*return*/, respondWith(__assign(__assign({}, initialStep), { model: { email: 'marty.mcfly@wise.com', cardToken: 'TOKEN-QWERTY', type: 'CARD' } }))];
+                                        default:
+                                            return [2 /*return*/, respondWith(null, { status: 404 })];
+                                    }
+                                    return [2 /*return*/];
+                                });
+                            }); });
+                            props = __assign(__assign({}, getDefaultProps()), { httpClient: httpClient, initialStep: initialStep });
+                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props)));
+                            return [4 /*yield*/, userEvent.click(screen.getByText(/Card Option/))];
+                        case 1:
+                            _a.sent();
+                            expect(screen.getByText(/CARD NUMBER/)).toBeInTheDocument();
+                            return [4 /*yield*/, userEvent.click(screen.getByLabelText(/CARD NUMBER/))];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, userEvent.paste('1234 5678 1234 5678')];
+                        case 3:
+                            _a.sent();
+                            return [4 /*yield*/, userEvent.tab()];
+                        case 4:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(httpClient).toHaveBeenCalledWith('/persist', expect.anything());
+                                })];
+                        case 5:
+                            _a.sent();
+                            return [4 /*yield*/, userEvent.click(screen.getByLabelText(/I accept the terms and conditions/))];
+                        case 6:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                                })];
+                        case 7:
+                            _a.sent();
+                            expect(screen.getByText(/CARD NUMBER/)).toBeInTheDocument();
+                            expect(screen.getByDisplayValue(/1234 5678 1234 5678/)).toBeInTheDocument();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('even for file uploads', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var user, schemas, initialStep, httpClient, props, file;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            user = userEvent.setup({ applyAccept: false });
+                            schemas = [
+                                {
+                                    $id: '#root',
+                                    allOf: [
+                                        {
+                                            type: 'object',
+                                            displayOrder: ['email', 'tnc'],
+                                            properties: {
+                                                email: { type: 'string', title: 'Email' },
+                                                tnc: {
+                                                    type: 'boolean',
+                                                    title: 'I accept the terms and conditions',
+                                                    refreshStepOnChange: true,
+                                                },
+                                            },
+                                        },
+                                        {
+                                            control: 'radio',
+                                            oneOf: [
+                                                {
+                                                    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' },
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                            ];
+                            initialStep = __assign(__assign({}, step), { schemas: schemas, refreshUrl: '/refresh', model: {} });
+                            httpClient = jest.fn(function (input) { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (input) {
+                                        case '/persist':
+                                            return [2 /*return*/, respondWith({ token: 'TOKEN-QWERTY' })];
+                                        case '/refresh':
+                                            return [2 /*return*/, respondWith(__assign(__assign({}, initialStep), { model: {
+                                                        email: 'marty.mcfly@wise.com',
+                                                        passportToken: 'TOKEN-QWERTY',
+                                                        type: 'PASSPORT',
+                                                    } }))];
+                                        default:
+                                            return [2 /*return*/, respondWith(null, { status: 404 })];
+                                    }
+                                    return [2 /*return*/];
+                                });
+                            }); });
+                            props = __assign(__assign({}, getDefaultProps()), { httpClient: httpClient, initialStep: initialStep });
+                            renderWithProviders(_jsx(DynamicFlowWise, __assign({}, props)));
+                            return [4 /*yield*/, user.click(screen.getByText('Passport Option'))];
+                        case 1:
+                            _a.sent();
+                            expect(screen.getByText('PASSPORT PHOTO')).toBeInTheDocument();
+                            file = new File(['foo'], 'passport.png', { type: 'image/png' });
+                            return [4 /*yield*/, user.upload(screen.getByTestId('uploadInput'), file)];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(httpClient).toHaveBeenCalledWith('/persist', expect.anything());
+                                })];
+                        case 3:
+                            _a.sent();
+                            return [4 /*yield*/, userEvent.click(screen.getByLabelText('I accept the terms and conditions'))];
+                        case 4:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(httpClient).toHaveBeenCalledWith('/refresh', expect.anything());
+                                })];
+                        case 5:
+                            _a.sent();
+                            // 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 presence of the file name in the summary.
+                            expect(screen.getByText('Uploaded')).toBeInTheDocument();
+                            expect(screen.getByText('passport.png')).toBeInTheDocument();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+});