@salesforcedevs/dx-components 0.10.1-alpha.116 → 0.10.1-alpha.117

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.10.1-alpha.116",
+    "version": "0.10.1-alpha.117",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,6 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    }
+    },
+    "gitHead": "d2289f6fae864f4763bc892ecd78b6454eae44d6"
 }

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,13 +42,17 @@ export default class SidebarSearch extends LightningElement {
 
     @api
     public fetchMoreResults() {
-        console.log('fetch more results (resultList)', this.resultList)
         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[] = [];
@@ -59,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 = [
@@ -79,14 +84,10 @@ 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();
 
@@ -96,7 +97,9 @@ export default class SidebarSearch extends LightningElement {
     }
 
     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.initializeCoveo();
         } else if (!this.hasCorrectCoveoConfig) {
             console.error(
@@ -109,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() {
@@ -116,41 +127,44 @@ 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 state = JSON.parse(stringified);
+            if (state?.query?.q === this.value) {
+                console.log(
+                    "valid session storage found for value =",
+                    this.value
+                );
+                this.preloadedState = 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"] }
         });
@@ -169,21 +183,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);
+            }
         }
     };
 
@@ -195,28 +204,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);
         }
@@ -270,7 +272,7 @@ 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)
@@ -290,6 +292,7 @@ export default class SidebarSearch extends LightningElement {
     }
 
     private dispatchOnLoading(loading: boolean) {
+        console.log("dispatching onloading", loading);
         this.dispatchEvent(new CustomEvent("loading", { detail: loading }));
     }
 
@@ -311,18 +314,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(() => {
@@ -354,15 +353,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);
@@ -370,7 +366,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",