@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,83 @@
+import {
+    RecentSearches,
+    LOCAL_STORAGE_KEY,
+    LIMIT
+} from "utils-internal/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-internal/recentSearches/recentSearches.ts

@@ -0,0 +1,57 @@
+export const LOCAL_STORAGE_KEY = "dx-sidebar-recent-searches";
+
+export const LIMIT = 5;
+
+export class RecentSearches {
+    items: string[] = [];
+
+    constructor() {
+        this._init();
+    }
+
+    get() {
+        return this.items;
+    }
+
+    add(item: string | undefined) {
+        if (!item || typeof item !== "string") {
+            return;
+        }
+        const normalized = item.trim();
+        if (normalized === "") {
+            return;
+        }
+        this._prepend(normalized);
+        this._removeDuplicates(normalized);
+        this._cutOffExcess();
+        this._addToStorage();
+    }
+
+    // private
+    _init() {
+        this.items = JSON.parse(
+            window.localStorage.getItem(LOCAL_STORAGE_KEY) || "[]"
+        );
+    }
+
+    _prepend(item: string) {
+        this.items.unshift(item);
+    }
+
+    _removeDuplicates(item: string) {
+        while (this.items.lastIndexOf(item) > 0) {
+            this.items.splice(this.items.lastIndexOf(item), 1);
+        }
+    }
+
+    _cutOffExcess() {
+        this.items = this.items.slice(0, LIMIT);
+    }
+
+    _addToStorage() {
+        window.localStorage.setItem(
+            LOCAL_STORAGE_KEY,
+            JSON.stringify(this.items)
+        );
+    }
+}

package/src/modules/utils-internal/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-internal/seo/seo.ts

@@ -0,0 +1,4 @@
+export function isPrerender(): boolean {
+    const userAgent = window.navigator.userAgent;
+    return userAgent.includes("Prerender");
+}

package/src/modules/utils-internal/slot/slot.ts

@@ -0,0 +1,17 @@
+import { LightningSlotElement } from "typings/custom";
+
+export const isSlotEmpty = (e: LightningSlotElement) =>
+    // @ts-ignore
+    e.target.assignedElements().length === 0;
+
+const stopPropagation = (event: Event) => {
+    event.stopPropagation();
+};
+
+export const stopPropagationOnSlotted = (e: LightningSlotElement) => {
+    // @ts-ignore
+    const slot = e.target;
+    slot.assignedElements().forEach((el: HTMLElement) => {
+        el.addEventListener("click", stopPropagation);
+    });
+};

package/src/modules/utils-internal/storybook/storybook.ts

@@ -0,0 +1,32 @@
+import { html } from "lit-html";
+
+export const createRenderComponents =
+    (component: string) =>
+    (num: number = 12, props: string = "") => {
+        let shell = ``;
+        for (let i = 0; i < num; i++) {
+            const insertIndex = component.indexOf(">");
+            const _component = [
+                component.slice(0, insertIndex),
+                ` ${props}`,
+                component.slice(insertIndex)
+            ].join("");
+            shell = `
+        ${shell}
+        ${_component}
+      `;
+        }
+        return shell;
+    };
+
+export const renderStyle = (componentTag: string) => html`
+    <style>
+        span {
+            color: grey;
+        }
+        ${componentTag} {
+            margin-top: 16px;
+            margin-bottom: 36px;
+        }
+    </style>
+`;

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

@@ -0,0 +1,38 @@
+import { createElement, LightningElement } from "lwc";
+
+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",
+    slotName?: string
+): { slottedElement: T; slot: HTMLSlotElement } => {
+    const slot: HTMLSlotElement = element.shadowRoot.querySelector(
+        `slot${slotName ? `[name='${slotName}` : ""}']`
+    );
+    expect(slot).not.toBeNull();
+
+    const slottedElement = document.createElement(elementType) as T;
+    slot.assignedElements = jest.fn(() => [slottedElement]);
+    slot.dispatchEvent(new Event("slotchange"));
+
+    return { slottedElement, slot };
+};

package/src/modules/utils-internal/wordpress/__tests__/wordpress.test.ts

@@ -0,0 +1,15 @@
+import { fetchWordpressPosts } from "../wordpress";
+
+global.fetch = jest.fn(() =>
+    Promise.resolve({
+        json: () => Promise.resolve({ res: { status: 404 } })
+    })
+);
+
+describe("wordpress network request", () => {
+    it("displays a console error and returns null on unsuccessful request", async () => {
+        const res = await fetchWordpressPosts("", "");
+
+        expect(res).toBeNull();
+    });
+});

package/src/modules/utils-internal/wordpress/wordpress.ts

@@ -0,0 +1,13 @@
+export const fetchWordpressPosts = async (
+    path: string,
+    normalizer: any,
+    count: string = "6"
+) => {
+    const res = await fetch(`${path}?maxResults=${count}`);
+    if (res.status !== 200) {
+        console.error("Failed to fetch posts", res);
+        return null;
+    }
+    const json = await res.json();
+    return json.posts.map(normalizer);
+};