fix(search-box): fix magnifier and reset customization

Author: bgelineau

src/widgets/search-box/__tests__/search-box-test.js

@@ -236,6 +236,63 @@ describe('searchBox()', () => {
       expect(helper.setQuery.called).toBe(true);
       expect(helper.search.called).toBe(true);
     });
+
+    it('should let the user define its own string template', () => {
+      // Given
+      widget = searchBox({
+        ...defaultWidgetOptions,
+        reset: {
+          template: '<button type="reset">Foobar</button>',
+        },
+      });
+
+      // When
+      widget.init(defaultInitOptions);
+
+      // Then
+      expect(container.innerHTML).toContain('Foobar');
+    });
+
+    it('should not exist when it is disabled', () => {
+      // Given
+      widget = searchBox({
+        ...defaultWidgetOptions,
+        reset: false,
+      });
+
+      // When
+      widget.init(defaultInitOptions);
+
+      // Then
+      expect($('button[type="reset"]').length).toEqual(0);
+    });
+  });
+
+  describe('magnifier', () => {
+    let defaultInitOptions;
+    let defaultWidgetOptions;
+
+    beforeEach(() => {
+      container = document.createElement('div');
+      defaultWidgetOptions = {container};
+      defaultInitOptions = {state, helper, onHistoryChange};
+    });
+
+    it('should let the user define its own string template', () => {
+      // Given
+      widget = searchBox({
+        ...defaultWidgetOptions,
+        magnifier: {
+          template: '<div>Foobar</button>',
+        },
+      });
+
+      // When
+      widget.init(defaultInitOptions);
+
+      // Then
+      expect(container.innerHTML).toContain('Foobar');
+    });
   });
 
   describe('poweredBy', () => {

src/widgets/search-box/search-box.js

@@ -105,13 +105,15 @@ const renderer = ({
     }
   }
 
-  const resetButtonContainer = containerNode.tagName === 'INPUT'
-    ? containerNode.parentNode
-    : containerNode;
-
-  // hide reset button when there is no query
-  const resetButton = resetButtonContainer.querySelector('button[type="reset"]');
-  resetButton.style.display = query && query.trim() ? 'block' : 'none';
+  if (reset) {
+    const resetButtonContainer = containerNode.tagName === 'INPUT'
+      ? containerNode.parentNode
+      : containerNode;
+
+    // hide reset button when there is no query
+    const resetButton = resetButtonContainer.querySelector('button[type="reset"]');
+    resetButton.style.display = query && query.trim() ? 'block' : 'none';
+  }
 };
 
 const usage = `Usage:
@@ -328,7 +330,7 @@ function addReset(input, reset, {reset: resetTemplate}, clearFunction) {
   };
 
   const resetCSSClasses = {root: cx(bem('reset'), reset.cssClasses.root)};
-  const stringNode = processTemplate(resetTemplate, {cssClasses: resetCSSClasses});
+  const stringNode = processTemplate(reset.template, {cssClasses: resetCSSClasses});
 
   const htmlNode = createNodeFromString(stringNode);
   input.parentNode.appendChild(htmlNode);
@@ -347,7 +349,7 @@ function addMagnifier(input, magnifier, {magnifier: magnifierTemplate}) {
   };
 
   const magnifierCSSClasses = {root: cx(bem('magnifier'), magnifier.cssClasses.root)};
-  const stringNode = processTemplate(magnifierTemplate, {cssClasses: magnifierCSSClasses});
+  const stringNode = processTemplate(magnifier.template, {cssClasses: magnifierCSSClasses});
 
   const htmlNode = createNodeFromString(stringNode);
   input.parentNode.appendChild(htmlNode);