@wise/dynamic-flow-client 3.2.2-short-962e290 → 3.2.2

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

@@ -1,475 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { screen, waitFor } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
-import { abortableDelay, getMockHttpClient } from '../../../test-utils/fetch-utils';
-import DynamicFlow from '../DynamicFlow';
-import { renderWithProviders } from '../../test-utils';
-var user = userEvent.setup({ advanceTimers: function (delay) { return jest.advanceTimersByTime(delay); } });
-var getSearchStep = function (search) {
-    if (search === void 0) { search = {}; }
-    return ({
-        id: 'Features/Search',
-        title: 'Search Layout',
-        schemas: [],
-        layout: [
-            __assign({ type: 'search', title: 'Title', url: '/search', method: 'GET', param: 'query', emptyMessage: 'No results' }, search),
-        ]
-    });
-};
-var getSearchResponse = function (query) {
-    return new Response(JSON.stringify({
-        results: [
-            {
-                type: 'action',
-                title: "Title ".concat(query, " #1"),
-                description: "This is an action search result.",
-                value: {
-                    id: 'search-result-action-id-01',
-                    url: "/next-step",
-                    method: 'GET'
-                }
-            },
-            {
-                type: 'search',
-                title: "Title ".concat(query, " #2"),
-                description: "This is a search search result.",
-                value: {
-                    url: "/new-search",
-                    method: 'GET',
-                    param: 'new-query',
-                    query: 'new query with special characters (!@£$%^&*)'
-                }
-            },
-        ]
-    }));
-};
-describe('DynamicFlow / Search Layout Component', function () {
-    var onCompletion = jest.fn();
-    var onError = jest.fn();
-    var httpClient = jest.fn();
-    beforeEach(function () {
-        jest.clearAllMocks();
-        jest.useFakeTimers();
-    });
-    afterEach(function () {
-        jest.useRealTimers();
-    });
-    describe('user interface', function () {
-        it('renders a search input with the title as a label', function () {
-            var title = 'Search for something';
-            var searchStep = getSearchStep({ title: title });
-            renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-            expect(screen.getByLabelText(title)).toBeInTheDocument();
-        });
-    });
-    describe('when user focuses the text field', function () {
-        it('calls onEvent with the correct analytics event', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var title, searchStep, onEvent, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        title = 'Search for something';
-                        searchStep = getSearchStep({ title: title });
-                        onEvent = jest.fn();
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onEvent: onEvent, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.click(input)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () {
-                                return expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Search Started', {
-                                    flowId: 'the-flow-id',
-                                    stepId: 'Features/Search'
-                                });
-                            })];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when user types into text field', function () {
-        it('makes a GET request to the search endpoint', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var title, query, httpClient, searchStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        title = 'Search for something';
-                        query = 'test';
-                        httpClient = jest.fn(function () { return Promise.resolve(new Response(null, { status: 404 })); });
-                        searchStep = getSearchStep({ title: title, url: '/search', method: 'GET' });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, query)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(1); })];
-                    case 2:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledWith("/search?query=".concat(query), expect.anything());
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('makes a GET request to the search endpoint, with the correct query parameters', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var title, query, httpClient, searchStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        title = 'Search for something';
-                        query = 'test';
-                        httpClient = jest.fn(function () { return Promise.resolve(new Response(null, { status: 404 })); });
-                        searchStep = getSearchStep({ title: title, url: '/search?extra=stuff', method: 'GET' });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, query)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(1); })];
-                    case 2:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledWith("/search?extra=stuff&query=".concat(query), expect.anything());
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('makes a POST request to the search endpoint', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient, title, method, query, searchStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        httpClient = jest.fn(function () { return Promise.resolve(new Response(null, { status: 404 })); });
-                        title = 'Search for something';
-                        method = 'POST';
-                        query = 'test';
-                        searchStep = getSearchStep({ title: title, method: method });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, query)];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(1); })];
-                    case 2:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledWith('/search', expect.objectContaining({
-                            method: 'POST',
-                            body: JSON.stringify({ query: query })
-                        }));
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        it('renders the search results', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient, title, searchStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        httpClient = jest.fn(function () { return Promise.resolve(getSearchResponse('abcd')); });
-                        title = 'Search for something';
-                        searchStep = getSearchStep({ title: title });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, 'abcd')];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Title abcd #1')).resolves.toBeInTheDocument()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Title abcd #2')).resolves.toBeInTheDocument()];
-                    case 3:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-        describe('debouncing: when the user resumes typing before the first request is made', function () {
-            it('only makes 1 request with the last query string, rather than every time the search query changes', function () { return __awaiter(void 0, void 0, void 0, function () {
-                var httpClient, title, searchStep, input;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            httpClient = jest.fn(function () { return Promise.resolve(new Response(null, { status: 404 })); });
-                            title = 'Search for something';
-                            searchStep = getSearchStep({ title: title });
-                            renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                            input = screen.getByLabelText(title);
-                            return [4 /*yield*/, user.type(input, 'abcd')];
-                        case 1:
-                            _a.sent();
-                            act(function () {
-                                jest.advanceTimersByTime(200); // half the debounce time
-                            });
-                            expect(httpClient).toHaveBeenCalledTimes(0); // no request yet
-                            return [4 /*yield*/, user.type(input, 'efgh')];
-                        case 2:
-                            _a.sent(); // continue typing on the text field
-                            return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(1); })];
-                        case 3:
-                            _a.sent();
-                            expect(httpClient).toHaveBeenCalledWith("/search?query=abcdefgh", expect.anything());
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        });
-        describe('aborting requests', function () {
-            describe('when the user types into the text field, then clears it before the request is made', function () {
-                it('aborts the request', function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var httpClient, title, searchStep, input;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                httpClient = jest.fn(function () { return Promise.resolve(new Response(null, { status: 404 })); });
-                                title = 'Search for something';
-                                searchStep = getSearchStep({ title: title });
-                                renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                                input = screen.getByLabelText(title);
-                                return [4 /*yield*/, user.type(input, 'abcd')];
-                            case 1:
-                                _a.sent();
-                                return [4 /*yield*/, user.clear(input)];
-                            case 2:
-                                _a.sent();
-                                act(function () {
-                                    jest.advanceTimersByTime(500); // more than the debounce time
-                                });
-                                return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(0); })];
-                            case 3:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-            describe('when the user types into the text field, and a first request is made, then they type again before the request resolves', function () {
-                it('aborts the first request and makes a new one, only displaying the results for the second request', function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var httpClient, title, searchStep, input;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0:
-                                httpClient = jest.fn(function (url, init) { return __awaiter(void 0, void 0, void 0, function () {
-                                    var query;
-                                    return __generator(this, function (_a) {
-                                        switch (_a.label) {
-                                            case 0:
-                                                query = String(url).split('=')[1];
-                                                // eslint-disable-next-line jest/no-conditional-in-test
-                                                return [4 /*yield*/, abortableDelay(query === 'abcd' ? 2000 : 500, init === null || init === void 0 ? void 0 : init.signal)];
-                                            case 1:
-                                                // eslint-disable-next-line jest/no-conditional-in-test
-                                                _a.sent();
-                                                return [2 /*return*/, getSearchResponse(query)];
-                                        }
-                                    });
-                                }); });
-                                title = 'Search for something';
-                                searchStep = getSearchStep({ title: title });
-                                renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                                input = screen.getByLabelText(title);
-                                return [4 /*yield*/, user.type(input, 'abcd')];
-                            case 1:
-                                _a.sent();
-                                act(function () {
-                                    jest.advanceTimersByTime(1000);
-                                });
-                                return [4 /*yield*/, user.type(input, 'efgh')];
-                            case 2:
-                                _a.sent();
-                                act(function () {
-                                    jest.advanceTimersByTime(1000);
-                                });
-                                return [4 /*yield*/, waitFor(function () {
-                                        expect(screen.getByText('Title abcdefgh #1')).toBeInTheDocument();
-                                    })];
-                            case 3:
-                                _a.sent();
-                                return [4 /*yield*/, waitFor(function () { return expect(httpClient).toHaveBeenCalledTimes(2); })];
-                            case 4:
-                                _a.sent();
-                                return [4 /*yield*/, act(function () {
-                                        jest.advanceTimersByTime(1500);
-                                        return Promise.resolve();
-                                    })];
-                            case 5:
-                                _a.sent();
-                                expect(screen.queryByText('Title abcd #1')).not.toBeInTheDocument();
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
-            });
-        });
-    });
-    describe('when the user clicks on an action search result', function () {
-        it('loads a new step and triggers analytics event', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient, onEvent, title, searchStep, nextStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        httpClient = jest.fn(getMockHttpClient({
-                            '/search?query=abcd': function () { return Promise.resolve(getSearchResponse('abcd')); },
-                            '/next-step': function () { return Promise.resolve(new Response(JSON.stringify(nextStep))); }
-                        }));
-                        onEvent = jest.fn();
-                        title = 'Search for something';
-                        searchStep = getSearchStep({ title: title, url: '/search' });
-                        nextStep = {
-                            id: 'next-step',
-                            title: 'Next Step',
-                            schemas: [],
-                            layout: [
-                                {
-                                    type: 'paragraph',
-                                    text: 'This is the next step.'
-                                },
-                            ]
-                        };
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError, onEvent: onEvent }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, 'abcd')];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Title abcd #1')).resolves.toBeInTheDocument()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, user.click(screen.getByText('Title abcd #1'))];
-                    case 3:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Next Step')).resolves.toBeInTheDocument()];
-                    case 4:
-                        _a.sent();
-                        expect(screen.queryByText('Title abcd #1')).not.toBeInTheDocument();
-                        expect(onEvent).toHaveBeenCalledWith('Dynamic Flow - Search Result Selected', {
-                            flowId: 'the-flow-id',
-                            stepId: 'Features/Search',
-                            type: 'action',
-                            actionId: 'search-result-action-id-01'
-                        });
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when the user clicks on a search search result', function () {
-        it('makes a new search request, displays the results, and updates the search input', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var httpClient, title, searchStep, input;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        httpClient = jest.fn(getMockHttpClient({
-                            '/search?query=abcd': function () { return Promise.resolve(getSearchResponse('abcd')); },
-                            '/new-search?new-query=new+query+with+special+characters+%28%21%40%C2%A3%24%25%5E%26*%29': function () { return Promise.resolve(getSearchResponse('new query results')); }
-                        }));
-                        title = 'Search for something';
-                        searchStep = getSearchStep({ title: title, url: '/search' });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, 'abcd')];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Title abcd #1')).resolves.toBeInTheDocument()];
-                    case 2:
-                        _a.sent();
-                        return [4 /*yield*/, user.click(screen.getByText('Title abcd #2'))];
-                    case 3:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledWith("/new-search?new-query=new+query+with+special+characters+%28%21%40%C2%A3%24%25%5E%26*%29", expect.anything());
-                        return [4 /*yield*/, expect(screen.findByText('Title new query results #1')).resolves.toBeInTheDocument()];
-                    case 4:
-                        _a.sent();
-                        expect(screen.getByLabelText(title)).toHaveValue('new query with special characters (!@£$%^&*)');
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-    describe('when the search request fails', function () {
-        it('displays an error message and allows to retry', function () { return __awaiter(void 0, void 0, void 0, function () {
-            var responses, callCount, httpClient, title, searchStep, input, link;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        responses = [
-                            Promise.resolve(new Response(null, { status: 404 })),
-                            Promise.resolve(getSearchResponse('abcd')),
-                        ];
-                        callCount = 0;
-                        httpClient = jest.fn(function () {
-                            var response = responses[Math.min(callCount, responses.length - 1)];
-                            callCount += 1;
-                            return response;
-                        });
-                        title = 'Search for something';
-                        searchStep = getSearchStep({ title: title, url: '/search' });
-                        renderWithProviders(_jsx(DynamicFlow, { flowId: "the-flow-id", httpClient: httpClient, initialStep: searchStep, onCompletion: onCompletion, onError: onError }));
-                        input = screen.getByLabelText(title);
-                        return [4 /*yield*/, user.type(input, 'abcd')];
-                    case 1:
-                        _a.sent();
-                        return [4 /*yield*/, expect(screen.findByText('Something went wrong.')).resolves.toBeInTheDocument()];
-                    case 2:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledTimes(1);
-                        link = screen.getByText('Retry');
-                        return [4 /*yield*/, user.click(link)];
-                    case 3:
-                        _a.sent();
-                        expect(httpClient).toHaveBeenCalledTimes(2);
-                        return [4 /*yield*/, expect(screen.findByText('Title abcd #1')).resolves.toBeInTheDocument()];
-                    case 4:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); });
-    });
-});