feat(recommend): introduce TrendingItems

FX-2853

bundlesize.config.json

@@ -22,7 +22,7 @@
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "61.25 kB"
+      "maxSize": "61.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",

packages/react-instantsearch/src/__tests__/common-widgets.test.tsx

@@ -27,6 +27,7 @@ import {
   Stats,
   RelatedProducts,
   FrequentlyBoughtTogether,
+  TrendingItems,
 } from '..';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
@@ -328,9 +329,16 @@ const testSetups: TestSetupsMap<TestSuites> = {
       </InstantSearch>
     );
   },
-  createTrendingItemsWidgetTests() {
-    throw new Error(
-      'TrendingItems is not implemented in React InstantSearch yet'
+  createTrendingItemsWidgetTests({ instantSearchOptions, widgetParams }) {
+    const { facetName, facetValue, ...params } = widgetParams;
+    const facetParams =
+      facetName && facetValue ? { facetName, facetValue } : {};
+
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <TrendingItems {...facetParams} {...params} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
     );
   },
 };
@@ -366,12 +374,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   },
   createRelatedProductsWidgetTests: { act },
   createFrequentlyBoughtTogetherTests: { act },
-  createTrendingItemsWidgetTests: {
-    act,
-    skippedTests: {
-      'TrendingItems widget common tests': true,
-    },
-  },
+  createTrendingItemsWidgetTests: { act },
 };
 
 /**

packages/react-instantsearch/src/widgets/TrendingItems.tsx

@@ -0,0 +1,79 @@
+import { createTrendingItemsComponent } from 'instantsearch-ui-components';
+import React, { createElement, Fragment } from 'react';
+import { useInstantSearch, useTrendingItems } from 'react-instantsearch-core';
+
+import type {
+  TrendingItemsProps as TrendingItemsUiComponentProps,
+  Pragma,
+  RecordWithObjectID,
+} from 'instantsearch-ui-components';
+import type { Hit } from 'instantsearch.js';
+import type { UseTrendingItemsProps } from 'react-instantsearch-core';
+
+type UiProps<TItem extends RecordWithObjectID> = Pick<
+  TrendingItemsUiComponentProps<TItem>,
+  | 'items'
+  | 'itemComponent'
+  | 'headerComponent'
+  | 'fallbackComponent'
+  | 'status'
+  | 'sendEvent'
+>;
+
+export type TrendingItemsProps<TItem extends RecordWithObjectID> = Omit<
+  TrendingItemsUiComponentProps<TItem>,
+  keyof UiProps<TItem>
+> &
+  UseTrendingItemsProps & {
+    itemComponent?: TrendingItemsUiComponentProps<TItem>['itemComponent'];
+    headerComponent?: TrendingItemsUiComponentProps<TItem>['headerComponent'];
+    fallbackComponent?: TrendingItemsUiComponentProps<TItem>['fallbackComponent'];
+  };
+
+const TrendingItemsUiComponent = createTrendingItemsComponent({
+  createElement: createElement as Pragma,
+  Fragment,
+});
+
+export function TrendingItems<
+  TItem extends RecordWithObjectID = RecordWithObjectID
+>({
+  facetName,
+  facetValue,
+  maxRecommendations,
+  threshold,
+  fallbackParameters,
+  queryParameters,
+  transformItems,
+  itemComponent,
+  headerComponent,
+  fallbackComponent,
+  ...props
+}: TrendingItemsProps<TItem>) {
+  const facetParameters =
+    facetName && facetValue ? { facetName, facetValue } : {};
+
+  const { status } = useInstantSearch();
+  const { recommendations } = useTrendingItems(
+    {
+      ...facetParameters,
+      maxRecommendations,
+      threshold,
+      fallbackParameters,
+      queryParameters,
+      transformItems,
+    },
+    { $$widgetType: 'ais.TrendingItems' }
+  );
+
+  const uiProps: UiProps<TItem> = {
+    items: recommendations as Array<Hit<TItem>>,
+    itemComponent,
+    headerComponent,
+    fallbackComponent,
+    status,
+    sendEvent: () => {},
+  };
+
+  return <TrendingItemsUiComponent {...props} {...uiProps} />;
+}

packages/react-instantsearch/src/widgets/__tests__/TrendingItems.test.tsx

@@ -0,0 +1,106 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import {
+  createMultiSearchResponse,
+  createSearchClient,
+  createSingleSearchResponse,
+} from '@instantsearch/mocks';
+import { InstantSearchTestWrapper } from '@instantsearch/testutils';
+import { render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { TrendingItems } from '../TrendingItems';
+
+import type { SearchClient } from 'instantsearch.js';
+
+describe('TrendingItems', () => {
+  test('renders with translations', async () => {
+    const client = createMockedSearchClient();
+    const { container } = render(
+      <InstantSearchTestWrapper searchClient={client}>
+        <TrendingItems translations={{ title: 'My trending items' }} />
+      </InstantSearchTestWrapper>
+    );
+
+    await waitFor(() => {
+      expect(client.search).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-TrendingItems'))
+        .toMatchInlineSnapshot(`
+        <section
+          class="ais-TrendingItems"
+        >
+          <h3
+            class="ais-TrendingItems-title"
+          >
+            My trending items
+          </h3>
+          <div
+            class="ais-TrendingItems-container"
+          >
+            <ol
+              class="ais-TrendingItems-list"
+            >
+              <li
+                class="ais-TrendingItems-item"
+              >
+                {
+          "objectID": "1"
+        }
+              </li>
+              <li
+                class="ais-TrendingItems-item"
+              >
+                {
+          "objectID": "2"
+        }
+              </li>
+            </ol>
+          </div>
+        </section>
+      `);
+    });
+  });
+
+  test('forwards custom class names and `div` props to the root element', () => {
+    const { container } = render(
+      <InstantSearchTestWrapper>
+        <TrendingItems
+          className="MyTrendingItems"
+          classNames={{ root: 'ROOT' }}
+          aria-hidden={true}
+        />
+      </InstantSearchTestWrapper>
+    );
+
+    const root = container.firstChild;
+    expect(root).toHaveClass('MyTrendingItems', 'ROOT');
+    expect(root).toHaveAttribute('aria-hidden', 'true');
+  });
+});
+
+function createMockedSearchClient() {
+  return createSearchClient({
+    getRecommendations: jest.fn((requests) =>
+      Promise.resolve(
+        createMultiSearchResponse(
+          // @ts-ignore
+          // `request` will be implicitly typed as `any` in type-check:v3
+          // since `getRecommendations` is not available there
+          ...requests.map((request) => {
+            return createSingleSearchResponse<any>({
+              hits:
+                request.maxRecommendations === 0
+                  ? []
+                  : [{ objectID: '1' }, { objectID: '2' }],
+            });
+          })
+        )
+      )
+    ) as SearchClient['getRecommendations'],
+  });
+}

packages/react-instantsearch/src/widgets/__tests__/all-widgets.test.tsx

@@ -145,6 +145,11 @@ describe('widgets', () => {
           "$$widgetType": "ais.toggleRefinement",
           "name": "ToggleRefinement",
         },
+        {
+          "$$type": "ais.trendingItems",
+          "$$widgetType": "ais.TrendingItems",
+          "name": "TrendingItems",
+        },
       ]
     `);
   });

packages/react-instantsearch/src/widgets/index.ts

@@ -18,3 +18,4 @@ export * from './Snippet';
 export * from './SortBy';
 export * from './Stats';
 export * from './ToggleRefinement';
+export * from './TrendingItems';