dist
src
test
libs
unit
api.js
checklist.js
combodate.js
common.js
date.js
datefield.js
datetime.js
datetimefield.js
dateui.js
dateuifield.js
select.js
select2.js
text.js
textarea.js
typeahead.js
wysihtml5.js
coverage
index.html
loader.js
main.js
mocks.js
require.js
style.css
.gitignore
CHANGELOG.txt
LICENSE-MIT
Package.nuspec
README.md
bower.json
composer.json
grunt.js
package.json
380 lines
14 KiB
JavaScript
380 lines
14 KiB
JavaScript
$(function () {
|
|
|
|
module("select2", {
|
|
setup: function(){
|
|
sfx = $('#qunit-fixture'),
|
|
fx = $('#async-fixture');
|
|
$.support.transition = false;
|
|
}
|
|
});
|
|
|
|
asyncTest("local: init-change-save (not multiple)", function () {
|
|
var s = 2, text = 'text2',
|
|
e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
|
|
source: [{id: 1, text: 'text1'}, {id: s, text: text}, {id: 3, text: 'text3'}],
|
|
select2: {}
|
|
});
|
|
|
|
//autotext
|
|
equal(e.data('editable').value, s, 'initial value ok');
|
|
equal(e.text(), text, 'intial text ok');
|
|
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
var $input = p.find('input[type="hidden"]');
|
|
ok($input.length, 'input exists');
|
|
ok($input.select2, 'select2 applied');
|
|
equal($input.val(), e.data('editable').value, 'selected value correct');
|
|
equal(p.find('.select2-choice span').text(), text, 'selected text correct');
|
|
|
|
//select new value
|
|
s = 1;
|
|
text = 'text1';
|
|
$input.select2('val', s);
|
|
|
|
equal($input.val(), s, 'new value ok');
|
|
equal(p.find('.select2-choice span').text(), text, 'new text ok');
|
|
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value, s, 'new value ok');
|
|
equal(e.text(), text, 'new text ok');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
});
|
|
|
|
asyncTest("local: init-change-save (multiple)", function () {
|
|
var s = '2,3', text = 'text2, text3',
|
|
e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'"></a>').appendTo(fx).editable({
|
|
source: [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}, {id: 3, text: 'text3'}],
|
|
viewseparator: ', ',
|
|
select2: {
|
|
multiple: true
|
|
}
|
|
});
|
|
|
|
//autotext
|
|
equal(e.data('editable').value.join(','), s, 'initial value ok');
|
|
equal(e.text(), text, 'intial text ok');
|
|
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
var $input = p.find('input[type="hidden"]');
|
|
ok($input.length, 'input exists');
|
|
ok($input.select2, 'select2 applied');
|
|
equal($input.val(), s, 'selected value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');
|
|
equal(p.find('.select2-search-choice > div').eq(1).text(), 'text3', 'text3 ok');
|
|
|
|
//select new value
|
|
s = '1,2';
|
|
text = 'text1, text2';
|
|
$input.select2('val', [1, 2]);
|
|
|
|
equal($input.val(), s, 'new value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 2, 'new text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
|
|
equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');
|
|
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value, s, 'new value ok');
|
|
equal(e.text(), text, 'new text ok');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
});
|
|
|
|
asyncTest("local: tags (simple array)", function () {
|
|
var s = 'text2,abc', text = 'text2, abc',
|
|
e = $('<a href="#" data-type="select2" data-name="select2">'+text+'</a>').appendTo(fx).editable({
|
|
viewseparator: ', ',
|
|
select2: {
|
|
tags: ['text1', 'text2']
|
|
}
|
|
});
|
|
|
|
equal(e.data('editable').value.join(','), s, 'initial value ok');
|
|
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
var $input = p.find('input[type="hidden"]');
|
|
ok($input.length, 'input exists');
|
|
ok($input.select2, 'select2 applied');
|
|
equal($input.val(), s, 'selected value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text2', 'text2 ok');
|
|
equal(p.find('.select2-search-choice > div').eq(1).text(), 'abc', 'abc ok');
|
|
|
|
//select new value
|
|
s = 'text1,cde';
|
|
text = 'text1, cde';
|
|
$input.select2('val', ['text1', 'cde']);
|
|
|
|
equal($input.val(), s, 'new value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 2, 'new text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
|
|
equal(p.find('.select2-search-choice > div').eq(1).text(), 'cde', 'cde ok');
|
|
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value, s, 'new value ok');
|
|
equal(e.text(), text, 'new text ok');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
});
|
|
|
|
/*
|
|
asyncTest("local: tags (array of objects)", function () {
|
|
var s = 'text2,abc', text = 'text2, abc',
|
|
e = $('<a href="#" data-type="select2" data-name="select2"></a>').appendTo(fx).editable({
|
|
viewseparator: ', ',
|
|
value: [1, 2],
|
|
select2: {
|
|
tags: [{id: 1, text: 'text1'}, {id: 2, text: 'text2'}]
|
|
}
|
|
});
|
|
|
|
equal(e.text(), 'text1, text2', 'initial text ok');
|
|
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
var $input = p.find('input[type="hidden"]');
|
|
ok($input.length, 'input exists');
|
|
ok($input.select2, 'select2 applied');
|
|
equal($input.val(), '1,2', 'selected value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 2, 'selected text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
|
|
equal(p.find('.select2-search-choice > div').eq(1).text(), 'text2', 'text2 ok');
|
|
|
|
//select new value
|
|
// s = 'text1,cde';
|
|
// text = 'text1, cde';
|
|
$input.select2('val', [1]);
|
|
|
|
equal($input.val(), '1', 'new value ok');
|
|
equal(p.find('.select2-search-choice > div').length, 1, 'new text ok');
|
|
equal(p.find('.select2-search-choice > div').eq(0).text(), 'text1', 'text1 ok');
|
|
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value.length, 1, 'new value ok');
|
|
equal(e.text(), 'text1', 'new text ok');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
});
|
|
*/
|
|
|
|
test("local: setValue + x-editable source", function () {
|
|
var e = $('<a href="#" data-type="select2" data-name="select2" data-value="1">test2</a>').appendTo('#qunit-fixture').editable({
|
|
source: [{value: 1, text: 'text1'}, {value: 2, text: 'text2'}, {value: 3, text: 'text3'}]
|
|
});
|
|
|
|
//autotext
|
|
equal(e.data('editable').value, 1, 'initial value ok');
|
|
|
|
//setValue before open
|
|
e.editable('setValue', 2);
|
|
equal(e.data('editable').value, 2, 'value ok');
|
|
equal(e.text(), 'text2', 'text ok');
|
|
|
|
//open
|
|
e.click();
|
|
var p = tip(e);
|
|
p.find('.editable-cancel').click();
|
|
|
|
//setValue after hide
|
|
e.editable('setValue', 3);
|
|
equal(e.data('editable').value, 3, 'value ok');
|
|
equal(e.text(), 'text3', 'text ok');
|
|
});
|
|
|
|
asyncTest("remote: init-change-save, just url (not multiple)", function () {
|
|
var s = 2, text = groups[s],
|
|
newVal = 0, newText = groups[newVal],
|
|
e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
|
|
source: 'groupsArr2'
|
|
});
|
|
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
equal(p.find('.select2-choice span').text(), text, 'selected text correct');
|
|
|
|
var $input = p.find('input[type="hidden"]');
|
|
ok($input.length, 'input exists');
|
|
ok($input.select2, 'select2 applied');
|
|
equal($input.val(), e.data('editable').value, 'selected value correct');
|
|
|
|
//click to load items
|
|
p.find('.select2-choice').mousedown();
|
|
|
|
setTimeout(function() {
|
|
equal($('.select2-results li').length, groupsArr2.length, 'items loaded');
|
|
equal($('.select2-results .select2-highlighted > .select2-result-label').text(), text, 'highlight ok');
|
|
|
|
//select new value (0)
|
|
$('.select2-results li').eq(newVal).mouseup();
|
|
equal(p.find('.select2-choice span').text(), newText, 'new selected text ok');
|
|
|
|
//submit
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value, newVal, 'new value ok');
|
|
equal(e.text(), newText, 'new text ok');
|
|
|
|
//open again
|
|
e.click();
|
|
p = tip(e);
|
|
equal(p.find('.select2-choice span').text(), newText, 'text ok on second open');
|
|
equal($input.val(), newVal, 'selected value ok on second open');
|
|
|
|
//setValue in closed state
|
|
p.find('.editable-cancel').click();
|
|
e.editable('setValue', 1);
|
|
equal(e.data('editable').value, 1, 'setValue: value ok');
|
|
equal(e.text(), groups[1], 'setValue: text ok');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
}, timeout);
|
|
});
|
|
|
|
asyncTest("remote: custom id, custom text, init selection (not multiple)", function () {
|
|
var s = 2,
|
|
data = [
|
|
{cid: 1, name: '111'},
|
|
{cid: 2, name: '222'}
|
|
],
|
|
idIndex,
|
|
text = '222', req = 0,
|
|
newVal = 0, newText = groups[newVal],
|
|
e = $('<a href="#" data-type="select2" data-name="select2" data-value="'+s+'">'+text+'</a>').appendTo(fx).editable({
|
|
pk: 1,
|
|
select2: {
|
|
minimumInputLength: 1,
|
|
id: function (e) {
|
|
return e.cid;
|
|
},
|
|
ajax: {
|
|
url: '/select2list',
|
|
dataType: 'json',
|
|
data: function (term, page) {
|
|
return { query: term };
|
|
},
|
|
results: function (data, page) {
|
|
return { results: data };
|
|
}
|
|
},
|
|
formatResult: function (e) {
|
|
return e.name;
|
|
},
|
|
formatSelection: function (e) {
|
|
return e.name;
|
|
},
|
|
initSelection: function (element, callback) {
|
|
return $.get('/select2id', { query: element.val() }, function (data) {
|
|
callback(data);
|
|
}, 'json');
|
|
}
|
|
}
|
|
});
|
|
|
|
//mocks
|
|
$.mockjax({
|
|
url: '/select2list',
|
|
responseTime: 50,
|
|
response: function() {
|
|
req++;
|
|
this.responseText = data;
|
|
}
|
|
});
|
|
|
|
$.mockjax({
|
|
url: '/select2id',
|
|
responseTime: 50,
|
|
response: function() {
|
|
req++;
|
|
this.responseText = data[idIndex];
|
|
}
|
|
});
|
|
|
|
//start
|
|
idIndex = 1;
|
|
e.click();
|
|
var p = tip(e);
|
|
|
|
ok(p.is(':visible'), 'popover visible');
|
|
|
|
//waiting for initSelection
|
|
setTimeout(function() {
|
|
equal(p.find('.select2-choice span').text(), text, 'selected text correct');
|
|
equal(req, 1, '1 request ok');
|
|
|
|
//enter 1 symbol
|
|
p.find('.select2-choice').mousedown();
|
|
$('.select2-search .select2-input:visible').val('1').trigger('keyup-change');
|
|
|
|
//wait for list loading
|
|
setTimeout(function() {
|
|
equal($('.select2-results li').length, data.length, 'items loaded');
|
|
equal($('.select2-results .select2-highlighted > .select2-result-label').text(), data[0].name, 'highlight ok');
|
|
|
|
//click on first
|
|
var newVal = 1, newText = '111';
|
|
$('.select2-results li').eq(0).mouseup();
|
|
equal(p.find('.select2-choice span').text(), data[0].name, 'new selected text ok');
|
|
|
|
//submit
|
|
p.find('form').submit();
|
|
|
|
setTimeout(function() {
|
|
ok(!p.is(':visible'), 'popover closed');
|
|
equal(e.data('editable').value, newVal, 'new value ok');
|
|
equal(e.text(), newText, 'new text ok');
|
|
|
|
//open again
|
|
idIndex = 0;
|
|
e.click();
|
|
setTimeout(function() {
|
|
p = tip(e);
|
|
var $input = p.find('input[type="hidden"]');
|
|
equal(p.find('.select2-choice span').text(), newText, 'text ok on second open');
|
|
equal($input.val(), newVal, 'selected value ok on second open');
|
|
|
|
e.remove();
|
|
start();
|
|
}, timeout);
|
|
}, timeout);
|
|
}, timeout);
|
|
}, timeout);
|
|
});
|
|
}); |