@simplybusiness/mobius 3.0.0

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/SearchResults.test.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const _1 = require(".");
+const mockApiResults_1 = require("../mockApiResults");
+const defaultLabels = {
+    input: "",
+    exact: "Exact matches",
+    suggested: "Suggested matches",
+    loading: "",
+    noResults: "View all trades",
+    description: "",
+    placeholder: "",
+};
+const mockedTrades = [
+    {
+        name: "exact",
+        title: defaultLabels.exact,
+        children: [...mockApiResults_1.exactResults],
+    },
+    {
+        name: "suggested",
+        title: defaultLabels.suggested,
+        children: [...mockApiResults_1.suggestedResults],
+    },
+];
+const fallbackUrl = "https://www.example.com/";
+describe("SearchResults", () => {
+    beforeAll(() => {
+        // Suppress the following warning
+        // If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility
+        jest.spyOn(console, "warn").mockImplementation(jest.fn());
+    });
+    describe("given items list contain no results item", () => {
+        it("displays no results label with fallback url", async () => {
+            const props = {
+                inputValue: "",
+                items: [
+                    {
+                        name: defaultLabels.noResults,
+                        title: defaultLabels.noResults,
+                        children: [],
+                    },
+                ],
+                labels: Object.assign(Object.assign({}, defaultLabels), { noResults: defaultLabels.noResults }),
+                fallbackUrl,
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+            };
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            expect(react_1.screen.getByText(defaultLabels.noResults)).toHaveAttribute("href", fallbackUrl);
+        });
+    });
+    describe("given a list of trades", () => {
+        it("displays the trades grouped by exact and suggested matches", async () => {
+            const props = {
+                inputValue: "",
+                items: mockedTrades,
+                labels: defaultLabels,
+                fallbackUrl: "https://www.example.com/",
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+            };
+            const exactResultTrade = "Swimming pool installers";
+            const suggestedResultTrade = "Fitness instructor";
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            expect(react_1.screen.getByText(defaultLabels.exact)).toBeInTheDocument();
+            expect(container.querySelector(`[data-key='${exactResultTrade}']`)).toBeInTheDocument();
+            expect(react_1.screen.getByText(defaultLabels.suggested)).toBeInTheDocument();
+            expect(container.querySelector(`[data-key='${suggestedResultTrade}']`)).toBeInTheDocument();
+        });
+    });
+    describe("given input value changes", () => {
+        it("onInputChange prop is invoked", () => {
+            const onInputChangeHandler = jest.fn();
+            const props = {
+                inputValue: "",
+                items: mockedTrades,
+                labels: defaultLabels,
+                fallbackUrl: "https://www.example.com/",
+                onInputChange: onInputChangeHandler,
+                onSelectionChange: () => { },
+            };
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
+            const input = react_1.screen.getByRole("combobox");
+            react_1.fireEvent.change(input, { target: { value: "New text" } });
+            expect(onInputChangeHandler).toHaveBeenCalled();
+        });
+    });
+    describe("given user selection value changes", () => {
+        it("onSelectionChange prop is invoked", async () => {
+            const onSelectionChangeHandler = jest.fn();
+            const props = {
+                inputValue: "",
+                items: mockedTrades,
+                labels: defaultLabels,
+                fallbackUrl: "https://www.example.com/",
+                onInputChange: () => { },
+                onSelectionChange: onSelectionChangeHandler,
+            };
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SearchResults, Object.assign({}, props)));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            const option = container.querySelector(`[data-key='Swimming pool installers']`);
+            react_1.fireEvent.click(option);
+            expect(onSelectionChangeHandler).toHaveBeenCalled();
+        });
+    });
+});
+//# sourceMappingURL=SearchResults.test.js.map

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/SearchResults.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SearchResults/SearchResults.test.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/index.d.ts

@@ -0,0 +1 @@
+export * from "./SearchResults";

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SearchResults"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Chopin/TradeSelector/SearchResults/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SearchResults/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.d.ts

