mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +02:00
Code Issues Releases Wiki Activity

Clean button unit tests up

Browse Source
This commit is contained in:
Heinrich Fenkart
2014-06-18 21:33:38 +02:00
parent b063de54a5
commit f3345f68d7
1 changed files with 75 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
js/tests/unit/button.js
View File

@@ -19,100 +19,103 @@ $(function () {
}) })
test('should provide no conflict', function () { test('should provide no conflict', function () {
ok(!$.fn.button, 'button was set back to undefined (org value)') strictEqual($.fn.button, undefined, 'button was set back to undefined (org value)')
}) })
test('should return element', function () { test('should return jquery collection containing the element', function () {
ok($(document.body).bootstrapButton()[0] == document.body, 'document.body returned') var $el = $('<div/>')
var $button = $el.bootstrapButton()
ok($button instanceof $, 'returns jquery collection')
strictEqual($button[0], $el[0], 'collection contains element')
}) })
test('should return set state to loading', function () { test('should return set state to loading', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal($btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat') equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
}, 0) }, 0)
}) })
test('should return reset state', function () { test('should return reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal($btn.html(), 'mdo', 'btn text equals mdo')
btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat') equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
stop() stop()
btn.bootstrapButton('reset') $btn.bootstrapButton('reset')
equal(btn.html(), 'mdo', 'btn text equals mdo') equal($btn.html(), 'mdo', 'btn text equals mdo')
setTimeout(function () { setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled') ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class') ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start() start()
}, 0) }, 0)
}, 0) }, 0)
}) })
test('should work with an empty string as reset state', function () { test('should work with an empty string as reset state', function () {
var btn = $('<button class="btn" data-loading-text="fat"></button>') var $btn = $('<button class="btn" data-loading-text="fat"/>')
equal(btn.html(), '', 'btn text equals ""') equal($btn.html(), '', 'btn text equals ""')
btn.bootstrapButton('loading') $btn.bootstrapButton('loading')
equal(btn.html(), 'fat', 'btn text equals fat') equal($btn.html(), 'fat', 'btn text equals fat')
stop() stop()
setTimeout(function () { setTimeout(function () {
ok(btn.attr('disabled'), 'btn is disabled') ok($btn[0].hasAttribute('disabled'), 'btn is disabled')
ok(btn.hasClass('disabled'), 'btn has disabled class') ok($btn.hasClass('disabled'), 'btn has disabled class')
start() start()
stop() stop()
btn.bootstrapButton('reset') $btn.bootstrapButton('reset')
equal(btn.html(), '', 'btn text equals ""') equal($btn.html(), '', 'btn text equals ""')
setTimeout(function () { setTimeout(function () {
ok(!btn.attr('disabled'), 'btn is not disabled') ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled')
ok(!btn.hasClass('disabled'), 'btn does not have disabled class') ok(!$btn.hasClass('disabled'), 'btn does not have disabled class')
start() start()
}, 0) }, 0)
}, 0) }, 0)
}) })
test('should toggle active', function () { test('should toggle active', function () {
var btn = $('<button class="btn">mdo</button>') var $btn = $('<button class="btn">mdo</button>')
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!$btn.hasClass('active'), 'btn does not have active class')
btn.bootstrapButton('toggle') $btn.bootstrapButton('toggle')
ok(btn.hasClass('active'), 'btn has class active') ok($btn.hasClass('active'), 'btn has class active')
}) })
test('should toggle active when btn children are clicked', function () { test('should toggle active when btn children are clicked', function () {
var btn = $('<button class="btn" data-toggle="button">mdo</button>') var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
var inner = $('<i></i>') var $inner = $('<i/>')
btn $btn
.append(inner) .append($inner)
.appendTo($('#qunit-fixture')) .appendTo('#qunit-fixture')
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!$btn.hasClass('active'), 'btn does not have active class')
inner.click() $inner.click()
ok(btn.hasClass('active'), 'btn has class active') ok($btn.hasClass('active'), 'btn has class active')
}) })
test('should toggle active when btn children are clicked within btn-group', function () { test('should toggle active when btn children are clicked within btn-group', function () {
var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>') var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>')
var btn = $('<button class="btn">fat</button>') var $btn = $('<button class="btn">fat</button>')
var inner = $('<i></i>') var $inner = $('<i/>')
btngroup $btngroup
.append(btn.append(inner)) .append($btn.append($inner))
.appendTo($('#qunit-fixture')) .appendTo('#qunit-fixture')
ok(!btn.hasClass('active'), 'btn does not have active class') ok(!$btn.hasClass('active'), 'btn does not have active class')
inner.click() $inner.click()
ok(btn.hasClass('active'), 'btn has class active') ok($btn.hasClass('active'), 'btn has class active')
}) })
test('should check for closest matching toggle', function () { test('should check for closest matching toggle', function () {
var group = '<div class="btn-group" data-toggle="buttons">' + var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
'<label class="btn btn-primary active">' + '<label class="btn btn-primary active">' +
'<input type="radio" name="options" id="option1" checked="true"> Option 1' + '<input type="radio" name="options" id="option1" checked="true"> Option 1' +
'</label>' + '</label>' +
@@ -123,29 +126,26 @@ $(function () {
'<input type="radio" name="options" id="option3"> Option 3' + '<input type="radio" name="options" id="option3"> Option 3' +
'</label>' + '</label>' +
'</div>' '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture')
group = $(group) var $btn1 = $group.children().eq(0)
var $btn2 = $group.children().eq(1)
var btn1 = $(group.children()[0]) ok($btn1.hasClass('active'), 'btn1 has active class')
var btn2 = $(group.children()[1]) ok($btn1.find('input').prop('checked'), 'btn1 is checked')
ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
$btn2.find('input').click()
ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
ok($btn2.hasClass('active'), 'btn2 has active class')
ok($btn2.find('input').prop('checked'), 'btn2 is checked')
group.appendTo($('#qunit-fixture')) $btn2.find('input').click() // clicking an already checked radio should not un-check it
ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
ok(btn1.hasClass('active'), 'btn1 has active class') ok(!$btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn1.find('input').prop('checked'), 'btn1 is checked') ok($btn2.hasClass('active'), 'btn2 has active class')
ok(!btn2.hasClass('active'), 'btn2 does not have active class') ok($btn2.find('input').prop('checked'), 'btn2 is checked')
ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
btn2.find('input').click()
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
btn2.find('input').click() /* clicking an already checked radio should not un-check it */
ok(!btn1.hasClass('active'), 'btn1 does not have active class')
ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
ok(btn2.hasClass('active'), 'btn2 has active class')
ok(btn2.find('input').prop('checked'), 'btn2 is checked')
}) })
}) })