feat(react-instantsearch-hooks web): rename <Stats> translation (#5756

)
algolia · Jul 18, 2023 · 6c70035 · 6c70035
1 parent 77b0db8
commit 6c70035
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 9 deletions.
diff --git a/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx b/packages/react-instantsearch-hooks-web/src/ui/Stats.tsx
@@ -9,7 +9,7 @@ export type StatsProps = React.ComponentProps<'div'> & {
   areHitsSorted?: boolean;
   classNames?: Partial<StatsClassNames>;
   translations: {
-    stats: StatsTranslations;
+    rootElementText: StatsTranslations;
   };
 };
 
@@ -49,7 +49,7 @@ export function Stats({
       className={cx('ais-Stats', classNames.root, props.className)}
     >
       <span className="ais-Stats-text">
-        {translations.stats(translationOptions)}
+        {translations.rootElementText(translationOptions)}
       </span>
     </div>
   );

diff --git a/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx b/packages/react-instantsearch-hooks-web/src/ui/__tests__/Stats.test.tsx
@@ -17,7 +17,7 @@ describe('Stats', () => {
       areHitsSorted: false,
       nbSortedHits: 100,
       translations: {
-        stats: ({
+        rootElementText: ({
           nbHits,
           processingTimeMS,
           nbSortedHits,
@@ -153,7 +153,9 @@ describe('Stats', () => {
   test('renders with translations', () => {
     const translationFn = ({ areHitsSorted }: StatsTranslationOptions) =>
       areHitsSorted ? 'Sorted' : 'Unsorted';
-    let props = createProps({ translations: { stats: translationFn } });
+    let props = createProps({
+      translations: { rootElementText: translationFn },
+    });
 
     const { getByText, rerender } = render(<Stats {...props} />);
 
@@ -163,7 +165,7 @@ describe('Stats', () => {
       areHitsSorted: true,
       nbSortedHits: 1,
       nbHits: 2,
-      translations: { stats: translationFn },
+      translations: { rootElementText: translationFn },
     });
 
     rerender(<Stats {...props} />);

diff --git a/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx b/packages/react-instantsearch-hooks-web/src/widgets/Stats.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useStats } from 'react-instantsearch-hooks';
+import { useStats, warn } from 'react-instantsearch-hooks';
 
 import { Stats as StatsUiComponent } from '../ui/Stats';
 
@@ -19,14 +19,26 @@ type UiProps = Pick<
 >;
 
 export type StatsProps = Omit<StatsUiComponentProps, keyof UiProps> &
-  UseStatsProps & { translations?: Partial<UiProps['translations']> };
+  UseStatsProps & {
+    translations?: Partial<UiProps['translations']> & {
+      /**
+       * @deprecated Use `rootElementText` instead.
+       */
+      stats?: Partial<UiProps['translations']>['rootElementText'];
+    };
+  };
 
 export function Stats({ translations, ...props }: StatsProps) {
   const { nbHits, nbSortedHits, processingTimeMS, areHitsSorted } = useStats(
     undefined,
     { $$widgetType: 'ais.stats' }
   );
 
+  warn(
+    !translations?.stats,
+    'The `stats` translation is deprecated. Please use `rootElementText` instead.'
+  );
+
   const statsTranslation = (options: StatsTranslationOptions): string =>
     options.areHitsSorted
       ? `${options.nbSortedHits!.toLocaleString()} relevant results sorted out of ${options.nbHits.toLocaleString()} found in ${options.processingTimeMS.toLocaleString()}ms`
@@ -38,7 +50,7 @@ export function Stats({ translations, ...props }: StatsProps) {
     processingTimeMS,
     areHitsSorted,
     translations: {
-      stats: statsTranslation,
+      rootElementText: translations?.stats || statsTranslation,
       ...translations,
     },
   };

diff --git a/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx b/packages/react-instantsearch-hooks-web/src/widgets/__tests__/Stats.test.tsx
@@ -143,7 +143,7 @@ describe('Stats', () => {
       <InstantSearchHooksTestWrapper searchClient={client}>
         <Stats
           translations={{
-            stats: () => 'Nice stats',
+            rootElementText: () => 'Nice stats',
           }}
         />
       </InstantSearchHooksTestWrapper>
@@ -168,6 +168,45 @@ describe('Stats', () => {
     });
   });
 
+  test('renders with deprecated translations (with a deprecation warning)', async () => {
+    const client = createMockedSearchClient();
+    let result: ReturnType<typeof render> | undefined = undefined;
+
+    expect(() => {
+      result = render(
+        <InstantSearchHooksTestWrapper searchClient={client}>
+          <Stats
+            translations={{
+              stats: () => 'Nice stats',
+            }}
+          />
+        </InstantSearchHooksTestWrapper>
+      );
+    }).toWarnDev(
+      '[InstantSearch] The `stats` translation is deprecated. Please use `rootElementText` instead.'
+    );
+
+    await waitFor(() => {
+      expect(client.search).toHaveBeenCalledTimes(1);
+    });
+
+    const { container } = result!;
+
+    await waitFor(() => {
+      expect(container.querySelector('.ais-Stats')).toMatchInlineSnapshot(`
+      <div
+        class="ais-Stats"
+      >
+        <span
+          class="ais-Stats-text"
+        >
+          Nice stats
+        </span>
+      </div>
+      `);
+    });
+  });
+
   test('forwards custom class names and `div` props to the root element', () => {
     const { container } = render(
       <InstantSearchHooksTestWrapper>

diff --git a/packages/react-instantsearch-hooks/src/index.ts b/packages/react-instantsearch-hooks/src/index.ts
@@ -28,3 +28,4 @@ export * from './connectors/useStats';
 export * from './connectors/useToggleRefinement';
 export * from './hooks/useConnector';
 export * from './hooks/useInstantSearch';
+export * from './lib/warn';