fix(dynamicWidgets): prevent "ais.dynamicWidgets" attribute showing up (

#542) FX-613
algolia · Dec 2, 2021 · 559f705 · 559f705
1 parent efd2799
commit 559f705
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 13 deletions.
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
@@ -3108,8 +3108,7 @@ exports[`Templates InstantSearch.js File content: index.html 1`] = `
   <div class=\\"container\\">
     <div class=\\"search-panel\\">
       <div class=\\"search-panel__filters\\">
-        <div id=\\"facet1-list\\"></div>
-        <div id=\\"facet2-list\\"></div>
+        <div id=\\"dynamic-widgets\\"></div>
       </div>
 
       <div class=\\"search-panel__results\\">
@@ -3254,13 +3253,30 @@ search.addWidgets([
 \`,
     },
   }),
-  instantsearch.widgets.refinementList({
-    container: '#facet1-list',
-    attribute: 'facet1',
+  instantsearch.widgets.configure({
+    facets: ['*'],
+    maxValuesPerFacet: 20,
   }),
-  instantsearch.widgets.refinementList({
-    container: '#facet2-list',
-    attribute: 'facet2',
+  instantsearch.widgets.dynamicWidgets({
+    container: '#dynamic-widgets',
+    fallbackWidget({ container, attribute }) {
+      return instantsearch.widgets.refinementList({
+        container,
+        attribute,
+      });
+    },
+    widgets: [
+      container =>
+        instantsearch.widgets.refinementList({
+          container,
+          attribute: 'facet1',
+        }),
+      container =>
+        instantsearch.widgets.refinementList({
+          container,
+          attribute: 'facet2',
+        }),
+    ],
   }),
   instantsearch.widgets.pagination({
     container: '#pagination',
@@ -5720,6 +5736,8 @@ import {
   InstantSearch,
   Hits,
   SearchBox,
+  Configure,
+  ExperimentalDynamicWidgets,
   RefinementList,
   Pagination,
   Highlight,
@@ -5748,8 +5766,11 @@ function App() {
         <InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
           <div className=\\"search-panel\\">
             <div className=\\"search-panel__filters\\">
-              <RefinementList attribute=\\"facet1\\" />
-              <RefinementList attribute=\\"facet2\\" />
+              <Configure facets={['*']} maxValuesPerFacet={20} />
+              <ExperimentalDynamicWidgets fallbackWidget={RefinementList}>
+                <RefinementList attribute=\\"facet1\\" />
+                <RefinementList attribute=\\"facet2\\" />
+              </ExperimentalDynamicWidgets>
             </div>
 
             <div className=\\"search-panel__results\\">
@@ -7434,8 +7455,11 @@ exports[`Templates Vue InstantSearch File content: src/App.vue 1`] = `
       <ais-instant-search :search-client=\\"searchClient\\" index-name=\\"indexName\\">
         <div class=\\"search-panel\\">
           <div class=\\"search-panel__filters\\">
-            <ais-refinement-list attribute=\\"facet1\\" />
-            <ais-refinement-list attribute=\\"facet2\\" />
+            <ais-configure :facets=\\"['*']\\" :max-values-per-facet.camel=\\"20\\" />
+            <ais-experimental-dynamic-widgets>
+              <ais-refinement-list attribute=\\"facet1\\" />
+              <ais-refinement-list attribute=\\"facet2\\" />
+            </ais-experimental-dynamic-widgets>
           </div>
 
           <div class=\\"search-panel__results\\">

diff --git a/e2e/templates.test.js b/e2e/templates.test.js
@@ -50,7 +50,7 @@ describe('Templates', () => {
           indexName: 'indexName',
           searchPlaceholder: 'Search placeholder',
           attributesToDisplay: ['attribute1', 'attribute2'],
-          attributesForFaceting: ['facet1', 'facet2'],
+          attributesForFaceting: ['ais.dynamicWidgets', 'facet1', 'facet2'],
           organization: 'algolia',
         };
 

diff --git a/src/cli/__tests__/postProcessAnswers.js b/src/cli/__tests__/postProcessAnswers.js
@@ -79,3 +79,33 @@ test('creates alternative names', async () => {
     })
   );
 });
+
+test('detects dynamic widgets', async () => {
+  expect(
+    await postProcessAnswers({
+      configuration: {},
+      templateConfig: {},
+      optionsFromArguments: {},
+      answers: { attributesForFaceting: ['ais.dynamicWidgets', 'test'] },
+    })
+  ).toEqual(
+    expect.objectContaining({
+      attributesForFaceting: ['test'],
+      flags: { dynamicWidgets: true },
+    })
+  );
+
+  expect(
+    await postProcessAnswers({
+      configuration: {},
+      templateConfig: {},
+      optionsFromArguments: {},
+      answers: { attributesForFaceting: ['test'] },
+    })
+  ).toEqual(
+    expect.objectContaining({
+      attributesForFaceting: ['test'],
+      flags: { dynamicWidgets: false },
+    })
+  );
+});
diff --git a/src/cli/postProcessAnswers.js b/src/cli/postProcessAnswers.js
@@ -61,6 +61,11 @@ async function postProcessAnswers({
     template: templatePath,
     installation: optionsFromArguments.installation,
     currentYear: new Date().getFullYear(),
+    attributesForFaceting:
+      Array.isArray(combinedAnswers.attributesForFaceting) &&
+      combinedAnswers.attributesForFaceting.filter(
+        attribute => attribute !== 'ais.dynamicWidgets'
+      ),
     flags: {
       dynamicWidgets:
         Array.isArray(combinedAnswers.attributesForFaceting) &&

diff --git a/src/templates/InstantSearch.js/index.html.hbs b/src/templates/InstantSearch.js/index.html.hbs
@@ -33,9 +33,13 @@
     <div class="search-panel">
       {{#if attributesForFaceting}}
       <div class="search-panel__filters">
+        {{#if flags.dynamicWidgets}}
+        <div id="dynamic-widgets"></div>
+        {{else}}
         {{#each attributesForFaceting}}
         <div id="{{this}}-list"></div>
         {{/each}}
+        {{/if}}
       </div>
 
       {{/if}}