@@ -0,0 +1,5 @@
+export declare type SelectedTradeProps = {
+    trade: string;
+    onClick: () => void;
+};
+export declare const SelectedTrade: ({ trade, onClick }: SelectedTradeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedTrade = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Text_1 = require("../../../Text");
+const SelectedTrade = ({ trade, onClick }) => ((0, jsx_runtime_1.jsxs)(Text_1.Text, { children: ["You have selected \u2018", (0, jsx_runtime_1.jsx)("strong", { children: trade }), "\u2019 as your trade/profession.", " ", (0, jsx_runtime_1.jsx)("button", Object.assign({ type: "button", className: "mobius/Link chopin/TradeSelectorButton", "aria-label": "Change your selected profession", onClick: onClick }, { children: "Change" }))] }));
+exports.SelectedTrade = SelectedTrade;
+//# sourceMappingURL=SelectedTrade.js.map

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedTrade.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.tsx"],"names":[],"mappings":";;;;AAAA,wCAAqC;AAO9B,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAsB,EAAE,EAAE,CAAC,CACvE,wBAAC,WAAI,2CACgB,6CAAS,KAAK,GAAU,sCAA4B,GAAG,EAC1E,iDACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wCAAwC,gBACvC,iCAAiC,EAC5C,OAAO,EAAE,OAAO,4BAGT,IACJ,CACR,CAAC;AAZW,QAAA,aAAa,iBAYxB"}

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.test.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const _1 = require(".");
+describe("SelectedTrade", () => {
+    it("renders without errors", () => {
+        const trade = "Plumber";
+        const clickHandler = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.SelectedTrade, { trade: trade, onClick: clickHandler }));
+        const textElement = container.querySelector("p");
+        const button = react_1.screen.getByText("Change");
+        expect(textElement).toHaveTextContent(`You have selected ‘${trade}’ as your trade/profession.`);
+        react_1.fireEvent.click(button);
+        expect(clickHandler).toHaveBeenCalled();
+    });
+});
+//# sourceMappingURL=SelectedTrade.test.js.map

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedTrade.test.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SelectedTrade/SelectedTrade.test.tsx"],"names":[],"mappings":";;;AAAA,kDAAmE;AACnE,wBAAkC;AAElC,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,MAAM,KAAK,GAAG,SAAS,CAAC;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAE/B,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,uBAAC,gBAAa,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,GAAI,CACvD,CAAC;QAEF,MAAM,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACjD,MAAM,MAAM,GAAG,cAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAE1C,MAAM,CAAC,WAAW,CAAC,CAAC,iBAAiB,CACnC,sBAAsB,KAAK,6BAA6B,CACzD,CAAC;QAEF,iBAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAExB,MAAM,CAAC,YAAY,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelectedTrade";

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./SelectedTrade"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Chopin/TradeSelector/SelectedTrade/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Chopin/TradeSelector/SelectedTrade/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAAgC"}

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.d.ts

