bootstrap-dropdown.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. $(function () {
  2. module("bootstrap-dropdowns")
  3. test("should provide no conflict", function () {
  4. var dropdown = $.fn.dropdown.noConflict()
  5. ok(!$.fn.dropdown, 'dropdown was set back to undefined (org value)')
  6. $.fn.dropdown = dropdown
  7. })
  8. test("should be defined on jquery object", function () {
  9. ok($(document.body).dropdown, 'dropdown method is defined')
  10. })
  11. test("should return element", function () {
  12. var el = $("<div />")
  13. ok(el.dropdown()[0] === el[0], 'same element returned')
  14. })
  15. test("should not open dropdown if target is disabled", function () {
  16. var dropdownHTML = '<ul class="tabs">'
  17. + '<li class="dropdown">'
  18. + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
  19. + '<ul class="dropdown-menu">'
  20. + '<li><a href="#">Secondary link</a></li>'
  21. + '<li><a href="#">Something else here</a></li>'
  22. + '<li class="divider"></li>'
  23. + '<li><a href="#">Another link</a></li>'
  24. + '</ul>'
  25. + '</li>'
  26. + '</ul>'
  27. , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  28. ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  29. })
  30. test("should not open dropdown if target is disabled", function () {
  31. var dropdownHTML = '<ul class="tabs">'
  32. + '<li class="dropdown">'
  33. + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
  34. + '<ul class="dropdown-menu">'
  35. + '<li><a href="#">Secondary link</a></li>'
  36. + '<li><a href="#">Something else here</a></li>'
  37. + '<li class="divider"></li>'
  38. + '<li><a href="#">Another link</a></li>'
  39. + '</ul>'
  40. + '</li>'
  41. + '</ul>'
  42. , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  43. ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  44. })
  45. test("should add class open to menu if clicked", function () {
  46. var dropdownHTML = '<ul class="tabs">'
  47. + '<li class="dropdown">'
  48. + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  49. + '<ul class="dropdown-menu">'
  50. + '<li><a href="#">Secondary link</a></li>'
  51. + '<li><a href="#">Something else here</a></li>'
  52. + '<li class="divider"></li>'
  53. + '<li><a href="#">Another link</a></li>'
  54. + '</ul>'
  55. + '</li>'
  56. + '</ul>'
  57. , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  58. ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  59. })
  60. test("should test if element has a # before assuming it's a selector", function () {
  61. var dropdownHTML = '<ul class="tabs">'
  62. + '<li class="dropdown">'
  63. + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  64. + '<ul class="dropdown-menu">'
  65. + '<li><a href="#">Secondary link</a></li>'
  66. + '<li><a href="#">Something else here</a></li>'
  67. + '<li class="divider"></li>'
  68. + '<li><a href="#">Another link</a></li>'
  69. + '</ul>'
  70. + '</li>'
  71. + '</ul>'
  72. , dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').dropdown().click()
  73. ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  74. })
  75. test("should remove open class if body clicked", function () {
  76. var dropdownHTML = '<ul class="tabs">'
  77. + '<li class="dropdown">'
  78. + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
  79. + '<ul class="dropdown-menu">'
  80. + '<li><a href="#">Secondary link</a></li>'
  81. + '<li><a href="#">Something else here</a></li>'
  82. + '<li class="divider"></li>'
  83. + '<li><a href="#">Another link</a></li>'
  84. + '</ul>'
  85. + '</li>'
  86. + '</ul>'
  87. , dropdown = $(dropdownHTML)
  88. .appendTo('#qunit-fixture')
  89. .find('[data-toggle="dropdown"]')
  90. .dropdown()
  91. .click()
  92. ok(dropdown.parent('.dropdown').hasClass('open'), 'open class added on click')
  93. $('body').click()
  94. ok(!dropdown.parent('.dropdown').hasClass('open'), 'open class removed')
  95. dropdown.remove()
  96. })
  97. test("should remove open class if body clicked, with multiple drop downs", function () {
  98. var dropdownHTML =
  99. '<ul class="nav">'
  100. + ' <li><a href="#menu1">Menu 1</a></li>'
  101. + ' <li class="dropdown" id="testmenu">'
  102. + ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <b class="caret"></b></a>'
  103. + ' <ul class="dropdown-menu" role="menu">'
  104. + ' <li><a href="#sub1">Submenu 1</a></li>'
  105. + ' </ul>'
  106. + ' </li>'
  107. + '</ul>'
  108. + '<div class="btn-group">'
  109. + ' <button class="btn">Actions</button>'
  110. + ' <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>'
  111. + ' <ul class="dropdown-menu">'
  112. + ' <li><a href="#">Action 1</a></li>'
  113. + ' </ul>'
  114. + '</div>'
  115. , dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
  116. , first = dropdowns.first()
  117. , last = dropdowns.last()
  118. ok(dropdowns.length == 2, "Should be two dropdowns")
  119. first.click()
  120. ok(first.parents('.open').length == 1, 'open class added on click')
  121. ok($('#qunit-fixture .open').length == 1, 'only one object is open')
  122. $('body').click()
  123. ok($("#qunit-fixture .open").length === 0, 'open class removed')
  124. last.click()
  125. ok(last.parent('.open').length == 1, 'open class added on click')
  126. ok($('#qunit-fixture .open').length == 1, 'only one object is open')
  127. $('body').click()
  128. ok($("#qunit-fixture .open").length === 0, 'open class removed')
  129. $("#qunit-fixture").html("")
  130. })
  131. })