RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-16 20:13:16 +03:00
Code Issues Projects Releases Wiki Activity

Add regression tests for the positioning issues

Browse Source 
This adds a regression test that verifies the problem with positioning
the dropdown when the parent is a statically positioned element that
still has an offset. This could typically be seen if the body element
has an offset, which unfortunately it almost always does because of the
default user stylesheet in browsers. This was not caught during
pre-release testing because all of the test pages reset the margins and
padding on the body element.

This regression test verifies that the offsets that should be set for
the dropdown are calculated correctly. These were surprisingly difficult
to do because of how the offset is calculated using different
positioning techniques.

These tests are for https://github.com/select2/select2/issues/3970
This commit is contained in:
Kevin Brown 2016-01-01 16:47:49 -05:00
parent 9c35475c6c
commit b5a4698250
1 changed files with 98 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
tests/dropdown/positioning-tests.js
View File

@ -56,4 +56,102 @@ test('appends to the dropdown parent', function (assert) {
$.contains($parent[0], $dropdown[0]),
'The dropdown should be contained within the parent container'
);
});
test('dropdown is positioned with static margins', function (assert) {
var $ = require('jquery');
var $select = $('<select></select>');
var $parent = $('<div style="position: static; margin-top: 5px; margin-left: 10px;"></div>');
var $container = $('<span></span>');
var container = new MockContainer();
$('#qunit-fixture').empty();
$parent.appendTo($('#qunit-fixture'));
$container.appendTo($parent);
var Utils = require('select2/utils');
var Options = require('select2/options');
var Dropdown = require('select2/dropdown');
var AttachBody = require('select2/dropdown/attachBody');
var DropdownAdapter = Utils.Decorate(Dropdown, AttachBody);
var dropdown = new DropdownAdapter($select, new Options({
dropdownParent: $parent
}));
var $dropdown = dropdown.render();
assert.equal(
$dropdown[0].style.top,
0,
'The drodpown should not have any offset before it is displayed'
);
dropdown.bind(container, $container);
dropdown.position($dropdown, $container);
dropdown._showDropdown();
assert.equal(
$dropdown.css('top'),
'5px',
'The offset should be 5px at the top'
);
assert.equal(
$dropdown.css('left'),
'10px',
'The offset should be 10px on the left'
);
});
test('dropdown is positioned with absolute offsets', function (assert) {
var $ = require('jquery');
var $select = $('<select></select>');
var $parent = $('<div style="position: absolute; top: 10px; left: 5px;"></div>');
var $container = $('<span></span>');
var container = new MockContainer();
$parent.appendTo($('#qunit-fixture'));
$container.appendTo($parent);
var Utils = require('select2/utils');
var Options = require('select2/options');
var Dropdown = require('select2/dropdown');
var AttachBody = require('select2/dropdown/attachBody');
var DropdownAdapter = Utils.Decorate(Dropdown, AttachBody);
var dropdown = new DropdownAdapter($select, new Options({
dropdownParent: $parent
}));
var $dropdown = dropdown.render();
assert.equal(
$dropdown[0].style.top,
0,
'The drodpown should not have any offset before it is displayed'
);
dropdown.bind(container, $container);
dropdown.position($dropdown, $container);
dropdown._showDropdown();
assert.equal(
$dropdown.css('top'),
'0px',
'There should not be an extra top offset'
);
assert.equal(
$dropdown.css('left'),
'0px',
'There should not be an extra left offset'
);
});