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

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

@@ -0,0 +1,1202 @@
+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 { waitFor } from '@testing-library/react';
+import { Alert } from '@transferwise/components';
+import { DynamicAlert } from '../../layout';
+import { LayoutStep } from '../../step';
+import { mount, wait } from '../../test-utils';
+import DynamicFlow from '../DynamicFlow';
+function mountAndWait() {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return __awaiter(this, void 0, void 0, function () {
+        var wrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    wrapper = mount.apply(void 0, args);
+                    return [4 /*yield*/, waitAndUpdate(wrapper)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, wrapper];
+            }
+        });
+    });
+}
+function waitAndUpdate(wrapper) {
+    return __awaiter(this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, wait(0)];
+                case 1:
+                    _a.sent();
+                    wrapper.update();
+                    return [2 /*return*/];
+            }
+        });
+    });
+}
+describe('Given a component for rendering a dynamic flow', function () {
+    var mockHttpClient;
+    var onCompletion;
+    var onError;
+    var successAction = {
+        label: 'Submit',
+        method: 'POST',
+        url: '/success',
+    };
+    var failureAction = {
+        label: 'Submit',
+        method: 'POST',
+        url: '/failure',
+    };
+    var validationFailureAction = {
+        label: 'Submit',
+        method: 'POST',
+        url: '/validationFailure',
+    };
+    var navigateAction = {
+        label: 'Skip',
+        method: 'GET',
+        url: '/next',
+    };
+    var actions = [successAction, navigateAction, failureAction, validationFailureAction];
+    var numberSchema = { type: 'number' };
+    var stringSchema = { type: 'string' };
+    var numberSchemaWithRefresh = {
+        refreshStepOnChange: true,
+        oneOf: [{ const: 99 }, { const: 100 }, { const: 999 }],
+    };
+    var thingSchema = {
+        $id: '#thing',
+        type: 'object',
+        properties: {
+            a: numberSchema,
+            b: numberSchema,
+        },
+        required: ['a'],
+        displayOrder: ['a', 'b'],
+    };
+    var anotherThingSchema = {
+        $id: '#anotherThing',
+        type: 'object',
+        properties: {
+            c: numberSchema,
+            d: stringSchema,
+        },
+        required: [],
+        displayOrder: ['c', 'd'],
+    };
+    var newSchema = { $id: '#newSchema', type: 'object', properties: { newModel: numberSchema } };
+    var newLayout = [{ type: 'form', schema: newSchema }];
+    var newStep = { type: 'form', layout: newLayout, model: { newModel: 123 } };
+    var formStep = {
+        type: 'form',
+        id: 'create-thing', // For tracking
+        layout: [
+            {
+                type: 'form',
+                schema: thingSchema,
+            },
+            {
+                type: 'form',
+                schema: anotherThingSchema,
+            },
+        ],
+        actions: actions,
+        model: { a: 99 },
+        refreshUrl: '/refresh',
+    };
+    var formStepNoLayout = __assign({}, formStep);
+    delete formStepNoLayout.layout;
+    var formStepWithErrors = __assign(__assign({}, formStep), { errors: { validation: { a: 'Step validation error' }, error: 'Step global error' } });
+    formStepWithErrors.layout[0].schema.properties.a = __assign(__assign({}, formStepWithErrors.layout[0].schema.properties.a), { refreshStepOnChange: true, refreshUrl: '/formNoLayout', oneOf: [{ const: 1 }, { const: 99 }, { const: 100 }, { const: 999 }] });
+    var decisionStep = {
+        type: 'decision',
+        id: 'decide-thing-type',
+        title: 'Thing type',
+        description: 'Please choose between types of things',
+        options: [
+            {
+                title: 'Thing one',
+                description: 'The first type of thing',
+                url: 'https://...',
+            },
+            {
+                title: 'Thing two',
+                url: 'https://...',
+                enabled: false,
+            },
+        ],
+    };
+    var finalStep = {
+        type: 'final',
+        id: 'thing-final',
+        success: true,
+        details: {
+            image: '/images/1234.png',
+            title: 'We create the thing!',
+            description: 'You now do stuff with the thing',
+            actionTitle: 'Continue',
+        },
+        result: {
+            exitValue: 'value',
+        },
+    };
+    var formUrl = '/form';
+    var formWithErrorsUrl = '/formWithErrors';
+    var decisionUrl = '/decision';
+    var errorResponse = {
+        error: new Error(),
+    };
+    var validationErrorResponse = {
+        error: "That's not allowed",
+        validation: {
+            a: 'something wrong with this',
+        },
+    };
+    var exitResult = {
+        testKey: 'value',
+        anotherTestKey: 'anotherValue',
+    };
+    var generateETag = function (response) { return JSON.stringify(response).slice(0, 100); };
+    var resolve = function (response, init) {
+        if (init === void 0) { init = {}; }
+        return new Promise(function (promiseResolve) {
+            setTimeout(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    promiseResolve(new Response(JSON.stringify(response), __assign(__assign({}, init), { headers: __assign(__assign({}, init.headers), { etag: generateETag(response) }) })));
+                    return [2 /*return*/];
+                });
+            }); }, 0);
+        });
+    };
+    var resolveWithExitHeader = function (response) {
+        return resolve(response, { headers: { 'X-DF-Exit': true } });
+    };
+    var mockRequest = function (url) {
+        switch (url) {
+            case '/form':
+                return resolve(formStep);
+            case '/formNoLayout':
+                return resolve(formStepNoLayout);
+            case '/formWithErrors':
+                return resolve(formStepWithErrors);
+            case '/decision':
+                return resolve(decisionStep);
+            case '/final':
+                return resolve(finalStep);
+            case '/exit':
+                return resolve({});
+            case '/exitWithResult':
+                return resolve(exitResult);
+            case '/exitWithHeader':
+                return resolveWithExitHeader(exitResult);
+            case '/navigate':
+                return resolve(newStep);
+            case '/success':
+                return resolve(newStep);
+            case '/refreshWithSameFormStep':
+                return resolve(null, { status: 304, etag: generateETag(formStep) });
+            case '/refresh':
+            case '/refreshFromTrigger':
+                return resolve(newStep);
+            case '/failure':
+                return resolve(errorResponse);
+            case '/failedStep':
+                return resolve({ arbitraryKey: 'Not Authorized' }, { status: 401 });
+            case '/failedStepNoJson':
+                return resolve('some error string', { status: 500 });
+            case '/validationFailure':
+                return resolve(validationErrorResponse, { status: 422 });
+            case '/submitWithRefreshUrl':
+                return resolve({ refreshUrl: '/refresh-form-url' }, { status: 422 });
+            case '/skip':
+                return resolve({ skip: true });
+            default:
+                return resolve(validationErrorResponse);
+        }
+    };
+    beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            mockHttpClient = jest.fn().mockImplementation(mockRequest);
+            onCompletion = jest.fn();
+            onError = jest.fn();
+            return [2 /*return*/];
+        });
+    }); });
+    describe('when instantiated', function () {
+        beforeEach(function () {
+            mount(_jsx(DynamicFlow, { httpClient: mockHttpClient, initialAction: { url: decisionUrl }, onCompletion: onCompletion }));
+        });
+        it('should load the step specification using the supplied URL', function () {
+            expect(mockHttpClient).toHaveBeenCalledWith(decisionUrl, expect.objectContaining({ method: 'GET' }));
+        });
+    });
+    describe('when there is JS step', function () {
+        it.todo('should use the DynamicJS component');
+    });
+    describe('when there is an error fetching a step', function () {
+        describe('and the response is valid JSON', function () {
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: '/failedStep' }, httpClient: mockHttpClient, onError: onError }))];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should trigger onError callback with the status code (because it is the initial request)', function () {
+                expect(onError).toHaveBeenCalledWith(expect.objectContaining({ arbitraryKey: 'Not Authorized' }), 401);
+            });
+        });
+        describe('but the response is not JSON', function () {
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: '/failedStepNoJson' }, httpClient: mockHttpClient, onError: onError }))];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should still trigger onError callback with the status code (because it is the initial request)', function () {
+                expect(onError).toHaveBeenCalledWith(expect.anything(), 500);
+            });
+        });
+    });
+    describe('when there is a form step with errors', function () {
+        var component;
+        var getStep = function () { return component.find(LayoutStep); };
+        beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formWithErrorsUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                    case 1:
+                        component = _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should pass the validation errors to the LayoutStep component', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                expect(getStep().props().formErrors).toMatchObject({
+                    a: 'Step validation error',
+                });
+                return [2 /*return*/];
+            });
+        }); });
+        it('should pass the global errors to the LayoutStep component', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                expect(component.find(DynamicAlert).props().component.markdown).toBe('Step global error');
+                return [2 /*return*/];
+            });
+        }); });
+        it('should clear the validation errors when refreshing to a step without errors', function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        getStep().invoke('onModelChange')({
+                            model: { a: 100 },
+                            formSchema: formStepWithErrors.layout[0].schema,
+                            triggerModel: 100,
+                            triggerSchema: formStepWithErrors.layout[0].schema.properties.a,
+                            lastTriggerModel: 99,
+                        });
+                        return [4 /*yield*/, waitAndUpdate(component)];
+                    case 1:
+                        _a.sent();
+                        expect(getStep().props().formErrors).toBeNull();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    describe('when there is a step layout', function () {
+        describe('initialisation', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should use the LayoutStep to render it', function () {
+                expect(getStep()).toBeTruthy();
+            });
+            it('should inline the form schema(s) and pass as the specification as a layout', function () {
+                expect(getStep().prop('stepSpecification')).toStrictEqual(formStep);
+            });
+            it('should pass the layout the step model', function () {
+                expect(getStep().prop('model')).toStrictEqual(formStep.model);
+            });
+        });
+        describe('when a model update is triggered by multiple schemas', function () {
+            var newModel1 = { b: 'c' };
+            var newModel2 = { c: 2 };
+            var expectedModel = { b: 'c', c: 2 };
+            it('should pass the expected model to the layout', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var component, getStep;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep = function () { return component.find(LayoutStep); };
+                            getStep().invoke('onModelChange')({
+                                model: newModel1,
+                                formSchema: thingSchema,
+                                triggerModel: newModel1.b,
+                                triggerSchema: stringSchema,
+                            });
+                            getStep().invoke('onModelChange')({
+                                model: newModel2,
+                                formSchema: anotherThingSchema,
+                                triggerModel: newModel2.c,
+                                triggerSchema: numberSchema,
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            expect(getStep().prop('model')).toStrictEqual(expectedModel);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when a model update is triggered by a schema with refreshStepOnChange, it should only refresh if the changed model is valid or was valid before', function () {
+            var triggerSchema = {
+                type: 'number',
+                refreshStepOnChange: true,
+                oneOf: [{ const: 99 }, { const: 100 }, { const: 199 }],
+            };
+            var cases = [
+                {
+                    title: 'should refresh when new value is valid and prev value was valid',
+                    newValue: 100,
+                    preValue: 99,
+                    expected: 1,
+                },
+                {
+                    title: 'should refresh when new value is NOT valid and prev value was valid',
+                    newValue: 'invalid',
+                    preValue: 99,
+                    expected: 1,
+                },
+                {
+                    title: 'should refresh when new value is valid and prev value was NOT valid',
+                    newValue: 199,
+                    preValue: 'invalid',
+                    expected: 1,
+                },
+                {
+                    title: 'should NOT refresh when new value is NOT valid and prev value was NOT valid',
+                    newValue: 'more invalid',
+                    preValue: 'invalid',
+                    expected: 0,
+                },
+            ];
+            cases.forEach(function (_a) {
+                var title = _a.title, newValue = _a.newValue, preValue = _a.preValue, expected = _a.expected;
+                it("".concat(title), function () { return __awaiter(void 0, void 0, void 0, function () {
+                    var component;
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                            case 1:
+                                component = _a.sent();
+                                mockHttpClient.mockClear();
+                                component.find(LayoutStep).invoke('onModelChange')({
+                                    model: { a: newValue },
+                                    formSchema: thingSchema,
+                                    triggerModel: newValue,
+                                    triggerSchema: triggerSchema,
+                                    lastTriggerModel: preValue,
+                                });
+                                return [4 /*yield*/, waitFor(function () {
+                                        expect(mockHttpClient).toHaveBeenCalledTimes(expected);
+                                    })];
+                            case 2:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+        });
+        describe('when a model update is triggered by a schema with refreshStepOnChange', function () {
+            var newModel = { a: 1, b: 999 };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: newModel,
+                                formSchema: thingSchema,
+                                triggerModel: newModel.b,
+                                triggerSchema: numberSchemaWithRefresh,
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should use the model to request a new schema', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith('/refresh', expect.objectContaining({
+                    method: 'POST',
+                    body: JSON.stringify(newModel),
+                }));
+            });
+            it('should pass the new schema to the layout', function () {
+                expect(getStep().prop('stepSpecification')).toStrictEqual(newStep);
+            });
+            it('should pass the new model (from the new step) to the layout', function () {
+                expect(getStep().prop('model')).toStrictEqual(newStep.model);
+            });
+        });
+        describe('when a model update is triggered by a schema with refreshStepOnChange and refreshUrl', function () {
+            var newModel = { a: 1, b: 999 };
+            var triggerSchema = __assign(__assign({}, numberSchemaWithRefresh), { refreshUrl: '/refreshFromTrigger' });
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: newModel,
+                                formSchema: thingSchema,
+                                triggerModel: newModel.b,
+                                triggerSchema: triggerSchema,
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should use the model to request a new schema', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith('/refreshFromTrigger', expect.objectContaining({
+                    method: 'POST',
+                    body: JSON.stringify(newModel),
+                }));
+            });
+            it('should pass the new schema to the layout', function () {
+                expect(getStep().prop('stepSpecification')).toStrictEqual(newStep);
+            });
+            it('should pass the new model (from the newStep) to the layout', function () {
+                expect(getStep().prop('model')).toStrictEqual(newStep.model);
+            });
+        });
+        describe('when a refresh requirements call fails', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1, b: 'c' },
+                                formSchema: thingSchema,
+                                triggerModel: 'c',
+                                triggerSchema: thingSchema,
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should continue to render the original step', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    expect(getStep().prop('stepSpecification')).toStrictEqual(formStep);
+                    return [2 /*return*/];
+                });
+            }); });
+        });
+        describe('when the layout broadcasts an action without method and the model is valid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')({
+                                label: 'Submit',
+                                url: '/success',
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should make the corresponding request using the POST method by default', function () {
+                expect(mockHttpClient).toHaveBeenLastCalledWith(successAction.url, expect.objectContaining({
+                    method: 'POST',
+                    body: JSON.stringify({ a: 1 }),
+                }));
+            });
+        });
+        describe('when the layout broadcasts a POST action and the model is valid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(successAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should tell the layout the form is submitted then reset to false on step reload', function () {
+                expect(getStep().prop('submitted')).toBe(false);
+            });
+            it('should make the corresponding request', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith(successAction.url, expect.objectContaining({
+                    method: successAction.method,
+                    body: JSON.stringify({ a: 1 }),
+                }));
+            });
+        });
+        describe('when the layout broadcasts a POST action and the model is invalid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            getStep().invoke('onModelChange')({
+                                model: {},
+                                formSchema: thingSchema,
+                                triggerModel: undefined,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(successAction);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should tell the layout the form is submitted', function () {
+                expect(getStep().prop('submitted')).toBe(true);
+            });
+            it('should not make the corresponding request', function () {
+                expect(mockHttpClient).not.toHaveBeenCalled();
+            });
+        });
+        describe('when the layout broadcasts a POST action with skipValidation, and the model is invalid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            getStep().invoke('onModelChange')({
+                                model: {},
+                                formSchema: thingSchema,
+                                triggerModel: undefined,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(__assign(__assign({}, successAction), { skipValidation: true }));
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should NOT tell the layout the form is submitted', function () {
+                expect(getStep().prop('submitted')).toBe(false);
+            });
+            it('should STILL make the corresponding request', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith('/success', expect.objectContaining({ body: '{}' }));
+            });
+        });
+        describe('when the layout broadcasts an exit action with POST method and URL but the model is invalid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            var exitAction = {
+                method: 'POST',
+                url: '/exit',
+                exit: true,
+            };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            getStep().invoke('onModelChange')({
+                                model: {},
+                                formSchema: thingSchema,
+                                triggerModel: undefined,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(exitAction);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should tell the layout the form is submitted', function () {
+                expect(getStep().prop('submitted')).toBe(true);
+            });
+            it('should not make the corresponding request', function () {
+                expect(mockHttpClient).not.toHaveBeenCalled();
+            });
+        });
+        describe('when the layout broadcasts a GET action and the model is invalid', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: {},
+                                formSchema: thingSchema,
+                                triggerModel: undefined,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(navigateAction);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should ignore the invalid model and make the corresponding request', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith(navigateAction.url, expect.objectContaining({ method: navigateAction.method }));
+            });
+        });
+        describe('when the layout broadcasts a GET action with exit=true', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onCompletion.mockClear();
+                            return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: {},
+                                formSchema: thingSchema,
+                                triggerModel: undefined,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')({
+                                title: 'Skip',
+                                method: 'GET',
+                                url: '/skip',
+                                exit: true,
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should ignore the invalid model, make the corresponding request and exit with the response body', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            expect(mockHttpClient).toHaveBeenCalledWith('/skip', expect.objectContaining({ method: 'GET' }));
+                            return [4 /*yield*/, waitFor(function () {
+                                    expect(onCompletion).toHaveBeenCalledWith({ skip: true });
+                                })];
+                        case 1:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when we submit an action but we receive a server error', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(validationFailureAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should pass those errors to the layout', function () {
+                expect(getStep().prop('formErrors')).toMatchObject(validationErrorResponse.validation);
+            });
+            it('should render the globalError as an Alert', function () {
+                expect(getStep().prop('formErrors')).toMatchObject(validationErrorResponse.validation);
+                expect(component.find(Alert).prop('message')).toBe(validationErrorResponse.error);
+            });
+            it('should clear the global error when the model changes', function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            getStep().invoke('onModelChange')({
+                                model: { a: 2 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 1:
+                            _a.sent();
+                            expect(component.find(Alert)).toHaveLength(0);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('when we submit an action but we receive a refreshUrl', function () {
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')({ method: 'POST', url: '/submitWithRefreshUrl' });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should refresh step using the provided URL, without debouncing', function () {
+                expect(mockHttpClient).toHaveBeenLastCalledWith('/refresh-form-url', expect.objectContaining({
+                    body: '{"a":1}',
+                    method: 'POST',
+                }));
+            });
+        });
+        describe('when we submit an action and we receive a new step', function () {
+            var component;
+            var onEvent;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onEvent = jest.fn();
+                            return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion, onEvent: onEvent }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(successAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should update the flow to use that step', function () {
+                expect(getStep().prop('stepSpecification')).toStrictEqual(newStep);
+            });
+            it('should trigger the onEvent callback with the new step id', function () {
+                expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Step Started', expect.objectContaining({ stepId: newStep.id }));
+            });
+        });
+        describe('when we submit an action and do not receive an error or valid step', function () {
+            var exitAction = {
+                url: '/exit',
+                method: 'POST',
+                exit: true,
+            };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(exitAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should exit the flow', function () {
+                expect(onCompletion).toHaveBeenCalledTimes(1);
+            });
+        });
+        describe('when we submit an action with additional data', function () {
+            var dataAction = __assign(__assign({}, successAction), { data: { a: 2, c: true } });
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(dataAction);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should submit the latest model combined with the action data', function () {
+                expect(mockHttpClient).toHaveBeenCalledWith(dataAction.url, expect.objectContaining({
+                    method: dataAction.method,
+                    body: JSON.stringify({ a: 2, c: true }),
+                }));
+            });
+        });
+        describe('when the layout triggers a client side exit action', function () {
+            var exitAction = {
+                title: 'Exit',
+                type: 'delete',
+                exit: true,
+                result: {
+                    exitValue: 'value',
+                },
+            };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onAction')(exitAction);
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should trigger the onCompletion callback with exit data', function () {
+                expect(onCompletion).toHaveBeenCalledWith(exitAction.result);
+            });
+        });
+        describe("when we submit an exit action which doesn't return a result", function () {
+            var exitAction = {
+                url: '/exit',
+                method: 'POST',
+                exit: true,
+                result: {
+                    test: 123,
+                },
+            };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onAction')(exitAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it("should exit the flow with the action's result", function () {
+                expect(onCompletion).toHaveBeenCalledWith(exitAction.result);
+            });
+        });
+        describe('when we submit an exit action which does return a result', function () {
+            var exitAction = {
+                url: '/exitWithResult',
+                method: 'POST',
+                exit: true,
+                result: {
+                    test: 123,
+                    testKey: 'overridenValue',
+                },
+            };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onAction')(exitAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should exit the flow with the merged result', function () {
+                var mergedResult = __assign(__assign({}, exitResult), exitAction.result);
+                expect(onCompletion).toHaveBeenCalledWith(mergedResult);
+            });
+        });
+        describe('when we submit an action return with exit headers', function () {
+            var exitAction = {
+                url: '/exitWithHeader',
+                method: 'POST',
+            };
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            getStep().invoke('onModelChange')({
+                                model: { a: 1 },
+                                formSchema: thingSchema,
+                                triggerModel: 1,
+                                triggerSchema: numberSchema,
+                            });
+                            getStep().invoke('onAction')(exitAction);
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            it('should exit the flow', function () {
+                expect(onCompletion).toHaveBeenCalledTimes(1);
+            });
+            it('should not clear step specifications', function () {
+                expect(getStep().prop('stepSpecification')).toStrictEqual(formStep);
+            });
+        });
+        describe('when we trigger onAction, but the action is disabled', function () {
+            var disabledAction = {
+                title: 'Submit',
+                url: '/success',
+                method: 'POST',
+                disabled: true,
+            };
+            it('should NOT trigger the action', function () { return __awaiter(void 0, void 0, void 0, function () {
+                var component;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            component.find(LayoutStep).invoke('onAction')(disabledAction);
+                            expect(mockHttpClient).not.toHaveBeenCalled();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+        });
+        describe('ETags', function () {
+            var newModel = { a: 1, b: 999 };
+            var triggerSchema = __assign(__assign({}, numberSchemaWithRefresh), { refreshUrl: '/refreshWithSameFormStep' });
+            var component;
+            var getStep = function () { return component.find(LayoutStep); };
+            beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: formUrl }, httpClient: mockHttpClient, onCompletion: onCompletion }))];
+                        case 1:
+                            component = _a.sent();
+                            mockHttpClient.mockClear();
+                            getStep().invoke('onModelChange')({
+                                model: newModel,
+                                formSchema: thingSchema,
+                                triggerModel: newModel.b,
+                                triggerSchema: triggerSchema,
+                            });
+                            return [4 /*yield*/, waitAndUpdate(component)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            }); });
+            describe('when requesting a refresh', function () {
+                it('should pass the current ETag in the "If-None-Match" header', function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, waitFor(function () {
+                                    expect(mockHttpClient).toHaveBeenCalledWith('/refreshWithSameFormStep', expect.objectContaining({
+                                        method: 'POST',
+                                        body: JSON.stringify(newModel),
+                                        headers: expect.objectContaining({ 'If-None-Match': expect.any(String) }),
+                                    }));
+                                })];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); });
+            });
+            describe('when the refreshed step has empty body and status 304', function () {
+                it('should request the refresh using the current ETag', function () {
+                    expect(mockHttpClient).toHaveBeenCalledWith('/refreshWithSameFormStep', expect.objectContaining({
+                        method: 'POST',
+                        body: JSON.stringify(newModel),
+                        headers: expect.objectContaining({ 'If-None-Match': expect.any(String) }),
+                    }));
+                });
+                it('should keep the current schema in the the layout', function () {
+                    expect(getStep().prop('stepSpecification')).toStrictEqual(formStep);
+                });
+                it('should pass the new model to the layout', function () {
+                    expect(getStep().prop('model')).toStrictEqual(newModel);
+                });
+            });
+        });
+    });
+    describe('when there is a step with exceptions', function () {
+        var component;
+        var getStep = function () { return component.find(LayoutStep); };
+        beforeEach(function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, mountAndWait(_jsx(DynamicFlow, { initialAction: { url: decisionUrl }, httpClient: mockHttpClient, onCompletion: onCompletion, onError: onError }))];
+                    case 1:
+                        component = _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        describe('when a JS error is thrown', function () {
+            var errors = new Error();
+            beforeEach(function () {
+                getStep().simulateError(errors);
+            });
+            it('should call onError with error', function () {
+                expect(onCompletion).not.toHaveBeenCalled();
+                expect(onError).toHaveBeenCalledWith(errors);
+            });
+        });
+    });
+});