@wise/dynamic-flow-client 3.16.2 → 3.16.3-experimental-c0e84f1

package/build/legacy/dynamicFlow/tests/DynamicFlow.InitialStep.spec.js

@@ -0,0 +1,749 @@
+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 };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen, waitFor, act, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider, translations as componentTranslations } from '@transferwise/components';
+import DynamicFlow from '../DynamicFlow';
+var user = userEvent.setup({ advanceTimers: function (delay) { return jest.advanceTimersByTime(delay); } });
+var DEBOUNCE_DELAY_TIMEOUT = 1000;
+var getSchema = function () { return ({
+    $id: '#example',
+    type: 'object',
+    properties: {
+        email: {
+            type: 'string',
+            title: 'Email',
+            minLength: 5,
+            refreshStepOnChange: true,
+            refreshUrl: '/example-email-refresh',
+        },
+        accountNumber: {
+            title: 'Account number',
+            type: 'string',
+            minLength: 6,
+            maxLength: 10,
+            refreshStepOnChange: true,
+            refreshUrl: '/example-account-refresh',
+        },
+        favouriteColor: {
+            title: 'Favourite color',
+            type: 'string',
+            control: 'radio',
+            oneOf: [
+                { title: 'Red', const: 'red' },
+                { title: 'Blue', const: 'blue' },
+            ],
+            refreshStepOnChange: true,
+            refreshUrl: '/example-account-refresh',
+        },
+        someToken: {
+            type: 'string',
+            title: 'Persist Async Card Number',
+            persistAsync: {
+                method: 'GET',
+                url: '/persist-async-upload',
+                param: 'cardNumber',
+                idProperty: 'cardToken',
+                schema: {
+                    title: 'Enter your card number',
+                    type: 'string',
+                },
+            },
+        },
+    },
+}); };
+var getFormStep = function (_a) {
+    if (_a === void 0) { _a = {}; }
+    var schemaId = _a.schemaId, schema = _a.schema, schemas = _a.schemas, model = _a.model, rest = __rest(_a, ["schemaId", "schema", "schemas", "model"]);
+    var form = schemaId
+        ? { type: 'form', schemaId: schemaId }
+        : schema
+            ? { type: 'form', schema: schema }
+            : { type: 'form', schema: getSchema() };
+    return __assign(__assign(__assign({ type: 'form', id: 'create-thing', title: 'Example', description: 'Please enter all the information' }, (schemas ? { schemas: schemas } : {})), { layout: [
+            __assign({ type: 'form' }, form),
+            {
+                type: 'button',
+                action: { type: 'primary', url: '/submit', title: 'Submit', method: 'POST' },
+            },
+        ], model: model || { accountNumber: '1234567890' } }), rest);
+};
+var getMockJsonResponse = function (response_1) {
+    var args_1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args_1[_i - 1] = arguments[_i];
+    }
+    return __awaiter(void 0, __spreadArray([response_1], args_1, true), void 0, function (response, init) {
+        if (init === void 0) { init = {}; }
+        return __generator(this, function (_a) {
+            return [2 /*return*/, new Response(JSON.stringify(response), init)];
+        });
+    });
+};
+var mockHttpClient = jest.fn(function () { return getMockJsonResponse(getFormStep()); });
+var i18n = { locale: 'en-GB', messages: __assign({}, componentTranslations.en) };
+describe('e2E: Given a DynamicFlow component with a "initialStep" prop', function () {
+    beforeAll(function () { return jest.useFakeTimers(); });
+    beforeEach(function () { return mockHttpClient.mockClear(); });
+    afterAll(function () { return jest.useFakeTimers(); });
+    function renderComponent(stepOverrides, httpClient, extraProps) {
+        if (httpClient === void 0) { httpClient = mockHttpClient; }
+        if (extraProps === void 0) { extraProps = {}; }
+        var initialStep = getFormStep(stepOverrides);
+        render(_jsx(Provider, { i18n: i18n, children: _jsx(DynamicFlow, __assign({ initialStep: initialStep, httpClient: httpClient, onCompletion: jest.fn() }, extraProps)) }));
+    }
+    it('renders the form', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var emailInput, accoutInput;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderComponent();
+                    return [4 /*yield*/, screen.findByLabelText('Email')];
+                case 1:
+                    emailInput = _a.sent();
+                    return [4 /*yield*/, screen.findByLabelText('Account number')];
+                case 2:
+                    accoutInput = _a.sent();
+                    expect(emailInput).toBeInTheDocument();
+                    expect(accoutInput).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    describe('when the step contains a layout with inline schemas', function () {
+        it('renders the form', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var emailInput, accoutInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        renderComponent();
+                        return [4 /*yield*/, screen.findByLabelText('Email')];
+                    case 1:
+                        emailInput = _a.sent();
+                        return [4 /*yield*/, screen.findByLabelText('Account number')];
+                    case 2:
+                        accoutInput = _a.sent();
+                        expect(emailInput).toBeInTheDocument();
+                        expect(accoutInput).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when the step contains a layout with inline schemas inside a column layout', function () {
+        it('renders the form', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var emailInput, accoutInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        renderComponent({
+                            schemas: [],
+                            layout: [
+                                {
+                                    type: 'columns',
+                                    left: [
+                                        {
+                                            type: 'form',
+                                            schema: getSchema(),
+                                        },
+                                    ],
+                                    right: [{ type: 'paragraph', text: 'right' }],
+                                },
+                            ],
+                            model: { accountNumber: '99999999' },
+                        });
+                        return [4 /*yield*/, screen.findByLabelText('Email')];
+                    case 1:
+                        emailInput = _a.sent();
+                        return [4 /*yield*/, screen.findByLabelText('Account number')];
+                    case 2:
+                        accoutInput = _a.sent();
+                        expect(emailInput).toBeInTheDocument();
+                        expect(accoutInput).toBeInTheDocument();
+                        expect(accoutInput).toHaveValue('99999999');
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when the step contains a schemas array and the layout references the schemas', function () {
+        it('renders the form', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var schema, emailInput, accoutInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        schema = getSchema();
+                        renderComponent({ schemaId: schema.$id, schemas: [schema] });
+                        return [4 /*yield*/, screen.findByLabelText('Email')];
+                    case 1:
+                        emailInput = _a.sent();
+                        return [4 /*yield*/, screen.findByLabelText('Account number')];
+                    case 2:
+                        accoutInput = _a.sent();
+                        expect(emailInput).toBeInTheDocument();
+                        expect(accoutInput).toBeInTheDocument();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when there is a one of objects with a control type of "select"', function () {
+        var schema = {
+            $id: '#example',
+            type: 'object',
+            properties: {
+                orientations: {
+                    title: 'Orientations',
+                    control: 'select',
+                    oneOf: [
+                        {
+                            type: 'object',
+                            title: 'North / East',
+                            properties: {
+                                north: {
+                                    title: 'North',
+                                    type: 'boolean',
+                                },
+                                east: {
+                                    title: 'East',
+                                    type: 'boolean',
+                                },
+                            },
+                        },
+                        {
+                            type: 'object',
+                            title: 'South / West',
+                            properties: {
+                                south: {
+                                    title: 'South',
+                                    type: 'boolean',
+                                },
+                                west: {
+                                    title: 'West',
+                                    type: 'boolean',
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
+        };
+        describe('and no option is specified in the model', function () {
+            it('does not pre-select any option', function () {
+                renderComponent({ schema: schema, model: {} });
+                expect(screen.queryByText('North / East')).not.toBeInTheDocument();
+                expect(screen.queryByLabelText('North')).not.toBeInTheDocument();
+                expect(screen.queryByLabelText('East')).not.toBeInTheDocument();
+                expect(screen.queryByText('South / West')).not.toBeInTheDocument();
+                expect(screen.queryByLabelText('South')).not.toBeInTheDocument();
+                expect(screen.queryByLabelText('West')).not.toBeInTheDocument();
+            });
+        });
+        describe('and an option is specified in the model', function () {
+            it('pre-selects that option', function () {
+                renderComponent({ schema: schema, model: { orientations: { north: true } } });
+                expect(screen.getByText('North / East')).toBeInTheDocument();
+                expect(screen.getByLabelText('North')).toBeInTheDocument();
+                expect(screen.getByLabelText('East')).toBeInTheDocument();
+                expect(screen.queryByLabelText('South')).not.toBeInTheDocument();
+                expect(screen.queryByLabelText('West')).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('when updating a non-debounceable schema with refreshStepOnChange', function () {
+        it('does not debounce, and makes the request immediately', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        renderComponent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('Red'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                            })];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when loading a step with a schema containing a oneOf schema marked with refreshStepOnChange', function () {
+        var getSchema = function (control) { return ({
+            $id: 'one-of-example',
+            type: 'object',
+            properties: {
+                currency: {
+                    type: 'string',
+                    title: 'Currency',
+                    analyticsId: 'currency',
+                    control: control,
+                    refreshStepOnChange: true,
+                    refreshUrl: '/api/refresh',
+                    oneOf: [
+                        { title: 'USD', const: 'USD', analyticsId: 'USD' },
+                        { title: 'EUR', const: 'EUR', analyticsId: 'EUR' },
+                        { title: 'GBP', const: 'GBP', analyticsId: 'GBP' },
+                    ],
+                    default: 'USD',
+                },
+            },
+        }); };
+        ['radio', 'select', 'tab'].forEach(function (control) {
+            describe("when the control is ".concat(control), function () {
+                it("does not refresh if the user has not interacted with the control", function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var schema, step, onEvent, mockHttpClient;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0:
+                                schema = getSchema(control);
+                                step = { schemaId: schema.$id, schemas: [schema] };
+                                onEvent = jest.fn();
+                                mockHttpClient = jest.fn(function () { return getMockJsonResponse(step); });
+                                renderComponent(step, mockHttpClient, { onEvent: onEvent });
+                                return [4 /*yield*/, waitFor(function () {
+                                        expect(onEvent).toHaveBeenCalledTimes(1);
+                                    })];
+                            case 1:
+                                _a.sent();
+                                expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+    });
+    describe('when loading a step with a schema containing more than one boolean schema marked with refreshStepOnChange', function () {
+        var schema = {
+            $id: 'multi-checkbox',
+            type: 'object',
+            properties: {
+                first: {
+                    type: 'boolean',
+                    title: 'First checkbox',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/refresh',
+                },
+                second: {
+                    type: 'boolean',
+                    title: 'Second checkbox',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/refresh',
+                },
+                third: {
+                    type: 'boolean',
+                    title: 'Third checkbox',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/refresh',
+                },
+            },
+        };
+        var step = { schemaId: schema.$id, schemas: [schema] };
+        it('does not refresh until the user actively changes the model', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var mockHttpClient;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        mockHttpClient = jest.fn(function () { return getMockJsonResponse(step); });
+                        renderComponent(step, mockHttpClient);
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                            })];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, user.click(screen.getByLabelText('First checkbox'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, waitFor(function () {
+                                expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                            })];
+                    case 3:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when the refreshStepOnChange request fails', function () {
+        var schema = {
+            $id: 'multi-checkbox',
+            type: 'object',
+            properties: {
+                first: {
+                    type: 'boolean',
+                    title: 'First checkbox',
+                    refreshStepOnChange: true,
+                    refreshUrl: '/refresh',
+                },
+            },
+        };
+        var stepOverride = { schemaId: schema.$id, schemas: [schema] };
+        describe('when the refreshStepOnChange request fails with 404', function () {
+            var mockHttpClient = jest.fn(function () { return getMockJsonResponse(null, { status: 404 }); });
+            it('calls onError with the error and status code', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onError;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onError = jest.fn();
+                            renderComponent(stepOverride, mockHttpClient, { onError: onError });
+                            expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                            return [4 /*yield*/, user.click(screen.getByLabelText('First checkbox'))];
+                        case 1:
+                            _a.sent();
+                            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onError).toHaveBeenCalledWith(expect.any(Error), 404);
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when the refreshStepOnChange request throws immediately', function () {
+            var mockHttpClient = jest.fn(function () {
+                throw new Error('Something went wrong');
+            });
+            it('calls onError with the error', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onError;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onError = jest.fn();
+                            renderComponent(stepOverride, mockHttpClient, { onError: onError });
+                            expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                            return [4 /*yield*/, user.click(screen.getByLabelText('First checkbox'))];
+                        case 1:
+                            _a.sent();
+                            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when the refreshStepOnChange request throws asynchronously', function () {
+            var mockHttpClient = jest.fn(function () { return Promise.reject(new Error('Something went wrong async')); });
+            it('calls onError with the error', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onError;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onError = jest.fn();
+                            renderComponent(stepOverride, mockHttpClient, { onError: onError });
+                            expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                            return [4 /*yield*/, user.click(screen.getByLabelText('First checkbox'))];
+                        case 1:
+                            _a.sent();
+                            expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onError).toHaveBeenCalledWith(expect.any(Error), undefined);
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+    describe('when updating a string schema with refreshStepOnChange', function () {
+        it('debounces the refresh request', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var emailInput;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        renderComponent();
+                        return [4 /*yield*/, screen.findByLabelText('Email')];
+                    case 1:
+                        emailInput = _a.sent();
+                        // paste a valid email
+                        return [4 /*yield*/, user.type(emailInput, 'some@email.com')];
+                    case 2:
+                        // paste a valid email
+                        _a.sent();
+                        expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                        // wait half the debounce delay time
+                        act(function () { return jest.advanceTimersByTime(DEBOUNCE_DELAY_TIMEOUT / 2); });
+                        // simulate appending 3 more characters
+                        return [4 /*yield*/, user.type(emailInput, '.ar')];
+                    case 3:
+                        // simulate appending 3 more characters
+                        _a.sent();
+                        expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                        // wait half the debounce delay time again
+                        act(function () { return jest.advanceTimersByTime(DEBOUNCE_DELAY_TIMEOUT / 2); });
+                        // email field value has now been valid the entire debounce delay time
+                        // but refresh is not triggered because there's been a change (.ar) one second ago
+                        expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                        // now we wait half the delay again
+                        return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    jest.advanceTimersByTime(DEBOUNCE_DELAY_TIMEOUT / 2);
+                                    return [2 /*return*/];
+                                });
+                            }); })];
+                    case 4:
+                        // now we wait half the delay again
+                        _a.sent();
+                        // and ONLY ONE refresh call is expected
+                        expect(mockHttpClient).toHaveBeenCalledTimes(1);
+                        // with the latest value in the body
+                        expect(mockHttpClient).toHaveBeenLastCalledWith('/example-email-refresh', expect.objectContaining({
+                            body: expect.stringContaining('"email":"some@email.com.ar"'),
+                            method: 'POST',
+                        }));
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when entering a value in a persist-async field', function () {
+        function enterCardNumber() {
+            return __awaiter(this, void 0, void 0, function () {
+                var input;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, screen.findByLabelText('Enter your card number')];
+                        case 1:
+                            input = _a.sent();
+                            return [4 /*yield*/, user.type(input, '1234 5678 9012 3456')];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/, input];
+                    }
+                });
+            });
+        }
+        it("doesn't immediately post to the persist-async endpoint", function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        renderComponent();
+                        return [4 /*yield*/, enterCardNumber()];
+                    case 1:
+                        _a.sent();
+                        expect(mockHttpClient).toHaveBeenCalledTimes(0);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        describe('and then focusing outside the field', function () {
+            function blurTheCardNumberField() {
+                return __awaiter(this, void 0, void 0, function () {
+                    var input;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, screen.findByLabelText('Enter your card number')];
+                            case 1:
+                                input = _a.sent();
+                                fireEvent.blur(input);
+                                return [2 /*return*/];
+                        }
+                    });
+                });
+            }
+            it('posts to the persist-async endpoint', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            renderComponent();
+                            return [4 /*yield*/, enterCardNumber()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, blurTheCardNumberField()];
+                        case 2:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(mockHttpClient).toHaveBeenCalledWith('/persist-async-upload', expect.objectContaining({
+                                        body: '{"cardNumber":"1234 5678 9012 3456"}',
+                                    }));
+                                })];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('disables all action buttons during the persist-async operation', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var submitButton;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            renderComponent();
+                            return [4 /*yield*/, enterCardNumber()];
+                        case 1:
+                            _a.sent();
+                            submitButton = screen.getByText('Submit');
+                            return [4 /*yield*/, blurTheCardNumberField()];
+                        case 2:
+                            _a.sent();
+                            expect(submitButton).toBeDisabled();
+                            return [4 /*yield*/, waitFor(function () { return expect(submitButton).toBeEnabled(); })];
+                        case 3:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+    describe('when the step contains validation errors', function () {
+        it('displays the validation errors', function () {
+            renderComponent({ errors: { validation: { email: 'this is a validation error' } } });
+            expect(screen.getByText('this is a validation error')).toBeInTheDocument();
+        });
+    });
+    describe('when the step contains a global error', function () {
+        it('displays the global error', function () {
+            renderComponent({ errors: { error: 'this is a global error' } });
+            expect(screen.getByText('this is a global error')).toBeInTheDocument();
+        });
+    });
+    describe('when the submission response contains the X-DF-Exit header', function () {
+        var requestInit = { status: 200, headers: { 'X-DF-Exit': 'true' } };
+        var submitForm = function () { return user.click(screen.getByText('Submit')); };
+        describe('and a body parseable as a JSON object', function () {
+            it('calls the onCompletion callback with the parsed body', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onCompletion, mockHttpClient;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onCompletion = jest.fn();
+                            mockHttpClient = jest.fn(function () { return getMockJsonResponse({ some: 'data' }, requestInit); });
+                            renderComponent({}, mockHttpClient, { onCompletion: onCompletion });
+                            return [4 /*yield*/, submitForm()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onCompletion).toHaveBeenCalledWith({ some: 'data' });
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('and the body is null', function () {
+            it('calls the onCompletion callback with null', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onCompletion, mockHttpClient;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onCompletion = jest.fn();
+                            mockHttpClient = jest.fn(function () { return getMockJsonResponse(null, requestInit); });
+                            renderComponent({}, mockHttpClient, { onCompletion: onCompletion });
+                            return [4 /*yield*/, submitForm()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onCompletion).toHaveBeenCalledWith(null);
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('and the body is not parseable as a JSON object', function () {
+            it('also calls the onCompletion callback with null', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var onCompletion, onError, mockHttpClient;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onCompletion = jest.fn();
+                            onError = jest.fn();
+                            mockHttpClient = jest.fn(function () { return getMockJsonResponse('', requestInit); });
+                            renderComponent({}, mockHttpClient, { onCompletion: onCompletion, onError: onError });
+                            return [4 /*yield*/, submitForm()];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onCompletion).toHaveBeenCalledWith(null);
+                                })];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+    });
+});