feat(autocomplete-core): add insights option to enable the Insights…

… plugin (#1121)
algolia · Apr 24, 2023 · c9d06fd · c9d06fd
1 parent efb27ce
commit c9d06fd
Show file tree

Hide file tree

Showing 53 changed files with 444 additions and 196 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "packages/autocomplete-core/dist/umd/index.production.js",
-      "maxSize": "6.5 kB"
+      "maxSize": "8.5 kB"
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "19 kB"
+      "maxSize": "20.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

diff --git a/jest.config.js b/jest.config.js
@@ -15,6 +15,8 @@ module.exports = {
     __TEST__: true,
   },
   moduleNameMapper: {
+    '^@algolia/autocomplete-shared/dist/esm/(.*)$':
+      '<rootDir>/packages/autocomplete-shared/src/$1',
     '^@algolia/autocomplete-(.*)$': '<rootDir>/packages/autocomplete-$1/src/',
   },
 };
diff --git a/packages/autocomplete-core/package.json b/packages/autocomplete-core/package.json
@@ -31,7 +31,8 @@
     "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
   },
   "dependencies": {
-    "@algolia/autocomplete-shared": "1.8.3"
+    "@algolia/autocomplete-shared": "1.8.3",
+    "@algolia/autocomplete-plugin-algolia-insights": "1.8.3"
   },
   "devDependencies": {
     "@algolia/autocomplete-preset-algolia": "1.8.3",

diff --git a/packages/autocomplete-core/src/__tests__/createAutocomplete.test.ts b/packages/autocomplete-core/src/__tests__/createAutocomplete.test.ts
@@ -1,3 +1,5 @@
+import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
+
 import { createAutocomplete } from '../createAutocomplete';
 
 describe('createAutocomplete', () => {
@@ -43,4 +45,126 @@ describe('createAutocomplete', () => {
       setStatus: autocomplete.setStatus,
     });
   });
+
+  describe('Insights plugin', () => {
+    test('does not add Insights plugin by default', () => {
+      const onStateChange = jest.fn();
+
+      createAutocomplete({ onStateChange });
+
+      expect(onStateChange).toHaveBeenCalledTimes(0);
+    });
+
+    test('`insights: true` adds only one Insights plugin', () => {
+      const onStateChange = jest.fn();
+
+      createAutocomplete({
+        onStateChange,
+        insights: true,
+      });
+
+      expect(onStateChange).toHaveBeenCalledTimes(1);
+      expect(onStateChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          state: expect.objectContaining({
+            context: expect.objectContaining({
+              algoliaInsightsPlugin: expect.objectContaining({
+                insights: expect.objectContaining({
+                  init: expect.any(Function),
+                  setUserToken: expect.any(Function),
+                  clickedObjectIDsAfterSearch: expect.any(Function),
+                  clickedObjectIDs: expect.any(Function),
+                  clickedFilters: expect.any(Function),
+                  convertedObjectIDsAfterSearch: expect.any(Function),
+                  convertedObjectIDs: expect.any(Function),
+                  convertedFilters: expect.any(Function),
+                  viewedObjectIDs: expect.any(Function),
+                  viewedFilters: expect.any(Function),
+                }),
+              }),
+            }),
+          }),
+        })
+      );
+    });
+
+    test('`insights` with options still creates one plugin only', () => {
+      const onStateChange = jest.fn();
+      const insightsClient = jest.fn();
+
+      createAutocomplete({
+        onStateChange,
+        insights: { insightsClient },
+      });
+
+      expect(onStateChange).toHaveBeenCalledTimes(1);
+      expect(onStateChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          state: expect.objectContaining({
+            context: expect.objectContaining({
+              algoliaInsightsPlugin: expect.objectContaining({
+                insights: expect.objectContaining({
+                  init: expect.any(Function),
+                  setUserToken: expect.any(Function),
+                  clickedObjectIDsAfterSearch: expect.any(Function),
+                  clickedObjectIDs: expect.any(Function),
+                  clickedFilters: expect.any(Function),
+                  convertedObjectIDsAfterSearch: expect.any(Function),
+                  convertedObjectIDs: expect.any(Function),
+                  convertedFilters: expect.any(Function),
+                  viewedObjectIDs: expect.any(Function),
+                  viewedFilters: expect.any(Function),
+                }),
+              }),
+            }),
+          }),
+        })
+      );
+    });
+
+    test('`insights` with options passes options to plugin', () => {
+      const insightsClient = jest.fn();
+
+      createAutocomplete({
+        insights: { insightsClient },
+      });
+
+      expect(insightsClient).toHaveBeenCalledTimes(1);
+      expect(insightsClient).toHaveBeenCalledWith(
+        'addAlgoliaAgent',
+        'insights-plugin'
+      );
+    });
+
+    test('`insights: false` disables default Insights plugin', () => {
+      const onStateChange = jest.fn();
+
+      createAutocomplete({
+        insights: false,
+        onStateChange,
+      });
+
+      expect(onStateChange).toHaveBeenCalledTimes(0);
+    });
+
+    test("users' Insights plugin overrides the default one when `insights: true`", () => {
+      const defaultInsightsClient = jest.fn();
+      const userInsightsClient = jest.fn();
+      const insightsPlugin = createAlgoliaInsightsPlugin({
+        insightsClient: userInsightsClient,
+      });
+
+      createAutocomplete({
+        insights: { insightsClient: defaultInsightsClient },
+        plugins: [insightsPlugin],
+      });
+
+      expect(defaultInsightsClient).toHaveBeenCalledTimes(0);
+      expect(userInsightsClient).toHaveBeenCalledTimes(1);
+      expect(userInsightsClient).toHaveBeenCalledWith(
+        'addAlgoliaAgent',
+        'insights-plugin'
+      );
+    });
+  });
 });
