containerCss-tests.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. module('Dropdown - containerCssClass compatibility');
  2. var $ = require('jquery');
  3. var Utils = require('select2/utils');
  4. var Options = require('select2/options');
  5. var SingleSelection = require('select2/selection/single');
  6. var ContainerCSS = Utils.Decorate(
  7. SingleSelection,
  8. require('select2/compat/containerCss')
  9. );
  10. test('all classes will be copied if :all: is used', function (assert) {
  11. var $element = $('<select class="test copy works"></select>');
  12. var options = new Options({
  13. containerCssClass: ':all:'
  14. });
  15. var select = new ContainerCSS($element, options);
  16. var $container = select.render();
  17. assert.ok($container.hasClass('test'));
  18. assert.ok($container.hasClass('copy'));
  19. assert.ok($container.hasClass('works'));
  20. assert.ok(!$container.hasClass(':all:'));
  21. });
  22. test(':all: can be used with other classes', function (assert) {
  23. var $element = $('<select class="test copy works"></select>');
  24. var options = new Options({
  25. containerCssClass: ':all: other'
  26. });
  27. var select = new ContainerCSS($element, options);
  28. var $container = select.render();
  29. assert.ok($container.hasClass('test'));
  30. assert.ok($container.hasClass('copy'));
  31. assert.ok($container.hasClass('works'));
  32. assert.ok($container.hasClass('other'));
  33. assert.ok(!$container.hasClass(':all:'));
  34. });
  35. test('classes can be passed in as a string', function (assert) {
  36. var $element = $('<select class="test copy works"></select>');
  37. var options = new Options({
  38. containerCssClass: 'other'
  39. });
  40. var select = new ContainerCSS($element, options);
  41. var $container = select.render();
  42. assert.ok($container.hasClass('other'));
  43. });
  44. test('a function can be used based on the element', function (assert){
  45. var $element = $('<select class="test"></select>');
  46. var options = new Options({
  47. containerCssClass: function ($element) {
  48. return 'function';
  49. }
  50. });
  51. var select = new ContainerCSS($element, options);
  52. var $container = select.render();
  53. assert.ok($container.hasClass('function'));
  54. assert.ok(!$container.hasClass('test'));
  55. });
  56. test(':all: works around custom adapters', function (assert) {
  57. var $element = $('<select class="test"></select>');
  58. var options = new Options({
  59. containerCssClass: ':all: something',
  60. adaptContainerCssClass: function (clazz) {
  61. return clazz + '-modified';
  62. }
  63. });
  64. var select = new ContainerCSS($element, options);
  65. var $container = select.render();
  66. assert.ok($container.hasClass('something'));
  67. assert.ok($container.hasClass('test'));
  68. assert.ok($container.hasClass('test-modified'));
  69. });
  70. module('Selection - adaptContainerCss compatibility');
  71. test('only return when adapted', function (assert) {
  72. var $element = $('<select class="original"></select>');
  73. var options = new Options({
  74. adaptContainerCssClass: function (clazz) {
  75. return 'modified';
  76. }
  77. });
  78. var select = new ContainerCSS($element, options);
  79. var $container = select.render();
  80. assert.ok(!$container.hasClass('original'));
  81. assert.ok($container.hasClass('modified'));
  82. });