feat(autocomplete): default insights events

packages/instantsearch-ui-components/src/components/autocomplete/AutocompleteIndex.tsx

@@ -2,7 +2,7 @@
 
 import { cx } from '../../lib/cx';
 
-import type { ComponentProps, Renderer } from '../../types';
+import type { ComponentProps, Renderer, SendEventForHits } from '../../types';
 
 export type AutocompleteIndexProps<
   T = { objectID: string; __indexName: string } & Record<string, unknown>
@@ -22,6 +22,7 @@ export type AutocompleteIndexProps<
     onSelect: () => void;
     onApply: () => void;
   };
+  sendEvent?: SendEventForHits;
   classNames?: Partial<AutocompleteIndexClassNames>;
 };
 
@@ -56,6 +57,7 @@ export function createAutocompleteIndexComponent({ createElement }: Renderer) {
       ItemComponent,
       NoResultsComponent,
       getItemProps,
+      sendEvent,
       classNames = {},
     } = userProps;
 
@@ -93,6 +95,20 @@ export function createAutocompleteIndexComponent({ createElement }: Renderer) {
                     classNames.item,
                     className
                   )}
+                  onClick={() => {
+                    sendEvent?.(
+                      'click:internal',
+                      item as Record<string, unknown>,
+                      'Hit Clicked'
+                    );
+                  }}
+                  onAuxClick={() => {
+                    sendEvent?.(
+                      'click:internal',
+                      item as Record<string, unknown>,
+                      'Hit Clicked'
+                    );
+                  }}
                 >
                   <ItemComponent
                     item={item}

packages/instantsearch.js/src/connectors/autocomplete/__tests__/connectAutocomplete-test.ts