diff --git a/packages/autocomplete-core/src/__tests__/openOnFocus.test.ts b/packages/autocomplete-core/src/__tests__/openOnFocus.test.ts
@@ -6,8 +6,7 @@ import {
   runAllMicroTasks,
 } from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
-import { BaseItem } from '../types/AutocompleteApi';
-import { AutocompleteOptions } from '../types/AutocompleteOptions';
+import { BaseItem, AutocompleteOptions } from '../types';
 
 describe('openOnFocus', () => {
   function setupTest<TItem extends BaseItem>(

diff --git a/packages/autocomplete-core/src/createAutocomplete.ts b/packages/autocomplete-core/src/createAutocomplete.ts
@@ -1,3 +1,5 @@
+import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
+
 import { checkOptions } from './checkOptions';
 import { createStore } from './createStore';
 import { getAutocompleteSetters } from './getAutocompleteSetters';
@@ -66,6 +68,15 @@ export function createAutocomplete<
     });
   }
 
+  if (
+    options.insights &&
+    !props.plugins.some((plugin) => plugin.name === 'aa.algoliaInsightsPlugin')
+  ) {
+    const insightsParams =
+      typeof options.insights === 'boolean' ? {} : options.insights;
+    props.plugins.push(createAlgoliaInsightsPlugin(insightsParams));
+  }
+
   props.plugins.forEach((plugin) =>
     plugin.subscribe?.({
       ...setters,

diff --git a/packages/autocomplete-core/src/getDefaultProps.ts b/packages/autocomplete-core/src/getDefaultProps.ts
@@ -31,6 +31,7 @@ export function getDefaultProps<TItem extends BaseItem>(
     autoFocus: false,
     defaultActiveItemId: null,
     stallThreshold: 300,
+    insights: false,
     environment,
     shouldPanelOpen: ({ state }) => getItemsCount(state) > 0,
     reshape: ({ sources }) => sources,

diff --git a/packages/autocomplete-core/src/types/AutocompleteStore.ts b/packages/autocomplete-core/src/types/AutocompleteStore.ts
@@ -1,8 +1,6 @@
 import { CancelablePromiseList } from '../utils';
 
-import { BaseItem } from './AutocompleteApi';
-import { InternalAutocompleteOptions } from './AutocompleteOptions';
-import { AutocompleteState } from './AutocompleteState';
+import { BaseItem, InternalAutocompleteOptions, AutocompleteState } from './';
 
 export interface AutocompleteStore<TItem extends BaseItem> {
   getState(): AutocompleteState<TItem>;

diff --git a/packages/autocomplete-core/src/types/AutocompleteSubscribers.ts b/packages/autocomplete-core/src/types/AutocompleteSubscribers.ts
@@ -1,9 +1,4 @@
-import { BaseItem } from './AutocompleteApi';
-import {
-  OnActiveParams,
-  OnResolveParams,
-  OnSelectParams,
-} from './AutocompleteSource';
+import { BaseItem, OnActiveParams, OnResolveParams, OnSelectParams } from './';
 
 export type AutocompleteSubscriber<TItem extends BaseItem> = {
   onSelect(params: OnSelectParams<TItem>): void;

diff --git a/packages/autocomplete-core/src/types/index.ts b/packages/autocomplete-core/src/types/index.ts
@@ -1,13 +1,22 @@
-export * from './AutocompleteApi';
-export * from './AutocompleteCollection';
-export * from './AutocompleteContext';
-export * from './AutocompleteEnvironment';
-export * from './AutocompleteOptions';
-export * from './AutocompleteSource';
-export * from './AutocompletePropGetters';
-export * from './AutocompletePlugin';
-export * from './AutocompleteReshape';
-export * from './AutocompleteSetters';
-export * from './AutocompleteState';
+export * from '@algolia/autocomplete-shared/dist/esm/core';
 export * from './AutocompleteStore';
 export * from './AutocompleteSubscribers';
+
+import { CreateAlgoliaInsightsPluginParams } from '@algolia/autocomplete-plugin-algolia-insights';
+import {
+  AutocompleteOptions as _AutocompleteOptions,
+  BaseItem,
+} from '@algolia/autocomplete-shared/dist/esm/core';
+
+export interface AutocompleteOptions<TItem extends BaseItem>
+  extends _AutocompleteOptions<TItem> {
+  /**
+   * Whether to enable the Insights plugin and load the Insights library if it has not been loaded yet.
+   *
+   * See [**autocomplete-plugin-algolia-insights**](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-algolia-insights/) for more information.
+   *
+   * @default false
+   * @link https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-insights
+   */
+  insights?: CreateAlgoliaInsightsPluginParams | boolean;
+}
diff --git a/packages/autocomplete-js/src/__tests__/autocomplete.test.ts b/packages/autocomplete-js/src/__tests__/autocomplete.test.ts
@@ -1,3 +1,4 @@
+import { createAlgoliaInsightsPlugin } from '@algolia/autocomplete-plugin-algolia-insights';
 import * as autocompleteShared from '@algolia/autocomplete-shared';
 import { fireEvent, waitFor } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
@@ -285,7 +286,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.input(input, { target: { value: 'a' } });
 
@@ -325,7 +326,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.focus(input);
 
@@ -365,7 +366,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.focus(input);
 
@@ -405,7 +406,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.input(input, { target: { value: 'Query' } });
 
@@ -446,7 +447,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.input(input, { target: { value: 'a' } });
 
@@ -579,7 +580,7 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       },
     });
 
-    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+    const input = container.querySelector<HTMLInputElement>('.aa-Input')!;
 
     fireEvent.input(input, { target: { value: 'a' } });
 
@@ -691,4 +692,75 @@ See: https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocom
       );
     });
   });
