From 7da17eae2ba737e1416f2a21e72427ca6e183ded Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sun, 21 Jul 2019 06:59:33 -0400 Subject: [PATCH 1/2] Rewrote maximumSelectionLength tests to use container These brings the tests in line with other tests which we have, and makes it easier to understand what is actually going on in the tests. This also removes a redundant set of tests where we were testing with => 2 options being allowed. There are no current edge cases that would have required this. --- tests/data/maximumSelectionLength-tests.js | 183 ++++++--------------- 1 file changed, 54 insertions(+), 129 deletions(-) diff --git a/tests/data/maximumSelectionLength-tests.js b/tests/data/maximumSelectionLength-tests.js index 89943b383a..7ba9fab496 100644 --- a/tests/data/maximumSelectionLength-tests.js +++ b/tests/data/maximumSelectionLength-tests.js @@ -1,202 +1,127 @@ module('Data adapters - Maximum selection length'); +var SelectData = require('select2/data/select'); var MaximumSelectionLength = require('select2/data/maximumSelectionLength'); var $ = require('jquery'); var Options = require('select2/options'); var Utils = require('select2/utils'); -function MaximumSelectionStub () { - this.called = false; - this.currentData = []; -} +var MaximumSelectionData = Utils.Decorate(SelectData, MaximumSelectionLength); -MaximumSelectionStub.prototype.current = function (callback) { - callback(this.currentData); -}; - -MaximumSelectionStub.prototype.val = function (val) { - this.currentData.push(val); -}; - -MaximumSelectionStub.prototype.query = function (params, callback) { - this.called = true; -}; +test('0 never displays the notice', function (assert) { + assert.expect(3); -var MaximumSelectionData = Utils.Decorate( - MaximumSelectionStub, - MaximumSelectionLength -); + var $select = $('#qunit-fixture .multiple'); -test('0 never displays the notice', function (assert) { var zeroOptions = new Options({ maximumSelectionLength: 0 }); - var data = new MaximumSelectionData(null, zeroOptions); + var container = new MockContainer(); + var data = new MaximumSelectionData($select, zeroOptions); - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; + data.bind(container, null); + + data.on('results:message', function () { + assert.ok(false, 'The message should not be displayed'); + }); data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - assert.ok(data.called); - - data = new MaximumSelectionData(null, zeroOptions); - - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; - - data.val('1'); + $select.val(['One']); data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - assert.ok(data.called); - - data = new MaximumSelectionData(null, zeroOptions); - - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; - - data.val('1'); - data.val('2'); + $select.val(['One', 'Two']); data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - - assert.ok(data.called); }); test('< 0 never displays the notice', function (assert) { + assert.expect(3); + + var $select = $('#qunit-fixture .multiple'); + var negativeOptions = new Options({ maximumSelectionLength: -1 }); - var data = new MaximumSelectionData(null, negativeOptions); + var container = new MockContainer(); + var data = new MaximumSelectionData($select, negativeOptions); - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; + data.bind(container, null); - data.query({ - term: '' + data.on('results:message', function () { + assert.ok(false, 'The message should not be displayed'); }); - assert.ok(data.called); - - data = new MaximumSelectionData(null, negativeOptions); - - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; - - data.val('1'); - data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - assert.ok(data.called); - - data = new MaximumSelectionData(null, negativeOptions); - - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; - - data.val('1'); - data.val('2'); + $select.val(['One']); data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - assert.ok(data.called); -}); - -test('triggers when >= 1 selection' , function (assert) { - var maxOfOneOptions = new Options({ - maximumSelectionLength: 1 - }); - var data = new MaximumSelectionData(null, maxOfOneOptions); - - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; + $select.val(['One', 'Two']); data.query({ term: '' + }, function () { + assert.ok(true, 'The results should be queried'); }); - - assert.ok(data.called); - - data = new MaximumSelectionData(null, maxOfOneOptions); - - data.trigger = function () { - assert.ok(true, 'The event should be triggered.'); - }; - - data.val('1'); - - data.query({ - term: '' - }); - - assert.ok(!data.called); - }); -test('triggers when >= 2 selections' , function (assert) { - var maxOfTwoOptions = new Options({ - maximumSelectionLength: 2 - }); - var data = new MaximumSelectionData(null, maxOfTwoOptions); +test('triggers when >= 1 selection' , function (assert) { + assert.expect(2); - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; + var $select = $('#qunit-fixture .multiple'); - data.query({ - term: '' + var maxOfOneOptions = new Options({ + maximumSelectionLength: 1 }); - assert.ok(data.called); + var container = new MockContainer(); + var data = new MaximumSelectionData($select, maxOfOneOptions); - data = new MaximumSelectionData(null, maxOfTwoOptions); + data.bind(container, null); - data.trigger = function () { - assert.ok(false, 'No events should be triggered'); - }; + data.on('results:message', function () { + assert.ok(true, 'The message should be displayed'); + }); - data.val('1'); + $select.val(['One']); data.query({ term: '' + }, function () { + assert.ok(false, 'The results should not be queried'); }); - assert.ok(data.called); - - data = new MaximumSelectionData(null, maxOfTwoOptions); - - data.trigger = function () { - assert.ok(true, 'The event should be triggered.'); - }; - - data.val('1'); - data.val('2'); + $select.val(['One', 'Two']); data.query({ term: '' + }, function () { + assert.ok(false, 'The results should not be queried'); }); - - assert.ok(!data.called); - }); From 776766339e9f2ce23ee8f4800d3da7bb6e68a793 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sun, 21 Jul 2019 07:14:07 -0400 Subject: [PATCH 2/2] Fix maximumSelectionLength being ignored by closeOnSelect There was a bug where the `maximumSelectionLength` option would not kick in if the `closeOnSelect` option was enabled. Normally, this was enabled by someone in their global configuration, but it could also be seen when somoene selected an option while holding the meta/ctrl/alt keys. This would implicitly enable the `closeOnSelect` behaviour, even when it was not globally enabled, and cause the bug. This fixes that issue by listening to the `select` event which is triggered whenever an option is selected, and triggers the "maximum selected" message based on that event. This should now force the message to be displayed, even when the results did not have to be queried another time. Fixes #3514 Fixes #3860 Closes #5333 --- src/js/select2/data/maximumSelectionLength.js | 25 ++++++++++++++++++- tests/data/maximumSelectionLength-tests.js | 25 +++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) diff --git a/src/js/select2/data/maximumSelectionLength.js b/src/js/select2/data/maximumSelectionLength.js index ae727529c1..663e94e7b4 100644 --- a/src/js/select2/data/maximumSelectionLength.js +++ b/src/js/select2/data/maximumSelectionLength.js @@ -7,10 +7,30 @@ define([ decorated.call(this, $e, options); } + MaximumSelectionLength.prototype.bind = + function (decorated, container, $container) { + var self = this; + + decorated.call(this, container, $container); + + container.on('select', function () { + self._checkIfMaximumSelected(); + }); + }; + MaximumSelectionLength.prototype.query = function (decorated, params, callback) { var self = this; + this._checkIfMaximumSelected(function () { + decorated.call(self, params, callback); + }); + }; + + MaximumSelectionLength.prototype._checkIfMaximumSelected = + function (_, successCallback) { + var self = this; + this.current(function (currentData) { var count = currentData != null ? currentData.length : 0; if (self.maximumSelectionLength > 0 && @@ -23,7 +43,10 @@ define([ }); return; } - decorated.call(self, params, callback); + + if (successCallback) { + successCallback(); + } }); }; diff --git a/tests/data/maximumSelectionLength-tests.js b/tests/data/maximumSelectionLength-tests.js index 7ba9fab496..f11c7e9a94 100644 --- a/tests/data/maximumSelectionLength-tests.js +++ b/tests/data/maximumSelectionLength-tests.js @@ -125,3 +125,28 @@ test('triggers when >= 1 selection' , function (assert) { assert.ok(false, 'The results should not be queried'); }); }); + +test('triggers after selection' , function (assert) { + assert.expect(1); + + var $select = $('#qunit-fixture .multiple'); + + var maxOfOneOptions = new Options({ + maximumSelectionLength: 1 + }); + + var container = new MockContainer(); + var data = new MaximumSelectionData($select, maxOfOneOptions); + + data.bind(container, null); + + data.on('results:message', function () { + assert.ok(true, 'The message should be displayed'); + }); + + $select.val(['One']); + + container.trigger('select', { + data: {} + }); +});