mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
Update static dependencies
This commit is contained in:
Jeremy Stretch
@@ -0,0 +1,400 @@
|
||||
module('Selection containers - Placeholders - Allow clear');
|
||||
|
||||
var Placeholder = require('select2/selection/placeholder');
|
||||
var AllowClear = require('select2/selection/allowClear');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
var MultipleSelection = require('select2/selection/multiple');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var AllowClearPlaceholder = Utils.Decorate(
|
||||
Utils.Decorate(SingleSelection, Placeholder),
|
||||
AllowClear
|
||||
);
|
||||
|
||||
var allowClearOptions = new Options({
|
||||
placeholder: {
|
||||
id: 'placeholder',
|
||||
text: 'This is the placeholder'
|
||||
},
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
test('clear is not displayed for single placeholder', function (assert) {
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$('#qunit-fixture .single-with-placeholder'),
|
||||
allowClearOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: 'placeholder'
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('.select2-selection__clear').length,
|
||||
0,
|
||||
'The clear icon should not be displayed'
|
||||
);
|
||||
});
|
||||
|
||||
test('clear is not displayed for multiple placeholder', function (assert) {
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$('#qunit-fixture .multiple'),
|
||||
allowClearOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('.select2-selection__clear').length,
|
||||
0,
|
||||
'The clear icon should not be displayed'
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
test('clear is displayed for placeholder', function (assert) {
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$('#qunit-fixture .single-with-placeholder'),
|
||||
allowClearOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: 'one',
|
||||
test: 'one'
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('.select2-selection__clear').length,
|
||||
1,
|
||||
'The clear icon should be displayed'
|
||||
);
|
||||
});
|
||||
|
||||
test('clear icon should have title displayed', function (assert) {
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$('#qunit-fixture .single-with-placeholder'),
|
||||
allowClearOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: 'one',
|
||||
test: 'one'
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('.select2-selection__clear').attr('title'),
|
||||
'Remove all items',
|
||||
'The clear icon should have title displayed'
|
||||
);
|
||||
});
|
||||
|
||||
test('clicking clear will set the placeholder value', function (assert) {
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
$element.val('One');
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'placeholder',
|
||||
'The value should have been reset to the placeholder'
|
||||
);
|
||||
});
|
||||
|
||||
test('clicking clear will trigger the unselect event', function (assert) {
|
||||
assert.expect(4);
|
||||
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
$element.val('One');
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
selection.on('unselect', function (ev) {
|
||||
assert.ok(
|
||||
'data' in ev && ev.data,
|
||||
'The event should have been triggered with the data property'
|
||||
);
|
||||
|
||||
assert.ok(
|
||||
$.isPlainObject(ev.data),
|
||||
'The data should be an object'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
ev.data.id,
|
||||
'One',
|
||||
'The data should be the unselected object'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'placeholder',
|
||||
'The previous value should be unselected'
|
||||
);
|
||||
});
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
});
|
||||
|
||||
test('preventing the unselect event cancels the clearing', function (assert) {
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
$element.val('One');
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
selection.on('unselect', function (ev) {
|
||||
ev.prevented = true;
|
||||
});
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'One',
|
||||
'The placeholder should not have been set'
|
||||
);
|
||||
});
|
||||
|
||||
test('clicking clear will trigger the clear event', function (assert) {
|
||||
assert.expect(5);
|
||||
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
$element.val('One');
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
selection.on('clear', function (ev) {
|
||||
assert.ok(
|
||||
'data' in ev && ev.data,
|
||||
'The event should have been triggered with the data property'
|
||||
);
|
||||
|
||||
assert.ok(
|
||||
$.isArray(ev.data),
|
||||
'The data should be an array'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
ev.data.length,
|
||||
1,
|
||||
'The data should contain one item for each value'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
ev.data[0].id,
|
||||
'One',
|
||||
'The data should contain unselected objects'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'placeholder',
|
||||
'The previous value should be unselected'
|
||||
);
|
||||
});
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
});
|
||||
|
||||
test('preventing the clear event cancels the clearing', function (assert) {
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
$element.val('One');
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
selection.on('clear', function (ev) {
|
||||
ev.prevented = true;
|
||||
});
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'One',
|
||||
'The placeholder should not have been set'
|
||||
);
|
||||
});
|
||||
|
||||
test('clear does not work when disabled', function (assert) {
|
||||
var $element = $('#qunit-fixture .single-with-placeholder');
|
||||
|
||||
var selection = new AllowClearPlaceholder(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.bind(container, $('<div></div>'));
|
||||
|
||||
selection.update([{
|
||||
id: 'One',
|
||||
text: 'One'
|
||||
}]);
|
||||
|
||||
$element.val('One');
|
||||
selection.options.set('disabled', true);
|
||||
|
||||
var $remove = $selection.find('.select2-selection__clear');
|
||||
$remove.trigger('mousedown');
|
||||
|
||||
assert.equal(
|
||||
$element.val(),
|
||||
'One',
|
||||
'The placeholder should not have been set'
|
||||
);
|
||||
});
|
||||
|
||||
test('clear button doesnt visually break selected options', function (assert) {
|
||||
var $element = $('<select></select>');
|
||||
|
||||
var Selection = Utils.Decorate(
|
||||
Utils.Decorate(MultipleSelection, Placeholder),
|
||||
AllowClear
|
||||
);
|
||||
|
||||
var selection = new Selection(
|
||||
$element,
|
||||
allowClearOptions
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $container = $(
|
||||
'<span class="select2-container select2-container--default"></span>'
|
||||
);
|
||||
$('#qunit-fixture').append($container);
|
||||
|
||||
var $selection = selection.render();
|
||||
$container.append($selection);
|
||||
$container.css('width', '100px');
|
||||
|
||||
selection.bind(container, $container);
|
||||
|
||||
selection.update([{
|
||||
id: '1',
|
||||
text: '1'
|
||||
}]);
|
||||
|
||||
var singleHeight = $container.height();
|
||||
|
||||
selection.update([
|
||||
{
|
||||
id: '10',
|
||||
text: '10'
|
||||
},
|
||||
{
|
||||
id: '20',
|
||||
text: '20'
|
||||
}
|
||||
]);
|
||||
|
||||
var doubleHeight = $container.height();
|
||||
|
||||
selection.update([
|
||||
{
|
||||
id: '1',
|
||||
text: '1'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
text: '2'
|
||||
}
|
||||
]);
|
||||
|
||||
assert.notEqual(
|
||||
singleHeight,
|
||||
doubleHeight,
|
||||
'The height of the two different rows should be different'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
$container.height(),
|
||||
doubleHeight,
|
||||
'There should be two full lines of selections'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,104 @@
|
||||
module('Dropdown - containerCssClass compatibility');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Utils = require('select2/utils');
|
||||
var Options = require('select2/options');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
var ContainerCSS = Utils.Decorate(
|
||||
SingleSelection,
|
||||
require('select2/compat/containerCss')
|
||||
);
|
||||
|
||||
test('all classes will be copied if :all: is used', function (assert) {
|
||||
var $element = $('<select class="test copy works"></select>');
|
||||
var options = new Options({
|
||||
containerCssClass: ':all:'
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok($container.hasClass('test'));
|
||||
assert.ok($container.hasClass('copy'));
|
||||
assert.ok($container.hasClass('works'));
|
||||
assert.ok(!$container.hasClass(':all:'));
|
||||
});
|
||||
|
||||
test(':all: can be used with other classes', function (assert) {
|
||||
var $element = $('<select class="test copy works"></select>');
|
||||
var options = new Options({
|
||||
containerCssClass: ':all: other'
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok($container.hasClass('test'));
|
||||
assert.ok($container.hasClass('copy'));
|
||||
assert.ok($container.hasClass('works'));
|
||||
assert.ok($container.hasClass('other'));
|
||||
assert.ok(!$container.hasClass(':all:'));
|
||||
});
|
||||
|
||||
test('classes can be passed in as a string', function (assert) {
|
||||
var $element = $('<select class="test copy works"></select>');
|
||||
var options = new Options({
|
||||
containerCssClass: 'other'
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok($container.hasClass('other'));
|
||||
});
|
||||
|
||||
test('a function can be used based on the element', function (assert){
|
||||
var $element = $('<select class="test"></select>');
|
||||
var options = new Options({
|
||||
containerCssClass: function ($element) {
|
||||
return 'function';
|
||||
}
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok($container.hasClass('function'));
|
||||
assert.ok(!$container.hasClass('test'));
|
||||
});
|
||||
|
||||
test(':all: works around custom adapters', function (assert) {
|
||||
var $element = $('<select class="test"></select>');
|
||||
var options = new Options({
|
||||
containerCssClass: ':all: something',
|
||||
adaptContainerCssClass: function (clazz) {
|
||||
return clazz + '-modified';
|
||||
}
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok($container.hasClass('something'));
|
||||
|
||||
assert.ok($container.hasClass('test'));
|
||||
assert.ok($container.hasClass('test-modified'));
|
||||
});
|
||||
|
||||
module('Selection - adaptContainerCss compatibility');
|
||||
|
||||
test('only return when adapted', function (assert) {
|
||||
var $element = $('<select class="original"></select>');
|
||||
var options = new Options({
|
||||
adaptContainerCssClass: function (clazz) {
|
||||
return 'modified';
|
||||
}
|
||||
});
|
||||
|
||||
var select = new ContainerCSS($element, options);
|
||||
var $container = select.render();
|
||||
|
||||
assert.ok(!$container.hasClass('original'));
|
||||
assert.ok($container.hasClass('modified'));
|
||||
});
|
||||
@@ -0,0 +1,41 @@
|
||||
module('Selection containers - Managing focus');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
|
||||
var options = new Options({});
|
||||
|
||||
test('close sets the focus to the selection', function (assert) {
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
selection.update([{
|
||||
id: 'test',
|
||||
text: 'test'
|
||||
}]);
|
||||
|
||||
$container.append($selection);
|
||||
|
||||
assert.notEqual(
|
||||
document.activeElement,
|
||||
$selection[0],
|
||||
'The selection had focus originally'
|
||||
);
|
||||
|
||||
container.trigger('close');
|
||||
|
||||
assert.equal(
|
||||
document.activeElement,
|
||||
$selection[0],
|
||||
'After close, focus must be set to selection'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,258 @@
|
||||
module('Selection containers - Multiple');
|
||||
|
||||
var MultipleSelection = require('select2/selection/multiple');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var options = new Options({});
|
||||
|
||||
test('display uses templateSelection', function (assert) {
|
||||
var called = false;
|
||||
|
||||
var templateOptions = new Options({
|
||||
templateSelection: function (data) {
|
||||
called = true;
|
||||
|
||||
return data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
templateOptions
|
||||
);
|
||||
|
||||
var out = selection.display({
|
||||
text: 'test'
|
||||
});
|
||||
|
||||
assert.ok(called);
|
||||
|
||||
assert.equal(out, 'test');
|
||||
});
|
||||
|
||||
test('templateSelection can addClass', function (assert) {
|
||||
var called = false;
|
||||
|
||||
var templateOptions = new Options({
|
||||
templateSelection: function (data, container) {
|
||||
called = true;
|
||||
container.addClass('testclass');
|
||||
return data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
templateOptions
|
||||
);
|
||||
|
||||
var $container = selection.selectionContainer();
|
||||
|
||||
var out = selection.display({
|
||||
text: 'test'
|
||||
}, $container);
|
||||
|
||||
assert.ok(called);
|
||||
|
||||
assert.equal(out, 'test');
|
||||
|
||||
assert.ok($container.hasClass('testclass'));
|
||||
});
|
||||
|
||||
test('empty update clears the selection', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
$rendered.text('testing');
|
||||
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.text(),
|
||||
'',
|
||||
'There should have been nothing rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('empty update clears the selection title', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered li');
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if nothing is rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('update sets the title to the data text', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
text: 'test'
|
||||
}]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered li');
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
'test',
|
||||
'The title should have been set to the text'
|
||||
);
|
||||
});
|
||||
|
||||
test('update sets the title to the data title', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
text: 'test',
|
||||
title: 'correct'
|
||||
}]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered li');
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
'correct',
|
||||
'The title should have taken precedence over the text'
|
||||
);
|
||||
});
|
||||
|
||||
test('update should clear title for placeholder options', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: '',
|
||||
text: ''
|
||||
}]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered li');
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if a placeholder is rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('update should clear title for options without text', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: ''
|
||||
}]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered li');
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if there is no text or title property'
|
||||
);
|
||||
});
|
||||
|
||||
test('escapeMarkup is being used', function (assert) {
|
||||
var selection = new MultipleSelection(
|
||||
$('#qunit-fixture .multiple'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
var unescapedText = '<script>bad("stuff");</script>';
|
||||
|
||||
selection.update([{
|
||||
text: unescapedText
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.text().substr(1),
|
||||
unescapedText,
|
||||
'The text should be escaped by default to prevent injection'
|
||||
);
|
||||
});
|
||||
|
||||
test('clear button respects the disabled state', function (assert) {
|
||||
var options = new Options({
|
||||
disabled: true
|
||||
});
|
||||
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var container = new MockContainer();
|
||||
var $container = $('<div></div>');
|
||||
|
||||
var selection = new MultipleSelection(
|
||||
$select,
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
$container.append($selection);
|
||||
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Select an option
|
||||
selection.update([{
|
||||
text: 'Test'
|
||||
}]);
|
||||
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
var $pill = $rendered.find('.select2-selection__choice');
|
||||
|
||||
assert.equal($pill.length, 1, 'There should only be one selection');
|
||||
|
||||
var $remove = $pill.find('.select2-selection__choice__remove');
|
||||
|
||||
assert.equal(
|
||||
$remove.length,
|
||||
1,
|
||||
'The remove icon is displayed for the selection'
|
||||
);
|
||||
|
||||
// Set up the unselect handler
|
||||
selection.on('unselect', function (params) {
|
||||
assert.ok(false, 'The unselect handler should not be triggered');
|
||||
});
|
||||
|
||||
// Trigger the handler for the remove icon
|
||||
$remove.trigger('click');
|
||||
});
|
||||
@@ -0,0 +1,188 @@
|
||||
module('Selection containers - Open On Key Down');
|
||||
|
||||
var KEYS = require('select2/keys');
|
||||
var $ = require('jquery');
|
||||
|
||||
/**
|
||||
* Build a keydown event with the given key code and extra options.
|
||||
*
|
||||
* @param {Number} keyCode the keyboard code to be used for the 'which'
|
||||
* attribute of the keydown event.
|
||||
* @param {Object} eventProps extra properties to build the keydown event.
|
||||
*
|
||||
* @return {jQuery.Event} a 'keydown' type event.
|
||||
*/
|
||||
function buildKeyDownEvent (keyCode, eventProps) {
|
||||
return $.Event('keydown', $.extend({}, { which: keyCode }, eventProps));
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper function providing a select2 element with a given enabled/disabled
|
||||
* state that will get a given keydown event triggered on it. Provide an
|
||||
* assertion callback function to test the results of the triggered event.
|
||||
*
|
||||
* @param {Boolean} isEnabled the enabled state of the desired select2
|
||||
* element.
|
||||
* @param {String} testName name for the test.
|
||||
* @param {Number} keyCode used to set the 'which' attribute of the
|
||||
* keydown event.
|
||||
* @param {Object} eventProps attributes to be used to build the keydown
|
||||
* event.
|
||||
* @param {Function} fn assertion callback to perform checks on the
|
||||
* result of triggering the event, receives the
|
||||
* 'assert' variable for the test and the select2
|
||||
* instance behind the built <select> element.
|
||||
* @return {null}
|
||||
*/
|
||||
function testAbled(isEnabled, testName, keyCode, eventProps, fn) {
|
||||
test(testName, function (assert) {
|
||||
var $element = $(
|
||||
'<select>' +
|
||||
'<option>one</option>' +
|
||||
'<option>two</option>' +
|
||||
'</select>'
|
||||
);
|
||||
$('#qunit-fixture').append($element);
|
||||
$element.select2({ disabled: !isEnabled });
|
||||
|
||||
var select2 = $element.data('select2');
|
||||
var $selection = select2.$selection;
|
||||
|
||||
assert.notOk(select2.isOpen(), 'The instance should not be open');
|
||||
assert.equal(select2.isEnabled(), isEnabled);
|
||||
|
||||
var event = buildKeyDownEvent(keyCode, eventProps);
|
||||
assert.ok(event.which, 'The event\'s key code (.which) should be set');
|
||||
|
||||
$selection.trigger(event);
|
||||
|
||||
fn(assert, select2);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the given keydown event on an enabled element. See #testAbled for
|
||||
* params.
|
||||
*/
|
||||
function testEnabled (testName, keyCode, eventProps, fn) {
|
||||
testAbled(true, testName, keyCode, eventProps, fn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the given keydown event on a disabled element. See #testAbled for
|
||||
* params.
|
||||
*/
|
||||
function testDisabled (testName, keyCode, eventProps, fn) {
|
||||
testAbled(false, testName, keyCode, eventProps, fn);
|
||||
}
|
||||
|
||||
/**
|
||||
* Assertion function used by the above test* wrappers. Asserts that the given
|
||||
* select2 instance is open.
|
||||
*
|
||||
* @param {Assert} assert
|
||||
* @param {Select2} select
|
||||
* @return {null}
|
||||
*/
|
||||
function assertOpened (assert, select2) {
|
||||
assert.ok(select2.isOpen(), 'The element should be open');
|
||||
}
|
||||
|
||||
/**
|
||||
* Assertion function used by the above test* wrappers. Asserts that the given
|
||||
* select2 instance is not open.
|
||||
*
|
||||
* @param {Assert} assert
|
||||
* @param {Select2} select
|
||||
* @return {null}
|
||||
*/
|
||||
function assertNotOpened (assert, select2) {
|
||||
assert.notOk(select2.isOpen(), 'The element should not be open');
|
||||
}
|
||||
|
||||
/**
|
||||
* ENTER, SPACE, and ALT+DOWN should all open an enabled select2 element.
|
||||
*/
|
||||
testEnabled(
|
||||
'enabled element will open on ENTER',
|
||||
KEYS.ENTER, {},
|
||||
assertOpened
|
||||
);
|
||||
testEnabled(
|
||||
'enabled element will open on SPACE',
|
||||
KEYS.SPACE, {},
|
||||
assertOpened
|
||||
);
|
||||
testEnabled(
|
||||
'enabled element will open on ALT+DOWN',
|
||||
KEYS.DOWN, { altKey: true },
|
||||
assertOpened
|
||||
);
|
||||
|
||||
/**
|
||||
* Some other keys triggered on an enabled select2 element should not open it.
|
||||
*/
|
||||
testEnabled(
|
||||
'enabled element will not open on UP',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testEnabled(
|
||||
'enabled element will not open on DOWN',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testEnabled(
|
||||
'enabled element will not open on LEFT',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testEnabled(
|
||||
'enabled element will not open on RIGHT',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
|
||||
/*
|
||||
* The keys that will open an enabled select2 element should not open a disabled
|
||||
* one.
|
||||
*/
|
||||
testDisabled(
|
||||
'disabled element will not open on ENTER',
|
||||
KEYS.ENTER, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testDisabled(
|
||||
'disabled element will not open on SPACE',
|
||||
KEYS.SPACE, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testDisabled(
|
||||
'disabled element will not open on ALT+DOWN',
|
||||
KEYS.DOWN, { altKey: true },
|
||||
assertNotOpened
|
||||
);
|
||||
|
||||
/**
|
||||
* Other keys should continue to not open a disabled select2 element.
|
||||
*/
|
||||
testDisabled(
|
||||
'disabled element will not open on UP',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testDisabled(
|
||||
'disabled element will not open on DOWN',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testDisabled(
|
||||
'disabled element will not open on LEFT',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
testDisabled(
|
||||
'disabled element will not open on RIGHT',
|
||||
KEYS.UP, {},
|
||||
assertNotOpened
|
||||
);
|
||||
@@ -0,0 +1,74 @@
|
||||
module('Selection containers - Placeholders');
|
||||
|
||||
var Placeholder = require('select2/selection/placeholder');
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var SinglePlaceholder = Utils.Decorate(SingleSelection, Placeholder);
|
||||
|
||||
var placeholderOptions = new Options({
|
||||
placeholder: {
|
||||
id: 'placeholder',
|
||||
text: 'This is the placeholder'
|
||||
}
|
||||
});
|
||||
|
||||
test('normalizing placeholder ignores objects', function (assert) {
|
||||
var selection = new SinglePlaceholder(
|
||||
$('#qunit-fixture .single'),
|
||||
placeholderOptions
|
||||
);
|
||||
|
||||
var original = {
|
||||
id: 'test',
|
||||
text: 'testing'
|
||||
};
|
||||
|
||||
var normalized = selection.normalizePlaceholder(original);
|
||||
|
||||
assert.equal(original, normalized);
|
||||
});
|
||||
|
||||
test('normalizing placeholder gives object for string', function (assert) {
|
||||
var selection = new SinglePlaceholder(
|
||||
$('#qunit-fixture .single'),
|
||||
placeholderOptions
|
||||
);
|
||||
|
||||
var normalized = selection.normalizePlaceholder('placeholder');
|
||||
|
||||
assert.equal(normalized.id, '');
|
||||
assert.equal(normalized.text, 'placeholder');
|
||||
});
|
||||
|
||||
|
||||
test('text is shown for placeholder option on single', function (assert) {
|
||||
var selection = new SinglePlaceholder(
|
||||
$('#qunit-fixture .single'),
|
||||
placeholderOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([{
|
||||
id: 'placeholder'
|
||||
}]);
|
||||
|
||||
assert.equal($selection.text(), 'This is the placeholder');
|
||||
});
|
||||
|
||||
test('placeholder is shown when no options are selected', function (assert) {
|
||||
var selection = new SinglePlaceholder(
|
||||
$('#qunit-fixture .multiple'),
|
||||
placeholderOptions
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
|
||||
selection.update([]);
|
||||
|
||||
assert.equal($selection.text(), 'This is the placeholder');
|
||||
});
|
||||
@@ -0,0 +1,217 @@
|
||||
module('Selection containers - Inline search - Accessibility');
|
||||
|
||||
var MultipleSelection = require('select2/selection/multiple');
|
||||
var InlineSearch = require('select2/selection/search');
|
||||
|
||||
var $ = require('jquery');
|
||||
|
||||
var Utils = require('select2/utils');
|
||||
var Options = require('select2/options');
|
||||
var options = new Options({});
|
||||
|
||||
test('role attribute is set to searchbox', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('input').attr('role'),
|
||||
'searchbox',
|
||||
'The search box is marked as a search box'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-autocomplete attribute is present', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$selection.find('input').attr('aria-autocomplete'),
|
||||
'list',
|
||||
'The search box is marked as autocomplete'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-activedescendant should not be set initiailly', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
assert.ok(
|
||||
!$search.attr('aria-activedescendant'),
|
||||
'The search box should not point to anything when it is first rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-activedescendant should be set after highlight', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
container.trigger('results:focus', {
|
||||
data: {
|
||||
_resultId: 'test'
|
||||
}
|
||||
});
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
assert.equal(
|
||||
$search.attr('aria-activedescendant'),
|
||||
'test',
|
||||
'The search is pointing to the focused result'
|
||||
);
|
||||
});
|
||||
|
||||
test('activedescendant should remove if there is no ID', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.attr('aria-activedescendant', 'test');
|
||||
|
||||
container.trigger('results:focus', {
|
||||
data: {}
|
||||
});
|
||||
|
||||
assert.ok(
|
||||
!$search.attr('aria-activedescendant'),
|
||||
'There is no result for the search to be pointing to'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-activedescendant should be removed when closed', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.attr('aria-activedescendant', 'something');
|
||||
|
||||
container.trigger('close');
|
||||
|
||||
assert.ok(
|
||||
!$search.attr('aria-activedescendant'),
|
||||
'There is no active descendant when the dropdown is closed'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-controls should not be set initiailly', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
assert.ok(
|
||||
!$search.attr('aria-controls'),
|
||||
'The search box should not point to the results when it is first rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-controls should be set when opened', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
container.trigger('open');
|
||||
|
||||
assert.ok(
|
||||
$search.attr('aria-controls'),
|
||||
'The search should point to the results when it is opened'
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-controls should be removed when closed', function (assert) {
|
||||
var $select = $('#qunit-fixture .multiple');
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
var selection = new CustomSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.attr('aria-controls', 'something');
|
||||
|
||||
container.trigger('close');
|
||||
|
||||
assert.ok(
|
||||
!$search.attr('aria-controls'),
|
||||
'There are no results for the search box to point to when it is closed'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
module('Selection containers - Inline search - Placeholder');
|
||||
|
||||
var MultipleSelection = require('select2/selection/multiple');
|
||||
var InlineSearch = require('select2/selection/search');
|
||||
var SelectionPlaceholder = require('select2/selection/placeholder');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var CustomSelection = Utils.Decorate(
|
||||
Utils.Decorate(MultipleSelection, SelectionPlaceholder),
|
||||
InlineSearch
|
||||
);
|
||||
|
||||
test('width does not extend the search box', function (assert) {
|
||||
assert.expect(2);
|
||||
|
||||
var $container = $(
|
||||
'<div style="width: 100px; display: table-cell">' +
|
||||
'<div style="width: 100%" ' +
|
||||
'class="select2-container select2-container--default"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
var container = new MockContainer();
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, new Options({
|
||||
placeholder: 'Test placeholder'
|
||||
}));
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
$('#qunit-fixture').append($container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
assert.equal(
|
||||
$search.outerWidth(),
|
||||
60,
|
||||
'The search should not be the entire width of the container'
|
||||
);
|
||||
|
||||
assert.equal(
|
||||
$container.children().outerWidth(),
|
||||
100,
|
||||
'The container should be the width assigned to the parent in CSS'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,277 @@
|
||||
module('Selection containers - Inline search');
|
||||
|
||||
var MultipleSelection = require('select2/selection/multiple');
|
||||
var InlineSearch = require('select2/selection/search');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var options = new Options({});
|
||||
|
||||
test('backspace will remove a choice', function (assert) {
|
||||
assert.expect(3);
|
||||
|
||||
var KEYS = require('select2/keys');
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// The unselect event should be triggered at some point
|
||||
selection.on('unselect', function () {
|
||||
assert.ok(true, 'A choice was unselected');
|
||||
});
|
||||
|
||||
// Add some selections and render the search
|
||||
selection.update([
|
||||
{
|
||||
id: '1',
|
||||
text: 'One'
|
||||
}
|
||||
]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
var $choices = $selection.find('.select2-selection__choice');
|
||||
|
||||
assert.equal($search.length, 1, 'The search was visible');
|
||||
assert.equal($choices.length, 1, 'The choice was rendered');
|
||||
|
||||
// Trigger the backspace on the search
|
||||
var backspace = $.Event('keydown', {
|
||||
which: KEYS.BACKSPACE
|
||||
});
|
||||
$search.trigger(backspace);
|
||||
});
|
||||
|
||||
test('backspace will set the search text', function (assert) {
|
||||
assert.expect(3);
|
||||
|
||||
var KEYS = require('select2/keys');
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Add some selections and render the search
|
||||
selection.update([
|
||||
{
|
||||
id: '1',
|
||||
text: 'One'
|
||||
}
|
||||
]);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
var $choices = $selection.find('.select2-selection__choice');
|
||||
|
||||
assert.equal($search.length, 1, 'The search was visible');
|
||||
assert.equal($choices.length, 1, 'The choice was rendered');
|
||||
|
||||
// Trigger the backspace on the search
|
||||
var backspace = $.Event('keydown', {
|
||||
which: KEYS.BACKSPACE
|
||||
});
|
||||
$search.trigger(backspace);
|
||||
|
||||
assert.equal($search.val(), 'One', 'The search text was set');
|
||||
});
|
||||
|
||||
test('updating selection does not shift the focus', function (assert) {
|
||||
// Check for IE 8, which triggers a false negative during testing
|
||||
if (window.attachEvent && !window.addEventListener) {
|
||||
// We must expect 0 assertions or the test will fail
|
||||
assert.expect(0);
|
||||
return;
|
||||
}
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.trigger('focus');
|
||||
|
||||
assert.equal($search.length, 1, 'The search was not visible');
|
||||
|
||||
assert.equal(
|
||||
document.activeElement,
|
||||
$search[0],
|
||||
'The search did not have focus originally'
|
||||
);
|
||||
|
||||
// Trigger an update, this should redraw the search box
|
||||
selection.update([]);
|
||||
|
||||
assert.equal($search.length, 1, 'The search box disappeared');
|
||||
|
||||
assert.equal(
|
||||
document.activeElement,
|
||||
$search[0],
|
||||
'The search did not have focus after the selection was updated'
|
||||
);
|
||||
});
|
||||
|
||||
test('the focus event shifts the focus', function (assert) {
|
||||
// Check for IE 8, which triggers a false negative during testing
|
||||
if (window.attachEvent && !window.addEventListener) {
|
||||
// We must expect 0 assertions or the test will fail
|
||||
assert.expect(0);
|
||||
return;
|
||||
}
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
|
||||
// The search should not be automatically focused
|
||||
|
||||
var $search = $selection.find('input');
|
||||
|
||||
assert.notEqual(
|
||||
document.activeElement,
|
||||
$search[0],
|
||||
'The search had focus originally'
|
||||
);
|
||||
|
||||
assert.equal($search.length, 1, 'The search was not visible');
|
||||
|
||||
// Focus the container
|
||||
|
||||
container.trigger('focus');
|
||||
|
||||
// Make sure it focuses the search
|
||||
|
||||
assert.equal($search.length, 1, 'The search box disappeared');
|
||||
|
||||
assert.equal(
|
||||
document.activeElement,
|
||||
$search[0],
|
||||
'The search did not have focus originally'
|
||||
);
|
||||
});
|
||||
|
||||
test('search box without text should propagate click', function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
|
||||
$selection.on('click', function () {
|
||||
assert.ok(true, 'The click event should not have been trapped');
|
||||
});
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.trigger('click');
|
||||
});
|
||||
|
||||
test('search box with text should not propagate click', function (assert) {
|
||||
assert.expect(0);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
|
||||
$selection.on('click', function () {
|
||||
assert.ok(false, 'The click event should have been trapped');
|
||||
});
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.val('test');
|
||||
$search.trigger('click');
|
||||
});
|
||||
|
||||
test('search box with text should not close dropdown', function (assert) {
|
||||
assert.expect(0);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
|
||||
|
||||
var $element = $('#qunit-fixture .multiple');
|
||||
var selection = new CustomSelection($element, options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
// Update the selection so the search is rendered
|
||||
selection.update([]);
|
||||
|
||||
// Make it visible so the browser can place focus on the search
|
||||
$container.append($selection);
|
||||
|
||||
container.on('close', function () {
|
||||
assert.ok(false, 'The dropdown should not have closed');
|
||||
});
|
||||
|
||||
var $search = $selection.find('input');
|
||||
$search.val('test');
|
||||
$search.trigger('click');
|
||||
});
|
||||
@@ -0,0 +1,227 @@
|
||||
module('Selection containers - Single');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var options = new Options({});
|
||||
|
||||
test('display uses templateSelection', function (assert) {
|
||||
var called = false;
|
||||
|
||||
var templateOptions = new Options({
|
||||
templateSelection: function (data) {
|
||||
called = true;
|
||||
|
||||
return data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
templateOptions
|
||||
);
|
||||
|
||||
var out = selection.display({
|
||||
text: 'test'
|
||||
});
|
||||
|
||||
assert.ok(called);
|
||||
|
||||
assert.equal(out, 'test');
|
||||
});
|
||||
|
||||
test('templateSelection can addClass', function (assert) {
|
||||
var called = false;
|
||||
|
||||
var templateOptions = new Options({
|
||||
templateSelection: function (data, container) {
|
||||
called = true;
|
||||
container.addClass('testclass');
|
||||
return data.text;
|
||||
}
|
||||
});
|
||||
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
templateOptions
|
||||
);
|
||||
|
||||
var $container = selection.selectionContainer();
|
||||
|
||||
var out = selection.display({
|
||||
text: 'test'
|
||||
}, $container);
|
||||
|
||||
assert.ok(called);
|
||||
|
||||
assert.equal(out, 'test');
|
||||
|
||||
assert.ok($container.hasClass('testclass'));
|
||||
});
|
||||
|
||||
test('empty update clears the selection', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
$rendered.text('testing');
|
||||
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.text(),
|
||||
'',
|
||||
'There should have been nothing rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('empty update clears the selection title', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
$rendered.attr('title', 'testing');
|
||||
|
||||
selection.update([]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if nothing is rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('update renders the data text', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
selection.update([{
|
||||
text: 'test'
|
||||
}]);
|
||||
|
||||
assert.equal($rendered.text(), 'test');
|
||||
});
|
||||
|
||||
test('update sets the title to the data text', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
selection.update([{
|
||||
text: 'test'
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
'test',
|
||||
'The title should have been set to the text'
|
||||
);
|
||||
});
|
||||
|
||||
test('update sets the title to the data title', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
selection.update([{
|
||||
text: 'test',
|
||||
title: 'correct'
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
'correct',
|
||||
'The title should have taken precedence over the text'
|
||||
);
|
||||
});
|
||||
|
||||
test('update should clear title for placeholder options', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
$rendered.attr('title', 'testing');
|
||||
|
||||
selection.update([{
|
||||
id: '',
|
||||
text: ''
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if a placeholder is rendered'
|
||||
);
|
||||
});
|
||||
|
||||
test('update should clear title for options without text', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
$rendered.attr('title', 'testing');
|
||||
|
||||
selection.update([{
|
||||
id: ''
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.attr('title'),
|
||||
undefined,
|
||||
'The title should be removed if there is no text or title property'
|
||||
);
|
||||
});
|
||||
|
||||
test('escapeMarkup is being used', function (assert) {
|
||||
var selection = new SingleSelection(
|
||||
$('#qunit-fixture .single'),
|
||||
options
|
||||
);
|
||||
|
||||
var $selection = selection.render();
|
||||
var $rendered = $selection.find('.select2-selection__rendered');
|
||||
|
||||
var unescapedText = '<script>bad("stuff");</script>';
|
||||
|
||||
selection.update([{
|
||||
text: unescapedText
|
||||
}]);
|
||||
|
||||
assert.equal(
|
||||
$rendered.text(),
|
||||
unescapedText,
|
||||
'The text should be escaped by default to prevent injection'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,33 @@
|
||||
module('Selection containers - Stoping event propagation');
|
||||
|
||||
var SingleSelection = require('select2/selection/single');
|
||||
var StopPropagation = require('select2/selection/stopPropagation');
|
||||
|
||||
var $ = require('jquery');
|
||||
var Options = require('select2/options');
|
||||
var Utils = require('select2/utils');
|
||||
|
||||
var CutomSelection = Utils.Decorate(SingleSelection, StopPropagation);
|
||||
|
||||
var options = new Options();
|
||||
|
||||
test('click event does not propagate', function (assert) {
|
||||
assert.expect(1);
|
||||
|
||||
var $container = $('#qunit-fixture .event-container');
|
||||
var container = new MockContainer();
|
||||
|
||||
var selection = new CutomSelection($('#qunit-fixture select'), options);
|
||||
|
||||
var $selection = selection.render();
|
||||
selection.bind(container, $container);
|
||||
|
||||
$container.append($selection);
|
||||
$container.on('click', function () {
|
||||
assert.ok(false, 'The click event should have been stopped');
|
||||
});
|
||||
|
||||
$selection.trigger('click');
|
||||
|
||||
assert.ok(true, 'Something went wrong if this failed');
|
||||
});
|
||||
Reference in New Issue
Block a user