diff --git a/src/widgets/search-box/__tests__/search-box-test.js b/src/widgets/search-box/__tests__/search-box-test.js
index 932083096b..1e0fb8c9f6 100644
--- a/src/widgets/search-box/__tests__/search-box-test.js
+++ b/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: '',
+ },
+ });
+
+ // 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: '
Foobar',
+ },
+ });
+
+ // When
+ widget.init(defaultInitOptions);
+
+ // Then
+ expect(container.innerHTML).toContain('Foobar');
+ });
});
describe('poweredBy', () => {
diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js
index 33be268e5a..8504aa7e93 100644
--- a/src/widgets/search-box/search-box.js
+++ b/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);