feat: Allow label selector to be undefined (#84)

Author: fralongo

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

@@ -47,7 +47,13 @@ export const ComponentThree = () => (
   <div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentThree' } })}>
     <div
       {...getAnalyticsMetadataAttribute({
-        component: { innerContext: { position: '2', columnLabel: { selector: '.invalid-selector', root: 'self' } } },
+        component: {
+          innerContext: {
+            position: '2',
+            columnLabel: { selector: '.invalid-selector', root: 'self' },
+            anotherLabel: { root: 'self' },
+          },
+        },
       })}
     >
       <ComponentTwo />

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

@@ -145,6 +145,15 @@ describe('processLabel', () => {
     expect(processLabel(target, '')).toEqual('content');
     expect(processLabel(target, { selector: '' })).toEqual('content');
   });
+  test('returns node label when selector is undefined and has root="self" ', () => {
+    const { container } = render(
+      <div>
+        <div id="target">content</div>
+      </div>
+    );
+    const target = container.querySelector('#target') as HTMLElement;
+    expect(processLabel(target, { root: 'self' })).toEqual('content');
+  });
   test('returns node label when selector is a chain', () => {
     const { container } = render(
       <div>

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

@@ -56,6 +56,9 @@ describe('getRawAnalyticsMetadata', () => {
                 selector: '.invalid-selector',
                 root: 'self',
               },
+              anotherLabel: {
+                root: 'self',
+              },
             },
           },
         },

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

@@ -64,7 +64,14 @@ describe('getGeneratedAnalyticsMetadata', () => {
           },
           {
             type: 'component',
-            detail: { name: 'ComponentThree', innerContext: { position: '2', columnLabel: '' } },
+            detail: {
+              name: 'ComponentThree',
+              innerContext: {
+                position: '2',
+                columnLabel: '',
+                anotherLabel: 'sub labelanother text content to ignorecontentcomponent labelevent label',
+              },
+            },
           },
         ],
       });

src/internal/analytics-metadata/interfaces.ts

@@ -35,7 +35,7 @@ interface GeneratedAnalyticsMetadataComponentContext {
 }
 
 export interface LabelIdentifier {
-  selector: string | Array<string>;
+  selector?: string | Array<string>;
   root?: 'component' | 'self';
 }
 

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

@@ -46,8 +46,11 @@ const getLabelSelectors = (localMetadata: any): Array<string> => {
 const getLabelSelectorsFromLabelIdentifier = (label: string | LabelIdentifier): Array<string> => {
   if (typeof label === 'string') {
     return [label];
-  } else if (typeof label.selector === 'string') {
-    return [label.selector];
+  } else if (label.selector) {
+    if (typeof label.selector === 'string') {
+      return [label.selector];
+    }
+    return label.selector;
   }
-  return label.selector;
+  return [];
 };