feat(TrackingElement): add optional label prop (#172)

Author: connor-baer

package.json

@@ -14,9 +14,8 @@
     "build": "rollup -c",
     "compile": "tsc",
     "commit": "git-cz",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "test:ci": "yarn test --ci --coverage",
+    "test": "jest --watch",
+    "test:ci": "jest --ci --coverage",
     "lint": "foundry run eslint . --ext .js,.jsx,.ts,.tsx",
     "lint:fix": "yarn lint --fix",
     "lint:ci": "yarn lint --format junit -o __reports__/eslint-results.xml",

src/components/TrackingElement/TrackingElement.spec.tsx

@@ -45,18 +45,18 @@ const DispatchButton = ({ testId = 'dispatch-btn' }: DispatchButton) => {
 };
 
 describe('Element', () => {
-  it('should attach the element property when dispatching an event', () => {
+  it('should append the name to the elementTree when dispatching an event', () => {
     const dispatch = jest.fn();
     const app = '';
     const view = 'test';
-    const element = 'test-element-spec';
+    const name = 'test-element';
     const btn = 'dispatch-btn';
     const component = 'button';
 
     const expected = {
       app,
       view,
-      elementTree: [element],
+      elementTree: [name],
       event: Events.click,
       component,
       label: undefined,
@@ -66,7 +66,41 @@ describe('Element', () => {
     const { getByTestId } = render(
       <TrackingRoot name={app} onDispatch={dispatch}>
         <TrackingView name={view}>
-          <TrackingElement name={element}>
+          <TrackingElement name={name}>
+            <DispatchButton />
+          </TrackingElement>
+        </TrackingView>
+      </TrackingRoot>
+    );
+
+    fireEvent.click(getByTestId(btn));
+
+    expect(dispatch).toHaveBeenCalledWith(expected);
+  });
+
+  it('should append the name and label to the elementTree when dispatching an event', () => {
+    const dispatch = jest.fn();
+    const app = '';
+    const view = 'test';
+    const name = 'test-element';
+    const label = 'test-label';
+    const btn = 'dispatch-btn';
+    const component = 'button';
+
+    const expected = {
+      app,
+      view,
+      elementTree: ['test-element|test-label'],
+      event: Events.click,
+      component,
+      label: undefined,
+      timestamp: expect.any(Number)
+    };
+
+    const { getByTestId } = render(
+      <TrackingRoot name={app} onDispatch={dispatch}>
+        <TrackingView name={view}>
+          <TrackingElement name={name} label={label}>
             <DispatchButton />
           </TrackingElement>
         </TrackingView>

src/components/TrackingElement/TrackingElement.tsx

@@ -18,14 +18,19 @@ import * as React from 'react';
 import { TrackingProviderProps as ProviderProps } from '../../types';
 import TrackingContext from '../TrackingContext';
 
-const TrackingElement = ({ name, children }: ProviderProps) => {
+export interface TrackingElementProps extends ProviderProps {
+  label?: string;
+}
+
+const TrackingElement = ({ name, label, children }: TrackingElementProps) => {
   const baseContext = React.useContext(TrackingContext);
+  const elementName = label ? `${name}|${label}` : name;
   const contextValue = React.useMemo(
     () => ({
       ...baseContext,
-      elementTree: [...baseContext.elementTree, name]
+      elementTree: [...baseContext.elementTree, elementName]
     }),
-    [baseContext, name]
+    [baseContext, elementName]
   );
 
   return (