Move wrapping into container class

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 || '');

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(containerOuterUnwrapSpy.called).to.equal(true);
-          expect(containerOuterRevertSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
+          expect(containerOuterUnwrapSpy.lastCall.args[0]).to.equal(instance.passedElement.element);
         });
 
         it('clears store', () => {

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

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');
+    element = document.createElement('div');
-    instance = new Container(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+    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(() => {