Differentiate regular and detached DOM

algolia · May 11, 2021 · cb07b02 · cb07b02
1 parent 6920d42
commit cb07b02
Showing 1 changed file with 125 additions and 89 deletions.
diff --git a/packages/autocomplete-js/src/__tests__/translations.test.ts b/packages/autocomplete-js/src/__tests__/translations.test.ts
@@ -1,4 +1,4 @@
-import { fireEvent, waitFor } from '@testing-library/dom';
+import { waitFor } from '@testing-library/dom';
 
 import { autocomplete } from '../autocomplete';
 
@@ -7,105 +7,141 @@ describe('translations', () => {
     document.body.innerHTML = '';
   });
 
-  const originalMatchMedia = window.matchMedia;
-
-  beforeAll(() => {
-    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(),
-      })),
+  describe('regular DOM', () => {
+    test('provides default translations', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      autocomplete<{ label: string }>({
+        container,
+      });
+
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-ClearButton')
+      ).toHaveAttribute('title', 'Clear');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
+      ).toHaveAttribute('title', 'Submit');
     });
-  });
 
-  afterAll(() => {
-    Object.defineProperty(window, 'matchMedia', {
-      writable: true,
-      value: originalMatchMedia,
+    test('allows custom translations', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      autocomplete<{ label: string }>({
+        container,
+        translations: {
+          clearButtonTitle: 'Effacer',
+          submitButtonTitle: 'Envoyer',
+        },
+      });
+
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-ClearButton')
+      ).toHaveAttribute('title', 'Effacer');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
+      ).toHaveAttribute('title', 'Envoyer');
     });
   });
 
-  test('provides default translations', async () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const { destroy } = autocomplete<{ label: string }>({
-      container,
-      detachedMediaQuery: '',
+  describe('detached DOM', () => {
+    const originalMatchMedia = window.matchMedia;
+
+    beforeAll(() => {
+      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(),
+        })),
+      });
     });
 
-    const searchButton = container.querySelector<HTMLButtonElement>(
-      '.aa-DetachedSearchButton'
-    );
-
-    searchButton.click();
-
-    await waitFor(() => {
-      const input = document.querySelector<HTMLInputElement>('.aa-Input');
-
-      expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
-
-      fireEvent.input(input, { target: { value: 'a' } });
+    afterAll(() => {
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: originalMatchMedia,
+      });
     });
 
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
-    ).toHaveTextContent('Cancel');
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-ClearButton')
-    ).toHaveAttribute('title', 'Clear');
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
-    ).toHaveAttribute('title', 'Submit');
-
-    destroy();
-  });
-
-  test('allows custom translations', async () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const { destroy } = autocomplete({
-      container,
-      detachedMediaQuery: '',
-      translations: {
-        clearButtonTitle: 'Effacer',
-        detachedCancelButtonText: 'Annuler',
-        submitButtonTitle: 'Envoyer',
-      },
+    test('provides default translations', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      const { destroy } = autocomplete<{ label: string }>({
+        container,
+        detachedMediaQuery: '',
+      });
+
+      const searchButton = container.querySelector<HTMLButtonElement>(
+        '.aa-DetachedSearchButton'
+      );
+
+      searchButton.click();
+
+      await waitFor(() => {
+        expect(
+          document.querySelector('.aa-DetachedOverlay')
+        ).toBeInTheDocument();
+      });
+
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-ClearButton')
+      ).toHaveAttribute('title', 'Clear');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
+      ).toHaveAttribute('title', 'Submit');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
+      ).toHaveTextContent('Cancel');
+
+      destroy();
     });
 
-    const searchButton = container.querySelector<HTMLButtonElement>(
-      '.aa-DetachedSearchButton'
-    );
-
-    searchButton.click();
-
-    await waitFor(() => {
-      const input = document.querySelector<HTMLInputElement>('.aa-Input');
-
-      expect(document.querySelector('.aa-DetachedOverlay')).toBeInTheDocument();
-
-      fireEvent.input(input, { target: { value: 'a' } });
+    test('allows custom translations', async () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+
+      const { destroy } = autocomplete({
+        container,
+        detachedMediaQuery: '',
+        translations: {
+          clearButtonTitle: 'Effacer',
+          detachedCancelButtonText: 'Annuler',
+          submitButtonTitle: 'Envoyer',
+        },
+      });
+
+      const searchButton = container.querySelector<HTMLButtonElement>(
+        '.aa-DetachedSearchButton'
+      );
+
+      searchButton.click();
+
+      await waitFor(() => {
+        expect(
+          document.querySelector('.aa-DetachedOverlay')
+        ).toBeInTheDocument();
+      });
+
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-ClearButton')
+      ).toHaveAttribute('title', 'Effacer');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
+      ).toHaveAttribute('title', 'Envoyer');
+      expect(
+        document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
+      ).toHaveTextContent('Annuler');
+
+      destroy();
     });
-
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-ClearButton')
-    ).toHaveAttribute('title', 'Effacer');
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-SubmitButton')
-    ).toHaveAttribute('title', 'Envoyer');
-    expect(
-      document.querySelector<HTMLButtonElement>('.aa-DetachedCancelButton')
-    ).toHaveTextContent('Annuler');
-
-    destroy();
   });
 });