@@ -0,0 +1,20 @@
+import { Ref, RefAttributes } from "react";
+import { DOMProps } from "@react-types/shared";
+import type { LabelProps, TradeProps, UrlProps } from ".";
+import { ForwardedRefComponent } from "../../../types/components";
+export declare type TradeSelectorElementType = HTMLDivElement;
+export declare const ERROR_MESSAGE_SERVICE_UNAVAIALBLE = "The service is currently unavailable. Please try again later";
+export interface TradeSelectorProps extends DOMProps, RefAttributes<TradeSelectorElementType> {
+    /** Custom class name for setting specific CSS */
+    className?: string;
+    elementType?: string | React.ElementType;
+    minInput?: number;
+    apiRequestDebounceInMs?: number;
+    labels?: LabelProps;
+    urls?: UrlProps;
+    onTradeSelected?: (trade: TradeProps) => void;
+    hideLabel?: boolean;
+}
+export declare type TradeSelectorRef = Ref<TradeSelectorElementType>;
+declare const TradeSelector: ForwardedRefComponent<TradeSelectorProps, TradeSelectorElementType>;
+export { TradeSelector };

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TradeSelector = exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+const utils_1 = require("@react-aria/utils");
+const label_1 = require("@react-aria/label");
+const config_1 = require("./config");
+const SelectedTrade_1 = require("./SelectedTrade");
+const SearchResults_1 = require("./SearchResults");
+const useTradeSelector_1 = require("./useTradeSelector");
+const getItemsToDisplay_1 = require("./getItemsToDisplay");
+const ErrorMessage_1 = require("../../ErrorMessage");
+const spaceDelimitedList_1 = require("../../../utils/spaceDelimitedList");
+const Label_1 = require("../../Label");
+const Text_1 = require("../../Text");
+exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE = "The service is currently unavailable. Please try again later";
+const TradeSelector = (0, react_1.forwardRef)((props, ref) => {
+    const { elementType: Element = "div", minInput = 3, apiRequestDebounceInMs = 250, urls, labels, className, onTradeSelected, hideLabel, } = props;
+    const fieldLabels = Object.assign({ input: "What is your specific trade/profession?", description: "", exact: "Exact matches for your search", placeholder: "e.g. Cleaner, builder, consultant", suggested: "Suggested matches for your search", noResults: "View all trades", loading: "Loading..." }, labels);
+    const { site, baseUrl } = (0, config_1.getConfig)();
+    const links = (0, react_1.useMemo)(() => (Object.assign({ quoteRedirect: site, tradeApi: baseUrl, allOccupations: "https://quote.simplybusiness.co.uk/trades?vertical=business" }, urls)), [site, baseUrl, urls]);
+    const { inputValue, trades, onInputChange, onSelectionChange, error, isLoading, selectedTrade, hasUserChangedMind, onUserChangedMind, } = (0, useTradeSelector_1.useTradeSelector)({
+        minInput,
+        apiRequestDebounceInMs,
+        urls: links,
+        onTradeSelected,
+    });
+    const classes = (0, clsx_1.default)("chopin", "chopin/TradeSelector", className);
+    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
+    const errorMessageId = (0, utils_1.useSlotId)([Boolean(errorMessage)]);
+    const { labelProps, fieldProps } = (0, label_1.useLabel)({
+        label: fieldLabels.input,
+    });
+    const describedBy = (0, spaceDelimitedList_1.spaceDelimitedList)([
+        errorMessageId,
+        props["aria-describedby"],
+    ]);
+    const isOpen = inputValue.length >= minInput && !errorMessage;
+    const shouldSelectedTradeDisplay = (selectedTrade === null || selectedTrade === void 0 ? void 0 : selectedTrade.value) && !hasUserChangedMind;
+    const items = isOpen
+        ? (0, getItemsToDisplay_1.getItemsToDisplay)({
+            trades,
+            isLoading,
+            labels: fieldLabels,
+        })
+        : [];
+    const { input: inputLabel, description } = fieldLabels;
+    const ariaLabel = hideLabel ? inputLabel : undefined;
+    const inputProps = hideLabel ? undefined : fieldProps;
+    return ((0, jsx_runtime_1.jsxs)(Element, Object.assign({ ref: ref, className: classes }, { children: [!hideLabel && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Label_1.Label, Object.assign({}, labelProps, { className: "chopin/TradeSelectorLabel", "aria-hidden": true }, { children: inputLabel })), (0, jsx_runtime_1.jsx)(Text_1.Text, Object.assign({ className: "chopin/TradeSelectorDescription", variant: "caption" }, { children: description }))] })), shouldSelectedTradeDisplay ? ((0, jsx_runtime_1.jsx)(SelectedTrade_1.SelectedTrade, { trade: selectedTrade.value, onClick: onUserChangedMind })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SearchResults_1.SearchResults, { inputValue: inputValue, items: items, labels: fieldLabels, describedBy: describedBy, fallbackUrl: links.allOccupations, onInputChange: onInputChange, onSelectionChange: onSelectionChange, fieldProps: inputProps, label: ariaLabel }), error && ((0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { id: errorMessageId, errorMessage: exports.ERROR_MESSAGE_SERVICE_UNAVAIALBLE }))] }))] })));
+});
+exports.TradeSelector = TradeSelector;
+TradeSelector.displayName = "TradeSelector";
+//# sourceMappingURL=TradeSelector.js.map

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradeSelector.js","sourceRoot":"","sources":["../../../../../src/components/Chopin/TradeSelector/TradeSelector.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/Chopin/TradeSelector/TradeSelector.test.js

