@salesforcedevs/dx-components 0.16.2 → 0.16.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.16.2",
+    "version": "0.16.3",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -29,5 +29,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
     },
-    "gitHead": "4695c8e7dc16a958beb7717cfe01e432c57f5872"
+    "gitHead": "82ca0f75d4bdd801e08aab4af8ab0f6aec92a6cb"
 }

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

@@ -1,6 +1,7 @@
 import DropdownOption from "dx/dropdownOption";
 import { createRenderComponent } from "utils/tests";
 import { MOCK_BUTTON_PROPS, MOCK_LINK_PROPS } from "./mockProps";
+import * as instrumentation from "dx/instrumentation";
 
 const TAG = "dx-dropdown-option";
 const render = createRenderComponent(TAG, DropdownOption);
@@ -13,6 +14,10 @@ const appendToMenu = (element: HTMLElement) => {
 };
 
 describe(TAG, () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
     it("renders a button by default", () => {
         const component = render(MOCK_BUTTON_PROPS);
         expect(component.shadowRoot.querySelector("button")).not.toBeNull();
@@ -23,8 +28,8 @@ describe(TAG, () => {
 
     it("renders the correct label, description, and img", () => {
         const component = render(MOCK_BUTTON_PROPS);
-        const label = component.shadowRoot.querySelector(".option_label")
-            .textContent;
+        const label =
+            component.shadowRoot.querySelector(".option_label").textContent;
         expect(label).toEqual(MOCK_BUTTON_PROPS.option.label);
 
         const description = component.shadowRoot.querySelector(
@@ -79,4 +84,29 @@ describe(TAG, () => {
 
         expect(onClickMock).toBeCalled();
     });
+
+    it("fires analytics when given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render({
+            ...MOCK_BUTTON_PROPS,
+            analyticsEvent: "mock"
+        });
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).toHaveBeenCalledTimes(1);
+    });
+
+    it("doesn't fire analytics when not given an analytics event", () => {
+        const track = jest.spyOn(instrumentation, "track");
+
+        const component = render(MOCK_BUTTON_PROPS);
+
+        const option = component.shadowRoot.querySelector(".option");
+        option.click();
+
+        expect(track).not.toHaveBeenCalled();
+    });
 });

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -8,6 +8,7 @@ export default class DropdownOption extends LightningElement {
     @api keyValue!: string;
     @api active: boolean = false;
     @api navItemLabel: String | null = null;
+    @api analyticsEvent: string | null = null;
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -26,11 +27,13 @@ export default class DropdownOption extends LightningElement {
             new CustomEvent("select", { detail: this.keyValue })
         );
 
-        track(e.currentTarget, "custEv_topNavLinkClick", {
-            navHeading: this.navItemLabel || undefined,
-            navSubHeading: this.option.label || undefined,
-            clickText: this.keyValue || undefined,
-            pageLocation: window.location.pathname || undefined
-        });
+        if (this.analyticsEvent && e.currentTarget) {
+            track(e.currentTarget, this.analyticsEvent, {
+                navHeading: this.navItemLabel || undefined,
+                navSubHeading: this.option.label || undefined,
+                clickText: this.keyValue || undefined,
+                pageLocation: window.location.pathname || undefined
+            });
+        }
     }
 }