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'
);
});
|
Download
