diff --git a/src/scripts/choices.js b/src/scripts/choices.js index a5ad90a..fec3fff 100644 --- a/src/scripts/choices.js +++ b/src/scripts/choices.js @@ -101,6 +101,7 @@ class Choices { this.passedElement = new WrappedSelect({ element: passedElement, classNames: this.config.classNames, + template: data => this.config.templates.option(data), }); } diff --git a/src/scripts/components/wrapped-select.js b/src/scripts/components/wrapped-select.js index f158681..b0a5069 100644 --- a/src/scripts/components/wrapped-select.js +++ b/src/scripts/components/wrapped-select.js @@ -1,9 +1,9 @@ import WrappedElement from './wrapped-element'; -import templates from './../templates'; export default class WrappedSelect extends WrappedElement { - constructor({ element, classNames }) { + constructor({ element, classNames, template }) { super({ element, classNames }); + this.template = template; } get placeholderOption() { @@ -22,9 +22,9 @@ export default class WrappedSelect extends WrappedElement { const fragment = document.createDocumentFragment(); const addOptionToFragment = data => { // Create a standard select option - const template = templates.option(data); + const option = this.template(data); // Append it to fragment - fragment.appendChild(template); + fragment.appendChild(option); }; // Add each list item to list diff --git a/src/scripts/components/wrapped-select.test.js b/src/scripts/components/wrapped-select.test.js index 18fdc06..dde554b 100644 --- a/src/scripts/components/wrapped-select.test.js +++ b/src/scripts/components/wrapped-select.test.js @@ -1,8 +1,9 @@ import { expect } from 'chai'; -import { stub } from 'sinon'; +import { stub, spy } from 'sinon'; import WrappedElement from './wrapped-element'; import WrappedSelect from './wrapped-select'; import { DEFAULT_CLASSNAMES } from '../constants'; +import Templates from '../templates'; describe('components/wrappedSelect', () => { let instance; @@ -28,6 +29,7 @@ describe('components/wrappedSelect', () => { instance = new WrappedSelect({ element: document.getElementById('target'), classNames: DEFAULT_CLASSNAMES, + template: spy(Templates.option), }); }); @@ -133,6 +135,7 @@ describe('components/wrappedSelect', () => { selectElement.appendChild(fragment); expect(fragment).to.be.instanceOf(DocumentFragment); + expect(instance.template.callCount).to.equal(2); expect(selectElement.options.length).to.equal(2); expect(selectElement.options[0].value).to.equal(options[0].value); expect(selectElement.options[1].value).to.equal(options[1].value);