@wise/dynamic-flow-client 3.11.3 → 3.11.4-experiment-node20-aa45bc2

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

@@ -0,0 +1,475 @@
+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*/];
+                }
+            });
+        }); });
+    });
+});