@salesforcedevs/dx-components 0.10.1-alpha.115 → 0.10.1-alpha.119

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.10.1-alpha.115",
+    "version": "0.10.1-alpha.119",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/lazy/lazy.ts

@@ -2,13 +2,6 @@ import { LightningElement, api } from "lwc";
 
 import { LazyMode } from "typings/custom";
 
-declare global {
-    interface Window {
-        requestIdleCallback: any;
-        cancelIdleCallback: any;
-    }
-}
-
 /**
  * Defines a fallback for BackgroundTasksAPI for browsers that doesn't support it.
  * Currently BackgroundTasksAPI is supported by all major browsers

package/src/modules/dx/sidebar/__tests__/mockDocContent.ts

@@ -0,0 +1,48 @@
+const noteWithOrderedList = `<div class='box message info'>
+    <h4 class='mbs'>Note with ordered list</h4>
+    <ol class='ol enumList'>
+        <li class='li'>From Setup, enter <kbd class='ph userinput'>Apex Classes</kbd> in the <span
+                class='keyword parmname'>Quick
+                Find</span> box, then select <strong class='ph uicontrol'>Apex Classes</strong>.</li>
+
+        <li class='li'>Click <strong class='ph uicontrol'>Edit</strong> next to SiteRegisterController.</li>
+
+        <li class='li'>Find the <samp class='codeph apex_code'><span class='keyword'>private</span> <span
+                    class='keyword'>static</span> Id PORTAL_ACCOUNT_ID =
+                <span class='string'>'&lt;Account_ID&gt;'</span>;</samp> line and insert the ID for the account that
+            you want
+            to
+            associate with new users. The line should look similar to
+            this:
+        </li>
+
+        <li class='li'>Click <strong class='ph uicontrol'>Save</strong>.</li>
+    </ol>
+</div>`;
+
+export const sampleCodeBlockAndNote = `
+    <h1 class='helpHead1'>Using the instanceof Keyword</h1>
+    <p class="p">If you need to verify at run time whether an object is actually an instance of a particular class, use the 
+        <samp class="codeph apex_code"><span class="statement">instanceof</span></samp> keyword.
+        The <samp class="codeph apex_code"><span class="statement">instanceof</span></samp> keyword can only be used to
+        verify if the target type in the expression on the right of the keyword is a viable
+        alternative for the declared type of the expression on the left. 
+    </p>
+    <div class="p">You could add the following check to the <samp class="codeph apex_code">Report</samp>class in the <a class="xref" href="atlas.en-us.apexcode.meta/apexcode/apex_classes_casting.htm" title="In general, all type information is available at run time. This means that Apex enables casting, that is, a data type of one class can be assigned to a data type of another class, but only if one class is a subclass of the other class. Use casting when you want to convert an object from one data type to another.">classes and casting example</a> before you cast the item back into a <samp class="codeph apex_code">CustomReport</samp> object.
+        <div class="codeSection apex_code">
+            <pre class="codeblock brush:apex">If (Reports.get(0) <span class="statement">instanceof</span> CustomReport) {\n    <span class="onelineComment">// Can safely cast it back to a custom report object</span>\n    CustomReport c = (CustomReport) Reports.get(0);\n} Else {\n    <span class="onelineComment">// Do something with the non-custom-report.</span>\n}</pre>
+        </div>
+    </div>
+    ${noteWithOrderedList}
+    <div class="p">
+        Follow these steps:
+        <ol class="ol enumList">
+            <li class="li">Add the data in a .csv file.</li>
+            <li class="li">Create a static resource for this file.</li>
+            <li class="li">
+                Call <samp class="codeph apex_code">Test.loadData</samp> within your test
+                method and passing it the sObject type token and the static resource name.
+            </li>
+        </ol>
+    </div>
+`;

package/src/modules/dx/sidebar/__tests__/mockPageReference.ts

@@ -0,0 +1,8 @@
+export default {
+    domain: "http://localhost:3000",
+    page: "docs",
+    docId: "atlas.en-us.apexcode.meta",
+    deliverable: "apexcode",
+    contentDocumentId: "apex_dev_guide.htm",
+    hash: ""
+};

package/src/modules/dx/sidebar/sidebar.ts

@@ -44,6 +44,13 @@ export default class Sidebar extends LightningElement {
         }));
     }
 
+    @api
+    setInputValue(searchTerm: string) {
+        this.template
+            .querySelector("dx-sidebar-search")
+            .setInputValue(searchTerm);
+    }
+
     private expanded: boolean = true;
     private _toggleHovered: boolean = false;
     private _value?: string = undefined;

package/src/modules/dx/sidebarSearch/__tests__/sidebarSearch.test.ts

@@ -1,6 +1,10 @@
+import { createElement } from "lwc";
 import SidebarSearch from "dx/sidebarSearch";
-import { createRenderComponent } from "utils/tests";
-import { coveoXMLDocsConfig } from "utils/coveo"; //coveoSFDocsConfig
+import { createRenderComponent, renderLightningElement } from "utils/tests";
+import { coveoXMLDocsConfig } from "utils/coveo";
+import { mockQueryParameter, unmockQueryParameter } from "utils/jest";
+import mockPreloadedState from "./mockPreloadedState";
+import { SESSION_KEY } from "../sidebarSearch";
 
 const TAG = "dx-sidebar-search";
 const render = createRenderComponent(TAG, SidebarSearch);
@@ -8,18 +12,9 @@ const render = createRenderComponent(TAG, SidebarSearch);
 const PROPS = coveoXMLDocsConfig;
 const QUERY = "test";
 
-const mockQuery = (q: string): void => {
-    global.window = Object.create(window);
-    const url = `http://dummy.com?q="${q}"`;
-    Object.defineProperty(window, "location", {
-        value: {
-            href: url,
-            search: `?q=${q}`
-        }
-    });
-};
-
 describe(TAG, () => {
+    afterEach(unmockQueryParameter);
+
     it("renders with the correct initial empty query", () => {
         const element = render(PROPS);
 
@@ -31,7 +26,7 @@ describe(TAG, () => {
     });
 
     it("renders with the correct initial query", () => {
-        mockQuery(QUERY);
+        mockQueryParameter(QUERY);
 
         const element = render(PROPS);
 
@@ -41,4 +36,86 @@ describe(TAG, () => {
 
         return expect(element).toBeAccessible();
     });
+
+    it("correctly consumes a valid session storage object", () => {
+        mockQueryParameter(mockPreloadedState.query.q);
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
+
+        const mockOnChange = jest.fn();
+
+        const element = render(PROPS);
+        element.addEventListener("change", mockOnChange);
+
+        return Promise.resolve().then(() => {
+            expect(mockOnChange).toHaveBeenCalledTimes(1);
+
+            expect(element).toBeAccessible();
+        });
+    });
+
+    describe("highlighting", () => {
+        afterEach(unmockQueryParameter);
+
+        it("triggers on initial render when a search value exists", () => {
+            mockQueryParameter(QUERY);
+            const element = createElement(TAG, { is: SidebarSearch });
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+            renderLightningElement(element, PROPS);
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: QUERY
+                })
+            );
+        });
+
+        it("does not trigger on initial render when a search value does not exist", () => {
+            const element = createElement(TAG, { is: SidebarSearch });
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+            renderLightningElement(element, PROPS);
+            expect(dispatchEventSpy).not.toHaveBeenCalledWith(
+                expect.objectContaining({ type: "highlightedtermchange" })
+            );
+        });
+
+        it("triggers on input change with non-empty value", () => {
+            const element = render(PROPS);
+            const dxInput = element.shadowRoot.querySelector("dx-input");
+            const inputEl = dxInput.shadowRoot.querySelector("input");
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+
+            inputEl.focus();
+            inputEl.value = QUERY;
+            inputEl.dispatchEvent(new KeyboardEvent("input"));
+
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: QUERY
+                })
+            );
+        });
+
+        it("triggers on input change with empty value", () => {
+            const element = render(PROPS);
+            const dxInput = element.shadowRoot.querySelector("dx-input");
+            const inputEl = dxInput.shadowRoot.querySelector("input");
+            const dispatchEventSpy = jest.spyOn(element, "dispatchEvent");
+
+            inputEl.focus();
+            inputEl.value = "";
+            inputEl.dispatchEvent(new KeyboardEvent("input"));
+
+            expect(dispatchEventSpy).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    type: "highlightedtermchange",
+                    detail: ""
+                })
+            );
+        });
+    });
 });

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -18,7 +18,7 @@ import { RecentSearches } from "utils/recentSearches";
 import { toJson } from "utils/normalizers";
 import { Option, PopoverRequestCloseType } from "typings/custom";
 
-const SESSION_KEY = "dx-sidebar-search-state";
+export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
 const SEARCH_DEBOUNCE_DELAY = 780;
@@ -42,12 +42,17 @@ export default class SidebarSearch extends LightningElement {
 
     @api
     public fetchMoreResults() {
-        if (this.resultList?.moreResultsAvailable) {
+        if (this.resultList?.state?.moreResultsAvailable) {
             this.fetchingMoreResults = true;
             this.resultList.fetchMoreResults();
         }
     }
 
+    @api
+    setInputValue(searchTerm: string) {
+        this.value = searchTerm || "";
+    }
+
     private _coveoAdvancedQueryConfig!: object;
     private dropdownRequestedOpen: boolean = false;
     private recentSearches: Option[] = [];
@@ -58,6 +63,7 @@ export default class SidebarSearch extends LightningElement {
     private value?: string = "";
     private engine: SearchEngine | null = null;
     private fetchingMoreResults: boolean = false;
+    private didRender = false;
 
     private get hasCorrectCoveoConfig(): boolean {
         const coveoConfigurations = [
@@ -78,24 +84,22 @@ export default class SidebarSearch extends LightningElement {
             this.dropdownRequestedOpen &&
             this.recentSearches &&
             this.recentSearches.length > 0 &&
-            this.isValueEmpty
+            !this.value
         );
     }
 
-    private get isValueEmpty(): boolean {
-        return !this.value || this.value === "";
-    }
-
     constructor() {
         super();
 
         this.updateRecentSearches();
         this.value = getSidebarSearchParams() || "";
-        this.initializeUserSession();
     }
 
     renderedCallback() {
+        // in prod some of the attributes seem to arrive later, so I put this coveo startup flow here
         if (this.hasCorrectCoveoConfig && !this.engine) {
+            console.log("coveo config is good");
+            this.initializeUserSession();
             this.initializeCoveo();
         } else if (!this.hasCorrectCoveoConfig) {
             console.error(
@@ -108,6 +112,14 @@ export default class SidebarSearch extends LightningElement {
                 }
             );
         }
+
+        // If this is the first render and there is a search value, trigger
+        // term highlighting
+        if (!this.didRender && this.value) {
+            this.dispatchHighlightedTermChange();
+        }
+
+        this.didRender = true;
     }
 
     private initializeUserSession() {
@@ -115,41 +127,53 @@ export default class SidebarSearch extends LightningElement {
         if (!stringified) {
             return;
         }
-        const state = JSON.parse(stringified);
-        console.log({ state }, state?.search?.q === this.value, this.value);
-        if (state?.query?.q === this.value) {
-            this.preloadedState = state;
+
+        try {
+            const json = JSON.parse(stringified);
+            const hasSameConfig =
+                json.coveoAdvancedQueryConfig ===
+                JSON.stringify(this.coveoAdvancedQueryConfig);
+            console.log(
+                json.coveoAdvancedQueryConfig,
+                this.coveoAdvancedQueryConfig,
+                hasSameConfig
+            );
+            const hasSameQuery = json?.state?.query?.q === this.value;
+            if (hasSameConfig && hasSameQuery) {
+                console.log(
+                    "valid session storage found for value =",
+                    this.value
+                );
+                this.preloadedState = json?.state;
+            }
+        } catch (_) {
+            // Swallow error; no parseable preloaded state
+            // TODO: might want to clear sessionStorage, alert user(?), etc.
         }
     }
 
-    private initializeCoveo = async () => {
-        this.engine = buildSearchEngine({
-            organizationId: this.coveoOrganizationId,
-            publicAccessToken: this.coveoPublicAccessToken,
-            searchHub: this.coveoSearchHub,
-            preloadedState: this.preloadedState
-        });
+    private initializeCoveo = () => {
+        try {
+            this.engine = buildSearchEngine({
+                organizationId: this.coveoOrganizationId,
+                publicAccessToken: this.coveoPublicAccessToken,
+                searchHub: this.coveoSearchHub,
+                preloadedState: this.preloadedState
+            });
+        } catch (ex) {
+            console.error(`Coveo engine failed to initialize (${ex})`);
+        }
 
-        console.log(
-            "initialized engine directly after engine build",
-            this.engine?.state?.query?.q
-        );
+        if (!this.engine) {
+            console.error("Coveo engine failed to initialize!");
+            return;
+        }
 
         if (this.preloadedState) {
             const actions = loadQueryActions(this.engine);
             this.engine.dispatch(actions.updateQuery({ q: this.value || "" }));
         }
 
-        console.log(
-            "initialized engine directly after query dispatch",
-            this.engine,
-            this.engine?.state?.query?.q
-        );
-
-        if (!this.engine) {
-            return;
-        }
-
         this.resultList = buildResultList(this.engine, {
             options: { fieldsToInclude: ["sfhtml_url__c"] }
         });
@@ -168,21 +192,16 @@ export default class SidebarSearch extends LightningElement {
 
         this.resultList?.subscribe(this.onResultListChange);
 
-        console.log(
-            "initialized engine after sub classes created",
-            this.engine
-        );
-
-        if (!this.isValueEmpty) {
+        if (this.value) {
             this.dispatchHighlightedTermChange();
         }
 
-        if (!this.preloadedState && !this.isValueEmpty) {
-            this.submitSearch();
-        }
-
-        if (!this.preloadedState && this.isValueEmpty) {
-            this.dispatchOnLoading(false);
+        if (!this.preloadedState) {
+            if (this.value) {
+                this.submitSearch();
+            } else {
+                this.dispatchOnLoading(false);
+            }
         }
     };
 
@@ -194,28 +213,21 @@ export default class SidebarSearch extends LightningElement {
         const { isLoading, firstSearchExecuted, results } =
             this.resultList.state;
 
-        console.log("on results list change", {
-            isLoading,
-            firstSearchExecuted,
-            results
-        });
-
-        if ((!firstSearchExecuted && !isLoading) || this.isValueEmpty) {
+        if ((!firstSearchExecuted && !isLoading) || !this.value) {
             // coveo search is firing off some unwanted payloads on startup
             console.log(
                 "returning in results list change",
                 this.value,
-                this.isValueEmpty,
                 !firstSearchExecuted && !isLoading
             );
             return;
         }
 
         if (!isLoading) {
+            console.log("dispatching on change event");
             this.dispatchOnChangeEvent(results);
         }
 
-        console.log("is fetching more results", this.fetchingMoreResults);
         if (!this.fetchingMoreResults) {
             this.dispatchOnLoading(isLoading);
         }
@@ -269,10 +281,13 @@ export default class SidebarSearch extends LightningElement {
     };
 
     private updateSessionStorage() {
-        console.log("updating session storage", this.engine?.state);
+        console.log("updating session storage");
         window.sessionStorage.setItem(
             SESSION_KEY,
-            JSON.stringify(this.engine?.state)
+            JSON.stringify({
+                coveoAdvancedQueryConfig: this.coveoAdvancedQueryConfig,
+                state: this.engine?.state
+            })
         );
     }
 
@@ -289,6 +304,7 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchOnLoading(loading: boolean) {
+        console.log("dispatching onloading", loading);
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
@@ -310,18 +326,14 @@ export default class SidebarSearch extends LightningElement {
             })
         ));
 
-    private updateHistory(): void {
-        const { pathname, hash, search } = window.location;
-        if (this.isValueEmpty) {
-            window.history.pushState({}, "", `${pathname}${hash}`);
-            return;
-        }
-
-        const queryParams = new URLSearchParams(search);
-        if (this.value) {
-            queryParams.set("q", this.value);
-        }
-        window.history.pushState({}, "", `?${queryParams.toString()}${hash}`);
+    private dispatchSidebarSearchChange(searchTerm: string | undefined): void {
+        this.dispatchEvent(
+            new CustomEvent("sidebarsearchchange", {
+                detail: searchTerm ?? "",
+                bubbles: true,
+                composed: true
+            })
+        );
     }
 
     private submitSearch = debounce(() => {
@@ -353,15 +365,12 @@ export default class SidebarSearch extends LightningElement {
     private onInputChange(e: CustomEvent) {
         this.value = e.detail;
 
-        if (!this.isValueEmpty) {
+        if (this.value) {
             this.dispatchOnLoading(true);
-        }
-
-        if (this.searchBox && !this.isValueEmpty) {
-            this.submitSearch();
-        }
-
-        if (this.isValueEmpty) {
+            if (this.searchBox) {
+                this.submitSearch();
+            }
+        } else {
             // coveo's reaction to an empty value triggers a return of results
             // bootlegging our own ux here`
             this.dispatchOnLoading(false);
@@ -369,7 +378,7 @@ export default class SidebarSearch extends LightningElement {
         }
 
         this.dispatchHighlightedTermChange();
-        this.updateHistory();
+        this.dispatchSidebarSearchChange(this.value);
     }
 
     private onInputFocus() {

package/src/modules/utils/highlight/__tests__/highlight.test.ts

@@ -0,0 +1,154 @@
+import { createElement } from "lwc";
+import CodeBlock from "dx/codeBlock";
+import { highlightTerms } from "utils/highlight";
+
+const mockContent = `<div><a name='apex_dev_guide'><!-- --></a><h1 class='helpHead1'>Apex Developer Guide</h1><div class='shortdesc'>Salesforce has changed the way organizations do business by moving enterprise
+applications that were traditionally client-server-based into the Lightning Platform, an
+on-demand, multitenant Web environment. This environment enables you to run and customize
+applications, such as Salesforce Automation and Service &amp; Support, and build new custom
+applications based on particular business needs. </div><div id='sfdc:seealso' class='related-links'>
+<ul class='ullinks'>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_intro_get_started.htm'>Getting Started with Apex</a></strong><br>
+Apex is a strongly typed, object-oriented programming language that allows developers         to execute flow and transaction control statements on the Lightning Platform server, in         conjunction with calls to the API.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_writing.htm'>Writing Apex</a></strong><br>
+Apex is like Java for Salesforce. It enables you to add and interact with data in the         Lightning Platform persistence layer. It uses classes, data types, variables, and if-else         statements. You can make it execute based on a condition, or have a block of code execute         repeatedly.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_running.htm'>Running Apex</a></strong><br>
+You can access many features of the Salesforce user interface programmatically in         Apex, and you can integrate with external SOAP and REST Web services. You can run Apex code         using a variety of mechanisms. Apex code runs in atomic transactions. </li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_debug_test_deploy.htm'>Debugging, Testing, and Deploying Apex</a></strong><br>
+Develop your Apex code in a sandbox and debug it with the Developer Console and debug         logs. Unit-test your code, then distribute it to customers using packages.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_reference.htm'>Apex Language Reference</a></strong><br>
+This Apex reference goes into detail about DML statements and the built-in Apex         classes and interfaces.</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/apex_appendices.htm'>Appendices</a></strong><br>
+</li>
+<li class='link ulchildlink'>
+<strong><a href='atlas.en-us.apexcode.meta/apexcode/glossary_apex.htm'>Glossary</a></strong><br>
+</li>
+</ul>
+</div><!--DRC 228.7--></div>`;
+
+const allowedTags = [
+    "p",
+    ".p",
+    ".shortdesc",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "li",
+    "dl",
+    "th",
+    "td"
+];
+const container = document.createElement("div");
+
+describe("highlight utility", () => {
+    afterEach(() => (container.innerHTML = ""));
+
+    it("highlights text that matches search criteria", () => {
+        container.innerHTML = mockContent;
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "apex"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(14);
+    });
+
+    it("doesn't highlight elements that contains dx/docs components", () => {
+        const searchTerm = "customreport";
+        const codeBlock = createElement("dx-code-block", { is: CodeBlock });
+        Object.assign(codeBlock, {
+            codeBlock: searchTerm,
+            language: "text"
+            // title: "",
+            // variant: "card"
+        });
+        container.appendChild(document.createElement("p"));
+        container.firstElementChild?.appendChild(codeBlock);
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            searchTerm
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+        expect(codeBlock.shadowRoot.innerHTML).toMatch(searchTerm); // sanity check
+    });
+
+    it("doesn't highlight terms separated by html tags", () => {
+        container.innerHTML = "<p>loadData<span>within</span></p>";
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "loadDatawithin"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+    });
+
+    it("escapes regex especial characters", () => {
+        container.innerHTML = mockContent;
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            "apex.+"
+        );
+        expect(container.querySelectorAll("mark")).toHaveLength(0);
+    });
+
+    it("cleans previous search result before searching for a new term", () => {
+        const firstSearch = "apex";
+        const secondSearch = "salesforce";
+
+        container.innerHTML = mockContent;
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            firstSearch
+        );
+        const firstMarks = container.querySelectorAll("mark");
+        expect(firstMarks).toHaveLength(14);
+        firstMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(firstSearch)
+        );
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            secondSearch
+        );
+        const secondMarks = container.querySelectorAll("mark");
+        expect(secondMarks).toHaveLength(4);
+        secondMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(secondSearch)
+        );
+    });
+
+    it("cleans all marks if the search term is empty string", () => {
+        const firstSearch = "apex";
+        const secondSearch = "";
+
+        container.innerHTML = mockContent;
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            firstSearch
+        );
+        const firstMarks = container.querySelectorAll("mark");
+        expect(firstMarks).toHaveLength(14);
+        firstMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(firstSearch)
+        );
+
+        highlightTerms(
+            container.querySelectorAll(allowedTags.join(",")),
+            secondSearch
+        );
+        const secondMarks = container.querySelectorAll("mark");
+        expect(secondMarks).toHaveLength(0);
+        secondMarks.forEach(({ textContent }) =>
+            expect(textContent?.toLowerCase()).toBe(secondSearch)
+        );
+    });
+});

package/src/modules/utils/highlight/highlight.ts

@@ -3,7 +3,8 @@ import { createSearchRegExp } from "utils/regexps";
 const MARK_TAGS = /<\/?mark>/gi;
 
 export const highlightTerms = (
-    elements: Array<HTMLElement>,
+    // eslint-disable-next-line no-undef
+    elements: NodeListOf<Element>,
     searchTerm: string
 ): void => {
     searchTerm = searchTerm.trim();

package/src/modules/utils/jest/jest.ts

@@ -21,3 +21,38 @@ export const createMediaMock = (
 };
 
 export const matchMediaMock = createMediaMock();
+
+export const mockLocalStorage = function () {
+    let store: { [key: string]: string } = {};
+    return {
+        getItem: function (key: string) {
+            return store[key] || null;
+        },
+        setItem: function (key: string, value: string) {
+            store[key] = value.toString();
+        },
+        removeItem: function (key: string) {
+            delete store[key];
+        },
+        clear: function () {
+            store = {};
+        }
+    };
+};
+
+export const mockQueryParameter = (q: string): void => {
+    global.window = Object.create(window);
+    const search = q ? `?q=${q}` : "";
+    const href = `http://dummy.com${search}`;
+    // @ts-ignore
+    delete window.location.value;
+    Object.defineProperty(window, "location", {
+        value: {
+            href,
+            search
+        },
+        writable: true
+    });
+};
+
+export const unmockQueryParameter = () => mockQueryParameter("");

package/src/modules/utils/tests/tests.ts

@@ -1,18 +1,25 @@
 import { createElement, LightningElement } from "lwc";
 
-export const createRenderComponent = (
-    tag: string,
-    LWC: new () => LightningElement
-) => (properties = {}) => {
-    const component = createElement(tag, {
-        is: LWC
-    });
-
-    Object.assign(component, properties);
-    document.body.appendChild(component);
-    return component;
+export const renderLightningElement = (
+    element: LightningElement,
+    properties = {}
+) => {
+    Object.assign(element, properties);
+    document.body.appendChild(element as unknown as Node);
+    return element;
 };
 
+export const createRenderComponent =
+    (tag: string, LWC: new () => LightningElement) =>
+    (properties = {}) => {
+        const component = createElement(tag, {
+            is: LWC
+        });
+
+        renderLightningElement(component, properties);
+        return component;
+    };
+
 export const mockSlottedElement = <T extends HTMLElement>(
     element: any,
     elementType = "button",