+
+  describe('Insights plugin', () => {
+    test('does not add Insights plugin by default', () => {
+      const onStateChange = jest.fn();
+
+      const container = document.createElement('div');
+      autocomplete({
+        container,
+        onStateChange,
+      });
+
+      expect(onStateChange).toHaveBeenCalledTimes(0);
+    });
+
+    test('`insights: true` adds only one Insights plugin', () => {
+      const onStateChange = jest.fn();
+
+      const container = document.createElement('div');
+      autocomplete({
+        container,
+        insights: true,
+        onStateChange,
+      });
+
+      expect(onStateChange).toHaveBeenCalledTimes(1);
+      expect(onStateChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          state: expect.objectContaining({
+            context: expect.objectContaining({
+              algoliaInsightsPlugin: expect.objectContaining({
+                insights: expect.objectContaining({
+                  init: expect.any(Function),
+                  setUserToken: expect.any(Function),
+                  clickedObjectIDsAfterSearch: expect.any(Function),
+                  clickedObjectIDs: expect.any(Function),
+                  clickedFilters: expect.any(Function),
+                  convertedObjectIDsAfterSearch: expect.any(Function),
+                  convertedObjectIDs: expect.any(Function),
+                  convertedFilters: expect.any(Function),
+                  viewedObjectIDs: expect.any(Function),
+                  viewedFilters: expect.any(Function),
+                }),
+              }),
+            }),
+          }),
+        })
+      );
+    });
+
+    test("users' Insights plugin overrides the default one using `update`", () => {
+      const defaultInsightsClient = jest.fn();
+      const userInsightsClient = jest.fn();
+
+      const container = document.createElement('div');
+      const { update } = autocomplete({
+        container,
+        insights: { insightsClient: defaultInsightsClient },
+      });
+
+      expect(defaultInsightsClient).toHaveBeenCalledTimes(1);
+      expect(userInsightsClient).toHaveBeenCalledTimes(0);
+
+      const insightsPlugin = createAlgoliaInsightsPlugin({
+        insightsClient: userInsightsClient,
+      });
+      update({ plugins: [insightsPlugin] });
+
+      expect(defaultInsightsClient).toHaveBeenCalledTimes(1);
+      expect(userInsightsClient).toHaveBeenCalledTimes(1);
+    });
+  });
 });