Add dropdown unit tests

src/scripts/src/components/dropdown.js

@@ -1,6 +1,6 @@
 export default class Dropdown {
   constructor(instance, element, classNames) {
-    this.instance = instance;
+    this.parentInstance = instance;
     this.element = element;
     this.classNames = classNames;
     this.dimensions = null;
@@ -36,7 +36,7 @@ export default class Dropdown {
     this.element.classList.add(this.classNames.activeState);
     this.element.setAttribute('aria-expanded', 'true');
     this.isActive = true;
-    return this.instance;
+    return this.parentInstance;
   }
 
   /**
@@ -48,6 +48,6 @@ export default class Dropdown {
     this.element.classList.remove(this.classNames.activeState);
     this.element.setAttribute('aria-expanded', 'false');
     this.isActive = false;
-    return this.instance;
+    return this.parentInstance;
   }
 }

src/scripts/src/components/dropdown.test.js

@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import sinon from 'sinon';
 import Dropdown from './dropdown';
 import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants';
 
@@ -7,26 +8,146 @@ describe('Dropdown', () => {
   let choicesInstance;
   let choicesElement;
 
-
   beforeEach(() => {
     choicesInstance = {
       config: {
         ...DEFAULT_CONFIG,
       },
     };
-    choicesElement = document.createElement('select');
+
+    choicesElement = document.createElement('div');
+    document.body.appendChild(choicesElement);
     instance = new Dropdown(choicesInstance, choicesElement, DEFAULT_CLASSNAMES);
   });
 
-  it('assigns choices instance to class', () => {
-    expect(instance.instance).to.eql(choicesInstance);
+  it('assigns choices instance to instance', () => {
+    expect(instance.parentInstance).to.eql(choicesInstance);
   });
 
-  it('assigns choices element to class', () => {
+  it('assigns choices element to instance', () => {
     expect(instance.element).to.eql(choicesElement);
   });
 
-  it('assigns classnames to class', () => {
+  it('assigns classnames to instance', () => {
     expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES);
   });
+
+  describe('getVerticalPos', () => {
+    let top;
+    let offset;
+    let dimensions;
+    let getBoundingClientRectStub;
+
+    beforeEach(() => {
+      top = 100;
+      offset = 50;
+      dimensions = {
+        bottom: 0,
+        height: 0,
+        left: 0,
+        right: 0,
+        top,
+        width: 0,
+      };
+
+      getBoundingClientRectStub = sinon.stub(instance.element, 'getBoundingClientRect').returns(dimensions);
+
+      window.pageYOffset = 50;
+    });
+
+    afterEach(() => {
+      getBoundingClientRectStub.restore();
+    });
+
+    it('determines how far the top of our element is from the top of the window', () => {
+      const expectedResponse = top + offset;
+      const actualResponse = instance.getVerticalPos();
+      expect(actualResponse).to.equal(expectedResponse);
+    });
+
+    it('assigns dimensions to instance', () => {
+      instance.getVerticalPos();
+      const expectedResponse = dimensions;
+      expect(instance.dimensions).to.equal(expectedResponse);
+    });
+
+    it('assigns posisiton to instance', () => {
+      instance.getVerticalPos();
+      const expectedResponse = top + offset;
+      expect(instance.position).to.equal(expectedResponse);
+    });
+  });
+
+  describe('getChild', () => {
+    let childElement;
+    const childClass = 'test-element';
+
+    beforeEach(() => {
+      childElement = document.createElement('span');
+      childElement.classList.add(childClass);
+      instance.element.appendChild(childElement);
+    });
+
+    it('returns child element', () => {
+      const expectedResponse = childElement;
+      const actualResponse = instance.getChild(`.${childClass}`);
+      expect(expectedResponse).to.eql(actualResponse);
+    });
+  });
+
+  describe('show', () => {
+    let actualResponse;
+
+    beforeEach(() => {
+      actualResponse = instance.show();
+    });
+
+    afterEach(() => {
+      instance.hide();
+    });
+
+    it('adds active class', () => {
+      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState)).to.equal(true);
+    });
+
+    it('sets expanded attribute', () => {
+      expect(instance.element.getAttribute('aria-expanded')).to.equal('true');
+    });
+
+    it('sets isActive instance flag', () => {
+      expect(instance.isActive).to.equal(true);
+    });
+
+    it('returns parent instance', () => {
+      expect(actualResponse).to.eql(choicesInstance);
+    });
+  });
+
+  describe('hide', () => {
+    let actualResponse;
+
+    beforeEach(() => {
+      actualResponse = instance.hide();
+    });
+
+    afterEach(() => {
+      instance.show();
+    });
+
+    it('adds active class', () => {
+      expect(instance.element.classList.contains(DEFAULT_CLASSNAMES.activeState)).to.equal(false);
+    });
+
+    it('sets expanded attribute', () => {
+      expect(instance.element.getAttribute('aria-expanded')).to.equal('false');
+    });
+
+    it('sets isActive instance flag', () => {
+      expect(instance.isActive).to.equal(false);
+    });
+
+    it('returns parent instance', () => {
+      expect(actualResponse).to.eql(choicesInstance);
+    });
+  });
 });