mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-29 03:52:20 +02:00
Further single select box tests
This commit is contained in:
parent
db5d91517a
commit
87ca00ee66
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -1,10 +1,11 @@
|
||||||
export const addItem = (value, label, id, choiceId) => {
|
export const addItem = (value, label, id, choiceId, activateOptions) => {
|
||||||
return {
|
return {
|
||||||
type: 'ADD_ITEM',
|
type: 'ADD_ITEM',
|
||||||
value,
|
value,
|
||||||
label,
|
label,
|
||||||
id,
|
id,
|
||||||
choiceId,
|
choiceId,
|
||||||
|
activateOptions,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -69,7 +69,7 @@ export class Choices {
|
||||||
callbackOnInit: () => {},
|
callbackOnInit: () => {},
|
||||||
callbackOnAddItem: (id, value, passedInput) => {},
|
callbackOnAddItem: (id, value, passedInput) => {},
|
||||||
callbackOnRemoveItem: (id, value, passedInput) => {},
|
callbackOnRemoveItem: (id, value, passedInput) => {},
|
||||||
callbackOnRender: () => {},
|
callbackOnRender: (state) => {},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Merge options with user options
|
// Merge options with user options
|
||||||
|
@ -431,7 +431,6 @@ export class Choices {
|
||||||
|
|
||||||
if(results && results.length) {
|
if(results && results.length) {
|
||||||
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
this.containerOuter.classList.remove(this.config.classNames.loadingState);
|
||||||
// this.input.placeholder = "";
|
|
||||||
results.forEach((result, index) => {
|
results.forEach((result, index) => {
|
||||||
// Select first choice in list if single select input
|
// Select first choice in list if single select input
|
||||||
if(index === 0 && this.passedElement.type === 'select-one') {
|
if(index === 0 && this.passedElement.type === 'select-one') {
|
||||||
|
@ -654,7 +653,7 @@ export class Choices {
|
||||||
*/
|
*/
|
||||||
_onKeyUp(e) {
|
_onKeyUp(e) {
|
||||||
if(e.target !== this.input) return;
|
if(e.target !== this.input) return;
|
||||||
const keyString = String.fromCharCode(event.keyCode);
|
const keyString = String.fromCharCode(e.keyCode);
|
||||||
|
|
||||||
// We are typing into a text input and have a value, we want to show a dropdown
|
// We are typing into a text input and have a value, we want to show a dropdown
|
||||||
// notice. Otherwise hide the dropdown
|
// notice. Otherwise hide the dropdown
|
||||||
|
@ -695,7 +694,7 @@ export class Choices {
|
||||||
const hasUnactiveChoices = choices.some((option) => option.active !== true);
|
const hasUnactiveChoices = choices.some((option) => option.active !== true);
|
||||||
|
|
||||||
// Check that we have a value to search and the input was an alphanumeric character
|
// Check that we have a value to search and the input was an alphanumeric character
|
||||||
if(this.input.value && choices.length && /[\b\a-zA-Z0-9-_ ]/.test(keyString)) {
|
if(this.input.value && this.input.value.length > 1) {
|
||||||
const handleFilter = () => {
|
const handleFilter = () => {
|
||||||
const newValue = this.input.value.trim();
|
const newValue = this.input.value.trim();
|
||||||
const currentValue = this.currentValue.trim();
|
const currentValue = this.currentValue.trim();
|
||||||
|
@ -1005,11 +1004,11 @@ export class Choices {
|
||||||
* @return {Object} Class instance
|
* @return {Object} Class instance
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
_addItem(value, label, choiceId = -1, callback = this.config.callbackOnAddItem) {
|
_addItem(value, label, choiceId = -1) {
|
||||||
const items = this.store.getItems();
|
const items = this.store.getItems();
|
||||||
let passedValue = value.trim();
|
let passedValue = value.trim();
|
||||||
let passedLabel = label || passedValue;
|
let passedLabel = label || passedValue;
|
||||||
let passedOptionId = choiceId || -1;
|
let passedOptionId = parseInt(choiceId) || -1;
|
||||||
|
|
||||||
// If a prepended value has been passed, prepend it
|
// If a prepended value has been passed, prepend it
|
||||||
if(this.config.prependValue) {
|
if(this.config.prependValue) {
|
||||||
|
@ -1031,7 +1030,8 @@ export class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Run callback if it is a function
|
// Run callback if it is a function
|
||||||
if(callback){
|
if(this.config.callbackOnAddItem){
|
||||||
|
const callback = this.config.callbackOnAddItem;
|
||||||
if(isType('Function', callback)) {
|
if(isType('Function', callback)) {
|
||||||
callback(id, passedValue, this.passedElement);
|
callback(id, passedValue, this.passedElement);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1411,7 +1411,7 @@ export class Choices {
|
||||||
choiceListFragment = this.renderChoices(activeChoices, choiceListFragment);
|
choiceListFragment = this.renderChoices(activeChoices, choiceListFragment);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(choiceListFragment.children && choiceListFragment.children.length) {
|
if(choiceListFragment.childNodes) {
|
||||||
// If we actually have anything to add to our dropdown
|
// If we actually have anything to add to our dropdown
|
||||||
// append it and highlight the first choice
|
// append it and highlight the first choice
|
||||||
this.choiceList.appendChild(choiceListFragment);
|
this.choiceList.appendChild(choiceListFragment);
|
||||||
|
@ -1444,7 +1444,7 @@ export class Choices {
|
||||||
|
|
||||||
if(this.config.callbackOnRender){
|
if(this.config.callbackOnRender){
|
||||||
if(isType('Function', this.config.callbackOnRender)) {
|
if(isType('Function', this.config.callbackOnRender)) {
|
||||||
this.config.callbackOnRender();
|
this.config.callbackOnRender(this.currentState);
|
||||||
} else {
|
} else {
|
||||||
console.error('callbackOnRender: Callback is not a function');
|
console.error('callbackOnRender: Callback is not a function');
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,78 +1,82 @@
|
||||||
// Production steps of ECMA-262, Edition 6, 22.1.2.1
|
// Production steps of ECMA-262, Edition 6, 22.1.2.1
|
||||||
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
|
// Reference: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
|
||||||
if (!Array.from) {
|
if (!Array.from) {
|
||||||
Array.from = (function () {
|
Array.from = (function () {
|
||||||
var toStr = Object.prototype.toString;
|
var toStr = Object.prototype.toString;
|
||||||
var isCallable = function (fn) {
|
|
||||||
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
|
|
||||||
};
|
|
||||||
var toInteger = function (value) {
|
|
||||||
var number = Number(value);
|
|
||||||
if (isNaN(number)) { return 0; }
|
|
||||||
if (number === 0 || !isFinite(number)) { return number; }
|
|
||||||
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
|
||||||
};
|
|
||||||
var maxSafeInteger = Math.pow(2, 53) - 1;
|
|
||||||
var toLength = function (value) {
|
|
||||||
var len = toInteger(value);
|
|
||||||
return Math.min(Math.max(len, 0), maxSafeInteger);
|
|
||||||
};
|
|
||||||
|
|
||||||
// The length property of the from method is 1.
|
var isCallable = function (fn) {
|
||||||
return function from(arrayLike/*, mapFn, thisArg */) {
|
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
|
||||||
// 1. Let C be the this value.
|
};
|
||||||
var C = this;
|
|
||||||
|
|
||||||
// 2. Let items be ToObject(arrayLike).
|
var toInteger = function (value) {
|
||||||
var items = Object(arrayLike);
|
var number = Number(value);
|
||||||
|
if (isNaN(number)) { return 0; }
|
||||||
|
if (number === 0 || !isFinite(number)) { return number; }
|
||||||
|
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
|
||||||
|
};
|
||||||
|
|
||||||
// 3. ReturnIfAbrupt(items).
|
var maxSafeInteger = Math.pow(2, 53) - 1;
|
||||||
if (arrayLike == null) {
|
|
||||||
throw new TypeError("Array.from requires an array-like object - not null or undefined");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 4. If mapfn is undefined, then let mapping be false.
|
var toLength = function (value) {
|
||||||
var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
|
var len = toInteger(value);
|
||||||
var T;
|
return Math.min(Math.max(len, 0), maxSafeInteger);
|
||||||
if (typeof mapFn !== 'undefined') {
|
};
|
||||||
// 5. else
|
|
||||||
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
|
||||||
if (!isCallable(mapFn)) {
|
|
||||||
throw new TypeError('Array.from: when provided, the second argument must be a function');
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
// The length property of the from method is 1.
|
||||||
if (arguments.length > 2) {
|
return function from(arrayLike/*, mapFn, thisArg */) {
|
||||||
T = arguments[2];
|
// 1. Let C be the this value.
|
||||||
}
|
var C = this;
|
||||||
}
|
|
||||||
|
|
||||||
// 10. Let lenValue be Get(items, "length").
|
// 2. Let items be ToObject(arrayLike).
|
||||||
// 11. Let len be ToLength(lenValue).
|
var items = Object(arrayLike);
|
||||||
var len = toLength(items.length);
|
|
||||||
|
|
||||||
// 13. If IsConstructor(C) is true, then
|
// 3. ReturnIfAbrupt(items).
|
||||||
// 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
|
if (arrayLike == null) {
|
||||||
// 14. a. Else, Let A be ArrayCreate(len).
|
throw new TypeError("Array.from requires an array-like object - not null or undefined");
|
||||||
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
|
}
|
||||||
|
|
||||||
// 16. Let k be 0.
|
// 4. If mapfn is undefined, then let mapping be false.
|
||||||
var k = 0;
|
var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
|
||||||
// 17. Repeat, while k < len… (also steps a - h)
|
var T;
|
||||||
var kValue;
|
if (typeof mapFn !== 'undefined') {
|
||||||
while (k < len) {
|
// 5. else
|
||||||
kValue = items[k];
|
// 5. a If IsCallable(mapfn) is false, throw a TypeError exception.
|
||||||
if (mapFn) {
|
if (!isCallable(mapFn)) {
|
||||||
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
|
throw new TypeError('Array.from: when provided, the second argument must be a function');
|
||||||
} else {
|
}
|
||||||
A[k] = kValue;
|
|
||||||
}
|
// 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.
|
||||||
k += 1;
|
if (arguments.length > 2) {
|
||||||
}
|
T = arguments[2];
|
||||||
// 18. Let putStatus be Put(A, "length", len, true).
|
}
|
||||||
A.length = len;
|
}
|
||||||
// 20. Return A.
|
|
||||||
return A;
|
// 10. Let lenValue be Get(items, "length").
|
||||||
};
|
// 11. Let len be ToLength(lenValue).
|
||||||
}());
|
var len = toLength(items.length);
|
||||||
|
|
||||||
|
// 13. If IsConstructor(C) is true, then
|
||||||
|
// 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.
|
||||||
|
// 14. a. Else, Let A be ArrayCreate(len).
|
||||||
|
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
|
||||||
|
|
||||||
|
// 16. Let k be 0.
|
||||||
|
var k = 0;
|
||||||
|
// 17. Repeat, while k < len… (also steps a - h)
|
||||||
|
var kValue;
|
||||||
|
while (k < len) {
|
||||||
|
kValue = items[k];
|
||||||
|
if (mapFn) {
|
||||||
|
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
|
||||||
|
} else {
|
||||||
|
A[k] = kValue;
|
||||||
|
}
|
||||||
|
k += 1;
|
||||||
|
}
|
||||||
|
// 18. Let putStatus be Put(A, "length", len, true).
|
||||||
|
A.length = len;
|
||||||
|
// 20. Return A.
|
||||||
|
return A;
|
||||||
|
};
|
||||||
|
}());
|
||||||
}
|
}
|
|
@ -15,19 +15,28 @@ const choices = (state = [], action) => {
|
||||||
}].sort(sortByAlpha);
|
}].sort(sortByAlpha);
|
||||||
|
|
||||||
case 'ADD_ITEM':
|
case 'ADD_ITEM':
|
||||||
|
let newState = state;
|
||||||
|
|
||||||
|
// If all choices need to be activated
|
||||||
|
if(action.activateOptions) {
|
||||||
|
newState = state.map((choice) => {
|
||||||
|
choice.active = action.active;
|
||||||
|
return choice;
|
||||||
|
}).sort(sortByAlpha);
|
||||||
|
}
|
||||||
// When an item is added and it has an associated choice,
|
// When an item is added and it has an associated choice,
|
||||||
// we want to disable it so it can't be chosen again
|
// we want to disable it so it can't be chosen again
|
||||||
if(action.choiceId > -1) {
|
if(action.choiceId > -1) {
|
||||||
return state.map((choice) => {
|
newState = state.map((choice) => {
|
||||||
if(choice.id === parseInt(action.choiceId)) {
|
if(choice.id === parseInt(action.choiceId)) {
|
||||||
choice.selected = true;
|
choice.selected = true;
|
||||||
}
|
}
|
||||||
return choice;
|
return choice;
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
return state;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return newState;
|
||||||
|
|
||||||
case 'REMOVE_ITEM':
|
case 'REMOVE_ITEM':
|
||||||
// When an item is removed and it has an associated choice,
|
// When an item is removed and it has an associated choice,
|
||||||
// we want to re-enable it so it can be chosen again
|
// we want to re-enable it so it can be chosen again
|
||||||
|
|
|
@ -177,7 +177,8 @@
|
||||||
|
|
||||||
const choices10 = new Choices('#choices-10', {
|
const choices10 = new Choices('#choices-10', {
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Pick an Strokes record'
|
placeholderValue: 'Pick an Strokes record',
|
||||||
|
callbackOnRender: (state) => console.log(state)
|
||||||
}).ajax((callback) => {
|
}).ajax((callback) => {
|
||||||
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
|
|
@ -127,10 +127,81 @@ describe('Choices', function() {
|
||||||
this.input.multiple = false;
|
this.input.multiple = false;
|
||||||
this.input.placeholder = 'Placeholder text';
|
this.input.placeholder = 'Placeholder text';
|
||||||
|
|
||||||
|
for (let i = 1; i < 4; i++) {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
|
||||||
|
option.value = `Value ${i}`;
|
||||||
|
option.innerHTML = `Value ${i}`;
|
||||||
|
|
||||||
|
this.input.appendChild(option);
|
||||||
|
}
|
||||||
|
|
||||||
document.body.appendChild(this.input);
|
document.body.appendChild(this.input);
|
||||||
|
|
||||||
this.choices = new Choices(this.input);
|
this.choices = new Choices(this.input);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should open the choice list on focussing', function() {
|
||||||
|
this.choices.input.focus();
|
||||||
|
expect(this.choices.dropdown.classList).toContain('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should select the first choice', function() {
|
||||||
|
expect(this.choices.currentState.items[0].value).toContain('Value 1');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should highlight the choices on keydown', function() {
|
||||||
|
this.choices.input.focus();
|
||||||
|
|
||||||
|
for (var i = 0; i < 2; i++) {
|
||||||
|
// Key down to third choice
|
||||||
|
this.choices._onKeyDown({
|
||||||
|
target: this.choices.input,
|
||||||
|
keyCode: 40,
|
||||||
|
ctrlKey: false,
|
||||||
|
preventDefault: () => {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
expect(this.choices.highlightPosition).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should select choice on enter key press', function() {
|
||||||
|
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,
|
||||||
|
ctrlKey: false
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(this.choices.currentState.items.length).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should filter choices when searching', function() {
|
||||||
|
this.choices.input.focus();
|
||||||
|
this.choices.input.value = 'Value 3';
|
||||||
|
|
||||||
|
// Key down to search
|
||||||
|
this.choices._onKeyUp({
|
||||||
|
target: this.choices.input,
|
||||||
|
keyCode: 13,
|
||||||
|
ctrlKey: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const mostAccurateResult = this.choices.currentState.choices[0];
|
||||||
|
|
||||||
|
expect(this.choices.isSearching && mostAccurateResult.value === 'Value 3').toBeTruthy;
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('should handle multiple select inputs', function() {
|
describe('should handle multiple select inputs', function() {
|
||||||
|
@ -139,7 +210,7 @@ describe('Choices', function() {
|
||||||
this.input.className = 'js-choices';
|
this.input.className = 'js-choices';
|
||||||
this.input.multiple = true;
|
this.input.multiple = true;
|
||||||
|
|
||||||
for (var i = 1; i < 4; i++) {
|
for (let i = 1; i < 4; i++) {
|
||||||
const option = document.createElement('option');
|
const option = document.createElement('option');
|
||||||
|
|
||||||
option.value = `Value ${i}`;
|
option.value = `Value ${i}`;
|
||||||
|
|
Loading…
Reference in a new issue