@salesforcedevs/docs-components 0.16.2 → 0.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.16.2",
+    "version": "0.17.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -14,5 +14,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
+    "gitHead": "b7a26c9e46cee9298b3ebc7cbea85930320b83a0"
 }

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

@@ -12,6 +12,7 @@ import {
 import Dropdown from "dx/dropdown";
 import { Option } from "typings/custom";
 import { track } from "dx/instrumentation";
+import { ANALYTICS_INFO } from "utils/headerBase";
 
 const EXPECTED_QUERY_TABLET = "(max-width: 980px)";
 const EXPECTED_QUERY_MOBILE = "(max-width: 880px)";
@@ -22,9 +23,6 @@ jest.mock("dx/instrumentation");
 const TAG = "doc-header";
 const render = createRenderComponent(TAG, Header);
 
-const GTM_EVENT_NAME = "custEv_signupStart";
-const SIGN_UP_LABEL = "Sign Up";
-
 const assertMediaMatchCalls = () => {
     expect(window.matchMedia).toBeCalledTimes(3);
     expect(window.matchMedia).toHaveBeenNthCalledWith(1, EXPECTED_QUERY_MOBILE);
@@ -98,9 +96,8 @@ describe(TAG, () => {
             const element = render();
             expect(element.headerHref).toBe("/");
 
-            const headerEl: HTMLElement = element.shadowRoot.querySelector(
-                "header"
-            );
+            const headerEl: HTMLElement =
+                element.shadowRoot.querySelector("header");
             expect(headerEl).not.toBeNull();
             expect(headerEl.classList).toHaveLength(0);
 
@@ -122,9 +119,8 @@ describe(TAG, () => {
                 element.shadowRoot.querySelector("dx-header-mobile-nav-menu")
             ).toBeNull();
 
-            const homeLink: HTMLAnchorElement = element.shadowRoot.querySelector(
-                ".home-link"
-            );
+            const homeLink: HTMLAnchorElement =
+                element.shadowRoot.querySelector(".home-link");
             expect(homeLink).not.toBeNull();
             expect(homeLink.href).toMatch(/\/$/);
             expect(homeLink.querySelector("dx-icon")).toBeNull();
@@ -150,9 +146,8 @@ describe(TAG, () => {
             );
             expect(signUp).not.toBeNull();
 
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
+            const headerNavs: Array<HeaderNav> =
+                element.shadowRoot.querySelectorAll("dx-header-nav");
             expect(headerNavs).toHaveLength(1);
             const [globalNav] = headerNavs;
             expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
@@ -181,9 +176,8 @@ describe(TAG, () => {
         it("renders with scoped nav items", () => {
             const element = render(mockPropsEmployees);
 
-            const headerNavs: Array<HeaderNav> = element.shadowRoot.querySelectorAll(
-                "dx-header-nav"
-            );
+            const headerNavs: Array<HeaderNav> =
+                element.shadowRoot.querySelectorAll("dx-header-nav");
             expect(headerNavs).toHaveLength(2);
             const [globalNav, scopedNav] = headerNavs;
             expect(globalNav.ariaLabel).toBe("Global Navigation Bar");
@@ -207,9 +201,8 @@ describe(TAG, () => {
         it("renders the brand icon when a brand has an icon associated", () => {
             const element = render(mockPropsEmployees);
 
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
+            const brandIcon: Icon =
+                element.shadowRoot.querySelector(".brand-icon");
             expect(brandIcon).not.toBeNull();
             expect(brandIcon.symbol).toBe(mockPropsEmployees.brand);
         });
@@ -220,9 +213,8 @@ describe(TAG, () => {
                 brand: undefined
             });
 
-            const brandIcon: Icon = element.shadowRoot.querySelector(
-                ".brand-icon"
-            );
+            const brandIcon: Icon =
+                element.shadowRoot.querySelector(".brand-icon");
             expect(brandIcon).toBeNull();
         });
 
@@ -271,9 +263,8 @@ describe(TAG, () => {
                 bailLabel: "test",
                 signupLink: "/"
             });
-            const buttons: Array<Button> = element.shadowRoot.querySelectorAll(
-                "dx-button"
-            );
+            const buttons: Array<Button> =
+                element.shadowRoot.querySelectorAll("dx-button");
 
             expect(buttons[0].href).toEqual("/");
             expect(buttons[1].href).toEqual("test");
@@ -285,33 +276,32 @@ describe(TAG, () => {
                 subtitle: mockPropsDevelopers.subtitle,
                 navItems: mockPropsDevelopers.navItems
             });
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
+            const headerSearch =
+                element.shadowRoot.querySelector("dx-header-search");
 
             expect(headerSearch).toBeNull();
             return expect(element).toBeAccessible();
         });
 
-        it("signup button track is beign called", () => {
+        it("signup button track is being called", () => {
             const element = render(mockPropsDevelopers);
 
-            const button: HTMLElement = element.shadowRoot.querySelector(
-                "dx-button"
-            );
+            const button: HTMLElement =
+                element.shadowRoot.querySelector("dx-button");
 
             button.click();
 
             expect(track).toBeCalledTimes(1);
-            expect(track).toBeCalledWith(button, GTM_EVENT_NAME, {
-                clickText: SIGN_UP_LABEL
+            expect(track).toBeCalledWith(button, "custEv_signupStart", {
+                ...ANALYTICS_INFO,
+                clickUrl: "/sign-up"
             });
         });
 
         it("hides signup button when signupLink property is empty", () => {
             const updatedMockPropsDevelopers = {
                 ...mockPropsDevelopers,
-                signupLink:""
+                signupLink: ""
             };
             const element = render(updatedMockPropsDevelopers);
             const signupButtonContainer: HTMLElement =
@@ -345,9 +335,8 @@ describe(TAG, () => {
             );
             expect(button).toBeNull();
 
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
+            const headerSearch =
+                element.shadowRoot.querySelector("dx-header-search");
             expect(headerSearch).not.toBeNull();
             expect(headerSearch.mobile).toBe(true);
 
@@ -383,9 +372,8 @@ describe(TAG, () => {
             );
             expect(button).not.toBeNull();
 
-            const headerSearch = element.shadowRoot.querySelector(
-                "dx-header-search"
-            );
+            const headerSearch =
+                element.shadowRoot.querySelector("dx-header-search");
 
             expect(
                 element.shadowRoot.querySelector(