test(hits): update common widget tests

algolia · Jun 25, 2024 · 816a51b · 816a51b
1 parent c3e1cd5
commit 816a51b
Show file tree

Hide file tree

Showing 3 changed files with 167 additions and 3 deletions.
diff --git a/packages/vue-instantsearch/src/__tests__/common-widgets.test.js b/packages/vue-instantsearch/src/__tests__/common-widgets.test.js
@@ -589,8 +589,12 @@ const testOptions = {
   createBreadcrumbWidgetTests: undefined,
   createMenuWidgetTests: undefined,
   createPaginationWidgetTests: undefined,
-  createInfiniteHitsWidgetTests: undefined,
-  createHitsWidgetTests: undefined,
+  createInfiniteHitsWidgetTests: {
+    skippedTests: { 'banner option': true },
+  },
+  createHitsWidgetTests: {
+    skippedTests: { 'banner option': true },
+  },
   createRangeInputWidgetTests: undefined,
   createRatingMenuWidgetTests: undefined,
   createInstantSearchWidgetTests: undefined,

diff --git a/tests/common/widgets/hits/options.ts b/tests/common/widgets/hits/options.ts
@@ -171,6 +171,80 @@ export function createOptionsTests(
         );
       });
     });
+
+    skippableDescribe('banner option', skippedTests, () => {
+      test('renders default banner element with banner widget renderingContent', async () => {
+        const searchClient = createMockedSearchClient({
+          renderingContent: {
+            // @TODO: remove once algoliasearch js client has been updated
+            // @ts-expect-error
+            widgets: {
+              banners: [
+                {
+                  image: {
+                    urls: [{ url: 'https://via.placeholder.com/550x250' }],
+                  },
+                  link: {
+                    url: 'https://www.algolia.com',
+                  },
+                },
+              ],
+            },
+          },
+        });
+
+        await setup({
+          instantSearchOptions: {
+            indexName: 'indexName',
+            searchClient,
+          },
+          widgetParams: {},
+        });
+
+        await act(async () => {
+          await wait(0);
+        });
+
+        expect(
+          document.querySelector('#hits-with-defaults .ais-Hits')
+        ).toMatchNormalizedInlineSnapshot(
+          normalizeSnapshot,
+          `
+          <div
+            class="ais-Hits"
+          >
+            <aside
+              class="ais-Hits-banner"
+            >
+              <a
+                class="ais-Hits-banner-link"
+                href="https://www.algolia.com"
+              >
+                <img
+                  class="ais-Hits-banner-image"
+                  src="https://via.placeholder.com/550x250"
+                />
+              </a>
+            </aside>
+            <ol
+              class="ais-Hits-list"
+            >
+              <li
+                class="ais-Hits-item"
+              >
+                {"objectID":"1"}
+              </li>
+              <li
+                class="ais-Hits-item"
+              >
+                {"objectID":"2"}
+              </li>
+            </ol>
+          </div>
+          `
+        );
+      });
+    });
   });
 }
 

diff --git a/tests/common/widgets/infinite-hits/options.ts b/tests/common/widgets/infinite-hits/options.ts
@@ -9,6 +9,8 @@ import {
 } from '@instantsearch/testutils';
 import userEvent from '@testing-library/user-event';
 
+import { skippableDescribe } from '../../common';
+
 import type { InfiniteHitsWidgetSetup } from '.';
 import type { TestOptions } from '../../common';
 import type { MockSearchClient } from '@instantsearch/mocks';
@@ -51,7 +53,7 @@ function normalizeSnapshot(html: string) {
 
 export function createOptionsTests(
   setup: InfiniteHitsWidgetSetup,
-  { act }: Required<TestOptions>
+  { act, skippedTests }: Required<TestOptions>
 ) {
   describe('options', () => {
     test('renders with default props', async () => {
@@ -106,6 +108,90 @@ export function createOptionsTests(
       );
     });
 
+    skippableDescribe('banner option', skippedTests, () => {
+      test('renders default banner element with banner widget renderingContent', async () => {
+        const searchClient = createMockedSearchClient({
+          renderingContent: {
+            // @TODO: remove once algoliasearch js client has been updated
+            // @ts-expect-error
+            widgets: {
+              banners: [
+                {
+                  image: {
+                    urls: [{ url: 'https://via.placeholder.com/550x250' }],
+                  },
+                  link: {
+                    url: 'https://www.algolia.com',
+                  },
+                },
+              ],
+            },
+          },
+        });
+
+        await setup({
+          instantSearchOptions: {
+            indexName: 'indexName',
+            searchClient,
+          },
+          widgetParams: {},
+        });
+
+        await act(async () => {
+          await wait(0);
+        });
+
+        expect(
+          document.querySelector('#hits-with-defaults .ais-InfiniteHits')
+        ).toMatchNormalizedInlineSnapshot(
+          normalizeSnapshot,
+          `
+          <div
+            class="ais-InfiniteHits"
+          >
+            <aside
+              class="ais-InfiniteHits-banner"
+            >
+              <a
+                class="ais-InfiniteHits-banner-link"
+                href="https://www.algolia.com"
+              >
+                <img
+                  class="ais-InfiniteHits-banner-image"
+                  src="https://via.placeholder.com/550x250"
+                />
+              </a>
+            </aside>
+            <ol
+              class="ais-InfiniteHits-list"
+            >
+              <li
+                class="ais-InfiniteHits-item"
+              >
+                {"objectID":"0"}
+              </li>
+              <li
+                class="ais-InfiniteHits-item"
+              >
+                {"objectID":"1"}
+              </li>
+              <li
+                class="ais-InfiniteHits-item"
+              >
+                {"objectID":"2"}
+              </li>
+            </ol>
+            <button
+              class="ais-InfiniteHits-loadMore"
+            >
+              Show more results
+            </button>
+          </div>
+          `
+        );
+      });
+    });
+
     test('renders transformed items', async () => {
       const searchClient = createMockedSearchClient();