@salesforcedevs/dx-components - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

lwc.config.json

@@ -16,2 +16,3 @@ {
         "dx/cardVideoPreview",
+        "dx/codeBlock",
         "dx/dropdown",
@@ -49,4 +50,7 @@ "dx/emptyState",
         "dx/typeBadgeGroup",
+        "dx/toc",
+        "dx/prismjs",
         "helpers/animations",
         "helpers/card",
+        "helpers/code",
         "helpers/reset",
@@ -53,0 +57,0 @@ "helpers/section",

package.json

 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "DX Lightning web components",
@@ -14,3 +14,3 @@ "license": "MIT",
     "publishConfig": {
-        "access": "restricted"
+        "access": "public"
     },
@@ -17,0 +17,0 @@ "dependencies": {

src/modules/dx/header/__tests__/header.test.ts

@@ -5,2 +5,3 @@ import Header from "dx/header";
 import { mockPropsDevelopers } from "./mockProps";
+import Button from "dx/button";
 
@@ -13,16 +14,154 @@ const TAG = "dx-header";
 
-    it("renders the nav", () => {
-        const element = render(mockPropsDevelopers);
+    it("renders", () => {
+        const subtitle = "testsubtitle";
+        const element = render({ ...mockPropsDevelopers, subtitle });
+        const subtitleEl = element.shadowRoot.querySelector("h4");
+        const buttons: Array<HTMLElement> = element.shadowRoot.querySelectorAll(
+            "dx-button"
+        );
+        const dropdown = element.shadowRoot.querySelector("dx-dropdown");
         const headerEl = element.shadowRoot.querySelector("dx-header-nav");
+
+        expect(subtitleEl.textContent).toEqual(subtitle);
         expect(headerEl).not.toBeNull();
-        return expect(headerEl).toBeAccessible();
+        expect(buttons).toHaveLength(1);
+        expect(dropdown).toBeNull();
+        return expect(element).toBeAccessible();
     });
 
-    it("renders text content according to the api", async () => {
-        const subtitle = "testsubtitle";
-        const element = render({ ...mockPropsDevelopers, subtitle });
+    it("receives breadcrumbs", () => {
+        const breadcrumbs = [
+            { href: "/apis/salesforce", label: "Apis", last: true }
+        ];
 
-        const subtitleEl = element.shadowRoot.querySelector("h4");
-        expect(subtitleEl.textContent).toEqual(subtitle);
+        const element = render({ ...mockPropsDevelopers, breadcrumbs });
+        const breadcrumb = element.shadowRoot.querySelector("dx-breadcrumbs");
+
+        expect(breadcrumb.breadcrumbs).toEqual(breadcrumbs);
+        expect(breadcrumb).not.toBeNull();
+        return expect(element).toBeAccessible();
     });
+
+    it("recieves versions", () => {
+        const versionsListParameter = [
+            { id: "123", label: "Test", active: false }
+        ];
+        const element = render({
+            ...mockPropsDevelopers,
+            versions: JSON.stringify(versionsListParameter)
+        });
+        const dropdown = element.shadowRoot.querySelector("dx-dropdown");
+
+        expect(dropdown.options).toEqual(versionsListParameter);
+        expect(dropdown).not.toBeNull();
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers event on version change", () => {
+        const versionsListParameter = [{ id: "123", label: "Test" }];
+        const element = render({
+            ...mockPropsDevelopers,
+            versions: JSON.stringify(versionsListParameter)
+        });
+        const dropdown: HTMLElement = element.shadowRoot.querySelector(
+            ".header__version-dropdown"
+        );
+        const mockVersionChange = jest.fn();
+        element.addEventListener("versionchange", mockVersionChange);
+
+        dropdown.dispatchEvent(new CustomEvent("change", { detail: "123" }));
+        expect(mockVersionChange).toBeCalledTimes(1);
+        expect(mockVersionChange.mock.calls[0][0].detail).toEqual("123");
+        return expect(element).toBeAccessible();
+    });
+
+    it("triggers event when clicking outside of header", () => {
+        const element = render({
+            ...mockPropsDevelopers
+        });
+        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
+        const headerMobile = element.shadowRoot.querySelector(
+            "dx-header-mobile-nav-menu"
+        );
+
+        headerEl.dispatchEvent(
+            new CustomEvent("requestopennavmenu", { detail: "123" })
+        );
+        return Promise.resolve()
+            .then(() => {
+                expect(headerMobile.open).toEqual(true);
+                document.body.click();
+            })
+            .then(() => {
+                expect(headerMobile.open).toEqual(false);
+            });
+    });
+
+    it("triggers event onrequestopennav", () => {
+        const element = render({
+            ...mockPropsDevelopers
+        });
+        const headerEl = element.shadowRoot.querySelector("dx-header-nav");
+        const headerMobile = element.shadowRoot.querySelector(
+            "dx-header-mobile-nav-menu"
+        );
+
+        headerEl.dispatchEvent(
+            new CustomEvent("requestopennavmenu", { detail: "123" })
+        );
+
+        return Promise.resolve().then(() => {
+            expect(headerMobile.value).toEqual("123");
+            expect(headerMobile.open).toEqual(true);
+        });
+    });
+
+    it("tests toggle button", () => {
+        const element = render({
+            ...mockPropsDevelopers
+        });
+        const button: HTMLElement = element.shadowRoot.querySelector(
+            ".header__l2__group-nav__menu-button"
+        );
+        const header = element.shadowRoot.querySelector(
+            "dx-header-mobile-nav-menu"
+        );
+        const toggleStatus = header.open;
+
+        button.click();
+
+        return Promise.resolve().then(() =>
+            expect(header.open).toEqual(!toggleStatus)
+        );
+    });
+
+    it("tests mobile nav change", () => {
+        const element = render({
+            ...mockPropsDevelopers
+        });
+        const headerMobile = element.shadowRoot.querySelector(
+            "dx-header-mobile-nav-menu"
+        );
+
+        headerMobile.dispatchEvent(
+            new CustomEvent("change", { detail: "test" })
+        );
+        return Promise.resolve().then(() => {
+            expect(headerMobile.value).toEqual("test");
+        });
+    });
+
+    it("has bailLink", () => {
+        const element = render({
+            ...mockPropsDevelopers,
+            bailHref: "test",
+            bailLabel: "test"
+        });
+        const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
+            "dx-button"
+        );
+
+        expect(buttons[1].href).toEqual("test");
+        return expect(element).toBeAccessible();
+    });
 });

src/modules/dx/header/header.ts

@@ -48,3 +48,3 @@ import { LightningElement, api } from "lwc";
     get url() {
-        return this.href ? new URL(this.href || "") : window.location;
+        return this.href ? new URL(this.href!) : window.location;
     }
@@ -51,0 +51,0 @@

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2005012

7.55%

Number of package files

342

3.01%

Lines of code

18243

22.91%

Number of medium supply chain risk alerts

0

-100%

No dependency changes