diff --git a/src/widgets/search-box/__tests__/search-box-test.js b/src/widgets/search-box/__tests__/search-box-test.js index 1fab4988e9..40211ca55b 100644 --- a/src/widgets/search-box/__tests__/search-box-test.js +++ b/src/widgets/search-box/__tests__/search-box-test.js @@ -49,22 +49,22 @@ describe('search-box()', () => { }); context('targeting a div', () => { + let opts; + beforeEach(() => { container = document.createElement('div'); - widget = searchBox({container}); - }); - - it('configures nothing', () => { - expect(widget.getConfiguration).toEqual(undefined); + opts = {container}; }); it('adds an input inside the div', () => { + widget = searchBox(opts); widget.init({state, helper}); let inputs = container.getElementsByTagName('input'); expect(inputs.length).toEqual(1); }); it('sets default HTML attribute to the input', () => { + widget = searchBox(opts); widget.init({state, helper}); let input = container.getElementsByTagName('input')[0]; expect(input.getAttribute('autocapitalize')).toEqual('off'); @@ -76,6 +76,23 @@ describe('search-box()', () => { expect(input.getAttribute('spellcheck')).toEqual('false'); expect(input.getAttribute('type')).toEqual('text'); }); + + it('supports cssClasses option', () => { + opts.cssClasses = { + root: 'root-class', + input: 'input-class' + }; + + widget = searchBox(opts); + widget.init({state, helper}); + let actualRootClasses = container.querySelector('input').parentNode.getAttribute('class'); + let actualInputClasses = container.querySelector('input').getAttribute('class'); + let expectedRootClasses = 'ais-search-box root-class'; + let expectedInputClasses = 'ais-search-box--input input-class'; + + expect(actualRootClasses).toEqual(expectedRootClasses); + expect(actualInputClasses).toEqual(expectedInputClasses); + }); }); context('targeting an input', () => { @@ -102,6 +119,20 @@ describe('search-box()', () => { expect(container.getAttribute('class')).toEqual('my-class ais-search-box--input'); expect(container.getAttribute('placeholder')).toEqual('Search'); }); + + it('supports cssClasses', () => { + container = createHTMLNodeFromString(''); + widget = searchBox({container, cssClasses: {root: 'root-class', input: 'input-class'}}); + widget.init({state, helper}); + + let actualRootClasses = container.parentNode.getAttribute('class'); + let actualInputClasses = container.getAttribute('class'); + let expectedRootClasses = 'ais-search-box root-class'; + let expectedInputClasses = 'my-class ais-search-box--input input-class'; + + expect(actualRootClasses).toEqual(expectedRootClasses); + expect(actualInputClasses).toEqual(expectedInputClasses); + }); }); context('wraps the input in a div', () => { diff --git a/src/widgets/search-box/search-box.js b/src/widgets/search-box/search-box.js index add39a9c8c..688b3a47ec 100644 --- a/src/widgets/search-box/search-box.js +++ b/src/widgets/search-box/search-box.js @@ -19,10 +19,10 @@ const KEY_SUPPRESS = 8; * @param {boolean} [options.searchOnEnterKeyPressOnly=false] If set, trigger the search * once `` is pressed only * @param {Object} [options.cssClasses] CSS classes to add - * @param {string} [options.cssClasses.root] CSS class to add to the + * @param {string|string[]} [options.cssClasses.root] CSS class to add to the * wrapping div (if `wrapInput` set to `true`) - * @param {string} [options.cssClasses.input] CSS class to add to the input - * @param {string} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element + * @param {string|string[]} [options.cssClasses.input] CSS class to add to the input + * @param {string|string[]} [options.cssClasses.poweredBy] CSS class to add to the poweredBy element * @return {Object} */ const usage = `Usage: @@ -66,7 +66,8 @@ function searchBox({ wrapInput: function(input) { // Wrap input in a .ais-search-box div let wrapper = document.createElement('div'); - wrapper.classList.add(cx(bem(null), cssClasses.root)); + let CSSClassesToAdd = cx(bem(null), cssClasses.root).split(' '); + wrapper.classList.add.apply(wrapper.classList, CSSClassesToAdd); wrapper.appendChild(input); return wrapper; }, @@ -91,7 +92,8 @@ function searchBox({ }); // Add classes - input.classList.add(cx(bem('input'), cssClasses.input)); + let CSSClassesToAdd = cx(bem('input'), cssClasses.input).split(' '); + input.classList.add.apply(input.classList, CSSClassesToAdd); }, addPoweredBy: function(input) { let PoweredBy = require('../../components/PoweredBy/PoweredBy.js');