diff options
| -rw-r--r-- | js/tests/unit/button.js | 156 |
1 files changed, 78 insertions, 78 deletions
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 671a93891..04457010e 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -19,133 +19,133 @@ $(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 () { - ok($(document.body).bootstrapButton()[0] == document.body, 'document.body returned') + test('should return jquery collection containing the element', function () { + 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 () { - var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') - equal(btn.html(), 'mdo', 'btn text equals mdo') - btn.bootstrapButton('loading') - equal(btn.html(), 'fat', 'btn text equals fat') + var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equal($btn.html(), 'mdo', 'btn text equals mdo') + $btn.bootstrapButton('loading') + equal($btn.html(), 'fat', 'btn text equals fat') stop() setTimeout(function () { - ok(btn.attr('disabled'), 'btn is disabled') - ok(btn.hasClass('disabled'), 'btn has disabled class') + ok($btn[0].hasAttribute('disabled'), 'btn is disabled') + ok($btn.hasClass('disabled'), 'btn has disabled class') start() }, 0) }) test('should return reset state', function () { - var btn = $('<button class="btn" data-loading-text="fat">mdo</button>') - equal(btn.html(), 'mdo', 'btn text equals mdo') - btn.bootstrapButton('loading') - equal(btn.html(), 'fat', 'btn text equals fat') + var $btn = $('<button class="btn" data-loading-text="fat">mdo</button>') + equal($btn.html(), 'mdo', 'btn text equals mdo') + $btn.bootstrapButton('loading') + equal($btn.html(), 'fat', 'btn text equals fat') stop() setTimeout(function () { - ok(btn.attr('disabled'), 'btn is disabled') - ok(btn.hasClass('disabled'), 'btn has disabled class') + ok($btn[0].hasAttribute('disabled'), 'btn is disabled') + ok($btn.hasClass('disabled'), 'btn has disabled class') start() stop() - btn.bootstrapButton('reset') - equal(btn.html(), 'mdo', 'btn text equals mdo') + $btn.bootstrapButton('reset') + equal($btn.html(), 'mdo', 'btn text equals mdo') setTimeout(function () { - ok(!btn.attr('disabled'), 'btn is not disabled') - ok(!btn.hasClass('disabled'), 'btn does not have disabled class') + ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled') + ok(!$btn.hasClass('disabled'), 'btn does not have disabled class') start() }, 0) }, 0) }) test('should work with an empty string as reset state', function () { - var btn = $('<button class="btn" data-loading-text="fat"></button>') - equal(btn.html(), '', 'btn text equals ""') - btn.bootstrapButton('loading') - equal(btn.html(), 'fat', 'btn text equals fat') + var $btn = $('<button class="btn" data-loading-text="fat"/>') + equal($btn.html(), '', 'btn text equals ""') + $btn.bootstrapButton('loading') + equal($btn.html(), 'fat', 'btn text equals fat') stop() setTimeout(function () { - ok(btn.attr('disabled'), 'btn is disabled') - ok(btn.hasClass('disabled'), 'btn has disabled class') + ok($btn[0].hasAttribute('disabled'), 'btn is disabled') + ok($btn.hasClass('disabled'), 'btn has disabled class') start() stop() - btn.bootstrapButton('reset') - equal(btn.html(), '', 'btn text equals ""') + $btn.bootstrapButton('reset') + equal($btn.html(), '', 'btn text equals ""') setTimeout(function () { - ok(!btn.attr('disabled'), 'btn is not disabled') - ok(!btn.hasClass('disabled'), 'btn does not have disabled class') + ok(!$btn[0].hasAttribute('disabled'), 'btn is not disabled') + ok(!$btn.hasClass('disabled'), 'btn does not have disabled class') start() }, 0) }, 0) }) test('should toggle active', function () { - var btn = $('<button class="btn">mdo</button>') - ok(!btn.hasClass('active'), 'btn does not have active class') - btn.bootstrapButton('toggle') - ok(btn.hasClass('active'), 'btn has class active') + var $btn = $('<button class="btn">mdo</button>') + ok(!$btn.hasClass('active'), 'btn does not have active class') + $btn.bootstrapButton('toggle') + ok($btn.hasClass('active'), 'btn has class active') }) test('should toggle active when btn children are clicked', function () { - var btn = $('<button class="btn" data-toggle="button">mdo</button>') - var inner = $('<i></i>') - btn - .append(inner) - .appendTo($('#qunit-fixture')) - ok(!btn.hasClass('active'), 'btn does not have active class') - inner.click() - ok(btn.hasClass('active'), 'btn has class active') + var $btn = $('<button class="btn" data-toggle="button">mdo</button>') + var $inner = $('<i/>') + $btn + .append($inner) + .appendTo('#qunit-fixture') + ok(!$btn.hasClass('active'), 'btn does not have active class') + $inner.click() + ok($btn.hasClass('active'), 'btn has class active') }) test('should toggle active when btn children are clicked within btn-group', function () { - var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>') - var btn = $('<button class="btn">fat</button>') - var inner = $('<i></i>') - btngroup - .append(btn.append(inner)) - .appendTo($('#qunit-fixture')) - ok(!btn.hasClass('active'), 'btn does not have active class') - inner.click() - ok(btn.hasClass('active'), 'btn has class active') + var $btngroup = $('<div class="btn-group" data-toggle="buttons"/>') + var $btn = $('<button class="btn">fat</button>') + var $inner = $('<i/>') + $btngroup + .append($btn.append($inner)) + .appendTo('#qunit-fixture') + ok(!$btn.hasClass('active'), 'btn does not have active class') + $inner.click() + ok($btn.hasClass('active'), 'btn has class active') }) 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">' + - '<input type="radio" name="options" id="option1" checked="true"> Option 1' + + '<input type="radio" name="options" id="option1" checked="true"> Option 1' + '</label>' + '<label class="btn btn-primary">' + - '<input type="radio" name="options" id="option2"> Option 2' + + '<input type="radio" name="options" id="option2"> Option 2' + '</label>' + '<label class="btn btn-primary">' + - '<input type="radio" name="options" id="option3"> Option 3' + + '<input type="radio" name="options" id="option3"> Option 3' + '</label>' + - '</div>' - - group = $(group) - - var btn1 = $(group.children()[0]) - var btn2 = $(group.children()[1]) - - group.appendTo($('#qunit-fixture')) - - ok(btn1.hasClass('active'), 'btn1 has active class') - 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') - - 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') + '</div>' + var $group = $(groupHTML).appendTo('#qunit-fixture') + + var $btn1 = $group.children().eq(0) + var $btn2 = $group.children().eq(1) + + ok($btn1.hasClass('active'), 'btn1 has active class') + 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') + + $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') }) }) |