button.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. $(function () {
  2. 'use strict';
  3. QUnit.module('button plugin')
  4. QUnit.test('should be defined on jquery object', function (assert) {
  5. assert.expect(1)
  6. assert.ok($(document.body).button, 'button method is defined')
  7. })
  8. QUnit.module('button', {
  9. beforeEach: function () {
  10. // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
  11. $.fn.bootstrapButton = $.fn.button.noConflict()
  12. },
  13. afterEach: function () {
  14. $.fn.button = $.fn.bootstrapButton
  15. delete $.fn.bootstrapButton
  16. }
  17. })
  18. QUnit.test('should provide no conflict', function (assert) {
  19. assert.expect(1)
  20. assert.strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
  21. })
  22. QUnit.test('should return jquery collection containing the element', function (assert) {
  23. assert.expect(2)
  24. var $el = $('<div/>')
  25. var $button = $el.bootstrapButton()
  26. assert.ok($button instanceof $, 'returns jquery collection')
  27. assert.strictEqual($button[0], $el[0], 'collection contains element')
  28. })
  29. QUnit.test('should return set state to loading', function (assert) {
  30. assert.expect(4)
  31. var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
  32. assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
  33. $btn.bootstrapButton('loading')
  34. var done = assert.async()
  35. setTimeout(function () {
  36. assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
  37. assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
  38. assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
  39. done()
  40. }, 0)
  41. })
  42. QUnit.test('should return reset state', function (assert) {
  43. assert.expect(7)
  44. var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
  45. assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
  46. $btn.bootstrapButton('loading')
  47. var doneOne = assert.async()
  48. setTimeout(function () {
  49. assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
  50. assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
  51. assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
  52. doneOne()
  53. var doneTwo = assert.async()
  54. $btn.bootstrapButton('reset')
  55. setTimeout(function () {
  56. assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
  57. assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
  58. assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
  59. doneTwo()
  60. }, 0)
  61. }, 0)
  62. })
  63. QUnit.test('should work with an empty string as reset state', function (assert) {
  64. assert.expect(7)
  65. var $btn = $('<button class="btn" data-loading-text="fat"/>')
  66. assert.strictEqual($btn.html(), '', 'btn text equals ""')
  67. $btn.bootstrapButton('loading')
  68. var doneOne = assert.async()
  69. setTimeout(function () {
  70. assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
  71. assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
  72. assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
  73. doneOne()
  74. var doneTwo = assert.async()
  75. $btn.bootstrapButton('reset')
  76. setTimeout(function () {
  77. assert.strictEqual($btn.html(), '', 'btn text equals ""')
  78. assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
  79. assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
  80. doneTwo()
  81. }, 0)
  82. }, 0)
  83. })
  84. QUnit.test('should toggle active', function (assert) {
  85. assert.expect(2)
  86. var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
  87. assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
  88. $btn.bootstrapButton('toggle')
  89. assert.ok($btn.hasClass('active'), 'btn has class active')
  90. })
  91. QUnit.test('should toggle active when btn children are clicked', function (assert) {
  92. assert.expect(2)
  93. var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
  94. var $inner = $('<i/>')
  95. $btn
  96. .append($inner)
  97. .appendTo('#qunit-fixture')
  98. assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
  99. $inner.trigger('click')
  100. assert.ok($btn.hasClass('active'), 'btn has class active')
  101. })
  102. QUnit.test('should toggle aria-pressed', function (assert) {
  103. assert.expect(2)
  104. var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
  105. assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
  106. $btn.bootstrapButton('toggle')
  107. assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
  108. })
  109. QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
  110. assert.expect(2)
  111. var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
  112. var $inner = $('<i/>')
  113. $btn
  114. .append($inner)
  115. .appendTo('#qunit-fixture')
  116. assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
  117. $inner.trigger('click')
  118. assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
  119. })
  120. QUnit.test('should check for closest matching toggle', function (assert) {
  121. assert.expect(12)
  122. var groupHTML = '<div class="btn-group" data-toggle="buttons">'
  123. + '<label class="btn btn-primary active">'
  124. + '<input type="radio" name="options" id="option1" checked="true"> Option 1'
  125. + '</label>'
  126. + '<label class="btn btn-primary">'
  127. + '<input type="radio" name="options" id="option2"> Option 2'
  128. + '</label>'
  129. + '<label class="btn btn-primary">'
  130. + '<input type="radio" name="options" id="option3"> Option 3'
  131. + '</label>'
  132. + '</div>'
  133. var $group = $(groupHTML).appendTo('#qunit-fixture')
  134. var $btn1 = $group.children().eq(0)
  135. var $btn2 = $group.children().eq(1)
  136. assert.ok($btn1.hasClass('active'), 'btn1 has active class')
  137. assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
  138. assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
  139. assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
  140. $btn2.find('input').trigger('click')
  141. assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
  142. assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
  143. assert.ok($btn2.hasClass('active'), 'btn2 has active class')
  144. assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
  145. $btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
  146. assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
  147. assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
  148. assert.ok($btn2.hasClass('active'), 'btn2 has active class')
  149. assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
  150. })
  151. })