2
0
mirror of https://github.com/devbridge/jQuery-Autocomplete.git synced 2024-11-22 21:05:12 +00:00
jQuery-Autocomplete/spec/autocompleteBehavior.js
Tomas Kirda a2c472853b Merge branch 'onhide-callback-option' of https://github.com/stffndtz/jQuery-Autocomplete into stffndtz-onhide-callback-option
Conflicts:
	dist/jquery.autocomplete.js
	dist/jquery.autocomplete.min.js
	readme.md
	spec/autocompleteBehavior.js
	src/jquery.autocomplete.js
2015-03-04 10:32:47 -06:00

779 lines
22 KiB
JavaScript

/*jslint vars: true*/
/*global describe, it, expect, waits, waitsFor, runs, afterEach, spyOn, $, beforeEach*/
describe('Autocomplete Async', function () {
'use strict';
var input = document.createElement('input'),
startQuery,
ajaxExecuted = false,
autocomplete = new $.Autocomplete(input, {
serviceUrl: '/test',
onSearchStart: function (params) {
startQuery = params.query;
}
});
beforeEach(function (done) {
$.mockjax({
url: '/test',
responseTime: 50,
response: function (settings) {
ajaxExecuted = true;
var query = settings.data.query,
response = {
query: query,
suggestions: []
};
this.responseText = JSON.stringify(response);
done();
}
});
input.value = 'A';
autocomplete.onValueChange();
});
it('Should execute onSearchStart', function () {
expect(ajaxExecuted).toBe(true);
expect(startQuery).toBe('A');
});
});
describe('Autocomplete Async', function () {
'use strict';
var input = document.createElement('input'),
completeQuery,
mockupSuggestion = { value: 'A', data: 'A' },
resultSuggestions,
ajaxExecuted = false,
url = '/test-completed';
beforeEach(function (done) {
var autocomplete = new $.Autocomplete(input, {
serviceUrl: url,
onSearchComplete: function (query, suggestions) {
completeQuery = query;
resultSuggestions = suggestions;
done();
}
});
$.mockjax({
url: url,
responseTime: 50,
response: function (settings) {
ajaxExecuted = true;
var query = settings.data.query,
response = {
query: query,
suggestions: [mockupSuggestion]
};
this.responseText = JSON.stringify(response);
}
});
input.value = 'A';
autocomplete.onValueChange();
});
it('Should execute onSearchComplete', function () {
expect(ajaxExecuted).toBe(true);
expect(completeQuery).toBe('A');
expect(resultSuggestions[0].value).toBe('A');
expect(resultSuggestions[0].data).toBe('A');
});
});
describe('Autocomplete Async', function () {
'use strict';
var errorMessage = false;
beforeEach(function (done) {
var input = document.createElement('input'),
url = '/test-error',
autocomplete = new $.Autocomplete(input, {
serviceUrl: url,
onSearchError: function (q, jqXHR, textStatus, errorThrown) {
errorMessage = jqXHR.responseText;
done();
}
});
$.mockjax({
url: url,
responseTime: 50,
status: 500,
response: function (settings) {
this.responseText = "An error occurred";
}
});
input.value = 'A';
autocomplete.onValueChange();
});
it('Should execute onSearchError', function () {
expect(errorMessage).toBe("An error occurred");
});
});
describe('Asyn', function () {
'use strict';
var instance;
beforeEach(function (done) {
var input = document.createElement('input'),
ajaxExecuted = false,
url = '/test-transform',
autocomplete = new $.Autocomplete(input, {
serviceUrl: url,
transformResult: function (result, query) {
// call done after we return;
setTimeout(done, 0);
return {
query: query,
suggestions: $.map(result.split(','), function (item) {
return { value: item, data: null };
})
};
}
});
$.mockjax({
url: url,
responseTime: 50,
response: function () {
ajaxExecuted = true;
this.responseText = 'Andora,Angola,Argentina';
}
});
instance = autocomplete;
input.value = 'A';
autocomplete.onValueChange();
});
it('Should transform results', function () {
expect(instance.suggestions.length).toBe(3);
expect(instance.suggestions[0].value).toBe('Andora');
});
});
describe('Autocomplete Async', function () {
'use strict';
var instance;
beforeEach(function (done) {
var input = document.createElement('input'),
ajaxExecuted = false,
url = '/test-original-query',
autocomplete = new $.Autocomplete(input, {
serviceUrl: url
});
$.mockjax({
url: url,
responseTime: 50,
response: function () {
ajaxExecuted = true;
var response = {
query: null,
suggestions: ['Aa', 'Bb', 'Cc']
};
this.responseText = JSON.stringify(response);
setTimeout(done, 0);
}
});
input.value = 'A';
instance = autocomplete;
autocomplete.onValueChange();
});
it('Should not require orginal query value from the server', function () {
expect(instance.suggestions.length).toBe(3);
expect(instance.suggestions[0].value).toBe('Aa');
});
});
describe('Autocomplete Async', function () {
'use strict';
var paramValue;
beforeEach(function (done) {
var input = document.createElement('input'),
paramName = 'custom',
autocomplete = new $.Autocomplete(input, {
serviceUrl: '/test-query',
paramName: paramName
});
$.mockjax({
url: '/test-query',
responseTime: 5,
response: function (settings) {
paramValue = settings.data[paramName];
var response = {
query: paramValue,
suggestions: []
};
this.responseText = JSON.stringify(response);
done();
}
});
input.value = 'Jam';
autocomplete.onValueChange();
});
it('Should use custom query parameter name', function () {
expect(paramValue).toBe('Jam');
});
});
describe('Autocomplete Async', function () {
'use strict';
var dynamicUrl,
data;
beforeEach(function (done) {
var input = $(document.createElement('input'));
input.autocomplete({
ignoreParams: true,
serviceUrl: function (query) {
return '/dynamic-url/' + encodeURIComponent(query).replace(/%20/g, "+");
}
});
$.mockjax({
url: '/dynamic-url/*',
responseTime: 5,
response: function (settings) {
dynamicUrl = settings.url;
data = settings.data;
var response = {
suggestions: []
};
this.responseText = JSON.stringify(response);
done();
}
});
input.val('Hello World');
input.autocomplete().onValueChange();
});
it('Should construct serviceUrl via callback function.', function () {
expect(dynamicUrl).toBe('/dynamic-url/Hello+World');
expect(data).toBeFalsy();
});
});
describe('Autocomplete Async', function () {
'use strict';
var instance,
cacheKey;
beforeEach(function (done) {
var input = $('<input />'),
ajaxExecuted = false,
data = { a: 1, query: 'Jam' },
serviceUrl = '/autocomplete/cached/url';
cacheKey = serviceUrl + '?' + $.param(data);
input.autocomplete({
serviceUrl: serviceUrl,
params: data
});
$.mockjax({
url: serviceUrl,
responseTime: 5,
response: function (settings) {
ajaxExecuted = true;
var query = settings.data.query,
response = {
suggestions: [{ value: 'Jamaica' }, { value: 'Jamaica' }]
};
this.responseText = JSON.stringify(response);
setTimeout(done, 10);
}
});
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
});
it('Should use serviceUrl and params as cacheKey', function () {
expect(instance.cachedResponse[cacheKey]).toBeTruthy();
});
});
describe('Autocomplete Async', function () {
'use strict';
var ajaxCount = 0;
beforeEach(function (done) {
var input = $('<input />'),
instance,
serviceUrl = '/autocomplete/prevent/ajax';
input.autocomplete({
serviceUrl: serviceUrl
});
$.mockjax({
url: serviceUrl,
responseTime: 1,
response: function (settings) {
ajaxCount += 1;
var response = { suggestions: [] };
this.responseText = JSON.stringify(response);
if (ajaxCount === 2) {
done();
}
}
});
setTimeout(function () {
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
}, 10);
setTimeout(function () {
input.val('Jama');
instance.onValueChange();
}, 20);
setTimeout(function () {
// Change setting and continue:
instance.setOptions({ preventBadQueries: false });
input.val('Jamai');
instance.onValueChange();
}, 30);
});
it('Should prevent Ajax requests if previous query with matching root failed.', function () {
// Ajax call should have been made:
expect(ajaxCount).toBe(2);
});
});
describe('Autocomplete', function () {
'use strict';
afterEach(function () {
$('.autocomplete-suggestions').hide();
});
it('Should initialize autocomplete options', function () {
var input = document.createElement('input'),
options = { serviceUrl: '/autocomplete/service/url' },
autocomplete = new $.Autocomplete(input, options);
expect(autocomplete.options.serviceUrl).toEqual(options.serviceUrl);
expect(autocomplete.suggestionsContainer).not.toBeNull();
});
it('Should set autocomplete attribute to "off"', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {});
expect(autocomplete).not.toBeNull();
expect(input.getAttribute('autocomplete')).toEqual('off');
});
it('Should get current value', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: [{ value: 'Jamaica', data: 'B' }]
});
input.value = 'Jam';
autocomplete.onValueChange();
expect(autocomplete.visible).toBe(true);
expect(autocomplete.currentValue).toEqual('Jam');
});
it('Should call formatResult three times', function () {
var input = document.createElement('input'),
counter = 0,
suggestion,
currentValue,
autocomplete = new $.Autocomplete(input, {
lookup: ['Jamaica', 'Jamaica', 'Jamaica'],
formatResult: function (s, v) {
suggestion = s;
currentValue = v;
counter += 1;
}
});
input.value = 'Jam';
autocomplete.onValueChange();
expect(suggestion.value).toBe('Jamaica');
expect(suggestion.data).toBe(null);
expect(currentValue).toEqual('Jam');
expect(counter).toEqual(3);
});
it('Verify onSelect callback', function () {
var input = document.createElement('input'),
context,
value,
data,
autocomplete = $(input).autocomplete({
lookup: [{ value: 'A', data: 'B' }],
triggerSelectOnValidInput: false,
onSelect: function (suggestion) {
context = this;
value = suggestion.value;
data = suggestion.data;
}
}).autocomplete();
input.value = 'A';
autocomplete.onValueChange();
autocomplete.select(0);
expect(context).toEqual(input);
expect(value).toEqual('A');
expect(data).toEqual('B');
});
it('Should convert suggestions format', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: ['A', 'B']
});
expect(autocomplete.options.lookup[0].value).toBe('A');
expect(autocomplete.options.lookup[1].value).toBe('B');
});
it('Should should not preventDefault when tabDisabled is set to false', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: [{ value: 'Jamaica', data: 'B' }],
tabDisabled: false,
autoSelectFirst: true
});
input.value = 'Jam';
autocomplete.onValueChange();
var event = $.Event('keydown');
event.which = 9; // the tab keycode
spyOn(event, 'stopImmediatePropagation');
spyOn(event, 'preventDefault');
spyOn(autocomplete, 'suggest');
expect(autocomplete.visible).toBe(true);
expect(autocomplete.disabled).toBe(undefined);
expect(autocomplete.selectedIndex).not.toBe(-1);
$(input).trigger(event);
expect(event.stopImmediatePropagation).not.toHaveBeenCalled();
expect(event.preventDefault).not.toHaveBeenCalled();
expect(autocomplete.suggest).not.toHaveBeenCalled();
});
it('Should should preventDefault when tabDisabled is set to true', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: [{ value: 'Jamaica', data: 'B' }],
tabDisabled: true,
autoSelectFirst: true
});
input.value = 'Jam';
autocomplete.onValueChange();
var event = $.Event('keydown');
event.which = 9; // the tab keycode
spyOn(autocomplete, 'suggest');
expect(autocomplete.visible).toBe(true);
expect(autocomplete.disabled).toBe(undefined);
expect(autocomplete.selectedIndex).not.toBe(-1);
$(input).trigger(event);
expect(autocomplete.suggest).not.toHaveBeenCalled();
});
it('Should not autoselect first item by default', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: ['Jamaica', 'Jamaica', 'Jamaica']
});
input.value = 'Jam';
autocomplete.onValueChange();
expect(autocomplete.selectedIndex).toBe(-1);
});
it('Should autoselect first item autoSelectFirst set to true', function () {
var input = document.createElement('input'),
autocomplete = new $.Autocomplete(input, {
lookup: ['Jamaica', 'Jamaica', 'Jamaica'],
autoSelectFirst: true
});
input.value = 'Jam';
autocomplete.onValueChange();
expect(autocomplete.selectedIndex).toBe(0);
});
it('Should destroy autocomplete instance', function () {
var input = $(document.createElement('input')),
div = $(document.createElement('div'));
input.autocomplete({
serviceUrl: '/test-dispose',
appendTo: div
});
expect(input.data('autocomplete')).toBeDefined();
expect(div.children().length).toBeGreaterThan(0);
input.autocomplete('dispose');
expect(input.data('autocomplete')).toBeUndefined();
expect(div.children().length).toBe(0);
});
it('Should return Autocomplete instance if called without arguments', function () {
var input = $(document.createElement('input'));
input.autocomplete({
serviceUrl: '/test-dispose'
});
var instance = input.autocomplete();
expect(instance instanceof $.Autocomplete).toBe(true);
});
it('Should set width to be greater than zero', function () {
var input = $(document.createElement('input')),
instance,
width;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'B' }]
});
input.val('Jam');
input.width(100);
instance = input.autocomplete();
instance.onValueChange();
width = $(instance.suggestionsContainer).width();
expect(width).toBeGreaterThan(0);
});
it('Should call beforeRender and pass container jQuery object', function () {
var element = document.createElement('input'),
input = $(element),
instance,
elementCount,
context;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'B' }],
beforeRender: function (container) {
context = this;
elementCount = container.length;
}
});
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
expect(context).toBe(element);
expect(elementCount).toBe(1);
});
it('Should trigger select when input value matches suggestion', function () {
var input = $('<input />'),
instance,
suggestionData = false;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'J' }],
triggerSelectOnValidInput: true,
onSelect: function (suggestion) {
suggestionData = suggestion.data;
}
});
input.val('Jamaica');
instance = input.autocomplete();
instance.onValueChange();
expect(suggestionData).toBe('J');
});
it('Should NOT trigger select when input value matches suggestion', function () {
var input = $('<input />'),
instance,
suggestionData = null;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'J' }],
triggerSelectOnValidInput: false,
onSelect: function (suggestion) {
suggestionData = suggestion.data;
}
});
input.val('Jamaica');
instance = input.autocomplete();
instance.onValueChange();
expect(suggestionData).toBeNull();
});
it('Should limit results for local request', function () {
var input = $('<input />'),
instance,
limit = 3;
input.autocomplete({
lookup: [{ value: 'Jamaica' }, { value: 'Jamaica' }, { value: 'Jamaica' }, { value: 'Jamaica' }, { value: 'Jamaica' }]
});
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
// Expect all items to be displayed:
expect(instance.suggestions.length).toBe(5);
// Set lookup result limit and verify:
instance.setOptions({ lookupLimit: limit });
instance.onValueChange();
expect(instance.suggestions.length).toBe(limit);
});
it('Should display no suggestion notice when no matching results', function () {
var input = document.createElement('input'),
options = {
lookup: [{ value: 'Colombia', data: 'Spain' }],
showNoSuggestionNotice: true,
noSuggestionNotice: 'Sorry, no matching results'
},
autocomplete = new $.Autocomplete(input, options),
suggestionsContainer = $(autocomplete.suggestionsContainer);
input.value = 'Jamaica';
autocomplete.onValueChange();
expect(autocomplete.visible).toBe(true);
expect(autocomplete.selectedIndex).toBe(-1);
expect(suggestionsContainer.find('.autocomplete-no-suggestion').length).toBe(1);
expect(suggestionsContainer.find('.autocomplete-no-suggestion').text()).toBe('Sorry, no matching results');
});
it('Should call onHide and pass container jQuery object', function () {
var element = document.createElement('input'),
input = $(element),
instance,
elementCount,
context;
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'B' }],
onHide: function (container) {
context = this;
elementCount = container.length;
}
});
input.val('Jam');
instance = input.autocomplete();
instance.onValueChange();
input.val('Colombia');
instance.onValueChange();
expect(context).toBe(element);
expect(elementCount).toBe(1);
});
});
describe('When options.preserveInput is true', function () {
'use strict';
var input = $('<input />'),
instance,
suggestionData = null;
beforeEach(function () {
input.autocomplete({
lookup: [{ value: 'Jamaica', data: 'J' }, { value: 'Jamaica2', data: 'J' }, { value: 'Jamaica3', data: 'J' }],
preserveInput: true,
onSelect: function (suggestion) {
suggestionData = suggestion.data;
}
});
input.val('J');
instance = input.autocomplete();
});
afterEach(function () {
instance.dispose();
});
it('Should NOT change input value when item is selected', function () {
instance.onValueChange();
instance.select(0);
expect(input.val()).toEqual('J');
});
it('Should NOT change input value when move down', function () {
instance.onValueChange();
instance.moveDown();
expect(input.val()).toEqual('J');
});
it('Should NOT change input value when move up', function () {
instance.onValueChange();
instance.moveUp();
expect(input.val()).toEqual('J');
});
});