331 lines
7.0 KiB
JavaScript
331 lines
7.0 KiB
JavaScript
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 $ = 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'
|
|
);
|
|
});
|