Wrapped select tests + minor refactors

config/test.js

@@ -45,7 +45,9 @@ global.document = window.document;
 global.navigator = {
   userAgent: 'node.js',
 };
+global.CustomEvent = window.CustomEvent;
 global.HTMLElement = window.HTMLElement;
+global.HTMLOptionElement = window.HTMLOptionElement;
 
 copyProps(window, global);
 mockRAF(global);

src/scripts/src/components/wrapped-input.test.js

@@ -7,7 +7,7 @@ import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
 describe('components/wrappedInput', () => {
   let instance;
   let choicesInstance;
-  let choicesElement;
+  let inputElement;
 
   beforeEach(() => {
     choicesInstance = {
@@ -15,8 +15,8 @@ describe('components/wrappedInput', () => {
         ...DEFAULT_CONFIG,
       },
     };
-    choicesElement = document.createElement('input');
-    instance = new WrappedInput(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+    inputElement = document.createElement('input');
+    instance = new WrappedInput(choicesInstance, inputElement, DEFAULT_CLASSNAMES);
   });
 
   afterEach(() => {
@@ -36,6 +36,7 @@ describe('components/wrappedInput', () => {
         });
 
         it(`calls super.${method}`, () => {
+          expect(WrappedElement.prototype[method].called).to.equal(false);
           instance[method]();
           expect(WrappedElement.prototype[method].called).to.equal(true);
         });

src/scripts/src/components/wrapped-select.test.js

@@ -7,7 +7,7 @@ import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
 describe('components/wrappedSelect', () => {
   let instance;
   let choicesInstance;
-  let choicesElement;
+  let selectElement;
 
   beforeEach(() => {
     choicesInstance = {
@@ -15,8 +15,24 @@ describe('components/wrappedSelect', () => {
         ...DEFAULT_CONFIG,
       },
     };
-    choicesElement = document.createElement('select');
-    instance = new WrappedSelect(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
+
+    selectElement = document.createElement('select');
+    selectElement.id = 'target';
+    for (let i = 1; i <= 4; i++) {
+      const option = document.createElement('option');
+
+      option.value = `Value ${i}`;
+      option.innerHTML = `Label ${i}`;
+
+      if (i === 1) {
+        option.setAttribute('placeholder', '');
+      }
+
+      selectElement.appendChild(option);
+    }
+    document.body.appendChild(selectElement);
+
+    instance = new WrappedSelect(choicesInstance, document.getElementById('target'), DEFAULT_CLASSNAMES);
   });
 
   afterEach(() => {
@@ -26,9 +42,17 @@ describe('components/wrappedSelect', () => {
 
   describe('inherited methods', () => {
     ['getElement', 'conceal', 'reveal', 'enable', 'disable'].forEach((method) => {
+      beforeEach(() => {
+        stub(WrappedElement.prototype, method);
+      });
+
+      afterEach(() => {
+        WrappedElement.prototype[method].restore();
+      });
+
       describe(method, () => {
         it(`calls super.${method}`, () => {
-          stub(WrappedElement.prototype, method);
+          expect(WrappedElement.prototype[method].called).to.equal(false);
           instance[method]();
           expect(WrappedElement.prototype[method].called).to.equal(true);
         });
@@ -36,23 +60,48 @@ describe('components/wrappedSelect', () => {
     });
   });
 
-  // describe('getPlaceholderOption', () => {
+  describe('getPlaceholderOption', () => {
+    it('returns option element with placeholder attribute', () => {
+      const output = instance.getPlaceholderOption();
+      expect(output).to.be.instanceOf(HTMLOptionElement);
+    });
+  });
 
-  // });
-
-  // describe('getOptions', () => {
-
-  // });
+  describe('getOptions', () => {
+    it('returns all option elements', () => {
+      const output = instance.getOptions();
+      expect(output).to.be.an('array');
+      output.forEach((option) => {
+        expect(option).to.be.instanceOf(HTMLOptionElement);
+      });
+    });
+  });
 
   // describe('getOptionGroups', () => {
+  //   it('returns all option groups', () => {
 
+  //   });
   // });
 
   // describe('setOptions', () => {
 
   // });
 
-  // describe('appendDocFragment', () => {
+  describe('appendDocFragment', () => {
+    it('empties contents of element', () => {
+      expect(instance.element.getElementsByTagName('option').length).to.equal(4);
+      instance.appendDocFragment(document.createDocumentFragment());
+      expect(instance.element.getElementsByTagName('option').length).to.equal(0);
+    });
 
-  // });
+    it('appends passed fragment to element', () => {
+      const fragment = document.createDocumentFragment();
+      const elementToAppend = document.createElement('div');
+      elementToAppend.id = 'fragment-target';
+      fragment.appendChild(elementToAppend);
+      expect(instance.element.querySelector('#fragment-target')).to.equal(null);
+      instance.appendDocFragment(fragment);
+      expect(instance.element.querySelector('#fragment-target')).to.eql(elementToAppend);
+    });
+  });
 });

src/scripts/src/lib/utils.js

@@ -559,7 +559,7 @@ export const sortByScore = (a, b) => a.score - b.score;
  * @return {Object}              Triggered event
  */
 export const dispatchEvent = (element, type, customArgs = null) => {
-  const event = new window.CustomEvent(type, {
+  const event = new CustomEvent(type, {
     detail: customArgs,
     bubbles: true,
     cancelable: true,