mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 22:46:33 +02:00
Tests
This commit is contained in:
parent
9b62089e1c
commit
712c8cf801
4
.travis.yaml
Normal file
4
.travis.yaml
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- "0.10"
|
||||||
|
script: npm run js:test
|
|
@ -1,4 +1,4 @@
|
||||||
# Choices.js - beta
|
# Choices.js
|
||||||
A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
|
A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
|
||||||
|
|
||||||
Coming soon.
|
Coming soon.
|
||||||
|
@ -28,7 +28,7 @@ Coming soon.
|
||||||
duplicateItems: true,
|
duplicateItems: true,
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
searchOptions: true,
|
search: true,
|
||||||
regexFilter: null,
|
regexFilter: null,
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
|
|
2
assets/scripts/dist/choices.min.js
vendored
2
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -33,7 +33,7 @@ export class Choices {
|
||||||
duplicateItems: true,
|
duplicateItems: true,
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
paste: true,
|
paste: true,
|
||||||
searchOptions: true,
|
search: true,
|
||||||
regexFilter: null,
|
regexFilter: null,
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: null,
|
placeholderValue: null,
|
||||||
|
@ -87,7 +87,7 @@ export class Choices {
|
||||||
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.searchOptions;
|
this.canSearch = this.config.search;
|
||||||
|
|
||||||
// Assign preset items from passed object first
|
// Assign preset items from passed object first
|
||||||
this.presetItems = this.config.items;
|
this.presetItems = this.config.items;
|
||||||
|
@ -548,14 +548,14 @@ export class Choices {
|
||||||
const hasFocusedInput = this.input === document.activeElement;
|
const hasFocusedInput = this.input === document.activeElement;
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||||
const hasItems = this.itemList && this.itemList.children;
|
const hasItems = this.itemList && this.itemList.children;
|
||||||
const keyString = String.fromCharCode(event.keyCode);
|
const keyString = String.fromCharCode(e.keyCode);
|
||||||
|
|
||||||
// If a user is typing and the dropdown is not active
|
// If a user is typing and the dropdown is not active
|
||||||
if(this.passedElement.type !== 'text' && /[a-zA-Z0-9-_ ]/.test(keyString) && !hasActiveDropdown) {
|
if(this.passedElement.type !== 'text' && /[a-zA-Z0-9-_ ]/.test(keyString) && !hasActiveDropdown) {
|
||||||
this.showDropdown();
|
this.showDropdown();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.canSearch = this.config.searchOptions;
|
this.canSearch = this.config.search;
|
||||||
|
|
||||||
switch (e.keyCode) {
|
switch (e.keyCode) {
|
||||||
case aKey:
|
case aKey:
|
||||||
|
@ -1243,17 +1243,16 @@ export class Choices {
|
||||||
|
|
||||||
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||||
containerInner.appendChild(input);
|
containerInner.appendChild(input);
|
||||||
} else if(this.config.searchOptions) {
|
} else if(this.config.search) {
|
||||||
dropdown.insertBefore(input, dropdown.firstChild);
|
dropdown.insertBefore(input, dropdown.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
|
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
|
||||||
this.highlightPosition = 0;
|
|
||||||
|
|
||||||
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
||||||
|
|
||||||
|
this.highlightPosition = 0;
|
||||||
this.isSearching = false;
|
this.isSearching = false;
|
||||||
|
|
||||||
if(passedGroups && passedGroups.length) {
|
if(passedGroups && passedGroups.length) {
|
||||||
passedGroups.forEach((group, index) => {
|
passedGroups.forEach((group, index) => {
|
||||||
const isFirst = index === 0 ? true : false;
|
const isFirst = index === 0 ? true : false;
|
||||||
|
@ -1266,7 +1265,6 @@ export class Choices {
|
||||||
this._addChoice(option.selected, isDisabled, option.value, option.innerHTML);
|
this._addChoice(option.selected, isDisabled, option.value, option.innerHTML);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if(this.passedElement.type === 'text') {
|
} else if(this.passedElement.type === 'text') {
|
||||||
// Add any preset values seperated by delimiter
|
// Add any preset values seperated by delimiter
|
||||||
this.presetItems.forEach((item) => {
|
this.presetItems.forEach((item) => {
|
||||||
|
@ -1443,9 +1441,9 @@ export class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(callback = this.config.callbackOnRender){
|
if(this.config.callbackOnRender){
|
||||||
if(isType('Function', callback)) {
|
if(isType('Function', this.config.callbackOnRender)) {
|
||||||
callback();
|
this.config.callbackOnRender();
|
||||||
} else {
|
} else {
|
||||||
console.error('callbackOnRender: Callback is not a function');
|
console.error('callbackOnRender: Callback is not a function');
|
||||||
}
|
}
|
||||||
|
|
|
@ -172,8 +172,8 @@
|
||||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||||
});
|
});
|
||||||
|
|
||||||
const choices7 = new Choices('#choices-7', { Search: false }).setValue(['Set value 1', 'Set value 2']);
|
const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
|
||||||
|
|
||||||
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'
|
||||||
|
|
|
@ -35,6 +35,13 @@
|
||||||
"csso": "^1.7.0",
|
"csso": "^1.7.0",
|
||||||
"eslint": "^2.4.0",
|
"eslint": "^2.4.0",
|
||||||
"fuse.js": "^2.2.0",
|
"fuse.js": "^2.2.0",
|
||||||
|
"jasmine-core": "^2.4.1",
|
||||||
|
"karma": "^1.1.0",
|
||||||
|
"karma-chrome-launcher": "^1.0.1",
|
||||||
|
"karma-coverage": "^1.0.0",
|
||||||
|
"karma-jasmine": "^1.0.2",
|
||||||
|
"karma-spec-reporter": "0.0.26",
|
||||||
|
"karma-webpack": "^1.7.0",
|
||||||
"node-sass": "^3.4.2",
|
"node-sass": "^3.4.2",
|
||||||
"nodemon": "^1.9.1",
|
"nodemon": "^1.9.1",
|
||||||
"opn-cli": "^3.1.0",
|
"opn-cli": "^3.1.0",
|
||||||
|
|
37
tests/karma.config.js
Normal file
37
tests/karma.config.js
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
var webpack = require('karma-webpack');
|
||||||
|
|
||||||
|
module.exports = function(config) {
|
||||||
|
config.set({
|
||||||
|
frameworks: ['jasmine'],
|
||||||
|
files: [
|
||||||
|
'../tests/**/*_spec.js',
|
||||||
|
],
|
||||||
|
plugins: [webpack, 'karma-jasmine', 'karma-chrome-launcher', 'karma-coverage', 'karma-spec-reporter'],
|
||||||
|
browsers: ['Chrome'],
|
||||||
|
preprocessors: {
|
||||||
|
'**/*_spec.js': ['webpack'],
|
||||||
|
'src/**/*.js': ['webpack']
|
||||||
|
},
|
||||||
|
reporters: ['spec', 'coverage'],
|
||||||
|
coverageReporter: {
|
||||||
|
dir: '../tests/reports/coverage',
|
||||||
|
reporters: [{
|
||||||
|
type: 'html',
|
||||||
|
subdir: 'report-html'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
webpack: {
|
||||||
|
module: {
|
||||||
|
loaders: [{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
exclude: /(bower_components|node_modules)/,
|
||||||
|
loader: 'babel-loader'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors: true,
|
||||||
|
webpackMiddleware: {
|
||||||
|
noInfo: true
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
102
tests/spec/choices_spec.js
Normal file
102
tests/spec/choices_spec.js
Normal file
|
@ -0,0 +1,102 @@
|
||||||
|
import Choices from '../../assets/scripts/src/choices.js';
|
||||||
|
|
||||||
|
describe('Choices', function() {
|
||||||
|
|
||||||
|
beforeEach(function() {
|
||||||
|
this.input = document.createElement('input');
|
||||||
|
this.input.type = "text";
|
||||||
|
this.input.className = 'js-choices';
|
||||||
|
|
||||||
|
document.body.appendChild(this.input);
|
||||||
|
|
||||||
|
this.choices = new Choices(this.input);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(function() {
|
||||||
|
this.choices.destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('should initialize Choices', function() {
|
||||||
|
|
||||||
|
it('should be defined', function() {
|
||||||
|
expect(this.choices).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have initalised', function() {
|
||||||
|
expect(this.choices.initialised).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should have a blank state', function() {
|
||||||
|
const blankState = {
|
||||||
|
items: [],
|
||||||
|
groups: [],
|
||||||
|
choices: [],
|
||||||
|
};
|
||||||
|
expect(this.choices.currentState).toEqual(blankState);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should expose public methods', function(){
|
||||||
|
expect(this.choices.init).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.destroy).toEqual(jasmine.any(Function));
|
||||||
|
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));
|
||||||
|
expect(this.choices.setValue).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.clearValue).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.disable).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.ajax).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.clearInput).toEqual(jasmine.any(Function));
|
||||||
|
expect(this.choices.clearInput).toEqual(jasmine.any(Function));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('should create markup', function() {
|
||||||
|
it('should hide passed input', function() {
|
||||||
|
expect(this.choices.passedElement.style.display).toEqual('none');
|
||||||
|
});
|
||||||
|
it('should create an outer container', function() {
|
||||||
|
expect(this.choices.containerOuter).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
it('should create an inner container', function() {
|
||||||
|
expect(this.choices.containerInner).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
it('should create a choice list', function() {
|
||||||
|
expect(this.choices.choiceList).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
it('should create an item list', function() {
|
||||||
|
expect(this.choices.itemList).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
it('should create an input', function() {
|
||||||
|
expect(this.choices.input).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
it('should create a dropdown', function() {
|
||||||
|
expect(this.choices.dropdown).toEqual(jasmine.any(HTMLElement));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('should allow inputted values', function() {
|
||||||
|
it('should set value via using setValue()', function() {
|
||||||
|
this.choices.setValue(['test1', 'test2']);
|
||||||
|
expect(this.choices.currentState.items.length).toEqual(2);
|
||||||
|
});
|
||||||
|
it('should accept a user inputted value', function() {
|
||||||
|
this.choices.input.focus();
|
||||||
|
this.choices.input.value = 'test';
|
||||||
|
|
||||||
|
this.choices._onKeyDown({
|
||||||
|
target: this.choices.input,
|
||||||
|
keyCode: 13,
|
||||||
|
ctrlKey: false
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(this.choices.currentState.items[0].value).toContain('test');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue