chore: Add autosuggest and text filter values in analytics metadata (#3670)

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

Author: fralongo

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

@@ -39,7 +39,7 @@ function renderAutosuggest(props: Partial<AutosuggestProps>) {
   return createWrapper(renderResult.container).findAutosuggest()!;
 }
 
-const getMetadataContexts = (label = 'autosuggest with metadatada', disabled?: boolean) => {
+const getMetadataContexts = (label = 'autosuggest with metadatada', disabled = false, value = '') => {
   const metadata: GeneratedAnalyticsMetadataFragment = {
     contexts: [
       {
@@ -49,6 +49,7 @@ const getMetadataContexts = (label = 'autosuggest with metadatada', disabled?: b
           label,
           properties: {
             disabled: disabled ? 'true' : 'false',
+            value,
           },
         },
       },
@@ -106,7 +107,7 @@ describe('Autosuggest renders correct analytics metadata', () => {
     };
     expect(getGeneratedAnalyticsMetadata(clearButton)).toEqual({
       ...clearInputMetadata,
-      ...getMetadataContexts(),
+      ...getMetadataContexts(undefined, undefined, 'something'),
     });
   });
   test('when disabled', () => {
@@ -131,7 +132,7 @@ describe('Autosuggest renders correct analytics metadata', () => {
     };
     expect(getGeneratedAnalyticsMetadata(simpleEnabledItemWithoutLabel)).toEqual({
       ...selectAction,
-      ...getMetadataContexts(),
+      ...getMetadataContexts(undefined, undefined, 'something'),
     });
 
     const simpleEnabledItemWithLabel = wrapper.findDropdown().findOptionByValue('value2')!.getElement();
@@ -143,13 +144,13 @@ describe('Autosuggest renders correct analytics metadata', () => {
         position: '2',
         value: 'value2',
       },
-      ...getMetadataContexts(),
+      ...getMetadataContexts(undefined, undefined, 'something'),
     });
 
     const disabledItem = wrapper.findDropdown().findOptionByValue('value4')!.getElement();
     validateComponentNameAndLabels(disabledItem, labels);
     expect(getGeneratedAnalyticsMetadata(disabledItem)).toEqual({
-      ...getMetadataContexts(),
+      ...getMetadataContexts(undefined, undefined, 'something'),
     });
   });
   test.each([false, true])('with groups and expandToViewport=%s', expandToViewport => {

src/autosuggest/analytics-metadata/interfaces.ts

@@ -13,5 +13,6 @@ export interface GeneratedAnalyticsMetadataAutosuggestComponent {
   label: string;
   properties: {
     disabled: string;
+    value: string;
   };
 }

src/autosuggest/index.tsx

@@ -35,6 +35,7 @@ const Autosuggest = React.forwardRef(
       label: 'input',
       properties: {
         disabled: `${!!props.disabled}`,
+        value: props.value || '',
       },
     };
 

src/text-filter/__tests__/analytics-metadata.test.tsx

@@ -16,19 +16,18 @@ import InternalTextFilter from '../../../lib/components/text-filter/internal';
 
 const label = 'text filter label';
 
-const props: TextFilterProps = {
-  filteringText: 'whatever',
+const props: Partial<TextFilterProps> = {
   onChange: () => {},
   filteringAriaLabel: label,
   filteringClearAriaLabel: 'clear',
 };
 
-function renderTextFilter(disabled = false) {
-  const renderResult = render(<TextFilter {...props} disabled={disabled} />);
+function renderTextFilter(disabled = false, filteringText = 'whatever') {
+  const renderResult = render(<TextFilter {...props} disabled={disabled} filteringText={filteringText} />);
   return createWrapper(renderResult.container).findTextFilter()!;
 }
 
-const getMetadata = (disabled = false) => {
+const getMetadata = (disabled = false, filteringText = 'whatever') => {
   const metadata: GeneratedAnalyticsMetadataFragment = {
     contexts: [
       {
@@ -38,6 +37,7 @@ const getMetadata = (disabled = false) => {
           label,
           properties: {
             disabled: disabled ? 'true' : 'false',
+            filteringText,
           },
         },
       },
@@ -65,13 +65,13 @@ describe('TextFilter renders correct analytics metadata', () => {
     });
   });
   test('when disabled', () => {
-    const wrapper = renderTextFilter(true);
-    expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata(true));
+    const wrapper = renderTextFilter(true, '');
+    expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual(getMetadata(true, ''));
   });
 });
 
 test('Internal TextFilter does not render "component" metadata', () => {
-  const renderResult = render(<InternalTextFilter {...props} />);
+  const renderResult = render(<InternalTextFilter {...props} filteringText="whatever" />);
   const wrapper = createWrapper(renderResult.container).findTextFilter()!;
   expect(getGeneratedAnalyticsMetadata(wrapper.getElement())).toEqual({});
 });

src/text-filter/analytics-metadata/interfaces.ts

@@ -9,5 +9,6 @@ export interface GeneratedAnalyticsMetadataTextFilterComponent {
   label: string;
   properties: {
     disabled: string;
+    filteringText: string;
   };
 }

src/text-filter/index.tsx

@@ -23,6 +23,7 @@ const TextFilter = React.forwardRef((props: TextFilterProps, ref: React.Ref<Text
     label: 'input',
     properties: {
       disabled: `${!!props.disabled}`,
+      filteringText: props.filteringText || '',
     },
   };
   return (