fix: add more tests

algolia · Jun 14, 2022 · 11cf12e · 11cf12e
1 parent 93ca5f0
commit 11cf12e
Show file tree

Hide file tree

Showing 6 changed files with 885 additions and 159 deletions.
diff --git a/packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx b/packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx
@@ -0,0 +1,223 @@
+/** @jsx h */
+import { ObjectWithObjectID } from '@algolia/client-search';
+import { waitFor, within } from '@testing-library/dom';
+import { h } from 'preact';
+
+import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse';
+import {
+  createRecommendClient,
+  hit,
+} from '../../../../test/utils/createRecommendClient';
+import { frequentlyBoughtTogether } from '../frequentlyBoughtTogether';
+
+function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) {
+  const recommendClient = createRecommendClient({
+    getFrequentlyBoughtTogether: jest.fn(() =>
+      Promise.resolve(
+        createMultiSearchResponse({
+          hits: recommendations,
+        })
+      )
+    ),
+  });
+
+  return {
+    recommendClient,
+  };
+}
+
+describe('frequently bought together', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('Rendering for header and item', () => {
+    test('renders JSX templates', async () => {
+      const panelContainer = document.createElement('div');
+      panelContainer.setAttribute('id', 'frequentlyBoughtTogether');
+
+      const { recommendClient } = createMockedRecommendClient(
+        hit.recommendations
+      );
+
+      document.body.appendChild(panelContainer);
+
+      frequentlyBoughtTogether<ObjectWithObjectID>({
+        container: '#frequentlyBoughtTogether',
+        recommendClient,
+        indexName: 'products',
+        objectIDs: ['D06270-9132-995'],
+        headerComponent: () => <h1>FBT</h1>,
+        itemComponent: ({ item }) => <div>{item.objectID}</div>,
+      });
+
+      await waitFor(() => {
+        expect(within(panelContainer).getAllByRole('listitem')).not.toBeNull();
+        expect(panelContainer).toMatchInlineSnapshot(`
+          <div
+            id="frequentlyBoughtTogether"
+          >
+            <section
+              class="auc-Recommend"
+            >
+              <h1>
+                FBT
+              </h1>
+              <div
+                class="auc-Recommend-container"
+              >
+                <ol
+                  class="auc-Recommend-list"
+                >
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    <div>
+                      1
+                    </div>
+                  </li>
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    <div>
+                      2
+                    </div>
+                  </li>
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    <div>
+                      3
+                    </div>
+                  </li>
+                </ol>
+              </div>
+            </section>
+          </div>
+        `);
+      });
+    });
+
+    test('renders templates using createElement and Fragment', async () => {
+      const panelContainer = document.createElement('div');
+      panelContainer.setAttribute('id', 'frequentlyBoughtTogether');
+
+      const { recommendClient } = createMockedRecommendClient(
+        hit.recommendations
+      );
+
+      document.body.appendChild(panelContainer);
+
+      frequentlyBoughtTogether<ObjectWithObjectID>({
+        container: '#frequentlyBoughtTogether',
+        recommendClient,
+        indexName: 'products',
+        objectIDs: ['D06270-9132-995'],
+        headerComponent: ({ createElement }) =>
+          createElement('h1', null, 'FBT'),
+        itemComponent: ({ item, createElement, Fragment }) =>
+          createElement(Fragment, null, item.objectID),
+      });
+
+      await waitFor(() => {
+        expect(within(panelContainer).getAllByRole('listitem')).not.toBeNull();
+        expect(panelContainer).toMatchInlineSnapshot(`
+          <div
+            id="frequentlyBoughtTogether"
+          >
+            <section
+              class="auc-Recommend"
+            >
+              <h1>
+                FBT
+              </h1>
+              <div
+                class="auc-Recommend-container"
+              >
+                <ol
+                  class="auc-Recommend-list"
+                >
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    1
+                  </li>
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    2
+                  </li>
+                  <li
+                    class="auc-Recommend-item"
+                  >
+                    3
+                  </li>
+                </ol>
+              </div>
+            </section>
+          </div>
+        `);
+      });
+    });
+  });
+
+  describe('Rendering fallbackComponent', () => {
+    test('renders JSX templates', async () => {
+      const panelContainer = document.createElement('div');
+      panelContainer.setAttribute('id', 'frequentlyBoughtTogether');
+
+      const { recommendClient } = createMockedRecommendClient([]);
+
+      document.body.appendChild(panelContainer);
+
+      frequentlyBoughtTogether<ObjectWithObjectID>({
+        container: '#frequentlyBoughtTogether',
+        recommendClient,
+        indexName: 'products',
+        objectIDs: ['D06270-9132-995'],
+        itemComponent: ({ item }) => <div>{item.objectID}</div>,
+        fallbackComponent: () => <div>Fallback component</div>,
+      });
+
+      await waitFor(() => {
+        expect(within(panelContainer).getByText('Fallback component'))
+          .toMatchInlineSnapshot(`
+          <div>
+            Fallback component
+          </div>
+        `);
+      });
+    });
+
+    test('renders templates using createElement and Fragment', async () => {
+      const panelContainer = document.createElement('div');
+      panelContainer.setAttribute('id', 'frequentlyBoughtTogether');
+
+      const { recommendClient } = createMockedRecommendClient([]);
+
+      document.body.appendChild(panelContainer);
+
+      frequentlyBoughtTogether<ObjectWithObjectID>({
+        container: '#frequentlyBoughtTogether',
+        recommendClient,
+        indexName: 'products',
+        objectIDs: ['D06270-9132-995'],
+        itemComponent: ({ item, createElement }) =>
+          createElement('div', null, item.objectID),
+        fallbackComponent: ({ createElement, Fragment }) =>
+          createElement(Fragment, null, 'Fallback component'),
+      });
+
+      await waitFor(() => {
+        expect(within(panelContainer).getByText('Fallback component'))
+          .toMatchInlineSnapshot(`
+          <div
+            id="frequentlyBoughtTogether"
+          >
+            Fallback component
+          </div>
+          `);
+      });
+    });
+  });
+});