4 QUnit.module('button plugin')
6 QUnit.test('should be defined on jquery object', function (assert) {
8 assert.ok($(document.body).button, 'button method is defined')
11 QUnit.module('button', {
12 beforeEach: function () {
13 // Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
14 $.fn.bootstrapButton = $.fn.button.noConflict()
16 afterEach: function () {
17 $.fn.button = $.fn.bootstrapButton
18 delete $.fn.bootstrapButton
22 QUnit.test('should provide no conflict', function (assert) {
24 assert.strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
27 QUnit.test('should return jquery collection containing the element', function (assert) {
30 var $button = $el.bootstrapButton()
31 assert.ok($button instanceof $, 'returns jquery collection')
32 assert.strictEqual($button[0], $el[0], 'collection contains element')
35 QUnit.test('should return set state to loading', function (assert) {
37 var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
38 assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
39 $btn.bootstrapButton('loading')
40 var done = assert.async()
41 setTimeout(function () {
42 assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
43 assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
44 assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
49 QUnit.test('should return reset state', function (assert) {
51 var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
52 assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
53 $btn.bootstrapButton('loading')
54 var doneOne = assert.async()
55 setTimeout(function () {
56 assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
57 assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
58 assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
60 var doneTwo = assert.async()
61 $btn.bootstrapButton('reset')
62 setTimeout(function () {
63 assert.strictEqual($btn.html(), 'mdo', 'btn text equals mdo')
64 assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
65 assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
71 QUnit.test('should work with an empty string as reset state', function (assert) {
73 var $btn = $('<button class="btn" data-loading-text="fat"/>')
74 assert.strictEqual($btn.html(), '', 'btn text equals ""')
75 $btn.bootstrapButton('loading')
76 var doneOne = assert.async()
77 setTimeout(function () {
78 assert.strictEqual($btn.html(), 'fat', 'btn text equals fat')
79 assert.ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
80 assert.ok($btn.hasClass('disabled'), 'btn has disabled class')
82 var doneTwo = assert.async()
83 $btn.bootstrapButton('reset')
84 setTimeout(function () {
85 assert.strictEqual($btn.html(), '', 'btn text equals ""')
86 assert.ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
87 assert.ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
93 QUnit.test('should toggle active', function (assert) {
95 var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
96 assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
97 $btn.bootstrapButton('toggle')
98 assert.ok($btn.hasClass('active'), 'btn has class active')
101 QUnit.test('should toggle active when btn children are clicked', function (assert) {
103 var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
104 var $inner = $('<i/>')
107 .appendTo('#qunit-fixture')
108 assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
109 $inner.trigger('click')
110 assert.ok($btn.hasClass('active'), 'btn has class active')
113 QUnit.test('should toggle aria-pressed', function (assert) {
115 var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
116 assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
117 $btn.bootstrapButton('toggle')
118 assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
121 QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
123 var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
124 var $inner = $('<i/>')
127 .appendTo('#qunit-fixture')
128 assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
129 $inner.trigger('click')
130 assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
133 QUnit.test('should toggle active when btn children are clicked within btn-group', function (assert) {
135 var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
136 var $btn = $('<button class="btn">fat</button>')
137 var $inner = $('<i/>')
139 .append($btn.append($inner))
140 .appendTo('#qunit-fixture')
141 assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
142 $inner.trigger('click')
143 assert.ok($btn.hasClass('active'), 'btn has class active')
146 QUnit.test('should check for closest matching toggle', function (assert) {
148 var groupHTML = '<div class="btn-group" data-toggle="buttons">'
149 + '<label class="btn btn-primary active">'
150 + '<input type="radio" name="options" id="option1" checked="true"> Option 1'
152 + '<label class="btn btn-primary">'
153 + '<input type="radio" name="options" id="option2"> Option 2'
155 + '<label class="btn btn-primary">'
156 + '<input type="radio" name="options" id="option3"> Option 3'
159 var $group = $(groupHTML).appendTo('#qunit-fixture')
161 var $btn1 = $group.children().eq(0)
162 var $btn2 = $group.children().eq(1)
164 assert.ok($btn1.hasClass('active'), 'btn1 has active class')
165 assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
166 assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
167 assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
168 $btn2.find('input').trigger('click')
169 assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
170 assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
171 assert.ok($btn2.hasClass('active'), 'btn2 has active class')
172 assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
174 $btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
175 assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
176 assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
177 assert.ok($btn2.hasClass('active'), 'btn2 has active class')
178 assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')