@salesforcedevs/dx-components 0.26.2 → 0.26.3

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

@@ -1,238 +0,0 @@
-import CodeBlock from "../codeBlock";
-import { createRenderComponent } from "utils-internal/tests";
-import mockProps from "./mockProps";
-import { track as gtmTrack } from "dx/instrumentation";
-//import Prism from "utils-internal/prismjs";
-
-const TAG = "dx-code-block";
-const render = createRenderComponent(TAG, CodeBlock);
-
-jest.mock("dx/instrumentation");
-
-const GTM_EVENT_NAME = "custEv_codeBlock";
-/*
-const mockPrismHighlight = jest.fn();
-jest.mock("utils-internal/prismjs", () =>
-    jest.fn().mockImplementation(() => {
-        return {
-            highlightAllUnder: mockPrismHighlight
-        };
-    })
-);
-*/
-
-describe(TAG, () => {
-    const oldNavigator = window.navigator;
-    const oldError = console.error;
-
-    afterAll(() => {
-        Object.assign(window.navigator, oldNavigator);
-        Object.assign(console.error, oldError);
-    });
-
-    it("renders the codeblock in dark mode", async () => {
-        const element = render({
-            codeBlock: mockProps.apex,
-            title: "Apex Example",
-            defaultTheme: "dark",
-            language: "apex"
-        });
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(null);
-        const dxThemeDark = element.shadowRoot.querySelector(".dx-theme-dark");
-        expect(dxThemeDark).not.toContain(null);
-        expect(element.shadowRoot.querySelector(".source-btn")).toBe(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders the codeblock in light mode", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java"
-        });
-        const dxThemeLight =
-            element.shadowRoot.querySelector(".dx-theme-light");
-        expect(dxThemeLight).not.toContain(null);
-
-        expect(element.shadowRoot.querySelector(".source-btn")).toBe(null);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("changes between themes", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java"
-        });
-
-        //expect light
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-
-        const updateThemeBtn = element.shadowRoot.querySelector(
-            "dx-button.update-theme-btn"
-        );
-
-        //update light -> dark
-        updateThemeBtn.click();
-
-        //gtm event
-        expect(gtmTrack).toBeCalled();
-
-        return Promise.resolve()
-            .then(() => {
-                //expect -> dark
-                expect(divTheme.classList).toContain("dx-theme-dark");
-                element.shadowRoot
-                    .querySelector("dx-button.update-theme-btn")
-                    .click();
-
-                //expect gtm event for dark mode
-                expect(gtmTrack).toBeCalledWith(
-                    updateThemeBtn,
-                    GTM_EVENT_NAME,
-                    {
-                        codeBlockAction: "darkmode"
-                    }
-                );
-            })
-            .then(() => {
-                //expect -> light
-                expect(divTheme.classList).toContain("dx-theme-light");
-
-                //expect gtm event for dark mode
-                expect(gtmTrack).toBeCalledWith(
-                    updateThemeBtn,
-                    GTM_EVENT_NAME,
-                    {
-                        codeBlockAction: "lightmode"
-                    }
-                );
-            });
-    });
-
-    it("renders source button", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        const sourceBtn = element.shadowRoot.querySelector(".source-btn");
-        expect(sourceBtn).not.toBe(null);
-        expect(sourceBtn.href).toBe("http://www.salesforce.com");
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("renders custom markup with text code content", async () => {
-        const element = render({
-            codeBlock: mockProps.text,
-            title: "Text Code Content",
-            language: "text"
-        });
-
-        const sourceContent = element.shadowRoot.querySelector(
-            ".code-block-content"
-        );
-        const titleElement = element.shadowRoot.querySelector(
-            ".dx-code-block-heading"
-        );
-
-        expect(sourceContent).not.toBe(null);
-        expect(sourceContent.textContent).toContain(
-            "Connected to Salesforce Functions"
-        );
-        expect(titleElement).not.toBe(null);
-        expect(titleElement.textContent).toBe("Text Code Content");
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("Test copy functionality", async () => {
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        Object.assign(window.navigator, {
-            clipboard: { writeText: jest.fn() }
-        });
-        Object.assign(console, { error: jest.fn() });
-
-        const sourceBtn = element.shadowRoot.querySelector(".copy-btn");
-        expect(sourceBtn).not.toBe(null);
-        sourceBtn.click();
-
-        //gtm event
-        expect(gtmTrack).toBeCalled();
-
-        expect(gtmTrack).toBeCalledWith(sourceBtn, GTM_EVENT_NAME, {
-            codeBlockAction: "copy"
-        });
-
-        expect(window.navigator.clipboard.writeText).toBeCalledTimes(1);
-        expect(window.navigator.clipboard.writeText).toBeCalledWith(
-            element.shadowRoot.querySelector(".code-block-content").textContent
-        );
-        expect(console.error).toBeCalledTimes(0);
-
-        await expect(element).toBeAccessible();
-    });
-
-    it("Test Theme update Wire functionality", async () => {
-        window.localStorage.removeItem("dx-codeblock-theme");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBeNull();
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-
-        element.shadowRoot.querySelector("dx-button.update-theme-btn").click();
-
-        return Promise.resolve().then(() => {
-            expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(
-                "dark"
-            );
-            //expect -> dark
-            expect(divTheme.classList).toContain("dx-theme-dark");
-        });
-    });
-
-    it("Test if new code-blocks render with dark theme if the localstorage has dx-codeblock-theme key set", async () => {
-        window.localStorage.setItem("dx-codeblock-theme", "dark");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-        const dxThemeDark = element.shadowRoot.querySelector(".dx-theme-dark");
-        expect(dxThemeDark).not.toContain(null);
-    });
-
-    it("Test if new code-blocks render with light theme if the localstorage has ivalid theme against dx-codeblock-theme key", async () => {
-        window.localStorage.setItem("dx-codeblock-theme", "not-valid-theme");
-        const element = render({
-            codeBlock: mockProps.java,
-            title: "Java Example",
-            language: "java",
-            sourceLink: "http://www.salesforce.com"
-        });
-
-        const divTheme = element.shadowRoot.querySelector(".dx-theme-light");
-        expect(divTheme).not.toBeNull();
-        expect(window.localStorage.getItem("dx-codeblock-theme")).toBe(
-            element.defaultTheme
-        );
-    });
-});

package/src/modules/dx/codeBlock/__tests__/mockProps.ts

@@ -1,160 +0,0 @@
-export default {
-    preTagApex: `<pre class=&quot;codeblock brush:apex&quot;>
-    trigger AccountTrigger on Account (after update) {
-        Map<ID, Account> acctMapToUpdate = new Map<Id, Account>();
-        for(Integer i = 0 ; i < trigger.new.size() ; i++){
-            Account old = trigger.old[i];
-            Account nw = trigger.new[i];
-            if(old.TickerSymbol != nw.TickerSymbol){
-                Account a = new Account(Id = nw.Id, Rating = 'Needs Evaluation');
-                acctMapToUpdate.put(nw.Id, a);
-            }            
-        }
-        if(acctMapToUpdate.size() > 0){
-            update acctMapToUpdate.values();
-        }
-    }
-        </pre>`,
-
-    xml: `
-<rsp stat=&quot;ok&quot; version=&quot;1.0&quot;>
-    <result>
-        <total_results>...</total_results>
-        <form>...</form>
-        <form>...</form>
-        <form>...</form>
-    </result>
- </rsp>`,
-
-    apex: `trigger AccountTrigger on Account (after update) {
-    Map<ID, Account> acctMapToUpdate = new Map<Id, Account>();
-    for(Integer i = 0 ; i < trigger.new.size() ; i++){
-        Account old = trigger.old[i];
-        Account nw = trigger.new[i];
-        if(old.TickerSymbol != nw.TickerSymbol){
-            Account a = new Account(Id = nw.Id, Rating = 'Needs Evaluation');
-            acctMapToUpdate.put(nw.Id, a);
-        }            
-    }
-    if(acctMapToUpdate.size() > 0){
-        update acctMapToUpdate.values();
-    }
-}`,
-
-    java: `
-/* HelloWorld.java */
-public class HelloWorld {
-    char oneChar = 'C';
-    public static void main(String[] args) {
-        System.out.println(&quot;Hello World&quot;);
-    }
-}
-`,
-
-    javascript: `
-function swap(array, i, j) {
-    var temp = array[i];
-    array[i] = array[j];
-    array[j] = temp;
-}
-
-function getRandomInt(min, max) {
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-
-console.log(&quot;Sorted array: &quot;);
-console.log(arr);
-`,
-
-    css: `
-p {
-    border-style: solid;
-    border-left: thick double #ff0000;
-}
-
-div {
-    border: 1px solid black;
-    margin: 25px;
-    background-color: lightblue;
-}
-
-.toolbar-item:first-child {
-    flex-basis: 95%;
-}
-
-dx-button {
-    --dx-c-button-primary-color: var(--dx-g-hot-orange-vibrant-95);
-}`,
-
-    visualforce: `
-<apex:column value=&quot{! ct.FirstName }&quot>
-    <apex:facet name=&quot;header&quot;>
-        <apex:commandLink action=&quot;{! sortByFirstName }&quot;
-            reRender=&quot;contacts_list&quot;>First Name
-        </apex:commandLink>
-    </apex:facet>
-</apex:column>
-<apex:column value=&quot;{! ct.LastName }&quot;>
-    <apex:facet name=&quot;header&quot>
-        <apex:commandLink action=&quot;{! sortByLastName }&quot;
-            reRender=&quot;contacts_list&quot;>Last Name
-        </apex:commandLink>
-    </apex:facet>
-</apex:column>
-`,
-
-    html: `
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src=&quot;vendor/prism.js&quot;></script>
-        <style>
-            h1 {color: red}
-        </style>
-    </head>
-    <body>
-        <dx-button>I am a Button</dx-button>
-        <!-- This is
-        a multiline
-        comment -->
-
-        <h2>Unordered List with Circle Bullets</h2>
-        <ul style=&quot;list-style-type : circle;&quot;>
-            <li>Coffee</li>
-
-            <!-- This is a one line comment -->
-            
-            <li>Tea</li>
-            <li>Milk</li>
-        </ul>
-    </body>
-</html>
-`,
-
-    TypeScript: `
-export default class CodeBlock {
-    overrideWidth?: boolean = false;
-    title: string = 'title';
-    variant?: CodeBlockVariant = 'card';
-
-    get isCard(): boolean {
-        return this.variant === 'card';
-    }
-}
-`,
-
-    php: `
-function makeItBIG($a_lot_of_names) {
-    foreach($a_lot_of_names as $the_simpsons) {
-        $BIG[] = strtoupper($the_simpsons);
-    }
-    return $BIG;
-}
-
-$a_lot_of_names = ['Homer', 'Marge', 'Bart', 'Maggy', 'Lisa'];
-var_dump(makeItBIG($a_lot_of_names));
-`,
-    text: `
-  Connected to Salesforce Functions account:\nAccount ID: <ID>\nLogin Org Domain: <org domain>\nLogin Org ID: <org ID>
-  `
-};

package/src/modules/dx/codeBlock/codeBlock.stories.ts

@@ -1,143 +0,0 @@
-import mockProps from "./__tests__/mockProps";
-import "../../helpers/code/code.css";
-import "../../helpers/text/text.css";
-import "../../helpers/reset/reset.css";
-
-export default {
-    title: "dx/dx-code-block",
-    component: "dx-code-block"
-};
-
-const styles = `
-<style>
-  dx-code-block {
-    display:block;
-    margin-bottom:12px;
-  }
-</style>`;
-
-export const Base = (args: any) => `${styles}
-
-<span class="dx-text-heading-7 dx-code-block-heading">XML Example - Dark Theme</span>
-<dx-code-block
-    title="XML example"
-    code-block="${args.xml}"
-    language="xml"
-    default-theme="dark"
-></dx-code-block>
-
-<span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-<dx-code-block
-    title="Apex Example"
-    code-block="${args.apex}"
-    language="apex"
-    default-theme="dark"
-></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Visualforce Example - Dark Theme</span>
-  <dx-code-block
-      title="Visualforce example"
-      code-block="${args.visualforce}"
-      language="visualforce"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Javascript Example - Dark Theme</span>
-  <dx-code-block
-      title="Javascript example"
-      code-block="${args.javascript}"
-      language="javascript"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - Source Button</span>
-  <dx-code-block
-      title="Java Example"
-      code-block="${args.java}"
-      language="java"
-      source-link="http://www.salesforce.com"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme - No Language</span>
-  <dx-code-block
-      title="No Language Example"
-      code-block="${args.java}"
-      source-link="http://www.salesforce.com"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">HTML Example - Dark Theme</span>
-  <dx-code-block
-      title="HTML Example"
-      code-block="${args.html}"
-      language="html"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-  <dx-code-block
-      title="TypeScript Example"
-      code-block="${args.TypeScript}"
-      language="TypeScript"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">CSS Example - Dark Theme</span>
-  <dx-code-block
-      title="CSS Example"
-      code-block="${args.css}"
-      language="css"
-      default-theme="dark"
-  ></dx-code-block>
-
-  <span class="dx-text-heading-7 dx-code-block-heading">PHP Example - Dark Theme</span>
-  <dx-code-block
-      title="PHP Example"
-      code-block="${args.php}"
-      language="php"
-      default-theme="dark"
-  ></dx-code-block>`;
-Base.args = mockProps;
-
-export const PreTag = (args: any) => `${styles}
-    <span class="dx-text-heading-7 dx-code-block-heading">Dark Theme</span>
-    <dx-code-block
-        title="Pre Tag Apex Example"
-        code-block="${args.preTagApex}"
-        language="apex"
-        default-theme="dark"
-    ></dx-code-block>
-`;
-PreTag.args = mockProps;
-
-export const LangParameterAsText = (args: any) => `${styles}
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - XML example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.xml}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Javascript example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.javascript}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading">Fallback lang parameter as 'text' - Apex example</span>
-    <dx-code-block
-        title="XML example"
-        code-block="${args.apex}"
-        language="text"
-    ></dx-code-block>
-
-    <span class="dx-text-heading-7 dx-code-block-heading"> Passed lang parameter as 'text' - Text example</span>
-    <dx-code-block
-        title="Text example with markup"
-        code-block="${args.text}"
-        language="text"
-    ></dx-code-block>`;
-
-LangParameterAsText.args = mockProps;

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

@@ -1,165 +0,0 @@
-import Dropdown from "dx/dropdown";
-import DropdownOption from "dx/dropdownOption";
-import Popover from "dx/popover";
-import { getOptionsCount } from "utils-internal/options";
-import { createRenderComponent } from "utils-internal/tests";
-import mockNestedOptions from "./mockNestedOptions";
-import mockProps from "./mockProps";
-
-const TAG = "dx-dropdown";
-const render = createRenderComponent(TAG, Dropdown);
-
-describe(TAG, () => {
-    describe("render", () => {
-        it("renders all options when open", () => {
-            const component = render({ ...mockProps, open: true });
-
-            const menuDiv: HTMLElement =
-                component.shadowRoot.querySelector(".menu_list");
-            expect(menuDiv).not.toBeNull();
-            expect(menuDiv.getAttribute("role")).toBe("menu");
-
-            const options =
-                component.shadowRoot.querySelectorAll("dx-dropdown-option");
-            expect(options.length).toEqual(mockProps.options.length);
-            return expect(component).toBeAccessible();
-        });
-
-        it("renders all nested options and the callout link when open", () => {
-            const component = render({
-                ...mockProps,
-                options: mockNestedOptions,
-                open: true
-            });
-
-            const options: Array<DropdownOption> = Array.from(
-                component.shadowRoot.querySelectorAll("dx-dropdown-option")
-            );
-            const link = component.shadowRoot.querySelector(".callout_link");
-            const count = getOptionsCount(mockNestedOptions);
-            expect(options.length).toEqual(count);
-
-            options.forEach(({ keyValue, option }) => {
-                expect(keyValue).not.toBeFalsy();
-                expect(keyValue).toBe(option.id);
-            });
-            expect(link).not.toBeNull();
-            return expect(component).toBeAccessible();
-        });
-
-        it("value prop activates the selected option", () => {
-            const component = render({ ...mockProps, open: true });
-            const options = Array.from(
-                component.shadowRoot.querySelectorAll("dx-dropdown-option")
-            );
-            const selectedOption = options.find(
-                // @ts-ignore
-                (option: HTMLElement) => option.active === true
-            );
-            // @ts-ignore
-            const id = selectedOption.option.id;
-            expect(id).toEqual(mockProps.value);
-            return expect(component).toBeAccessible();
-        });
-
-        it("renders with menu-offset-small and menu-hidden", () => {
-            const component = render({ offset: "small", options: [] });
-            const popover: Popover =
-                component.shadowRoot.querySelector("dx-popover");
-            expect(popover).not.toBeNull();
-
-            expect(popover.classList).toContain("menu-offset-small");
-            expect(popover.classList).toContain("menu-hidden");
-
-            const options =
-                component.shadowRoot.querySelectorAll("dx-dropdown-option");
-            expect(options).toHaveLength(0);
-
-            return expect(component).toBeAccessible();
-        });
-    });
-
-    describe("interactions", () => {
-        it("doesn't close after onchange when stayOpenAfterChange is true", async () => {
-            const component = render({
-                ...mockProps,
-                stayOpenAfterChange: true,
-                open: true
-            });
-            const mockClose = jest.fn();
-
-            const popover = component.shadowRoot.querySelector("dx-popover");
-            popover.addEventListener("close", mockClose);
-
-            const option =
-                component.shadowRoot.querySelector("dx-dropdown-option");
-            const id = option.option.id;
-            option.dispatchEvent(new CustomEvent("select", { detail: id }));
-
-            expect(mockClose).not.toHaveBeenCalled();
-            expect(component.open).toEqual(true);
-
-            return expect(component).toBeAccessible();
-        });
-
-        it("closes after onchange when stayOpenAfterChange is false", async () => {
-            const component = render({
-                ...mockProps,
-                open: true
-            });
-            const mockClose = jest.fn();
-
-            const popover = component.shadowRoot.querySelector("dx-popover");
-            popover.addEventListener("close", mockClose);
-
-            const option: DropdownOption =
-                component.shadowRoot.querySelector("dx-dropdown-option");
-            const id = option.option.id;
-            option.dispatchEvent(new CustomEvent("select", { detail: id }));
-
-            expect(mockClose).toHaveBeenCalledTimes(1);
-            return expect(component).toBeAccessible();
-        });
-
-        it("handles keydown event with ArrowDown key", () => {
-            const [firstOption] = mockProps.options;
-            const component = render({ ...mockProps, value: null, open: true });
-            expect(component.focusedValue).toBeNull();
-
-            component.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "ArrowDown" })
-            );
-            expect(component.focusedValue).toBe(firstOption.id);
-        });
-
-        it("ignores other click keys", () => {
-            const component = render({ ...mockProps, open: true });
-
-            component.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "ArrowDown" })
-            );
-            expect(component.focusedValue).toBe(mockProps.value);
-
-            component.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "ArrowLeft" })
-            );
-
-            expect(component.focusedValue).toBe(mockProps.value);
-        });
-
-        it("handles close event from popover", () => {
-            const component = render({ ...mockProps, open: true });
-
-            component.dispatchEvent(
-                new KeyboardEvent("keydown", { key: "ArrowDown" })
-            );
-            expect(component.focusedValue).toBe(mockProps.value);
-
-            const popover: HTMLElement =
-                component.shadowRoot.querySelector("dx-popover");
-            expect(popover).not.toBeNull();
-            popover.dispatchEvent(new CustomEvent("close"));
-            expect(component.focusedValue).toBeNull();
-        });
-    });
-});