collapse.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. $(function () {
  2. module("collapse")
  3. test("should provide no conflict", function () {
  4. var collapse = $.fn.collapse.noConflict()
  5. ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
  6. $.fn.collapse = collapse
  7. })
  8. test("should be defined on jquery object", function () {
  9. ok($(document.body).collapse, 'collapse method is defined')
  10. })
  11. test("should return element", function () {
  12. ok($(document.body).collapse()[0] == document.body, 'document.body returned')
  13. })
  14. test("should show a collapsed element", function () {
  15. var el = $('<div class="collapse"></div>').collapse('show')
  16. ok(el.hasClass('in'), 'has class in')
  17. ok(/height/.test(el.attr('style')), 'has height set')
  18. })
  19. test("should hide a collapsed element", function () {
  20. var el = $('<div class="collapse"></div>').collapse('hide')
  21. ok(!el.hasClass('in'), 'does not have class in')
  22. ok(/height/.test(el.attr('style')), 'has height set')
  23. })
  24. test("should not fire shown when show is prevented", function () {
  25. $.support.transition = false
  26. stop()
  27. $('<div class="collapse"/>')
  28. .on('show.bs.collapse', function (e) {
  29. e.preventDefault();
  30. ok(true);
  31. start();
  32. })
  33. .on('shown.bs.collapse', function () {
  34. ok(false);
  35. })
  36. .collapse('show')
  37. })
  38. test("should reset style to auto after finishing opening collapse", function () {
  39. $.support.transition = false
  40. stop()
  41. $('<div class="collapse" style="height: 0px"/>')
  42. .on('show.bs.collapse', function () {
  43. ok(this.style.height == '0px')
  44. })
  45. .on('shown.bs.collapse', function () {
  46. ok(this.style.height == 'auto')
  47. start()
  48. })
  49. .collapse('show')
  50. })
  51. test("should add active class to target when collapse shown", function () {
  52. $.support.transition = false
  53. stop()
  54. var target = $('<a data-toggle="collapse" href="#test1"></a>')
  55. .appendTo($('#qunit-fixture'))
  56. var collapsible = $('<div id="test1"></div>')
  57. .appendTo($('#qunit-fixture'))
  58. .on('show.bs.collapse', function () {
  59. ok(!target.hasClass('collapsed'))
  60. start()
  61. })
  62. target.click()
  63. })
  64. test("should remove active class to target when collapse hidden", function () {
  65. $.support.transition = false
  66. stop()
  67. var target = $('<a data-toggle="collapse" href="#test1"></a>')
  68. .appendTo($('#qunit-fixture'))
  69. var collapsible = $('<div id="test1" class="in"></div>')
  70. .appendTo($('#qunit-fixture'))
  71. .on('hide.bs.collapse', function () {
  72. ok(target.hasClass('collapsed'))
  73. start()
  74. })
  75. target.click()
  76. })
  77. test("should remove active class from inactive accordion targets", function () {
  78. $.support.transition = false
  79. stop()
  80. var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
  81. .appendTo($('#qunit-fixture'))
  82. var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
  83. .appendTo(accordion.find('.accordion-group').eq(0))
  84. var collapsible1 = $('<div id="body1" class="in"></div>')
  85. .appendTo(accordion.find('.accordion-group').eq(0))
  86. var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
  87. .appendTo(accordion.find('.accordion-group').eq(1))
  88. var collapsible2 = $('<div id="body2"></div>')
  89. .appendTo(accordion.find('.accordion-group').eq(1))
  90. var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
  91. .appendTo(accordion.find('.accordion-group').eq(2))
  92. var collapsible3 = $('<div id="body3"></div>')
  93. .appendTo(accordion.find('.accordion-group').eq(2))
  94. .on('show.bs.collapse', function () {
  95. ok(target1.hasClass('collapsed'))
  96. ok(target2.hasClass('collapsed'))
  97. ok(!target3.hasClass('collapsed'))
  98. start()
  99. })
  100. target3.click()
  101. })
  102. test("should allow dots in data-parent", function () {
  103. $.support.transition = false
  104. stop()
  105. var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
  106. .appendTo($('#qunit-fixture'))
  107. var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
  108. .appendTo(accordion.find('.accordion-group').eq(0))
  109. var collapsible1 = $('<div id="body1" class="in"></div>')
  110. .appendTo(accordion.find('.accordion-group').eq(0))
  111. var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
  112. .appendTo(accordion.find('.accordion-group').eq(1))
  113. var collapsible2 = $('<div id="body2"></div>')
  114. .appendTo(accordion.find('.accordion-group').eq(1))
  115. var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
  116. .appendTo(accordion.find('.accordion-group').eq(2))
  117. var collapsible3 = $('<div id="body3"></div>')
  118. .appendTo(accordion.find('.accordion-group').eq(2))
  119. .on('show.bs.collapse', function () {
  120. ok(target1.hasClass('collapsed'))
  121. ok(target2.hasClass('collapsed'))
  122. ok(!target3.hasClass('collapsed'))
  123. start()
  124. })
  125. target3.click()
  126. })
  127. })