deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-29 10:50:03 +02:00
Code Issues Projects Releases Wiki Activity

Resolve breaking tests

Browse source
This commit is contained in:
Josh Johnson 2017-09-19 18:13:35 +01:00
parent a048fced4f
commit 92f7263e77
2 changed files with 87 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
src/scripts/src/choices.spec.js
View file

@ -5,13 +5,17 @@ import 'custom-event-autopolyfill';
import { expect } from 'chai'; import { expect } from 'chai';
import sinon from 'sinon'; import sinon from 'sinon';
import Choices from './choices.js'; import Choices from './choices';
import itemReducer from './reducers/items.js'; import itemReducer from './reducers/items';
import choiceReducer from './reducers/choices.js'; import choiceReducer from './reducers/choices';
import { import {
addItem as addItemAction, addItem as addItemAction,
addChoice as addChoiceAction, addChoice as addChoiceAction,
} from './actions/actions.js'; } from './actions/actions';
import Dropdown from './components/dropdown';
import Container from './components/container';
import Input from './components/input';
import List from './components/list';
describe('Choices', () => { describe('Choices', () => {
describe('should initialize Choices', () => { describe('should initialize Choices', () => {
@ -121,27 +125,27 @@ describe('Choices', () => {
}); });
it('should create an outer container', () => { it('should create an outer container', () => {
expect(instance.containerOuter).to.be.an.instanceof(HTMLElement); expect(instance.containerOuter).to.be.an.instanceof(Container);
}); });
it('should create an inner container', () => { it('should create an inner container', () => {
expect(instance.containerInner).to.be.an.instanceof(HTMLElement); expect(instance.containerInner).to.be.an.instanceof(Container);
}); });
it('should create a choice list', () => { it('should create a choice list', () => {
expect(instance.choiceList).to.be.an.instanceof(HTMLElement); expect(instance.choiceList).to.be.an.instanceof(List);
}); });
it('should create an item list', () => { it('should create an item list', () => {
expect(instance.itemList).to.be.an.instanceof(HTMLElement); expect(instance.itemList).to.be.an.instanceof(List);
}); });
it('should create an input', () => { it('should create an input', () => {
expect(instance.input).to.be.an.instanceof(HTMLElement); expect(instance.input).to.be.an.instanceof(Input);
}); });
it('should create a dropdown', () => { it('should create a dropdown', () => {
expect(instance.dropdown).to.be.an.instanceof(HTMLElement); expect(instance.dropdown).to.be.an.instanceof(Dropdown);
}); });
it('should backup and recover original styles', () => { it('should backup and recover original styles', () => {
@ -183,22 +187,22 @@ describe('Choices', () => {
it('should accept a user inputted value', () => { it('should accept a user inputted value', () => {
instance = new Choices(input); instance = new Choices(input);
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'test'; instance.input.element.value = 'test';
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
expect(instance.currentState.items[0].value).to.include(instance.input.value); expect(instance.currentState.items[0].value).to.include(instance.input.element.value);
}); });
it('should copy the passed placeholder to the cloned input', () => { it('should copy the passed placeholder to the cloned input', () => {
instance = new Choices(input); instance = new Choices(input);
expect(instance.input.placeholder).to.equal(input.placeholder); expect(instance.input.element.placeholder).to.equal(input.placeholder);
}); });
it('should not allow duplicates if duplicateItems is false', () => { it('should not allow duplicates if duplicateItems is false', () => {
@ -207,16 +211,16 @@ describe('Choices', () => {
items: ['test 1'], items: ['test 1'],
}); });
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'test 1'; instance.input.element.value = 'test 1';
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
expect(instance.currentState.items[instance.currentState.items.length - 1]).not.to.include(instance.input.value); expect(instance.currentState.items[instance.currentState.items.length - 1].value).to.equal(instance.input.element.value);
}); });
it('should filter input if regexFilter is passed', () => { it('should filter input if regexFilter is passed', () => {
@ -224,20 +228,20 @@ describe('Choices', () => {
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
}); });
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'josh@joshuajohnson.co.uk'; instance.input.element.value = 'josh@joshuajohnson.co.uk';
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'not an email address'; instance.input.element.value = 'not an email address';
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
@ -254,11 +258,11 @@ describe('Choices', () => {
appendValue: '-value', appendValue: '-value',
}); });
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'test'; instance.input.element.value = 'test';
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
@ -297,8 +301,8 @@ describe('Choices', () => {
it('should open the choice list on focusing', () => { it('should open the choice list on focusing', () => {
instance = new Choices(input); instance = new Choices(input);
instance.input.focus(); instance.input.element.focus();
expect(instance.dropdown.classList).to.include(instance.config.classNames.activeState); expect(instance.dropdown.element.classList.contains(instance.config.classNames.activeState)).to.be.true;
}); });
it('should select the first choice', () => { it('should select the first choice', () => {
@ -310,12 +314,12 @@ describe('Choices', () => {
instance = new Choices(input, { instance = new Choices(input, {
renderChoiceLimit: -1, renderChoiceLimit: -1,
}); });
instance.input.focus(); instance.input.element.focus();
for (let i = 0; i < 2; i++) { for (let i = 0; i < 2; i++) {
// Key down to third choice // Key down to third choice
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 40, keyCode: 40,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
@ -327,11 +331,11 @@ describe('Choices', () => {
it('should select choice on enter key press', () => { it('should select choice on enter key press', () => {
instance = new Choices(input); instance = new Choices(input);
instance.input.focus(); instance.input.element.focus();
// Key down to second choice // Key down to second choice
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 40, keyCode: 40,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
@ -339,7 +343,7 @@ describe('Choices', () => {
// Key down to select choice // Key down to select choice
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
@ -358,11 +362,11 @@ describe('Choices', () => {
passedElement.addEventListener('change', onChangeStub); passedElement.addEventListener('change', onChangeStub);
passedElement.addEventListener('addItem', addSpyStub); passedElement.addEventListener('addItem', addSpyStub);
instance.input.focus(); instance.input.element.focus();
// Key down to second choice // Key down to second choice
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 40, keyCode: 40,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
@ -370,7 +374,7 @@ describe('Choices', () => {
// Key down to select choice // Key down to select choice
instance._onKeyDown({ instance._onKeyDown({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
@ -384,20 +388,20 @@ describe('Choices', () => {
it('should open the dropdown on click', () => { it('should open the dropdown on click', () => {
instance = new Choices(input); instance = new Choices(input);
const container = instance.containerOuter; const container = instance.containerOuter.element;
instance._onClick({ instance._onClick({
target: container, target: container,
ctrlKey: false, ctrlKey: false,
preventDefault: () => {}, preventDefault: () => {},
}); });
expect(document.activeElement === instance.input && container.classList.contains('is-open')).to.be.true; expect(document.activeElement === instance.input.element && container.classList.contains('is-open')).to.be.true;
}); });
it('should close the dropdown on double click', () => { it('should close the dropdown on double click', () => {
instance = new Choices(input); instance = new Choices(input);
const container = instance.containerOuter, const container = instance.containerOuter.element;
openState = instance.config.classNames.openState; const openState = instance.config.classNames.openState;
instance._onClick({ instance._onClick({
target: container, target: container,
@ -411,12 +415,12 @@ describe('Choices', () => {
preventDefault: () => {}, preventDefault: () => {},
}); });
expect(document.activeElement === instance.input && container.classList.contains(openState)).to.be.false; expect(document.activeElement === instance.input.element && container.classList.contains(openState)).to.be.false;
}); });
it('should trigger showDropdown on dropdown opening', () => { it('should trigger showDropdown on dropdown opening', () => {
instance = new Choices(input); instance = new Choices(input);
const container = instance.containerOuter; const container = instance.containerOuter.element;
const showDropdownStub = sinon.spy(); const showDropdownStub = sinon.spy();
const passedElement = instance.passedElement; const passedElement = instance.passedElement;
@ -437,13 +441,13 @@ describe('Choices', () => {
it('should trigger hideDropdown on dropdown closing', () => { it('should trigger hideDropdown on dropdown closing', () => {
instance = new Choices(input); instance = new Choices(input);
const container = instance.containerOuter; const container = instance.containerOuter.element;
const hideDropdownStub = sinon.stub(); const hideDropdownStub = sinon.stub();
const passedElement = instance.passedElement; const passedElement = instance.passedElement;
passedElement.addEventListener('hideDropdown', hideDropdownStub); passedElement.addEventListener('hideDropdown', hideDropdownStub);
instance.input.focus(); instance.input.element.focus();
instance._onClick({ instance._onClick({
target: container, target: container,
@ -468,12 +472,12 @@ describe('Choices', () => {
passedElement.addEventListener('search', onSearchStub); passedElement.addEventListener('search', onSearchStub);
instance.input.focus(); instance.input.element.focus();
instance.input.value = '3 '; instance.input.value = '3 ';
// Key down to search // Key down to search
instance._onKeyUp({ instance._onKeyUp({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
@ -496,17 +500,17 @@ describe('Choices', () => {
passedElement.addEventListener('search', onSearchStub); passedElement.addEventListener('search', onSearchStub);
instance.input.focus(); instance.input.element.focus();
instance.input.value = 'Javascript'; instance.input.element.value = 'Javascript';
// Key down to search // Key down to search
instance._onKeyUp({ instance._onKeyUp({
target: instance.input, target: instance.input.element,
keyCode: 13, keyCode: 13,
ctrlKey: false, ctrlKey: false,
}); });
const activeOptions = instance.currentState.choices.filter((choice) => choice.active); const activeOptions = instance.currentState.choices.filter(choice => choice.active);
expect(activeOptions.length).to.equal(instance.currentState.choices.length); expect(activeOptions.length).to.equal(instance.currentState.choices.length);
expect(onSearchStub.callCount).to.equal(1); expect(onSearchStub.callCount).to.equal(1);
@ -610,7 +614,7 @@ describe('Choices', () => {
}); });
it('should add a placeholder defined in the config to the search input', () => { it('should add a placeholder defined in the config to the search input', () => {
expect(instance.input.placeholder).to.equal('Placeholder text'); expect(instance.input.element.placeholder).to.equal('Placeholder text');
}); });
}); });
@ -696,9 +700,9 @@ describe('Choices', () => {
it('should handle showDropdown()', () => { it('should handle showDropdown()', () => {
instance.showDropdown(); instance.showDropdown();
const hasOpenState = instance.containerOuter.classList.contains(instance.config.classNames.openState); const hasOpenState = instance.containerOuter.element.classList.contains(instance.config.classNames.openState);
const hasAttr = instance.containerOuter.getAttribute('aria-expanded') === 'true'; const hasAttr = instance.containerOuter.element.getAttribute('aria-expanded') === 'true';
const hasActiveState = instance.dropdown.classList.contains(instance.config.classNames.activeState); const hasActiveState = instance.dropdown.element.classList.contains(instance.config.classNames.activeState);
expect(hasOpenState && hasAttr && hasActiveState).to.be.true; expect(hasOpenState && hasAttr && hasActiveState).to.be.true;
}); });
@ -707,9 +711,10 @@ describe('Choices', () => {
instance.showDropdown(); instance.showDropdown();
instance.hideDropdown(); instance.hideDropdown();
const hasOpenState = instance.containerOuter.classList.contains(instance.config.classNames.openState); const hasOpenState = instance.containerOuter.element.classList.contains(instance.config.classNames.openState);
const hasAttr = instance.containerOuter.getAttribute('aria-expanded') === 'true'; const hasAttr = instance.containerOuter.element.getAttribute('aria-expanded') === 'true';
const hasActiveState = instance.dropdown.classList.contains(instance.config.classNames.activeState); const hasActiveState = instance.dropdown.element.classList.contains(instance.config.classNames.activeState);
expect(hasOpenState && hasAttr && hasActiveState).to.be.false; expect(hasOpenState && hasAttr && hasActiveState).to.be.false;
}); });
@ -721,11 +726,6 @@ describe('Choices', () => {
expect(instance.hideDropdown.callCount).to.equal(1); expect(instance.hideDropdown.callCount).to.equal(1);
}); });
it('should handle hideDropdown()', () => {
instance.showDropdown();
expect(instance.containerOuter.classList).to.include(instance.config.classNames.openState);
});
it('should handle getValue()', () => { it('should handle getValue()', () => {
const valueObjects = instance.getValue(); const valueObjects = instance.getValue();
const valueStrings = instance.getValue(true); const valueStrings = instance.getValue(true);
@ -832,17 +832,17 @@ describe('Choices', () => {
it('should handle disable()', () => { it('should handle disable()', () => {
instance.disable(); instance.disable();
expect(instance.input.disabled).to.be.true; expect(instance.input.element.disabled).to.be.true;
expect(instance.containerOuter.classList.contains(instance.config.classNames.disabledState)).to.be.true; expect(instance.containerOuter.element.classList.contains(instance.config.classNames.disabledState)).to.be.true;
expect(instance.containerOuter.getAttribute('aria-disabled')).to.equal('true'); expect(instance.containerOuter.element.getAttribute('aria-disabled')).to.equal('true');
}); });
it('should handle enable()', () => { it('should handle enable()', () => {
instance.enable(); instance.enable();
expect(instance.input.disabled).to.be.false; expect(instance.input.element.disabled).to.be.false;
expect(instance.containerOuter.classList.contains(instance.config.classNames.disabledState)).to.be.false; expect(instance.containerOuter.element.classList.contains(instance.config.classNames.disabledState)).to.be.false;
expect(instance.containerOuter.hasAttribute('aria-disabled')).to.be.false; expect(instance.containerOuter.element.hasAttribute('aria-disabled')).to.be.false;
}); });
it('should handle ajax()', () => { it('should handle ajax()', () => {
@ -860,7 +860,7 @@ describe('Choices', () => {
}); });
}); });
expect(instance.ajax).toHaveBeenCalledWith(jasmine.any(Function)); expect(instance.ajax).to.have.been.called();
}); });
}); });
@ -897,13 +897,13 @@ describe('Choices', () => {
it('should handle disable()', () => { it('should handle disable()', () => {
instance.disable(); instance.disable();
expect(instance.containerOuter.getAttribute('tabindex')).to.equal('-1'); expect(instance.containerOuter.element.getAttribute('tabindex')).to.equal('-1');
}); });
it('should handle enable()', () => { it('should handle enable()', () => {
instance.enable(); instance.enable();
expect(instance.containerOuter.getAttribute('tabindex')).to.equal('0'); expect(instance.containerOuter.element.getAttribute('tabindex')).to.equal('0');
}); });
}); });
@ -927,7 +927,7 @@ describe('Choices', () => {
it('should handle clearInput()', () => { it('should handle clearInput()', () => {
instance.clearInput(); instance.clearInput();
expect(instance.input.value).to.equal(''); expect(instance.input.element.value).to.equal('');
}); });
it('should handle removeItemsByValue()', () => { it('should handle removeItemsByValue()', () => {
@ -973,8 +973,8 @@ describe('Choices', () => {
position: 'top', position: 'top',
}); });
const container = instance.containerOuter; const container = instance.containerOuter.element;
instance.input.focus(); instance.input.element.focus();
expect(container.classList.contains(instance.config.classNames.flippedState)).to.be.true; expect(container.classList.contains(instance.config.classNames.flippedState)).to.be.true;
}); });
@ -983,8 +983,8 @@ describe('Choices', () => {
position: 'bottom', position: 'bottom',
}); });
const container = instance.containerOuter; const container = instance.containerOuter.element;
instance.input.focus(); instance.input.element.focus();
expect(container.classList.contains(instance.config.classNames.flippedState)).to.be.false; expect(container.classList.contains(instance.config.classNames.flippedState)).to.be.false;
}); });
@ -994,7 +994,7 @@ describe('Choices', () => {
renderChoiceLimit: -1, renderChoiceLimit: -1,
}); });
const renderedChoices = instance.choiceList.querySelectorAll('.choices__item'); const renderedChoices = instance.choiceList.element.querySelectorAll('.choices__item');
expect(renderedChoices.length).to.equal(3); expect(renderedChoices.length).to.equal(3);
}); });
@ -1004,7 +1004,7 @@ describe('Choices', () => {
renderChoiceLimit: -1, renderChoiceLimit: -1,
}); });
const renderedChoices = instance.choiceList.querySelectorAll('.choices__item'); const renderedChoices = instance.choiceList.element.querySelectorAll('.choices__item');
expect(renderedChoices.length).to.equal(1); expect(renderedChoices.length).to.equal(1);
}); });
@ -1041,7 +1041,7 @@ describe('Choices', () => {
renderChoiceLimit: 4, renderChoiceLimit: 4,
}); });
const renderedChoices = instance.choiceList.querySelectorAll('.choices__item'); const renderedChoices = instance.choiceList.element.querySelectorAll('.choices__item');
expect(renderedChoices.length).to.equal(4); expect(renderedChoices.length).to.equal(4);
}); });
}); });
@ -1057,6 +1057,7 @@ describe('Choices', () => {
customProperties: { customProperties: {
foo: 'bar', foo: 'bar',
}, },
placeholder: false,
keyCode: null, keyCode: null,
}; };
@ -1069,6 +1070,7 @@ describe('Choices', () => {
active: true, active: true,
highlighted: false, highlighted: false,
customProperties: randomItem.customProperties, customProperties: randomItem.customProperties,
placeholder: randomItem.placeholder,
keyCode: randomItem.keyCode, keyCode: randomItem.keyCode,
}]; }];
@ -1079,6 +1081,7 @@ describe('Choices', () => {
randomItem.choiceId, randomItem.choiceId,
randomItem.groupId, randomItem.groupId,
randomItem.customProperties, randomItem.customProperties,
randomItem.placeholder,
randomItem.keyCode, randomItem.keyCode,
); );
@ -1096,6 +1099,7 @@ describe('Choices', () => {
customProperties: { customProperties: {
foo: 'bar', foo: 'bar',
}, },
placeholder: false,
keyCode: null, keyCode: null,
}; };
@ -1110,6 +1114,7 @@ describe('Choices', () => {
active: true, active: true,
score: 9999, score: 9999,
customProperties: randomChoice.customProperties, customProperties: randomChoice.customProperties,
placeholder: randomChoice.placeholder,
keyCode: randomChoice.keyCode, keyCode: randomChoice.keyCode,
}]; }];
@ -1121,6 +1126,7 @@ describe('Choices', () => {
randomChoice.disabled, randomChoice.disabled,
randomChoice.elementId, randomChoice.elementId,
randomChoice.customProperties, randomChoice.customProperties,
randomChoice.placeholder,
randomChoice.keyCode, randomChoice.keyCode,
); );

0
src/scripts/src/store/store.spec.js
View file