width-tests.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. module('Options - Width');
  2. var $ = require('jquery');
  3. var Select2 = require('select2/core');
  4. var select = new Select2($('<select></select>'));
  5. test('string passed as width', function (assert) {
  6. var $test = $('<select></select>');
  7. var width = select._resolveWidth($test, '80%');
  8. assert.equal(width, '80%');
  9. });
  10. test('width from style attribute', function (assert) {
  11. var $test = $('<select style="width: 50%;"></selct>');
  12. var width = select._resolveWidth($test, 'style');
  13. assert.equal(width, '50%');
  14. });
  15. test('width from style returns null if nothing is found', function (assert) {
  16. var $test = $('<select></selct>');
  17. var width = select._resolveWidth($test, 'style');
  18. assert.equal(width, null);
  19. });
  20. test('width from computed element width', function (assert) {
  21. var $style = $(
  22. '<style type="text/css">.css-set-width { width: 500px; }</style>'
  23. );
  24. var $test = $('<select class="css-set-width"></select>');
  25. $('#qunit-fixture').append($style);
  26. $('#qunit-fixture').append($test);
  27. var width = select._resolveWidth($test, 'element');
  28. assert.equal(width, '500px');
  29. });
  30. test('resolve gets the style if it is there', function (assert) {
  31. var $test = $('<select style="width: 20%;"></selct>');
  32. var width = select._resolveWidth($test, 'resolve');
  33. assert.equal(width, '20%');
  34. });
  35. test('resolve falls back to element if there is no style', function (assert) {
  36. var $style = $(
  37. '<style type="text/css">.css-set-width { width: 500px; }</style>'
  38. );
  39. var $test = $('<select class="css-set-width"></select>');
  40. $('#qunit-fixture').append($style);
  41. $('#qunit-fixture').append($test);
  42. var width = select._resolveWidth($test, 'resolve');
  43. assert.equal(width, '500px');
  44. });