feat: Allow analytics metadata component properties to be arrays (#147)

Co-authored-by: Francesco Longo <[email protected]>

Author: fralongo

src/internal/analytics-metadata/__tests__/components.tsx

@@ -45,7 +45,7 @@ export const ComponentTwo = () => (
 );
 
 export const ComponentThree = ({ children }: { children?: ReactNode }) => (
-  <div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentThree' } })}>
+  <div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentThree', properties: { arr: ['a', 'b'] } } })}>
     <div
       {...getAnalyticsMetadataAttribute({
         component: {
@@ -55,6 +55,7 @@ export const ComponentThree = ({ children }: { children?: ReactNode }) => (
             anotherLabel: { root: 'self' },
             yetAnotherLabel: { rootSelector: '.root-class-name' },
           },
+          properties: { arr: ['c', 'd'] },
         },
       })}
     >

src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx

@@ -54,6 +54,7 @@ describe('getComponentsTree', () => {
       expect(getComponentsTree(container.querySelector('#outer-target-1') as HTMLElement)).toEqual([
         {
           name: 'ComponentThree',
+          properties: { arr: ['a', 'b'] },
           children: [
             {
               name: 'ComponentTwo',
@@ -76,6 +77,7 @@ describe('getComponentsTree', () => {
       expect(getComponentsTree(container.querySelector('#outer-target-1') as HTMLElement)).toEqual([
         {
           name: 'ComponentThree',
+          properties: { arr: ['a', 'b'] },
           children: [
             {
               name: 'ComponentTwo',
@@ -97,6 +99,7 @@ describe('getComponentsTree', () => {
       expect(getComponentsTree()).toEqual([
         {
           name: 'ComponentThree',
+          properties: { arr: ['a', 'b'] },
           children: [
             {
               name: 'ComponentTwo',

src/internal/analytics-metadata/__tests__/testing-utils.test.tsx

@@ -63,11 +63,13 @@ describe('getRawAnalyticsMetadata', () => {
                 rootSelector: '.root-class-name',
               },
             },
+            properties: { arr: ['c', 'd'] },
           },
         },
         {
           component: {
             name: 'ComponentThree',
+            properties: { arr: ['a', 'b'] },
           },
         },
       ],

src/internal/analytics-metadata/__tests__/utils.test.tsx

@@ -66,6 +66,7 @@ describe('getGeneratedAnalyticsMetadata', () => {
             type: 'component',
             detail: {
               name: 'ComponentThree',
+              properties: { arr: ['a', 'b'] },
               innerContext: {
                 position: '2',
                 columnLabel: '',

src/internal/analytics-metadata/interfaces.ts

@@ -23,7 +23,7 @@ interface GeneratedAnalyticsMetadataComponent {
   instanceIdentifier?: string;
 
   // relevant properties of the component. For example: {variant: 'primary'} for Button, {external: 'true', href: '...'} for Link
-  properties?: Record<string, string>;
+  properties?: Record<string, string | Array<string>>;
 
   // relevant information on the specific area of the component in which the interaction happened
   innerContext?: Record<string, string>;

src/internal/analytics-metadata/metadata-utils.ts

@@ -20,7 +20,7 @@ export const processMetadata = (node: HTMLElement | null, localMetadata: any): G
   return Object.keys(localMetadata).reduce((acc: any, key: string) => {
     if (key.toLowerCase().match(/label$/)) {
       acc[key] = processLabel(node, localMetadata[key]);
-    } else if (typeof localMetadata[key] !== 'string') {
+    } else if (typeof localMetadata[key] !== 'string' && !Array.isArray(localMetadata[key])) {
       acc[key] = processMetadata(node, localMetadata[key]);
     } else {
       acc[key] = localMetadata[key];
@@ -45,7 +45,7 @@ export const merge = (inputTarget: any, inputSource: any): any => {
       merged[key] = target[key];
     } else if (!target[key] && !isNil(source[key])) {
       merged[key] = source[key];
-    } else if (typeof target[key] === 'string') {
+    } else if (typeof target[key] === 'string' || Array.isArray(target[key])) {
       merged[key] = source[key];
     } else {
       merged[key] = merge(target[key], source[key]);

src/internal/analytics-metadata/page-scanner-utils.ts

@@ -8,7 +8,7 @@ import { getGeneratedAnalyticsMetadata } from './utils';
 interface GeneratedAnalyticsMetadataComponentTree {
   name: string;
   label: string;
-  properties?: Record<string, string>;
+  properties?: Record<string, string | Array<string>>;
   children?: Array<GeneratedAnalyticsMetadataComponentTree>;
 }