chore: Add selectedOption value in analytics metadata (#3669)

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

Author: fralongo

src/select/__tests__/analytics-metadata.test.tsx

@@ -32,7 +32,11 @@ function renderSelect(props: Partial<SelectProps>) {
   return createWrapper(renderResult.container).findSelect()!;
 }
 
-const getMetadataContexts = (label = 'select with metadata', disabled?: boolean) => {
+const getMetadataContexts = (
+  label = 'select with metadata',
+  disabled: boolean = false,
+  selectedOptionValue = 'null'
+) => {
   const metadata: GeneratedAnalyticsMetadataFragment = {
     contexts: [
       {
@@ -42,6 +46,7 @@ const getMetadataContexts = (label = 'select with metadata', disabled?: boolean)
           label,
           properties: {
             disabled: disabled ? 'true' : 'false',
+            selectedOptionValue,
           },
         },
       },
@@ -131,6 +136,21 @@ describe('Select renders correct analytics metadata', () => {
     });
   });
 
+  describe('with selectedOption', () => {
+    test('and defined value', () => {
+      const wrapper = renderSelect({ selectedOption: { value: 'value1' } });
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({
+        ...getMetadataContexts(undefined, undefined, 'value1'),
+      });
+    });
+    test('and undefined value', () => {
+      const wrapper = renderSelect({ selectedOption: { label: 'label1' } });
+      expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({
+        ...getMetadataContexts(),
+      });
+    });
+  });
+
   test('with simple items', () => {
     const wrapper = renderSelect({});
     wrapper.openDropdown();

src/select/analytics-metadata/interfaces.ts

@@ -17,5 +17,6 @@ export interface GeneratedAnalyticsMetadataSelectComponent {
   label: string;
   properties: {
     disabled: string;
+    selectedOptionValue: string;
   };
 }

src/select/index.tsx

@@ -48,6 +48,7 @@ const Select = React.forwardRef(
       label: `.${analyticsSelectors['button-trigger']}`,
       properties: {
         disabled: `${!!externalProps.disabled}`,
+        selectedOptionValue: `${externalProps.selectedOption && externalProps.selectedOption.value ? externalProps.selectedOption.value : null}`,
       },
     };