feat(stats): add common test suite

bundlesize.config.json

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

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

@@ -22,6 +22,7 @@ import {
   currentRefinements,
   toggleRefinement,
   sortBy,
+  stats,
 } from '../widgets';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
@@ -422,6 +423,22 @@ const testSetups: TestSetupsMap<TestSuites> = {
       })
       .start();
   },
+  createStatsWidgetTests({ instantSearchOptions, widgetParams }) {
+    instantsearch(instantSearchOptions)
+      .addWidgets([
+        stats({
+          container: document.body.appendChild(document.createElement('div')),
+          ...widgetParams,
+        }),
+      ])
+      .on('error', () => {
+        /*
+         * prevent rethrowing InstantSearch errors, so tests can be asserted.
+         * IRL this isn't needed, as the error doesn't stop execution.
+         */
+      })
+      .start();
+  },
 };
 
 const testOptions: TestOptionsMap<TestSuites> = {
@@ -440,6 +457,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createToggleRefinementWidgetTests: undefined,
   createSearchBoxWidgetTests: undefined,
   createSortByWidgetTests: undefined,
+  createStatsWidgetTests: undefined,
 };
 
 describe('Common widget tests (InstantSearch.js)', () => {

packages/instantsearch.js/src/widgets/stats/__tests__/stats.test.tsx

@@ -22,6 +22,45 @@ beforeEach(() => {
 });
 
 describe('stats', () => {
+  describe('options', () => {
+    test('throws without a `container`', () => {
+      expect(() => {
+        // @ts-expect-error
+        stats({ container: undefined });
+      }).toThrowErrorMatchingInlineSnapshot(`
+        "The \`container\` option is required.
+
+        See documentation: https://www.algolia.com/doc/api-reference/widgets/stats/js/"
+      `);
+    });
+
+    test('add custom CSS classes', async () => {
+      const container = document.createElement('div');
+      const searchClient = createSearchClient();
+
+      const search = instantsearch({
+        indexName: 'indexName',
+        searchClient,
+      });
+
+      search.addWidgets([
+        stats({
+          container,
+          cssClasses: {
+            root: 'ROOT',
+            text: 'TEXT',
+          },
+        }),
+      ]);
+
+      search.start();
+      await wait(0);
+
+      expect(container.querySelector('.ais-Stats')).toHaveClass('ROOT');
+      expect(container.querySelector('.ais-Stats-text')).toHaveClass('TEXT');
+    });
+  });
+
   describe('templates', () => {
     test('renders default templates', async () => {
       const container = document.createElement('div');

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

@@ -24,6 +24,7 @@ import {
   CurrentRefinements,
   ToggleRefinement,
   SortBy,
+  Stats,
 } from '..';
 
 import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
@@ -295,6 +296,14 @@ const testSetups: TestSetupsMap<TestSuites> = {
       </InstantSearch>
     );
   },
+  createStatsWidgetTests({ instantSearchOptions, widgetParams }) {
+    render(
+      <InstantSearch {...instantSearchOptions}>
+        <Stats {...widgetParams} />
+        <GlobalErrorSwallower />
+      </InstantSearch>
+    );
+  },
 };
 
 const testOptions: TestOptionsMap<TestSuites> = {
@@ -313,6 +322,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
   createToggleRefinementWidgetTests: { act },
   createSearchBoxWidgetTests: { act },
   createSortByWidgetTests: { act },
+  createStatsWidgetTests: { act },
 };
 
 /**

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

@@ -34,13 +34,52 @@ export function Stats({ translations, ...props }: StatsProps) {
     areHitsSorted,
     translations: {
       rootElementText(options: StatsTranslationOptions) {
-        return options.areHitsSorted
-          ? `${options.nbSortedHits!.toLocaleString()} relevant results sorted out of ${options.nbHits.toLocaleString()} found in ${options.processingTimeMS.toLocaleString()}ms`
-          : `${options.nbHits.toLocaleString()} results found in ${options.processingTimeMS.toLocaleString()}ms`;
+        return `${
+          options.areHitsSorted
+            ? getSortedResultsSentence(options)
+            : getResultsSentence(options)
+        } found in ${options.processingTimeMS.toLocaleString()}ms`;
       },
       ...translations,
     },
   };
 
   return <StatsUiComponent {...props} {...uiProps} />;
 }
+
+function getSortedResultsSentence({
+  nbHits,
+  nbSortedHits,
+}: StatsTranslationOptions) {
+  const suffix = `sorted out of ${nbHits.toLocaleString()}`;
+
+  if (nbSortedHits === 0) {
+    return `No relevant results ${suffix}`;
+  }
+
+  if (nbSortedHits === 1) {
+    return `1 relevant result ${suffix}`;
+  }
+
+  if (nbSortedHits! > 1) {
+    return `${(nbSortedHits || 0).toLocaleString()} relevant results ${suffix}`;
+  }
+
+  return '';
+}
+
+function getResultsSentence({ nbHits }: StatsTranslationOptions) {
+  if (nbHits === 0) {
+    return 'No results';
+  }
+
+  if (nbHits === 1) {
+    return '1 result';
+  }
+
+  if (nbHits > 1) {
+    return `${nbHits.toLocaleString()} results`;
+  }
+
+  return '';
+}