2016-07-15 00:21:28 +02:00
|
|
|
import 'whatwg-fetch';
|
|
|
|
import 'es6-promise';
|
2017-06-29 09:40:56 +02:00
|
|
|
import 'core-js/fn/object/assign';
|
2016-07-02 14:04:38 +02:00
|
|
|
import Choices from '../../assets/scripts/src/choices.js';
|
2017-06-28 11:11:02 +02:00
|
|
|
import itemReducer from '../../assets/scripts/src/reducers/items.js';
|
|
|
|
import choiceReducer from '../../assets/scripts/src/reducers/choices.js';
|
2017-06-29 09:40:56 +02:00
|
|
|
import {
|
|
|
|
addItem as addItemAction,
|
|
|
|
addChoice as addChoiceAction
|
|
|
|
} from '../../assets/scripts/src/actions/index.js';
|
2017-01-01 16:59:43 +01:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
describe('Choices', () => {
|
|
|
|
describe('should initialize Choices', () => {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('input');
|
2017-01-01 16:32:09 +01:00
|
|
|
this.input.type = 'text';
|
2016-09-05 23:31:20 +02:00
|
|
|
this.input.className = 'js-choices';
|
2016-07-02 14:04:38 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
});
|
2016-07-15 00:21:28 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should be defined', function() {
|
|
|
|
expect(this.choices).toBeDefined();
|
|
|
|
});
|
2016-07-02 14:04:38 +02:00
|
|
|
|
2017-07-17 12:35:50 +02:00
|
|
|
it('should have initialised', function() {
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.initialised).toBe(true);
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should not re-initialise if passed element again', function() {
|
|
|
|
const reinitialise = new Choices(this.choices.passedElement);
|
|
|
|
spyOn(reinitialise, '_createTemplates');
|
|
|
|
expect(reinitialise._createTemplates).not.toHaveBeenCalled();
|
2017-07-11 19:34:37 +02:00
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should have a blank state', function() {
|
|
|
|
expect(this.choices.currentState.items.length).toEqual(0);
|
|
|
|
expect(this.choices.currentState.groups.length).toEqual(0);
|
|
|
|
expect(this.choices.currentState.choices.length).toEqual(0);
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should have config options', function() {
|
2017-05-18 18:56:29 +02:00
|
|
|
expect(this.choices.config.silent).toEqual(jasmine.any(Boolean));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.config.items).toEqual(jasmine.any(Array));
|
|
|
|
expect(this.choices.config.choices).toEqual(jasmine.any(Array));
|
|
|
|
expect(this.choices.config.maxItemCount).toEqual(jasmine.any(Number));
|
|
|
|
expect(this.choices.config.addItems).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.removeItems).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.removeItemButton).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.editItems).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.duplicateItems).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.delimiter).toEqual(jasmine.any(String));
|
|
|
|
expect(this.choices.config.paste).toEqual(jasmine.any(Boolean));
|
2017-05-18 18:56:29 +02:00
|
|
|
expect(this.choices.config.searchEnabled).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.searchChoices).toEqual(jasmine.any(Boolean));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.config.searchFloor).toEqual(jasmine.any(Number));
|
2017-06-27 17:35:46 +02:00
|
|
|
expect(this.choices.config.searchResultLimit).toEqual(jasmine.any(Number));
|
2017-04-07 09:49:15 +02:00
|
|
|
expect(this.choices.config.searchFields).toEqual(jasmine.any(Array) || jasmine.any(String));
|
2017-02-21 21:47:12 +01:00
|
|
|
expect(this.choices.config.position).toEqual(jasmine.any(String));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.config.regexFilter).toEqual(null);
|
|
|
|
expect(this.choices.config.sortFilter).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.config.shouldSort).toEqual(jasmine.any(Boolean));
|
2017-07-11 07:36:10 +02:00
|
|
|
expect(this.choices.config.shouldSortItems).toEqual(jasmine.any(Boolean));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.config.placeholder).toEqual(jasmine.any(Boolean));
|
|
|
|
expect(this.choices.config.placeholderValue).toEqual(null);
|
|
|
|
expect(this.choices.config.prependValue).toEqual(null);
|
|
|
|
expect(this.choices.config.appendValue).toEqual(null);
|
2017-07-12 12:21:35 +02:00
|
|
|
expect(this.choices.config.renderSelectedChoices).toEqual(jasmine.any(String));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.config.loadingText).toEqual(jasmine.any(String));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.config.noResultsText).toEqual(jasmine.any(String));
|
|
|
|
expect(this.choices.config.noChoicesText).toEqual(jasmine.any(String));
|
|
|
|
expect(this.choices.config.itemSelectText).toEqual(jasmine.any(String));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.config.classNames).toEqual(jasmine.any(Object));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.config.callbackOnInit).toEqual(null);
|
2017-01-01 16:32:09 +01:00
|
|
|
expect(this.choices.config.callbackOnCreateTemplates).toEqual(null);
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should expose public methods', function() {
|
|
|
|
expect(this.choices.init).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.destroy).toEqual(jasmine.any(Function));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.render).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.renderGroups).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.renderItems).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.renderChoices).toEqual(jasmine.any(Function));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.highlightItem).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.unhighlightItem).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.highlightAll).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.unhighlightAll).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.removeItemsByValue).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.removeActiveItems).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.removeHighlightedItems).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.showDropdown).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.hideDropdown).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.toggleDropdown).toEqual(jasmine.any(Function));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.getValue).toEqual(jasmine.any(Function));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.setValue).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.setValueByChoice).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.setChoices).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.disable).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.enable).toEqual(jasmine.any(Function));
|
|
|
|
expect(this.choices.ajax).toEqual(jasmine.any(Function));
|
2016-09-29 14:13:17 +02:00
|
|
|
expect(this.choices.clearStore).toEqual(jasmine.any(Function));
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.clearInput).toEqual(jasmine.any(Function));
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should hide passed input', function() {
|
|
|
|
expect(this.choices.passedElement.style.display).toEqual('none');
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should create an outer container', function() {
|
|
|
|
expect(this.choices.containerOuter).toEqual(jasmine.any(HTMLElement));
|
2016-07-02 14:04:38 +02:00
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should create an inner container', function() {
|
|
|
|
expect(this.choices.containerInner).toEqual(jasmine.any(HTMLElement));
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should create a choice list', function() {
|
|
|
|
expect(this.choices.choiceList).toEqual(jasmine.any(HTMLElement));
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should create an item list', function() {
|
|
|
|
expect(this.choices.itemList).toEqual(jasmine.any(HTMLElement));
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should create an input', function() {
|
|
|
|
expect(this.choices.input).toEqual(jasmine.any(HTMLElement));
|
|
|
|
});
|
2016-07-02 14:04:38 +02:00
|
|
|
|
2017-01-01 16:32:09 +01:00
|
|
|
it('should create a dropdown', function() {
|
|
|
|
expect(this.choices.dropdown).toEqual(jasmine.any(HTMLElement));
|
|
|
|
});
|
2017-07-17 12:35:50 +02:00
|
|
|
|
|
|
|
it('should backup and recover original styles', function () {
|
|
|
|
const origStyle = 'background-color: #ccc; margin: 5px padding: 10px;';
|
|
|
|
|
|
|
|
this.choices.destroy();
|
|
|
|
this.input.setAttribute('style', origStyle);
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
|
|
|
|
let style = this.input.getAttribute('data-choice-orig-style');
|
|
|
|
expect(style).toEqual(origStyle);
|
|
|
|
|
|
|
|
this.choices.destroy();
|
|
|
|
style = this.input.getAttribute('data-choice-orig-style');
|
|
|
|
expect(style).toBeNull();
|
|
|
|
|
|
|
|
style = this.input.getAttribute('style');
|
|
|
|
expect(style).toEqual(origStyle);
|
|
|
|
});
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-07-02 14:04:38 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
describe('should accept text inputs', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('input');
|
2017-01-01 16:32:09 +01:00
|
|
|
this.input.type = 'text';
|
2016-09-05 23:31:20 +02:00
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.placeholder = 'Placeholder text';
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should accept a user inputted value', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'test';
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.currentState.items[0].value).toContain(this.choices.input.value);
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should copy the passed placeholder to the cloned input', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.input.placeholder).toEqual(this.input.placeholder);
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should not allow duplicates if duplicateItems is false', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
duplicateItems: false,
|
|
|
|
items: ['test 1'],
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'test 1';
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.currentState.items[this.choices.currentState.items.length - 1]).not.toContain(this.choices.input.value);
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should filter input if regexFilter is passed', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
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,}))$/,
|
|
|
|
});
|
2016-08-20 12:16:52 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'josh@joshuajohnson.co.uk';
|
2016-08-20 12:36:03 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-08-20 12:36:03 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'not an email address';
|
2016-08-20 12:36:03 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-08-20 12:36:03 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const lastItem = this.choices.currentState.items[this.choices.currentState.items.length - 1];
|
2016-08-20 12:36:03 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(lastItem.value).toEqual('josh@joshuajohnson.co.uk');
|
|
|
|
expect(lastItem.value).not.toEqual('not an email address');
|
2016-07-02 15:48:20 +02:00
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should prepend and append values if passed', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
prependValue: 'item-',
|
|
|
|
appendValue: '-value',
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'test';
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const lastItem = this.choices.currentState.items[this.choices.currentState.items.length - 1];
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(lastItem.value).not.toEqual('test');
|
|
|
|
expect(lastItem.value).toEqual('item-test-value');
|
|
|
|
});
|
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
describe('should accept single select inputs', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.placeholder = 'Placeholder text';
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
for (let i = 1; i < 4; i++) {
|
|
|
|
const option = document.createElement('option');
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Label ${i}`;
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.input.appendChild(option);
|
|
|
|
}
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2017-07-11 19:34:37 +02:00
|
|
|
it('should open the choice list on focusing', function() {
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
this.choices.input.focus();
|
|
|
|
expect(this.choices.dropdown.classList).toContain(this.choices.config.classNames.activeState);
|
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should select the first choice', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
expect(this.choices.currentState.items[0].value).toContain('Value 1');
|
|
|
|
});
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should highlight the choices on keydown', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
this.choices.input.focus();
|
2016-07-31 21:02:46 +02:00
|
|
|
|
2017-07-11 19:34:37 +02:00
|
|
|
for (let i = 0; i < 2; i++) {
|
2016-09-05 23:31:20 +02:00
|
|
|
// Key down to third choice
|
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 40,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
2016-07-31 21:02:46 +02:00
|
|
|
});
|
2016-09-05 23:31:20 +02:00
|
|
|
}
|
2016-07-31 21:02:46 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.highlightPosition).toBe(2);
|
|
|
|
});
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should select choice on enter key press', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
this.choices.input.focus();
|
|
|
|
|
|
|
|
// Key down to second choice
|
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 40,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Key down to select choice
|
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
2016-11-28 14:12:45 +01:00
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
expect(this.choices.currentState.items.length).toBe(2);
|
|
|
|
});
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2017-01-01 16:32:09 +01:00
|
|
|
it('should trigger add/change event on selection', function() {
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices = new Choices(this.input);
|
2017-01-01 16:32:09 +01:00
|
|
|
|
|
|
|
const changeSpy = jasmine.createSpy('changeSpy');
|
|
|
|
const addSpy = jasmine.createSpy('addSpy');
|
|
|
|
const passedElement = this.choices.passedElement;
|
|
|
|
|
|
|
|
passedElement.addEventListener('change', changeSpy);
|
|
|
|
passedElement.addEventListener('addItem', addSpy);
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
|
|
|
|
|
|
|
// Key down to second choice
|
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 40,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
|
|
|
|
|
|
|
// Key down to select choice
|
|
|
|
this.choices._onKeyDown({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
2016-11-28 14:12:45 +01:00
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
|
|
|
|
2017-01-01 16:32:09 +01:00
|
|
|
const returnValue = changeSpy.calls.mostRecent().args[0].detail.value;
|
|
|
|
expect(returnValue).toEqual(jasmine.any(String));
|
|
|
|
expect(changeSpy).toHaveBeenCalled();
|
|
|
|
expect(addSpy).toHaveBeenCalled();
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should open the dropdown on click', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
const container = this.choices.containerOuter;
|
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(true);
|
|
|
|
});
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should close the dropdown on double click', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
2017-02-21 21:47:12 +01:00
|
|
|
const container = this.choices.containerOuter,
|
|
|
|
openState = this.choices.config.classNames.openState;
|
2016-08-12 14:48:55 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2017-02-21 21:47:12 +01:00
|
|
|
expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-07-13 22:40:59 +02:00
|
|
|
|
2017-03-02 17:13:53 +01:00
|
|
|
it('should trigger showDropdown on dropdown opening', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
const container = this.choices.containerOuter;
|
2017-04-06 15:42:11 +02:00
|
|
|
|
2017-03-02 17:13:53 +01:00
|
|
|
const showDropdownSpy = jasmine.createSpy('showDropdownSpy');
|
|
|
|
const passedElement = this.choices.passedElement;
|
|
|
|
|
|
|
|
passedElement.addEventListener('showDropdown', showDropdownSpy);
|
|
|
|
|
|
|
|
this.choices.input.focus();
|
|
|
|
|
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(showDropdownSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2017-04-06 15:42:11 +02:00
|
|
|
it('should trigger hideDropdown on dropdown closing', function() {
|
2017-03-02 17:13:53 +01:00
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
const container = this.choices.containerOuter;
|
2017-04-06 15:42:11 +02:00
|
|
|
|
2017-03-02 17:13:53 +01:00
|
|
|
const hideDropdownSpy = jasmine.createSpy('hideDropdownSpy');
|
|
|
|
const passedElement = this.choices.passedElement;
|
|
|
|
|
|
|
|
passedElement.addEventListener('hideDropdown', hideDropdownSpy);
|
|
|
|
|
|
|
|
this.choices.input.focus();
|
|
|
|
|
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.choices._onClick({
|
|
|
|
target: container,
|
|
|
|
ctrlKey: false,
|
|
|
|
preventDefault: () => {}
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(hideDropdownSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should filter choices when searching', function() {
|
|
|
|
this.choices = new Choices(this.input);
|
2017-01-01 16:32:09 +01:00
|
|
|
|
|
|
|
const searchSpy = jasmine.createSpy('searchSpy');
|
|
|
|
const passedElement = this.choices.passedElement;
|
|
|
|
|
|
|
|
passedElement.addEventListener('search', searchSpy);
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.input.focus();
|
2017-04-06 15:42:11 +02:00
|
|
|
this.choices.input.value = '3 ';
|
|
|
|
|
|
|
|
// Key down to search
|
|
|
|
this.choices._onKeyUp({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
|
|
|
|
|
|
|
const mostAccurateResult = this.choices.currentState.choices.filter(function (choice) {
|
|
|
|
return choice.active;
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(this.choices.isSearching && mostAccurateResult[0].value === 'Value 3').toBe(true);
|
|
|
|
expect(searchSpy).toHaveBeenCalled();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shouldn\'t filter choices when searching', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
searchChoices: false
|
|
|
|
});
|
|
|
|
|
|
|
|
this.choices.setValue(['Javascript', 'HTML', 'Jasmine']);
|
|
|
|
|
|
|
|
const searchSpy = jasmine.createSpy('searchSpy');
|
|
|
|
const passedElement = this.choices.passedElement;
|
|
|
|
|
|
|
|
passedElement.addEventListener('search', searchSpy);
|
|
|
|
|
|
|
|
this.choices.input.focus();
|
|
|
|
this.choices.input.value = 'Javascript';
|
2016-09-04 14:44:31 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
// Key down to search
|
|
|
|
this.choices._onKeyUp({
|
|
|
|
target: this.choices.input,
|
|
|
|
keyCode: 13,
|
|
|
|
ctrlKey: false
|
|
|
|
});
|
2016-09-04 14:44:31 +02:00
|
|
|
|
2017-04-06 15:42:11 +02:00
|
|
|
const activeOptions = this.choices.currentState.choices.filter(function (choice) {
|
|
|
|
return choice.active;
|
|
|
|
});
|
2016-09-04 14:44:31 +02:00
|
|
|
|
2017-04-06 15:42:11 +02:00
|
|
|
expect(activeOptions.length).toEqual(this.choices.currentState.choices.length);
|
2017-01-01 16:32:09 +01:00
|
|
|
expect(searchSpy).toHaveBeenCalled();
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-09-04 14:44:31 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('shouldn\'t sort choices if shouldSort is false', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
shouldSort: false,
|
|
|
|
choices: [{
|
|
|
|
value: 'Value 5',
|
|
|
|
label: 'Label Five'
|
|
|
|
}, {
|
|
|
|
value: 'Value 6',
|
|
|
|
label: 'Label Six'
|
|
|
|
}, {
|
|
|
|
value: 'Value 7',
|
|
|
|
label: 'Label Seven'
|
|
|
|
}, ],
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(this.choices.currentState.choices[0].value).toEqual('Value 5');
|
2016-07-02 15:48:20 +02:00
|
|
|
});
|
|
|
|
|
2017-07-11 19:34:37 +02:00
|
|
|
it('should sort choices if shouldSort is true', function() {
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
shouldSort: true,
|
|
|
|
choices: [{
|
|
|
|
value: 'Value 5',
|
|
|
|
label: 'Label Five'
|
|
|
|
}, {
|
|
|
|
value: 'Value 6',
|
|
|
|
label: 'Label Six'
|
|
|
|
}, {
|
|
|
|
value: 'Value 7',
|
|
|
|
label: 'Label Seven'
|
|
|
|
}, ],
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(this.choices.currentState.choices[0].value).toEqual('Value 1');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('should accept multiple select inputs', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.setAttribute('multiple', '');
|
|
|
|
|
|
|
|
for (let i = 1; i < 4; i++) {
|
|
|
|
const option = document.createElement('option');
|
|
|
|
|
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Value ${i}`;
|
|
|
|
|
|
|
|
if (i % 2) {
|
|
|
|
option.selected = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.input.appendChild(option);
|
|
|
|
}
|
|
|
|
|
|
|
|
document.body.appendChild(this.input);
|
|
|
|
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
placeholderValue: 'Placeholder text',
|
|
|
|
choices: [{
|
|
|
|
value: 'One',
|
|
|
|
label: 'Label One',
|
|
|
|
selected: true,
|
|
|
|
disabled: false
|
|
|
|
}, {
|
|
|
|
value: 'Two',
|
|
|
|
label: 'Label Two',
|
|
|
|
disabled: true
|
|
|
|
}, {
|
|
|
|
value: 'Three',
|
|
|
|
label: 'Label Three'
|
|
|
|
}, ],
|
|
|
|
});
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should add any pre-defined values', function() {
|
|
|
|
expect(this.choices.currentState.items.length).toBeGreaterThan(1);
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should add options defined in the config + pre-defined options', function() {
|
|
|
|
expect(this.choices.currentState.choices.length).toEqual(6);
|
|
|
|
});
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should add a placeholder defined in the config to the search input', function() {
|
|
|
|
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
|
|
|
});
|
|
|
|
});
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
describe('should handle public methods on select input types', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.multiple = true;
|
|
|
|
this.input.placeholder = 'Placeholder text';
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
for (let i = 1; i < 10; i++) {
|
|
|
|
const option = document.createElement('option');
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Value ${i}`;
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
if (i % 2) {
|
|
|
|
option.selected = true;
|
|
|
|
}
|
2016-07-02 15:48:20 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.input.appendChild(option);
|
|
|
|
}
|
2016-07-11 16:27:58 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
this.choices = new Choices(this.input);
|
2016-07-02 14:04:38 +02:00
|
|
|
});
|
2016-07-15 00:21:28 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle highlightItem()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
|
|
|
const randomItem = items[Math.floor(Math.random() * items.length)];
|
2016-07-15 00:21:28 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.highlightItem(randomItem);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(randomItem.highlighted).toBe(true);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle unhighlightItem()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
|
|
|
const randomItem = items[Math.floor(Math.random() * items.length)];
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.unhighlightItem(randomItem);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(randomItem.highlighted).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle highlightAll()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.highlightAll();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const unhighlightedItems = items.some((item) => item.highlighted === false);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(unhighlightedItems).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle unhighlightAll()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.unhighlightAll();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const highlightedItems = items.some((item) => item.highlighted === true);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(highlightedItems).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle removeHighlightedItems()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
|
|
|
this.choices.highlightAll();
|
|
|
|
this.choices.removeHighlightedItems();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const activeItems = items.some((item) => item.active === true);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(activeItems).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle showDropdown()', function() {
|
|
|
|
this.choices.showDropdown();
|
|
|
|
const hasOpenState = this.choices.containerOuter.classList.contains(this.choices.config.classNames.openState);
|
|
|
|
const hasAttr = this.choices.containerOuter.getAttribute('aria-expanded') === 'true';
|
|
|
|
const hasActiveState = this.choices.dropdown.classList.contains(this.choices.config.classNames.activeState);
|
|
|
|
expect(hasOpenState && hasAttr && hasActiveState).toBe(true);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle hideDropdown()', function() {
|
|
|
|
this.choices.showDropdown();
|
|
|
|
this.choices.hideDropdown();
|
|
|
|
const hasOpenState = this.choices.containerOuter.classList.contains(this.choices.config.classNames.openState);
|
|
|
|
const hasAttr = this.choices.containerOuter.getAttribute('aria-expanded') === 'true';
|
|
|
|
const hasActiveState = this.choices.dropdown.classList.contains(this.choices.config.classNames.activeState);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(hasOpenState && hasAttr && hasActiveState).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle toggleDropdown()', function() {
|
|
|
|
spyOn(this.choices, 'hideDropdown');
|
|
|
|
this.choices.showDropdown();
|
|
|
|
this.choices.toggleDropdown();
|
|
|
|
expect(this.choices.hideDropdown).toHaveBeenCalled();
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle hideDropdown()', function() {
|
|
|
|
this.choices.showDropdown();
|
|
|
|
expect(this.choices.containerOuter.classList).toContain(this.choices.config.classNames.openState);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle getValue()', function() {
|
|
|
|
const valueObjects = this.choices.getValue();
|
|
|
|
const valueStrings = this.choices.getValue(true);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(valueStrings[0]).toEqual(jasmine.any(String));
|
|
|
|
expect(valueObjects[0]).toEqual(jasmine.any(Object));
|
|
|
|
expect(valueObjects).toEqual(jasmine.any(Array));
|
|
|
|
expect(valueObjects.length).toEqual(5);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle setValue()', function() {
|
|
|
|
this.choices.setValue(['Set value 1', 'Set value 2', 'Set value 3']);
|
|
|
|
const valueStrings = this.choices.getValue(true);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(valueStrings[valueStrings.length - 1]).toBe('Set value 3');
|
|
|
|
expect(valueStrings[valueStrings.length - 2]).toBe('Set value 2');
|
|
|
|
expect(valueStrings[valueStrings.length - 3]).toBe('Set value 1');
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle setValueByChoice()', function() {
|
|
|
|
const choices = this.choices.store.getChoicesFilteredByActive();
|
|
|
|
const randomChoice = choices[Math.floor(Math.random() * choices.length)];
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.highlightAll();
|
|
|
|
this.choices.removeHighlightedItems();
|
|
|
|
this.choices.setValueByChoice(randomChoice.value);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
const value = this.choices.getValue(true);
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(value[0]).toBe(randomChoice.value);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle setChoices()', function() {
|
|
|
|
this.choices.setChoices([{
|
|
|
|
label: 'Group one',
|
|
|
|
id: 1,
|
|
|
|
disabled: false,
|
|
|
|
choices: [{
|
|
|
|
value: 'Child One',
|
|
|
|
label: 'Child One',
|
|
|
|
selected: true
|
|
|
|
}, {
|
|
|
|
value: 'Child Two',
|
|
|
|
label: 'Child Two',
|
|
|
|
disabled: true
|
|
|
|
}, {
|
|
|
|
value: 'Child Three',
|
|
|
|
label: 'Child Three'
|
|
|
|
}, ]
|
|
|
|
}, {
|
|
|
|
label: 'Group two',
|
|
|
|
id: 2,
|
|
|
|
disabled: false,
|
|
|
|
choices: [{
|
|
|
|
value: 'Child Four',
|
|
|
|
label: 'Child Four',
|
|
|
|
disabled: true
|
|
|
|
}, {
|
|
|
|
value: 'Child Five',
|
|
|
|
label: 'Child Five'
|
|
|
|
}, {
|
|
|
|
value: 'Child Six',
|
|
|
|
label: 'Child Six'
|
|
|
|
}, ]
|
|
|
|
}], 'value', 'label');
|
|
|
|
|
|
|
|
|
|
|
|
const groups = this.choices.currentState.groups;
|
|
|
|
const choices = this.choices.currentState.choices;
|
|
|
|
|
|
|
|
expect(groups[groups.length - 1].value).toEqual('Group two');
|
|
|
|
expect(groups[groups.length - 2].value).toEqual('Group one');
|
|
|
|
expect(choices[choices.length - 1].value).toEqual('Child Six');
|
|
|
|
expect(choices[choices.length - 2].value).toEqual('Child Five');
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-12-29 08:06:35 +01:00
|
|
|
it('should handle setChoices() with blank values', function() {
|
|
|
|
this.choices.setChoices([{
|
|
|
|
label: 'Choice one',
|
|
|
|
value: 'one'
|
|
|
|
}, {
|
|
|
|
label: 'Choice two',
|
|
|
|
value: ''
|
|
|
|
}], 'value', 'label', true);
|
|
|
|
|
|
|
|
|
|
|
|
const choices = this.choices.currentState.choices;
|
|
|
|
expect(choices[0].value).toEqual('one');
|
|
|
|
expect(choices[1].value).toEqual('');
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle clearStore()', function() {
|
|
|
|
this.choices.clearStore();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.currentState.items).toEqual([]);
|
|
|
|
expect(this.choices.currentState.choices).toEqual([]);
|
|
|
|
expect(this.choices.currentState.groups).toEqual([]);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle disable()', function() {
|
|
|
|
this.choices.disable();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.input.disabled).toBe(true);
|
|
|
|
expect(this.choices.containerOuter.classList.contains(this.choices.config.classNames.disabledState)).toBe(true);
|
|
|
|
expect(this.choices.containerOuter.getAttribute('aria-disabled')).toBe('true');
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle enable()', function() {
|
|
|
|
this.choices.enable();
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.input.disabled).toBe(false);
|
|
|
|
expect(this.choices.containerOuter.classList.contains(this.choices.config.classNames.disabledState)).toBe(false);
|
|
|
|
expect(this.choices.containerOuter.hasAttribute('aria-disabled')).toBe(false);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle ajax()', function() {
|
|
|
|
spyOn(this.choices, 'ajax');
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.ajax((callback) => {
|
|
|
|
fetch('https://restcountries.eu/rest/v1/all')
|
|
|
|
.then((response) => {
|
|
|
|
response.json().then((data) => {
|
|
|
|
callback(data, 'alpha2Code', 'name');
|
2016-07-15 00:21:28 +02:00
|
|
|
});
|
2016-09-05 23:31:20 +02:00
|
|
|
})
|
|
|
|
.catch((error) => {
|
|
|
|
console.log(error);
|
|
|
|
});
|
|
|
|
});
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
expect(this.choices.ajax).toHaveBeenCalledWith(jasmine.any(Function));
|
2016-08-03 22:51:24 +02:00
|
|
|
});
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2017-04-04 12:58:16 +02:00
|
|
|
describe('should handle public methods on select-one input types', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.placeholder = 'Placeholder text';
|
|
|
|
|
|
|
|
for (let i = 1; i < 10; i++) {
|
|
|
|
const option = document.createElement('option');
|
|
|
|
|
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Value ${i}`;
|
|
|
|
|
|
|
|
if (i % 2) {
|
|
|
|
option.selected = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.input.appendChild(option);
|
|
|
|
}
|
|
|
|
|
|
|
|
document.body.appendChild(this.input);
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
});
|
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2017-04-04 12:58:16 +02:00
|
|
|
it('should handle disable()', function() {
|
|
|
|
this.choices.disable();
|
|
|
|
|
|
|
|
expect(this.choices.containerOuter.getAttribute('tabindex')).toBe('-1');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should handle enable()', function() {
|
|
|
|
this.choices.enable();
|
|
|
|
|
|
|
|
expect(this.choices.containerOuter.getAttribute('tabindex')).toBe('0');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
describe('should handle public methods on text input types', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('input');
|
2017-01-01 16:32:09 +01:00
|
|
|
this.input.type = 'text';
|
2016-09-05 23:31:20 +02:00
|
|
|
this.input.className = 'js-choices';
|
2017-01-01 16:32:09 +01:00
|
|
|
this.input.value = 'Value 1, Value 2, Value 3, Value 4';
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
});
|
2016-08-03 22:51:24 +02:00
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle clearInput()', function() {
|
|
|
|
this.choices.clearInput();
|
|
|
|
expect(this.choices.input.value).toBe('');
|
|
|
|
});
|
2016-08-18 18:25:14 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
it('should handle removeItemsByValue()', function() {
|
|
|
|
const items = this.choices.currentState.items;
|
|
|
|
const randomItem = items[Math.floor(Math.random() * items.length)];
|
2016-07-15 00:21:28 +02:00
|
|
|
|
2016-09-05 23:31:20 +02:00
|
|
|
this.choices.removeItemsByValue(randomItem.value);
|
|
|
|
expect(randomItem.active).toBe(false);
|
2016-07-15 00:21:28 +02:00
|
|
|
});
|
2016-09-05 23:31:20 +02:00
|
|
|
});
|
2017-02-21 21:47:12 +01:00
|
|
|
|
|
|
|
describe('should react to config options', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.setAttribute('multiple', '');
|
|
|
|
|
|
|
|
for (let i = 1; i < 4; i++) {
|
|
|
|
const option = document.createElement('option');
|
|
|
|
|
|
|
|
option.value = `Value ${i}`;
|
|
|
|
option.innerHTML = `Value ${i}`;
|
|
|
|
|
|
|
|
if (i % 2) {
|
|
|
|
option.selected = true;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.input.appendChild(option);
|
|
|
|
}
|
|
|
|
|
|
|
|
document.body.appendChild(this.input);
|
|
|
|
});
|
|
|
|
|
2017-06-28 11:11:02 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
|
|
|
|
2017-02-21 21:47:12 +01:00
|
|
|
it('should flip the dropdown', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
position: 'top'
|
|
|
|
});
|
|
|
|
|
|
|
|
const container = this.choices.containerOuter;
|
|
|
|
this.choices.input.focus();
|
|
|
|
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shouldn\'t flip the dropdown', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
position: 'bottom'
|
|
|
|
});
|
|
|
|
|
|
|
|
const container = this.choices.containerOuter;
|
|
|
|
this.choices.input.focus();
|
|
|
|
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
|
|
|
|
});
|
2017-07-12 12:21:35 +02:00
|
|
|
|
|
|
|
it('should render selected choices', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
renderSelectedChoices: 'always'
|
|
|
|
});
|
|
|
|
const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
|
|
|
|
expect(renderedChoices.length).toEqual(3);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shouldn\'t render selected choices', function() {
|
|
|
|
this.choices = new Choices(this.input, {
|
|
|
|
renderSelectedChoices: 'auto'
|
|
|
|
});
|
|
|
|
const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
|
|
|
|
expect(renderedChoices.length).toEqual(1);
|
|
|
|
});
|
2017-02-21 21:47:12 +01:00
|
|
|
});
|
2017-06-28 11:11:02 +02:00
|
|
|
|
|
|
|
describe('should allow custom properties provided by the user on items or choices', function() {
|
2017-06-29 09:40:56 +02:00
|
|
|
it('should allow the user to supply custom properties for an item', function() {
|
|
|
|
const randomItem = {
|
|
|
|
id: 8999,
|
|
|
|
choiceId: 9000,
|
|
|
|
groupId: 9001,
|
|
|
|
value: 'value',
|
|
|
|
label: 'label',
|
|
|
|
customProperties: {
|
|
|
|
foo: 'bar'
|
2017-07-19 19:48:46 +02:00
|
|
|
},
|
|
|
|
keyCode: null
|
2017-07-11 19:34:37 +02:00
|
|
|
};
|
2017-06-28 11:11:02 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
const expectedState = [{
|
|
|
|
id: randomItem.id,
|
|
|
|
choiceId: randomItem.choiceId,
|
|
|
|
groupId: randomItem.groupId,
|
|
|
|
value: randomItem.value,
|
|
|
|
label: randomItem.label,
|
|
|
|
active: true,
|
|
|
|
highlighted: false,
|
2017-07-19 19:48:46 +02:00
|
|
|
customProperties: randomItem.customProperties,
|
|
|
|
keyCode: randomItem.keyCode
|
2017-06-29 09:40:56 +02:00
|
|
|
}];
|
|
|
|
|
|
|
|
const action = addItemAction(
|
|
|
|
randomItem.value,
|
|
|
|
randomItem.label,
|
|
|
|
randomItem.id,
|
|
|
|
randomItem.choiceId,
|
|
|
|
randomItem.groupId,
|
2017-07-19 19:48:46 +02:00
|
|
|
randomItem.customProperties,
|
|
|
|
randomItem.keyCode
|
2017-06-29 09:40:56 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
expect(itemReducer([], action)).toEqual(expectedState);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should allow the user to supply custom properties for a choice', function() {
|
|
|
|
const randomChoice = {
|
|
|
|
id: 123,
|
|
|
|
elementId: 321,
|
|
|
|
groupId: 213,
|
|
|
|
value: 'value',
|
|
|
|
label: 'label',
|
|
|
|
disabled: false,
|
|
|
|
customProperties: {
|
|
|
|
foo: 'bar'
|
2017-07-19 19:48:46 +02:00
|
|
|
},
|
|
|
|
keyCode: null
|
2017-07-11 19:34:37 +02:00
|
|
|
};
|
2017-06-28 11:11:02 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
const expectedState = [{
|
|
|
|
id: randomChoice.id,
|
|
|
|
elementId: randomChoice.elementId,
|
|
|
|
groupId: randomChoice.groupId,
|
|
|
|
value: randomChoice.value,
|
|
|
|
label: randomChoice.label,
|
|
|
|
disabled: randomChoice.disabled,
|
|
|
|
selected: false,
|
|
|
|
active: true,
|
|
|
|
score: 9999,
|
2017-07-19 19:48:46 +02:00
|
|
|
customProperties: randomChoice.customProperties,
|
|
|
|
keyCode: randomChoice.keyCode
|
2017-06-29 09:40:56 +02:00
|
|
|
}];
|
|
|
|
|
|
|
|
const action = addChoiceAction(
|
|
|
|
randomChoice.value,
|
|
|
|
randomChoice.label,
|
|
|
|
randomChoice.id,
|
|
|
|
randomChoice.groupId,
|
|
|
|
randomChoice.disabled,
|
|
|
|
randomChoice.elementId,
|
2017-07-19 19:48:46 +02:00
|
|
|
randomChoice.customProperties,
|
|
|
|
randomChoice.keyCode
|
2017-06-29 09:40:56 +02:00
|
|
|
);
|
|
|
|
|
|
|
|
expect(choiceReducer([], action)).toEqual(expectedState);
|
2017-06-28 11:11:02 +02:00
|
|
|
});
|
2017-06-29 09:40:56 +02:00
|
|
|
});
|
2017-06-28 11:11:02 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
describe('should allow custom properties provided by the user on items or choices', function() {
|
|
|
|
beforeEach(function() {
|
|
|
|
this.input = document.createElement('select');
|
|
|
|
this.input.className = 'js-choices';
|
|
|
|
this.input.setAttribute('multiple', '');
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
document.body.appendChild(this.input);
|
|
|
|
});
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
afterEach(function() {
|
|
|
|
this.choices.destroy();
|
|
|
|
});
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
it('should allow the user to supply custom properties for a choice that will be inherited by the item when the user selects the choice', function() {
|
|
|
|
const expectedCustomProperties = {
|
|
|
|
isBestOptionEver: true
|
|
|
|
};
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
this.choices.setChoices([{
|
|
|
|
value: '42',
|
|
|
|
label: 'My awesome choice',
|
|
|
|
selected: false,
|
|
|
|
disabled: false,
|
|
|
|
customProperties: expectedCustomProperties
|
|
|
|
}], 'value', 'label', true);
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
this.choices.setValueByChoice('42');
|
|
|
|
const selectedItems = this.choices.getValue();
|
2017-06-28 11:58:41 +02:00
|
|
|
|
2017-06-29 09:40:56 +02:00
|
|
|
expect(selectedItems.length).toBe(1);
|
|
|
|
expect(selectedItems[0].customProperties).toBe(expectedCustomProperties);
|
2017-06-28 11:58:41 +02:00
|
|
|
});
|
2017-06-30 15:45:47 +02:00
|
|
|
|
|
|
|
it('should allow the user to supply custom properties when directly creating a selected item', function() {
|
|
|
|
const expectedCustomProperties = {
|
|
|
|
isBestOptionEver: true
|
|
|
|
};
|
|
|
|
|
|
|
|
this.choices = new Choices(this.input);
|
|
|
|
|
|
|
|
this.choices.setValue([{
|
2017-07-11 07:36:10 +02:00
|
|
|
value: 'bar',
|
|
|
|
label: 'foo',
|
|
|
|
customProperties: expectedCustomProperties
|
2017-06-30 15:45:47 +02:00
|
|
|
}]);
|
|
|
|
const selectedItems = this.choices.getValue();
|
|
|
|
|
|
|
|
expect(selectedItems.length).toBe(1);
|
|
|
|
expect(selectedItems[0].customProperties).toBe(expectedCustomProperties);
|
|
|
|
});
|
2017-06-29 09:40:56 +02:00
|
|
|
});
|
2016-09-29 14:13:17 +02:00
|
|
|
});
|