fix(js): prevent id incrementation when toggling detached mode (#489)

* prevent id incrementation when toggling detached mode

Author: shortcuts

packages/autocomplete-core/src/getDefaultProps.ts

@@ -1,4 +1,7 @@
-import { getItemsCount } from '@algolia/autocomplete-shared';
+import {
+  getItemsCount,
+  generateAutocompleteId,
+} from '@algolia/autocomplete-shared';
 
 import {
   AutocompleteEnvironment,
@@ -7,7 +10,7 @@ import {
   BaseItem,
   InternalAutocompleteOptions,
 } from './types';
-import { generateAutocompleteId, getNormalizedSources, flatten } from './utils';
+import { getNormalizedSources, flatten } from './utils';
 
 export function getDefaultProps<TItem extends BaseItem>(
   props: AutocompleteOptions<TItem>,
@@ -29,7 +32,7 @@ export function getDefaultProps<TItem extends BaseItem>(
     shouldPanelOpen: ({ state }) => getItemsCount(state) > 0,
     ...props,
     // Since `generateAutocompleteId` triggers a side effect (it increments
-    // and internal counter), we don't want to execute it if unnecessary.
+    // an internal counter), we don't want to execute it if unnecessary.
     id: props.id ?? generateAutocompleteId(),
     plugins,
     // The following props need to be deeply defaulted.

packages/autocomplete-core/src/utils/index.ts

@@ -1,6 +1,5 @@
 export * from './createConcurrentSafePromise';
 export * from './flatten';
-export * from './generateAutocompleteId';
 export * from './getNextActiveItemId';
 export * from './getNormalizedSources';
 export * from './getActiveItem';

packages/autocomplete-js/src/__tests__/api.test.ts

@@ -1,4 +1,5 @@
 import { createAutocomplete } from '@algolia/autocomplete-core';
+import { waitFor } from '@testing-library/dom';
 
 import { createCollection } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
@@ -253,6 +254,23 @@ describe('api', () => {
         })
       );
     });
+
+    test('overrides the default id', async () => {
+      const container = document.createElement('div');
+
+      document.body.appendChild(container);
+      const { update } = autocomplete<{ label: string }>({
+        container,
+      });
+
+      update({ id: 'bestSearchExperience' });
+
+      await waitFor(() => {
+        expect(
+          document.body.querySelector('#bestSearchExperience-label')
+        ).toBeInTheDocument();
+      });
+    });
   });
 
   describe('destroy', () => {

packages/autocomplete-js/src/__tests__/autocomplete.test.ts

@@ -1,7 +1,18 @@
+import * as autocompleteShared from '@algolia/autocomplete-shared';
 import { fireEvent, waitFor } from '@testing-library/dom';
 
+import { castToJestMock } from '../../../../test/utils';
 import { autocomplete } from '../autocomplete';
 
+jest.mock('@algolia/autocomplete-shared', () => {
+  const module = jest.requireActual('@algolia/autocomplete-shared');
+
+  return {
+    ...module,
+    generateAutocompleteId: jest.fn(() => `autocomplete-test`),
+  };
+});
+
 describe('autocomplete-js', () => {
   test('renders with default options', () => {
     const container = document.createElement('div');
@@ -151,6 +162,82 @@ describe('autocomplete-js', () => {
     `);
   });
 
+  test("renders with an auto-incremented id if there's multiple instances", () => {
+    const container = document.createElement('div');
+    const initialNbCalls = castToJestMock(
+      autocompleteShared.generateAutocompleteId
+    ).mock.calls.length;
+
+    document.body.appendChild(container);
+    autocomplete({
+      container,
+    });
+
+    expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(
+      initialNbCalls + 1
+    );
+
+    autocomplete({
+      container,
+    });
+
+    expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(
+      initialNbCalls + 2
+    );
+
+    autocomplete({
+      container,
+    });
+
+    expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(
+      initialNbCalls + 3
+    );
+  });
+
+  test("doesn't increment the id when toggling detached mode", () => {
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    const { update } = autocomplete<{ label: string }>({
+      container,
+    });
+
+    const initialNbCalls = castToJestMock(
+      autocompleteShared.generateAutocompleteId
+    ).mock.calls.length;
+
+    expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(
+      initialNbCalls
+    );
+
+    const originalMatchMedia = window.matchMedia;
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn((query) => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+
+    update({ detachedMediaQuery: '' });
+
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: originalMatchMedia,
+    });
+
+    expect(autocompleteShared.generateAutocompleteId).toHaveBeenCalledTimes(
+      initialNbCalls
+    );
+  });
+
   test('renders noResults template on no results', async () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');

packages/autocomplete-js/src/autocomplete.ts

@@ -42,6 +42,7 @@ export function autocomplete<TItem extends BaseItem>(
         props.value.renderer.detachedMediaQuery
       ).matches
   );
+
   const autocomplete = reactive(() =>
     createAutocomplete<TItem>({
       ...props.value.core,
@@ -246,12 +247,12 @@ export function autocomplete<TItem extends BaseItem>(
 
   runEffect(() => {
     const onResize = debounce<Event>(() => {
-      const previousisDetached = isDetached.value;
+      const previousIsDetached = isDetached.value;
       isDetached.value = props.value.core.environment.matchMedia(
         props.value.renderer.detachedMediaQuery
       ).matches;
 
-      if (previousisDetached !== isDetached.value) {
+      if (previousIsDetached !== isDetached.value) {
         update({});
       } else {
         requestAnimationFrame(setPanelPosition);

packages/autocomplete-js/src/getDefaultOptions.ts

@@ -1,5 +1,8 @@
 import { BaseItem } from '@algolia/autocomplete-core';
-import { invariant } from '@algolia/autocomplete-shared';
+import {
+  generateAutocompleteId,
+  invariant,
+} from '@algolia/autocomplete-shared';
 import {
   createElement as preactCreateElement,
   Fragment as PreactFragment,
@@ -115,6 +118,7 @@ export function getDefaultOptions<TItem extends BaseItem>(
     },
     core: {
       ...core,
+      id: core.id ?? generateAutocompleteId(),
       environment,
     },
   };

packages/autocomplete-core/src/utils/generateAutocompleteId.ts renamed to packages/autocomplete-shared/src/generateAutocompleteId.ts

@@ -1,5 +1,6 @@
 export * from './createRef';
 export * from './debounce';
+export * from './generateAutocompleteId';
 export * from './getAttributeValueByPath';
 export * from './getItemsCount';
 export * from './invariant';

packages/autocomplete-shared/src/index.ts

@@ -0,0 +1,3 @@
+export const castToJestMock = <TFunction extends (...args: any[]) => any>(
+  func: TFunction
+) => func as jest.MockedFunction<typeof func>;

test/utils/castToJestMock.ts

@@ -1,3 +1,4 @@
+export * from './castToJestMock';
 export * from './createApiResponse';
 export * from './createCollection';
 export * from './createNavigator';