@@ -200,12 +200,17 @@ search.addWidgets([
     expect(secondRenderOptions.indices).toHaveLength(2);
     expect(secondRenderOptions.indices[0].indexId).toEqual('indexId0');
     expect(secondRenderOptions.indices[0].indexName).toEqual('indexName0');
-    expect(secondRenderOptions.indices[0].hits).toEqual(firstIndexHits);
+    expect(secondRenderOptions.indices[0].hits).toEqual([
+      { ...firstIndexHits[0], __position: 1 },
+    ]);
     expect(secondRenderOptions.indices[0].results.index).toEqual('indexName0');
     expect(secondRenderOptions.indices[0].results.hits).toEqual(firstIndexHits);
     expect(secondRenderOptions.indices[1].indexId).toEqual('indexId1');
     expect(secondRenderOptions.indices[1].indexName).toEqual('indexName1');
-    expect(secondRenderOptions.indices[1].hits).toEqual(secondIndexHits);
+    expect(secondRenderOptions.indices[1].hits).toEqual([
+      { ...secondIndexHits[0], __position: 1 },
+      { ...secondIndexHits[1], __position: 2 },
+    ]);
     expect(secondRenderOptions.indices[1].results.index).toEqual('indexName1');
     expect(secondRenderOptions.indices[1].results.hits).toEqual(
       secondIndexHits
@@ -268,6 +273,20 @@ search.addWidgets([
       { __escaped: true }
     );
 
+    const enrichedEscapedHits = [
+      {
+        _highlightResult: {
+          foobar: {
+            value: '&lt;script&gt;<mark>foobar</mark>&lt;/script&gt;',
+            matchLevel: 'full',
+            matchedWords: ['foobar'],
+          },
+        },
+        objectID: '1',
+        __position: 1,
+      },
+    ];
+
     widget.init!(createInitOptions({ helper }));
 
     widget.render!(
@@ -290,7 +309,7 @@ search.addWidgets([
 
     const rendering = render.mock.calls[1][0];
 
-    expect(rendering.indices[0].hits).toEqual(escapedHits);
+    expect(rendering.indices[0].hits).toEqual(enrichedEscapedHits);
     expect(rendering.indices[0].results.hits).toEqual(escapedHits);
   });
 
@@ -337,7 +356,12 @@ search.addWidgets([
 
     const rendering = render.mock.calls[1][0];
 
-    expect(rendering.indices[0].hits).toEqual(hits);
+    expect(rendering.indices[0].hits).toEqual(
+      hits.map((hit, index) => ({
+        ...hit,
+        __position: index + 1,
+      }))
+    );
     expect(rendering.indices[0].results.hits).toEqual(hits);
   });
 
@@ -728,22 +752,16 @@ search.addWidgets([
         {
           name: 'Hit 1-1',
           objectID: '1-1',
-          __queryID: 'test-query-id',
-          __position: 0,
         },
       ];
       const secondIndexHits = [
         {
           name: 'Hit 2-1',
           objectID: '2-1',
-          __queryID: 'test-query-id',
-          __position: 0,
         },
         {
           name: 'Hit 2-2',
           objectID: '2-2',
-          __queryID: 'test-query-id',
-          __position: 1,
         },
       ];
 
@@ -754,6 +772,7 @@ search.addWidgets([
             createSingleSearchResponse({
               index: 'indexName0',
               hits: firstIndexHits,
+              queryID: 'test-query-id',
             }),
           ]),
           helper: algoliasearchHelper(searchClient, 'indexName0'),
@@ -764,6 +783,7 @@ search.addWidgets([
             createSingleSearchResponse({
               index: 'indexName1',
               hits: secondIndexHits,
+              queryID: 'test-query-id',
             }),
           ]),
           helper: algoliasearchHelper(searchClient, 'indexName1'),
@@ -794,7 +814,7 @@ search.addWidgets([
         eventModifier: 'internal',
         hits: [
           {
-            __position: 0,
+            __position: 1,
             __queryID: 'test-query-id',
             name: 'Hit 1-1',
             objectID: '1-1',
@@ -813,13 +833,13 @@ search.addWidgets([
         eventModifier: 'internal',
         hits: [
           {
-            __position: 0,
+            __position: 1,
             __queryID: 'test-query-id',
             name: 'Hit 2-1',
             objectID: '2-1',
           },
           {
-            __position: 1,
+            __position: 2,
             __queryID: 'test-query-id',
             name: 'Hit 2-2',
             objectID: '2-2',
@@ -894,18 +914,17 @@ search.addWidgets([
     });
 
     it('sends click event', () => {
-      const { sendEventToInsights, render, secondIndexHits } =
-        createRenderedWidget();
+      const { sendEventToInsights, render } = createRenderedWidget();
       expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render
 
       const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
-      indices[1].sendEvent('click', secondIndexHits[0], 'Product Added');
+      indices[1].sendEvent('click', indices[1].hits[0], 'Product Added');
       expect(sendEventToInsights).toHaveBeenCalledTimes(3);
       expect(sendEventToInsights.mock.calls[2][0]).toEqual({
         eventType: 'click',
         hits: [
           {
-            __position: 0,
+            __position: 1,
             __queryID: 'test-query-id',
             name: 'Hit 2-1',
             objectID: '2-1',
@@ -916,26 +935,25 @@ search.addWidgets([
           eventName: 'Product Added',
           index: 'indexName1',
           objectIDs: ['2-1'],
-          positions: [0],
+          positions: [1],
           queryID: 'test-query-id',
         },
         widgetType: 'ais.autocomplete',
       });
     });
 
     it('sends conversion event', () => {
-      const { sendEventToInsights, render, firstIndexHits } =
-        createRenderedWidget();
+      const { sendEventToInsights, render } = createRenderedWidget();
       expect(sendEventToInsights).toHaveBeenCalledTimes(2); // two view events for each index by render
 
       const { indices } = render.mock.calls[render.mock.calls.length - 1][0];
-      indices[0].sendEvent('conversion', firstIndexHits[0], 'Product Ordered');
+      indices[0].sendEvent('conversion', indices[0].hits[0], 'Product Ordered');
       expect(sendEventToInsights).toHaveBeenCalledTimes(3);
       expect(sendEventToInsights.mock.calls[2][0]).toEqual({
         eventType: 'conversion',
         hits: [
           {
-            __position: 0,
+            __position: 1,
             __queryID: 'test-query-id',
             name: 'Hit 1-1',
             objectID: '1-1',

packages/instantsearch.js/src/connectors/autocomplete/connectAutocomplete.ts

@@ -1,4 +1,6 @@
 import {
+  addAbsolutePosition,
+  addQueryID,
   escapeHits,
   TAG_PLACEHOLDER,
   checkRendering,
@@ -228,10 +230,21 @@ search.addWidgets([
             widgetType: this.$$type,
           });
 
+          const hits = scopedResult.results
+            ? addQueryID(
+                addAbsolutePosition(
+                  scopedResult.results.hits,
+                  scopedResult.results.page,
+                  scopedResult.results.hitsPerPage
+                ),
+                scopedResult.results.queryID
+              )
+            : [];
+
           return {
             indexId: scopedResult.indexId,
             indexName: scopedResult.results?.index || '',
-            hits: scopedResult.results?.hits || [],
+            hits,
             results: scopedResult.results || ({} as unknown as SearchResults),
           };
         });

packages/instantsearch.js/src/widgets/autocomplete/autocomplete.tsx

@@ -795,6 +795,7 @@ function AutocompleteWrapper<TItem extends BaseHit>({
           __indexName: indexId,
         }))}
         getItemProps={getItemProps}
+        sendEvent={find(indices, (idx) => idx.indexId === indexId)?.sendEvent}
         classNames={currentIndexConfig.cssClasses}
       />
     );

packages/react-instantsearch/src/widgets/Autocomplete.tsx

@@ -869,6 +869,7 @@ function InnerAutocomplete<TItem extends BaseHit = BaseHit>({
           __indexName: indexId,
         }))}
         getItemProps={getItemProps}
+        sendEvent={indices.find((idx) => idx.indexId === indexId)?.sendEvent}
         classNames={currentIndexConfig.classNames}
       />
     );

tests/common/widgets/autocomplete/index.ts

@@ -1,5 +1,6 @@
 import { fakeAct, skippableDescribe } from '../../common';
 
+import { createInsightsTests } from './insights';
 import { createOptionsTests } from './options';
 import { createTemplatesTests } from './templates';
 
@@ -59,6 +60,7 @@ export function createAutocompleteWidgetTests(
   skippableDescribe('Autocomplete widget common tests', skippedTests, () => {
     createOptionsTests(setup, { act, skippedTests, flavor });
     createTemplatesTests(setup, { act, skippedTests, flavor });
+    createInsightsTests(setup, { act, skippedTests, flavor });
   });
 }
 createAutocompleteWidgetTests.flavored = true;