diff --git a/src/scripts/src/components/dropdown.js b/src/scripts/src/components/dropdown.js index 76ba0c7..264e7bc 100644 --- a/src/scripts/src/components/dropdown.js +++ b/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; } } diff --git a/src/scripts/src/components/dropdown.test.js b/src/scripts/src/components/dropdown.test.js index b147b13..b9b8675 100644 --- a/src/scripts/src/components/dropdown.test.js +++ b/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); + }); + }); });