@@ -0,0 +1,310 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const _1 = require(".");
+const useTradeSelector_1 = require("./useTradeSelector");
+const mockApiResults_1 = require("./mockApiResults");
+const mockUseTradeSelector = useTradeSelector_1.useTradeSelector;
+jest.mock("./useTradeSelector");
+const mockedApiResults = [...mockApiResults_1.exactResults, ...mockApiResults_1.suggestedResults];
+const trade = {
+    value: "Builder",
+    vertical: "business",
+    supported_verticals: ["contractors_combined"],
+    label: "<strong>Builder</strong>",
+    type: "exact",
+    trade_detail: null,
+    trade_type: null,
+    blocked: false,
+};
+describe("TradeSelector", () => {
+    it("should render without errors", () => {
+        mockUseTradeSelector.mockReturnValue({
+            inputValue: "",
+            isLoading: false,
+            trades: [],
+            onInputChange: () => { },
+            onSelectionChange: () => { },
+            error: undefined,
+            selectedTrade: undefined,
+            hasUserChangedMind: false,
+            onUserChangedMind: () => { },
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+        const label = react_1.screen.getByText("What is your specific trade/profession?");
+        const input = react_1.screen.getByRole("combobox");
+        const placeholderText = "e.g. Cleaner, builder, consultant";
+        expect(label).toBeInTheDocument();
+        expect(input).toHaveAttribute("placeholder", placeholderText);
+    });
+    describe("given elementType", () => {
+        it("is not applied as element attribute", () => {
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "",
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, { elementType: "ul" }));
+            expect(container.firstChild).not.toHaveAttribute("elementtype", "ul");
+        });
+    });
+    describe("given no results for user input (that meets minimum input requirements)", () => {
+        it("should display a link to view all trades", async () => {
+            const userInput = "qwa";
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: userInput,
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard(userInput);
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            const noResultsLink = react_1.screen.getByText("View all trades");
+            expect(noResultsLink).toBeInTheDocument();
+            expect(noResultsLink).toHaveAttribute("href", "https://quote.simplybusiness.co.uk/trades?vertical=business");
+        });
+    });
+    describe("given a set of results", () => {
+        describe("containing both exact matches and suggested trades", () => {
+            it("should display the results under their respective titles", async () => {
+                const userInput = "swim";
+                mockUseTradeSelector.mockReturnValue({
+                    inputValue: userInput,
+                    isLoading: false,
+                    trades: mockedApiResults,
+                    onInputChange: () => { },
+                    onSelectionChange: () => { },
+                    error: undefined,
+                    selectedTrade: undefined,
+                    hasUserChangedMind: false,
+                    onUserChangedMind: () => { },
+                });
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+                await user_event_1.default.tab();
+                await user_event_1.default.keyboard(userInput);
+                await user_event_1.default.keyboard("[Alt][ArrowDown]");
+                await (0, react_1.waitFor)(() => {
+                    const exactTitle = react_1.screen.getByText("Exact matches for your search");
+                    const suggestedTitle = react_1.screen.getByText("Suggested matches for your search");
+                    const groups = react_1.screen.getAllByRole("group");
+                    const exactResultExample = document.querySelector('[data-key="Swim Shop"]');
+                    const suggestedResultExample = document.querySelector('[data-key="Teacher / tutor"]');
+                    const EXPECTED_NUMBER_OF_GROUPS = 2;
+                    expect(exactTitle).toBeInTheDocument();
+                    expect(suggestedTitle).toBeInTheDocument();
+                    expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
+                    expect(exactResultExample).toBeInTheDocument();
+                    expect(suggestedResultExample).toBeInTheDocument();
+                });
+            });
+        });
+        describe("containing only the exact matches", () => {
+            it("should display the results under the title for exact matches", async () => {
+                const userInput = "swim";
+                mockUseTradeSelector.mockReturnValue({
+                    inputValue: userInput,
+                    isLoading: false,
+                    trades: mockApiResults_1.exactResults,
+                    onInputChange: () => { },
+                    onSelectionChange: () => { },
+                    error: undefined,
+                    selectedTrade: undefined,
+                    hasUserChangedMind: false,
+                    onUserChangedMind: () => { },
+                });
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+                await user_event_1.default.tab();
+                await user_event_1.default.keyboard(userInput);
+                await user_event_1.default.keyboard("[Alt][ArrowDown]");
+                await (0, react_1.waitFor)(() => {
+                    const exactTitle = react_1.screen.getByText("Exact matches for your search");
+                    const suggestedTitle = react_1.screen.queryByText("Suggested matches for your search");
+                    const groups = react_1.screen.getAllByRole("group");
+                    const exactResultExample = document.querySelector('[data-key="Swim Shop"]');
+                    const suggestedResultExample = document.querySelector('[data-key="Teacher / tutor"]');
+                    const EXPECTED_NUMBER_OF_GROUPS = 1;
+                    expect(exactTitle).toBeInTheDocument();
+                    expect(suggestedTitle).not.toBeInTheDocument();
+                    expect(groups.length).toBe(EXPECTED_NUMBER_OF_GROUPS);
+                    expect(exactResultExample).toBeInTheDocument();
+                    expect(suggestedResultExample).toBeNull();
+                });
+            });
+        });
+    });
+    describe("given the API is unavailable", () => {
+        it("should show the error message", async () => {
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "",
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: Error(_1.ERROR_MESSAGE_SERVICE_UNAVAIALBLE),
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            expect(react_1.screen.getByText(_1.ERROR_MESSAGE_SERVICE_UNAVAIALBLE)).toBeInTheDocument();
+        });
+    });
+    describe("as well as an error message", () => {
+        it("should not display the overlay component", async () => {
+            const userInput = "swim";
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: userInput,
+                isLoading: false,
+                trades: mockedApiResults,
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: Error(_1.ERROR_MESSAGE_SERVICE_UNAVAIALBLE),
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard(userInput);
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            await (0, react_1.waitFor)(() => {
+                const errorMessage = react_1.screen.getByText(_1.ERROR_MESSAGE_SERVICE_UNAVAIALBLE);
+                const overlay = react_1.screen.queryByLabelText("Suggestions");
+                expect(errorMessage).toBeInTheDocument();
+                expect(overlay).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe("when the user reduces the input value to a single character", () => {
+        it("should not display the overlay component", async () => {
+            const userInput = "s";
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: userInput,
+                isLoading: false,
+                trades: mockedApiResults,
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            await user_event_1.default.tab();
+            await user_event_1.default.keyboard(userInput);
+            await user_event_1.default.keyboard("[Alt][ArrowDown]");
+            await (0, react_1.waitFor)(() => {
+                const overlay = react_1.screen.queryByLabelText("Suggestions");
+                expect(overlay).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe("given a user has selected a trade", () => {
+        it("should display the selected trade and hide the input field", async () => {
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "",
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: trade,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            const expectedTrade = "Builder";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            const partialText = react_1.screen.getByText(/You have selected/);
+            const chosenTrade = react_1.screen.getByText(expectedTrade);
+            const changeButton = react_1.screen.getByLabelText("Change your selected profession");
+            expect(partialText).toBeInTheDocument();
+            expect(chosenTrade).toBeInTheDocument();
+            expect(changeButton).toBeInTheDocument();
+        });
+    });
+    describe("clicking Change", () => {
+        it("should display the input field with previously selected trade", async () => {
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "",
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: trade,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            const expectedTrade = "Builder";
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            const changeButton = react_1.screen.getByLabelText("Change your selected profession");
+            await user_event_1.default.click(changeButton);
+            (0, react_1.waitFor)(() => {
+                const inputField = react_1.screen.getByRole("combobox");
+                expect(inputField).toHaveDisplayValue(expectedTrade);
+            });
+        });
+    });
+    describe("given a user has selected the wrong trade", () => {
+        it("they should be able to choose a different trade", async () => {
+            const onInputChangeMock = jest.fn();
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "Fitness instructor",
+                isLoading: false,
+                trades: [],
+                onInputChange: onInputChangeMock,
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: trade,
+                hasUserChangedMind: true,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, {}));
+            const inputField = react_1.screen.getByRole("combobox");
+            const newTrade = "Swimmer";
+            await user_event_1.default.type(inputField, newTrade);
+            expect(onInputChangeMock).toHaveBeenCalledTimes(newTrade.length);
+        });
+    });
+    describe("given hideLabel is set to true", () => {
+        it("hides the label and the description and renders aria-label instead", () => {
+            mockUseTradeSelector.mockReturnValue({
+                inputValue: "",
+                isLoading: false,
+                trades: [],
+                onInputChange: () => { },
+                onSelectionChange: () => { },
+                error: undefined,
+                selectedTrade: undefined,
+                hasUserChangedMind: false,
+                onUserChangedMind: () => { },
+            });
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(_1.TradeSelector, { hideLabel: true }));
+            const label = react_1.screen.queryByText("What is your specific trade/profession?");
+            const description = react_1.screen.queryByText("Start typing to choose from over 1,000 options.");
+            const input = react_1.screen.getByRole("combobox");
+            expect(label).not.toBeInTheDocument();
+            expect(description).not.toBeInTheDocument();
+            expect(input).toHaveAttribute("aria-label", "What is your specific trade/profession?");
+        });
+    });
+});
+//# sourceMappingURL=TradeSelector.test.js.map