@salesforcedevs/docs-components 0.26.0 → 0.26.3

package/package.json

@@ -1,18 +1,14 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.26.0",
+    "version": "0.26.3",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
     "engines": {
         "node": ">= 14.x"
     },
-    "files": [
-        "src/modules",
-        "lwc.config.json"
-    ],
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e3cf39d3be484acbf9bae459659f6e65f1f932cf"
+    "gitHead": "9c94c66a063751c3ada92ae0dbbded0b999feb98"
 }

package/src/modules/doc/header/header.ts

@@ -1,7 +1,7 @@
 import { api } from "lwc";
 import cx from "classnames";
 import type { Option } from "typings/custom";
-import { HeaderBase } from "utils-internal/headerBase";
+import { HeaderBase } from "base-elements/headerBase";
 import { toJson } from "utils/normalizers";
 import get from "lodash.get";
 

package/src/modules/doc/content/__tests__/content.test.ts

@@ -1,312 +0,0 @@
-import CodeBlock from "dx/codeBlock";
-import { createRenderComponent } from "utils-internal/tests";
-import Content from "../content";
-import * as mockContent from "./mockDocContent";
-import mockPageReference from "./mockPageReference";
-
-const TAG = "doc-content";
-const render = createRenderComponent(TAG, Content);
-
-describe("doc-content", () => {
-    it("renders the content", () => {
-        const component = render({
-            docsData: mockContent.content,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-    });
-
-    it("renders both with and wothout pagination buttons", () => {
-        const c_buttons = render({
-            docsData: mockContent.withButtons,
-            pageReference: mockPageReference,
-            showPaginationButtons: true,
-            _isStorybook: false
-        });
-        const dx_buttons = c_buttons.shadowRoot.querySelectorAll("dx-button");
-        expect(dx_buttons.length).toEqual(2);
-
-        const c_no_buttons = render({
-            docsData: mockContent.withButtons,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const empty_dx_buttons =
-            c_no_buttons.shadowRoot.querySelectorAll("dx-button");
-        expect(empty_dx_buttons.length).toEqual(0);
-    });
-
-    it("swaps out images", () => {
-        const component = render({
-            docsData: mockContent.withImages,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("img");
-        expect(images.length).toEqual(3);
-        const contentMediaEls =
-            component.shadowRoot.querySelectorAll("doc-content-media");
-        expect(contentMediaEls.length).toEqual(0);
-    });
-
-    it("swaps out iframes", () => {
-        const component = render({
-            docsData: mockContent.withVideos,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("iframe");
-        expect(images.length).toEqual(0);
-        const contentMediaEls =
-            component.shadowRoot.querySelectorAll("doc-content-media");
-        expect(contentMediaEls.length).toEqual(2);
-        contentMediaEls.forEach((contentMedia) => {
-            expect(contentMedia.contentType).toEqual("iframe");
-            expect(contentMedia.mediaTitle).not.toBeUndefined();
-            expect(contentMedia.contentSrc).toMatch(
-                "https://play.vidyard.com/"
-            );
-        });
-    });
-
-    it("swaps out notes", () => {
-        const component = render({
-            docsData: mockContent.withNotes,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const notes = component.shadowRoot.querySelectorAll(".message");
-        expect(notes).toHaveLength(4);
-        notes.forEach((note) => {
-            const noteHeader = note.querySelector("doc-content-callout");
-            expect(noteHeader).not.toBeNull();
-        });
-    });
-
-    it("includes tables, lists, and code blocks in notes", () => {
-        const component = render({
-            docsData: mockContent.withNotes,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const notes = component.shadowRoot.querySelectorAll(".message");
-        expect(notes[0].querySelector("table")).not.toBeNull();
-        expect(notes[1].querySelector("ul")).not.toBeNull();
-        expect(notes[2].querySelector("ol")).not.toBeNull();
-        expect(notes[3].querySelector("dx-code-block")).not.toBeNull();
-    });
-
-    it("highlights text that matches search criteria", () => {
-        const component = render({
-            docsData: mockContent.content,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(0);
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: "apex",
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(14);
-    });
-
-    it("doesn't highlight elements that contains dx/docs components", () => {
-        const searchTerm = "customreport";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        expect(contentEl.querySelectorAll("mark")).toHaveLength(0);
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> = contentEl.querySelectorAll("mark");
-
-        expect(marks).toHaveLength(0);
-
-        const code: CodeBlock = contentEl.querySelector("dx-code-block");
-        expect(code).not.toBeNull();
-        expect(code.codeBlock).toBeTruthy();
-        expect(contentEl.querySelector("doc-content-callout")).not.toBeNull();
-    });
-
-    it("doesn't highlight terms separated by html tags", () => {
-        const searchTerm = "loadData within";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(marks).toHaveLength(0);
-    });
-
-    it("escapes regex especial characters", () => {
-        const searchTerm = "used.+";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: searchTerm,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const marks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(marks).toHaveLength(0);
-    });
-
-    it("cleans previous search result before searching for a new term", () => {
-        const firstSearch = "verify";
-        const secondSearch = "sObject";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: firstSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const firstMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(2);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(firstSearch)
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: secondSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const secondMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(secondMarks).toHaveLength(1);
-        secondMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(secondSearch)
-        );
-    });
-
-    it("cleans all marks if the search term is empty string", () => {
-        const firstSearch = "verify";
-        const secondSearch = "";
-
-        const component = render({
-            docsData: mockContent.sampleCodeBlockAndNote,
-            pageReference: mockPageReference,
-            isStorybook: true
-        });
-
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: firstSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        const firstMarks: Array<HTMLElement> =
-            component.shadowRoot.querySelectorAll("mark");
-        expect(firstMarks).toHaveLength(2);
-        firstMarks.forEach(({ textContent }) =>
-            expect(textContent).toBe(firstSearch)
-        );
-
-        contentEl.dispatchEvent(
-            new CustomEvent("highlightedtermchange", {
-                detail: secondSearch,
-                composed: true,
-                bubbles: true
-            })
-        );
-
-        expect(component.shadowRoot.querySelectorAll("mark")).toHaveLength(0);
-    });
-});