diff --git a/src/scripts/src/choices.js b/src/scripts/src/choices.js index b694536..9262f8b 100644 --- a/src/scripts/src/choices.js +++ b/src/scripts/src/choices.js @@ -218,7 +218,7 @@ class Choices { // Remove all event listeners this._removeEventListeners(); this.passedElement.reveal(); - this.containerOuter.revert(this.passedElement.element); + this.containerOuter.unwrap(this.passedElement.element); // Clear data store this.clearStore(); @@ -2183,9 +2183,9 @@ class Choices { this.passedElement.conceal(); // Wrap input in container preserving DOM ordering - wrap(this.passedElement.element, this.containerInner.element); + this.containerInner.wrap(this.passedElement.element); // Wrapper inner container with outer container - wrap(this.containerInner.element, this.containerOuter.element); + this.containerOuter.wrap(this.containerInner.element); if (this.isSelectOneElement) { this.input.setPlaceholder(this.config.searchPlaceholderValue || ''); diff --git a/src/scripts/src/choices.test.js b/src/scripts/src/choices.test.js index ccd1f5d..a8b0b95 100644 --- a/src/scripts/src/choices.test.js +++ b/src/scripts/src/choices.test.js @@ -131,13 +131,13 @@ describe('choices', () => { describe('when already initialised', () => { let removeEventListenersSpy; let passedElementRevealSpy; - let containerOuterRevertSpy; + let containerOuterUnwrapSpy; let clearStoreSpy; beforeEach(() => { removeEventListenersSpy = spy(instance, '_removeEventListeners'); passedElementRevealSpy = spy(instance.passedElement, 'reveal'); - containerOuterRevertSpy = spy(instance.containerOuter, 'revert'); + containerOuterUnwrapSpy = spy(instance.containerOuter, 'unwrap'); clearStoreSpy = spy(instance, 'clearStore'); instance.initialised = true; @@ -147,7 +147,7 @@ describe('choices', () => { afterEach(() => { removeEventListenersSpy.restore(); passedElementRevealSpy.restore(); - containerOuterRevertSpy.restore(); + containerOuterUnwrapSpy.restore(); clearStoreSpy.restore(); }); @@ -160,8 +160,8 @@ describe('choices', () => { }); it('reverts outer container', () => { - expect(containerOuterRevertSpy.called).to.equal(true); - expect(containerOuterRevertSpy.lastCall.args[0]).to.equal(instance.passedElement.element); + expect(containerOuterUnwrapSpy.called).to.equal(true); + expect(containerOuterUnwrapSpy.lastCall.args[0]).to.equal(instance.passedElement.element); }); it('clears store', () => { diff --git a/src/scripts/src/components/container.js b/src/scripts/src/components/container.js index 18f5bcb..e7e92ee 100644 --- a/src/scripts/src/components/container.js +++ b/src/scripts/src/components/container.js @@ -1,4 +1,4 @@ -import { getWindowHeight } from '../lib/utils'; +import { getWindowHeight, wrap } from '../lib/utils'; export default class Container { constructor(instance, element, classNames) { @@ -151,10 +151,15 @@ export default class Container { this.isDisabled = true; } - revert(originalElement) { + wrap(element) { + this.wrappedElement = element; + wrap(this.wrappedElement, this.element); + } + + unwrap() { // Move passed element back to original position this.element.parentNode.insertBefore( - originalElement, + this.wrappedElement, this.element, ); // Remove container diff --git a/src/scripts/src/components/container.test.js b/src/scripts/src/components/container.test.js index d0edd56..166e3ee 100644 --- a/src/scripts/src/components/container.test.js +++ b/src/scripts/src/components/container.test.js @@ -6,7 +6,7 @@ import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants'; describe('components/container', () => { let instance; let choicesInstance; - let choicesElement; + let element; beforeEach(() => { choicesInstance = { @@ -14,8 +14,9 @@ describe('components/container', () => { ...DEFAULT_CONFIG, }, }; - choicesElement = document.createElement('select'); - instance = new Container(choicesInstance, choicesElement, DEFAULT_CLASSNAMES); + element = document.createElement('div'); + element.id = 'container'; + instance = new Container(choicesInstance, element, DEFAULT_CLASSNAMES); }); describe('constructor', () => { @@ -24,7 +25,7 @@ describe('components/container', () => { }); it('assigns choices element to class', () => { - expect(instance.element).to.eql(choicesElement); + expect(instance.element).to.eql(element); }); it('assigns classnames to class', () => { @@ -34,7 +35,7 @@ describe('components/container', () => { describe('getElement', () => { it('returns DOM reference of element', () => { - expect(instance.getElement()).to.eql(choicesElement); + expect(instance.getElement()).to.eql(element); }); }); @@ -332,9 +333,59 @@ describe('components/container', () => { }); }); - // describe('revert', () => { + describe('wrap', () => { + let elementToWrap; - // }); + beforeEach(() => { + elementToWrap = document.createElement('div'); + elementToWrap.id = 'wrap-test'; + document.body.appendChild(elementToWrap); + }); + + afterEach(() => { + document.getElementById('wrap-test').remove(); + }); + + it('wraps passed element inside element', () => { + expect(instance.element.querySelector('div#wrap-test')).to.equal(null); + instance.wrap(document.querySelector('div#wrap-test')); + expect(instance.element.querySelector('div#wrap-test')).to.equal(elementToWrap); + }); + + it('assigns reference to element to instance', () => { + expect(instance.wrappedElement).to.equal(undefined); + instance.wrap(document.querySelector('div#wrap-test')); + expect(instance.wrappedElement).to.equal(elementToWrap); + }); + }); + + describe('unwrap', () => { + let elementToWrap; + + beforeEach(() => { + elementToWrap = document.createElement('div'); + elementToWrap.id = 'unwrap-test'; + document.body.appendChild(elementToWrap); + instance.wrap(document.getElementById('unwrap-test')); + }); + + afterEach(() => { + document.body.removeChild(document.getElementById('unwrap-test')); + }); + + it('moves wrapped element outside of element', () => { + expect(instance.element.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement); + instance.unwrap(elementToWrap); + expect(instance.element.querySelector('div#unwrap-test')).to.equal(null); + expect(document.querySelector('div#unwrap-test')).to.be.instanceof(HTMLElement); + }); + + // it('removes element from DOM', () => { + // expect(document.getElementById('container')).to.not.equal(null); + // instance.unwrap(elementToWrap); + // expect(document.getElementById('container')).to.equal(null); + // }); + }); describe('addLoadingState', () => { beforeEach(() => {