584d3b48a2
`selectOnClose` is a new option which works very much like the old `selectOnBlur` option. When the `close` event is triggered, the highlighted result is automatically selected. This is useful for single selects, which is where it is designed to be used, but it can also be used on multiple selects. This also adds tests to verify that this works in the future. During the creation of the test, we noticed that we were missing a mock container that could be used for triggering events. One was created and a general mock JS file was created to hold any future mocks for tests.
136 lines
3.0 KiB
JavaScript
136 lines
3.0 KiB
JavaScript
module('Dropdown - selectOnClose');
|
|
|
|
var Utils = require('select2/utils');
|
|
var Options = require('select2/options');
|
|
|
|
var SelectData = require('select2/data/select');
|
|
|
|
var Results = require('select2/results');
|
|
var SelectOnClose = require('select2/dropdown/selectOnClose');
|
|
|
|
var ModifiedResults = Utils.Decorate(Results, SelectOnClose);
|
|
|
|
var options = new Options({
|
|
selectOnClose: true
|
|
});
|
|
|
|
test('will not trigger if no results were given', function (assert) {
|
|
expect(0);
|
|
|
|
var $element = $('<select></select>');
|
|
var select = new ModifiedResults($element, options, new SelectData($element));
|
|
|
|
var $dropdown = select.render();
|
|
|
|
var container = new MockContainer();
|
|
select.bind(container, $('<div></div>'));
|
|
|
|
select.on('select', function () {
|
|
assert.ok(false, 'The select event should not have been triggered');
|
|
});
|
|
|
|
container.trigger('close');
|
|
});
|
|
|
|
test('will not trigger if the results list is empty', function (assert) {
|
|
expect(1);
|
|
|
|
var $element = $('<select></select>');
|
|
var select = new ModifiedResults($element, options, new SelectData($element));
|
|
|
|
var $dropdown = select.render();
|
|
|
|
var container = new MockContainer();
|
|
select.bind(container, $('<div></div>'));
|
|
|
|
select.on('select', function () {
|
|
assert.ok(false, 'The select event should not have been triggered');
|
|
});
|
|
|
|
select.append({
|
|
results: []
|
|
});
|
|
|
|
assert.equal(
|
|
$dropdown.find('li').length,
|
|
0,
|
|
'There should not be any results in the dropdown'
|
|
);
|
|
|
|
container.trigger('close');
|
|
});
|
|
|
|
test('will not trigger if no results here highlighted', function (assert) {
|
|
expect(2);
|
|
|
|
var $element = $('<select></select>');
|
|
var select = new ModifiedResults($element, options, new SelectData($element));
|
|
|
|
var $dropdown = select.render();
|
|
|
|
var container = new MockContainer();
|
|
select.bind(container, $('<div></div>'));
|
|
|
|
select.on('select', function () {
|
|
assert.ok(false, 'The select event should not have been triggered');
|
|
});
|
|
|
|
select.append({
|
|
results: [
|
|
{
|
|
id: '1',
|
|
text: 'Test'
|
|
}
|
|
]
|
|
});
|
|
|
|
assert.equal(
|
|
$dropdown.find('li').length,
|
|
1,
|
|
'There should be one result in the dropdown'
|
|
);
|
|
|
|
assert.equal(
|
|
$.trim($dropdown.find('li').text()),
|
|
'Test',
|
|
'The result should be the same as the one we appended'
|
|
);
|
|
|
|
container.trigger('close');
|
|
});
|
|
|
|
test('will trigger if there is a highlighted result', function (assert) {
|
|
expect(2);
|
|
|
|
var $element = $('<select></select>');
|
|
var select = new ModifiedResults($element, options, new SelectData($element));
|
|
|
|
var $dropdown = select.render();
|
|
|
|
var container = new MockContainer();
|
|
select.bind(container, $('<div></div>'));
|
|
|
|
select.on('select', function () {
|
|
assert.ok(true, 'The select event should have been triggered');
|
|
});
|
|
|
|
select.append({
|
|
results: [
|
|
{
|
|
id: '1',
|
|
text: 'Test'
|
|
}
|
|
]
|
|
});
|
|
|
|
assert.equal(
|
|
$dropdown.find('li').length,
|
|
1,
|
|
'There should be one result in the dropdown'
|
|
);
|
|
|
|
$dropdown.find('li').addClass('select2-results__option--highlighted');
|
|
|
|
container.trigger('close');
|
|
});
|