fix(queryRuleCustomData): add default template (#3650)

algolia · Apr 5, 2019 · 83e9eaa · 83e9eaa
1 parent e16ad57
commit 83e9eaa
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/widgets/query-rule-custom-data/__tests__/query-rule-custom-data-test.ts b/src/widgets/query-rule-custom-data/__tests__/query-rule-custom-data-test.ts
@@ -99,8 +99,22 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/query-rule-
         const { templates } = render.mock.calls[0][0].props;
 
         expect(templates).toEqual({
-          default: '',
+          default: expect.any(Function),
         });
+        expect(
+          templates.default({
+            items: [{ banner: '1.jpg' }, { banner: '2.jpg' }],
+          })
+        ).toMatchInlineSnapshot(`
+"[
+  {
+    \\"banner\\": \\"1.jpg\\"
+  },
+  {
+    \\"banner\\": \\"2.jpg\\"
+  }
+]"
+`);
       });
 
       test('applies custom template', () => {

diff --git a/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx b/src/widgets/query-rule-custom-data/query-rule-custom-data.tsx
@@ -16,7 +16,7 @@ export type QueryRuleCustomDataCSSClasses = {
 };
 
 export type QueryRuleCustomDataTemplates = {
-  default: string | ((items: object[]) => string);
+  default: string | (({ items }: { items: object[] }) => string);
 };
 
 type QueryRuleCustomDataWidgetParams = {
@@ -69,7 +69,9 @@ const queryRuleCustomData: QueryRuleCustomData = (
     root: cx(suit(), userCssClasses.root),
   };
 
-  const defaultTemplates = { default: '' };
+  const defaultTemplates = {
+    default: ({ items }) => JSON.stringify(items, null, 2),
+  };
   const templates: QueryRuleCustomDataTemplates = {
     ...defaultTemplates,
     ...userTemplates,

diff --git a/stories/query-rule-custom-data.stories.ts b/stories/query-rule-custom-data.stories.ts
@@ -134,4 +134,21 @@ storiesOf('QueryRuleCustomData', module)
         })
       );
     }, searchOptions)
+  )
+  .add(
+    'without template',
+    withHits(({ search, container, instantsearch }) => {
+      const widgetContainer = document.createElement('div');
+      const description = document.createElement('p');
+      description.innerHTML = 'Type <q>music</q> and a banner will appear.';
+
+      container.appendChild(description);
+      container.appendChild(widgetContainer);
+
+      search.addWidget(
+        instantsearch.widgets.queryRuleCustomData({
+          container: widgetContainer,
+        })
+      );
+    }, searchOptions)
   );