From 843d1f66bb12d7dca2f816d55267a3eb0417c920 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Thu, 12 Oct 2017 12:34:47 +0100 Subject: [PATCH] Use parentInstance + begin adding container tests --- src/scripts/src/components/container.js | 10 +-- src/scripts/src/components/container.test.js | 95 +++++++++++++++++++- src/scripts/src/components/list.js | 2 +- src/scripts/src/components/list.test.js | 2 +- 4 files changed, 101 insertions(+), 8 deletions(-) diff --git a/src/scripts/src/components/container.js b/src/scripts/src/components/container.js index e124ca9..2cfaea6 100644 --- a/src/scripts/src/components/container.js +++ b/src/scripts/src/components/container.js @@ -1,6 +1,6 @@ export default class Container { constructor(instance, element, classNames) { - this.instance = instance; + this.parentInstance = instance; this.element = element; this.classNames = classNames; this.config = instance.config; @@ -82,8 +82,8 @@ export default class Container { * Set active descendant attribute * @param {Number} activeDescendant ID of active descendant */ - setActiveDescendant(activeDescendant) { - this.element.setAttribute('aria-activedescendant', activeDescendant); + setActiveDescendant(activeDescendantID) { + this.element.setAttribute('aria-activedescendant', activeDescendantID); } /** @@ -137,7 +137,7 @@ export default class Container { enable() { this.element.classList.remove(this.config.classNames.disabledState); this.element.removeAttribute('aria-disabled'); - if (this.instance.isSelectOneElement) { + if (this.parentInstance.isSelectOneElement) { this.element.setAttribute('tabindex', '0'); } this.isDisabled = false; @@ -149,7 +149,7 @@ export default class Container { disable() { this.element.classList.add(this.config.classNames.disabledState); this.element.setAttribute('aria-disabled', 'true'); - if (this.instance.isSelectOneElement) { + if (this.parentInstance.isSelectOneElement) { this.element.setAttribute('tabindex', '-1'); } this.isDisabled = true; diff --git a/src/scripts/src/components/container.test.js b/src/scripts/src/components/container.test.js index df94aff..106a539 100644 --- a/src/scripts/src/components/container.test.js +++ b/src/scripts/src/components/container.test.js @@ -1,4 +1,5 @@ import { expect } from 'chai'; +import sinon from 'sinon'; import Container from './container'; import { DEFAULT_CLASSNAMES, DEFAULT_CONFIG } from '../constants'; @@ -19,7 +20,7 @@ describe('Container', () => { }); it('assigns choices instance to class', () => { - expect(instance.instance).to.eql(choicesInstance); + expect(instance.parentInstance).to.eql(choicesInstance); }); it('assigns choices element to class', () => { @@ -29,4 +30,96 @@ describe('Container', () => { it('assigns classnames to class', () => { expect(instance.classNames).to.eql(DEFAULT_CLASSNAMES); }); + + + describe('addEventListeners', () => { + let addEventListenerStub; + + beforeEach(() => { + addEventListenerStub = sinon.stub(instance.element, 'addEventListener'); + }); + + afterEach(() => { + addEventListenerStub.restore(); + }); + + it('adds event listeners', () => { + instance.addEventListeners(); + expect(addEventListenerStub.callCount).to.equal(2); + expect(addEventListenerStub.getCall(0).args[0]).to.equal('focus'); + expect(addEventListenerStub.getCall(1).args[0]).to.equal('blur'); + }); + }); + + describe('removeEventListeners', () => { + let removeEventListenerStub; + + beforeEach(() => { + removeEventListenerStub = sinon.stub(instance.element, 'removeEventListener'); + }); + + afterEach(() => { + removeEventListenerStub.restore(); + }); + + it('removes event listeners', () => { + instance.removeEventListeners(); + expect(removeEventListenerStub.callCount).to.equal(2); + expect(removeEventListenerStub.getCall(0).args[0]).to.equal('focus'); + expect(removeEventListenerStub.getCall(1).args[0]).to.equal('blur'); + }); + }); + + describe('onFocus', () => { + it('sets isFocussed flag to true', () => { + expect(instance.isFocussed).to.equal(false); + instance.onFocus(); + expect(instance.isFocussed).to.equal(true); + }); + }); + + describe('onBlur', () => { + it('sets isFocussed flag to false', () => { + instance.isFocussed = true; + instance.onBlur(); + expect(instance.isFocussed).to.equal(false); + }); + }); + + describe('focus', () => { + let focusStub; + + beforeEach(() => { + focusStub = sinon.stub(instance.element, 'focus'); + }); + + afterEach(() => { + focusStub.restore(); + }); + + it('focuses element if isFocussed flag is set to false', () => { + instance.isFocussed = false; + instance.focus(); + expect(focusStub.callCount).to.equal(1); + }); + }); + + describe('setActiveDescendant', () => { + it('sets element\'s aria-activedescendant attribute with passed descendant ID', () => { + const activeDescendantID = '1234'; + expect(instance.element.getAttribute('aria-activedescendant')).to.equal(null); + instance.setActiveDescendant(activeDescendantID); + expect(instance.element.getAttribute('aria-activedescendant')).to.equal(activeDescendantID); + }); + }); + + describe('removeActiveDescendant', () => { + it('remove elememnt\'s aria-activedescendant attribute', () => { + const activeDescendantID = '1234'; + instance.element.setAttribute('aria-activedescendant', activeDescendantID); + expect(instance.element.getAttribute('aria-activedescendant')).to.equal(activeDescendantID); + instance.removeActiveDescendant(); + expect(instance.element.getAttribute('aria-activedescendant')).to.equal(null); + }); + }); }); diff --git a/src/scripts/src/components/list.js b/src/scripts/src/components/list.js index 6fd35d4..27d0f06 100644 --- a/src/scripts/src/components/list.js +++ b/src/scripts/src/components/list.js @@ -1,6 +1,6 @@ export default class List { constructor(instance, element, classNames) { - this.instance = instance; + this.parentInstance = instance; this.element = element; this.classNames = classNames; this.scrollPos = this.element.scrollTop; diff --git a/src/scripts/src/components/list.test.js b/src/scripts/src/components/list.test.js index e1d40a9..7d582bb 100644 --- a/src/scripts/src/components/list.test.js +++ b/src/scripts/src/components/list.test.js @@ -19,7 +19,7 @@ describe('List', () => { }); it('assigns choices instance to class', () => { - expect(instance.instance).to.eql(choicesInstance); + expect(instance.parentInstance).to.eql(choicesInstance); }); it('assigns choices element to class', () => {