@salesforcedevs/dx-components 0.10.1-alpha.13 → 0.10.1-alpha.133

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

@@ -0,0 +1,32 @@
+import { createSearchRegExp } from "utils/regexps";
+
+const MARK_TAGS = /<\/?mark>/gi;
+
+export const highlightTerms = (
+    // eslint-disable-next-line no-undef
+    elements: NodeListOf<Element>,
+    searchTerm: string
+): void => {
+    searchTerm = searchTerm.trim();
+    const searchExp = createSearchRegExp(searchTerm);
+    elements.forEach((element) => {
+        if (
+            element?.innerHTML.includes("<dx-") ||
+            element?.innerHTML.includes("<doc-")
+        ) {
+            return;
+        }
+
+        let innerHtml = element.innerHTML.replace(
+            // Remove previously added mark tags
+            MARK_TAGS,
+            ""
+        );
+
+        if (searchTerm) {
+            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        }
+
+        element.innerHTML = innerHtml;
+    });
+};

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/normalizers/normalizers.ts

@@ -86,3 +86,6 @@ export const normalizePost = ({
     id,
     title
 });
+
+export const normalizeBoolean = (value: string | boolean | number): boolean =>
+    typeof value === "string" ? value === "true" : !!value;

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

@@ -0,0 +1,79 @@
+import { RecentSearches, LOCAL_STORAGE_KEY, LIMIT } from "utils/recentSearches";
+
+describe("recentSearches", () => {
+    beforeEach(() => {
+        window.localStorage.clear();
+    });
+
+    it("initializes correctly from local storage", () => {
+        const initial = ["test", "test1", "test2"];
+
+        window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(initial));
+        const Searches = new RecentSearches();
+
+        expect(Searches.get()).toEqual(initial);
+    });
+
+    it("ignores exact duplicate additions", () => {
+        const Searches = new RecentSearches();
+
+        const item = "test";
+
+        Searches.add(item);
+        Searches.add(item);
+
+        expect(Searches.get().length).toEqual(1);
+    });
+
+    it("ignores duplicate additions with extraneous white space", () => {
+        const Searches = new RecentSearches();
+
+        const item1 = "test";
+        const item2 = " test ";
+
+        Searches.add(item1);
+        Searches.add(item2);
+
+        expect(Searches.get().length).toEqual(1);
+        expect(Searches.get()[0]).toEqual(item1);
+    });
+
+    it("prioritizes the last searched item", () => {
+        const Searches = new RecentSearches();
+
+        const item1 = "test1";
+        const item2 = "test2";
+
+        Searches.add(item1);
+        Searches.add(item2);
+
+        expect(Searches.get().length).toEqual(2);
+
+        expect(Searches.get()[0]).toEqual(item2);
+        expect(Searches.get()[1]).toEqual(item1);
+
+        Searches.add(item1);
+
+        expect(Searches.get().length).toEqual(2);
+        expect(Searches.get()[0]).toEqual(item1);
+        expect(Searches.get()[1]).toEqual(item2);
+    });
+
+    it("will not exceed the limit", () => {
+        const Searches = new RecentSearches();
+
+        Array.apply(null, Array(LIMIT + 1)).forEach((_, i) => {
+            Searches.add(i.toString());
+        });
+
+        expect(Searches.get().length).toEqual(LIMIT);
+    });
+
+    it("doesn't add a bogus value", () => {
+        const Searches = new RecentSearches();
+
+        [null, "", " ", "    ", 5].forEach((v) => Searches.add(v));
+
+        expect(Searches.get().length).toEqual(0);
+    });
+});

package/src/modules/utils/recentSearches/recentSearches.ts

@@ -1,6 +1,6 @@
-const RECENT_SEARCHES = "dx-sidebar-recent-searches";
+export const LOCAL_STORAGE_KEY = "dx-sidebar-recent-searches";
 
-const LIMIT = 5;
+export const LIMIT = 5;
 
 export class RecentSearches {
     items: string[] = [];
@@ -10,15 +10,19 @@ export class RecentSearches {
     }
 
     get() {
-        return this.items.map((item) => ({ id: item, label: item }));
+        return this.items;
     }
 
     add(item: string | undefined) {
-        if (!item || this._hasDuplicateRecentSearches(item)) {
+        if (!item || typeof item !== "string") {
             return;
         }
-        this._prepend(item);
-        this._removeDuplicates(item);
+        const normalized = item.trim();
+        if (normalized === "") {
+            return;
+        }
+        this._prepend(normalized);
+        this._removeDuplicates(normalized);
         this._cutOffExcess();
         this._addToStorage();
     }
@@ -26,7 +30,7 @@ export class RecentSearches {
     // private
     _init() {
         this.items = JSON.parse(
-            window.localStorage.getItem(RECENT_SEARCHES) || "[]"
+            window.localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
         );
     }
 
@@ -46,17 +50,8 @@ export class RecentSearches {
 
     _addToStorage() {
         window.localStorage.setItem(
-            RECENT_SEARCHES,
+            LOCAL_STORAGE_KEY,
             JSON.stringify(this.items)
         );
     }
-
-    _hasDuplicateRecentSearches(searchItem: string) {
-        return (
-            this.items.filter(
-                (item: string) =>
-                    item.toLowerCase() === searchItem.toLowerCase()
-            ).length > 0
-        );
-    }
 }

package/src/modules/utils/regexps/regexps.ts

@@ -0,0 +1,5 @@
+const escapeRegExp = (text: string) =>
+    text.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+
+export const createSearchRegExp = (searchTerm: string): RegExp =>
+    new RegExp(`(?:${escapeRegExp(searchTerm)})(?![^<>]*>)`, "gi");

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",