fix(js): do not render empty sections (#594)

algolia · May 25, 2021 · 527670e · 527670e
1 parent ca396ad
commit 527670e
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 127 deletions.
diff --git a/cypress/test-apps/js/categoriesPlugin.tsx b/cypress/test-apps/js/categoriesPlugin.tsx
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
             });
           },
           templates: {
-            header({ items }) {
-              if (items.length === 0) {
-                return null;
-              }
-
+            header() {
               return (
                 <Fragment>
                   <span className="aa-SourceHeaderTitle">Categories</span>

diff --git a/examples/instantsearch/src/autocomplete.tsx b/examples/instantsearch/src/autocomplete.tsx
@@ -151,11 +151,7 @@ const querySuggestionsPluginInCategory = createQuerySuggestionsPlugin({
       },
       templates: {
         ...source.templates,
-        header({ items }) {
-          if (items.length === 0) {
-            return null;
-          }
-
+        header() {
           return (
             <Fragment>
               <span className="aa-SourceHeaderTitle">In {currentCategory}</span>
@@ -232,8 +228,8 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       },
       templates: {
         ...source.templates,
-        header({ items }) {
-          if (!currentCategory || items.length === 0) {
+        header() {
+          if (!currentCategory) {
             return null;
           }
 

diff --git a/examples/multiple-datasets-with-headers/app.tsx b/examples/multiple-datasets-with-headers/app.tsx
@@ -20,11 +20,7 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
       ...source,
       templates: {
         ...source.templates,
-        header({ items }) {
-          if (items.length === 0) {
-            return null;
-          }
-
+        header() {
           return (
             <Fragment>
               <span className="aa-SourceHeaderTitle">Your searches</span>
@@ -49,11 +45,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       ...source,
       templates: {
         ...source.templates,
-        header({ items, state }) {
-          if (items.length === 0) {
-            return null;
-          }
-
+        header({ state }) {
           return (
             <Fragment>
               <span className="aa-SourceHeaderTitle">

diff --git a/examples/multiple-datasets-with-headers/categoriesPlugin.tsx b/examples/multiple-datasets-with-headers/categoriesPlugin.tsx
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
             });
           },
           templates: {
-            header({ items }) {
-              if (items.length === 0) {
-                return null;
-              }
-
+            header() {
               return (
                 <Fragment>
                   <span className="aa-SourceHeaderTitle">Categories</span>

diff --git a/examples/playground/categoriesPlugin.tsx b/examples/playground/categoriesPlugin.tsx
@@ -36,11 +36,7 @@ export function createCategoriesPlugin({
             });
           },
           templates: {
-            header({ items }) {
-              if (items.length === 0) {
-                return null;
-              }
-
+            header() {
               return (
                 <Fragment>
                   <span className="aa-SourceHeaderTitle">Categories</span>

diff --git a/examples/preview-panel-in-modal/app.tsx b/examples/preview-panel-in-modal/app.tsx
@@ -84,11 +84,7 @@ autocomplete({
           refresh();
         },
         templates: {
-          header({ items, Fragment }) {
-            if (items.length === 0) {
-              return null;
-            }
-
+          header({ Fragment }) {
             return (
               <Fragment>
                 <span className="aa-SourceHeaderTitle">

diff --git a/examples/query-suggestions-with-recent-searches/app.tsx b/examples/query-suggestions-with-recent-searches/app.tsx
@@ -19,8 +19,8 @@ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
       ...source,
       templates: {
         ...source.templates,
-        header({ items, state }) {
-          if (Boolean(state.query) || items.length === 0) {
+        header({ state }) {
+          if (state.query) {
             return null;
           }
 
@@ -48,8 +48,8 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
       ...source,
       templates: {
         ...source.templates,
-        header({ items, state }) {
-          if (Boolean(state.query) || items.length === 0) {
+        header({ state }) {
+          if (state.query) {
             return null;
           }
 

diff --git a/examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx b/examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx
@@ -71,11 +71,7 @@ export function createLocalStorageRecentlyViewedItems<
         },
         templates: {
           ...transformedSource.templates,
-          header({ items }) {
-            if (items.length === 0) {
-              return null;
-            }
-
+          header() {
             return (
               <Fragment>
                 <span className="aa-SourceHeaderTitle">Recently viewed</span>

diff --git a/packages/autocomplete-js/src/__tests__/render.test.ts b/packages/autocomplete-js/src/__tests__/render.test.ts
@@ -9,6 +9,9 @@ import {
 import { autocomplete } from '../autocomplete';
 
 describe('render', () => {
+  const sourceId1 = 'testSource1';
+  const sourceId2 = 'testSource2';
+
   beforeEach(() => {
     document.body.innerHTML = '';
   });
@@ -181,8 +184,6 @@ describe('render', () => {
   });
 
   test('provides the elements', async () => {
-    const sourceId1 = 'testSource1';
-    const sourceId2 = 'testSource2';
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
 
@@ -253,8 +254,6 @@ describe('render', () => {
   });
 
   test('provides the sections', async () => {
-    const sourceId1 = 'testSource1';
-    const sourceId2 = 'testSource2';
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');
 
@@ -536,4 +535,75 @@ describe('render', () => {
       },
     });
   });
+
+  test('does not render the sections without results and noResults template on multi sources', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+    autocomplete<{ label: string }>({
+      container,
+      panelContainer,
+      openOnFocus: true,
+      getSources() {
+        return [
+          {
+            sourceId: sourceId1,
+            getItems() {
+              return [];
+            },
+            templates: {
+              header() {
+                return sourceId1;
+              },
+              item({ item }) {
+                return item.label;
+              },
+              footer() {
+                return sourceId1;
+              },
+            },
+          },
+          {
+            sourceId: sourceId2,
+            getItems() {
+              return [{ label: '2' }];
+            },
+            templates: {
+              header() {
+                return sourceId2;
+              },
+              item({ item }) {
+                return item.label;
+              },
+              footer() {
+                return sourceId2;
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toBeInTheDocument();
+
+      expect(
+        panelContainer.querySelector(
+          `[data-autocomplete-source-id="${sourceId1}"]`
+        )
+      ).not.toBeInTheDocument();
+      expect(
+        panelContainer.querySelector(
+          `[data-autocomplete-source-id="${sourceId2}"]`
+        )
+      ).toBeInTheDocument();
+    });
+  });
 });