git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/js/tests/unit/button.js

   1 $(function () {
   2
   3     module("button")
   4
   5       test("should provide no conflict", function () {
   6         var button = $.fn.button.noConflict()
   7         ok(!$.fn.button, 'button was set back to undefined (org value)')
   8         $.fn.button = button
   9       })
  10
  11       test("should be defined on jquery object", function () {
  12         ok($(document.body).button, 'button method is defined')
  13       })
  14
  15       test("should return element", function () {
  16         ok($(document.body).button()[0] == document.body, 'document.body returned')
  17       })
  18
  19       test("should return set state to loading", function () {
  20         var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
  21         equal(btn.html(), 'mdo', 'btn text equals mdo')
  22         btn.button('loading')
  23         equal(btn.html(), 'fat', 'btn text equals fat')
  24         stop()
  25         setTimeout(function () {
  26           ok(btn.attr('disabled'), 'btn is disabled')
  27           ok(btn.hasClass('disabled'), 'btn has disabled class')
  28           start()
  29         }, 0)
  30       })
  31
  32       test("should return reset state", function () {
  33         var btn = $('<button class="btn" data-loading-text="fat">mdo</button>')
  34         equal(btn.html(), 'mdo', 'btn text equals mdo')
  35         btn.button('loading')
  36         equal(btn.html(), 'fat', 'btn text equals fat')
  37         stop()
  38         setTimeout(function () {
  39           ok(btn.attr('disabled'), 'btn is disabled')
  40           ok(btn.hasClass('disabled'), 'btn has disabled class')
  41           start()
  42           stop()
  43           btn.button('reset')
  44           equal(btn.html(), 'mdo', 'btn text equals mdo')
  45           setTimeout(function () {
  46             ok(!btn.attr('disabled'), 'btn is not disabled')
  47             ok(!btn.hasClass('disabled'), 'btn does not have disabled class')
  48             start()
  49           }, 0)
  50         }, 0)
  51
  52       })
  53
  54       test("should toggle active", function () {
  55         var btn = $('<button class="btn">mdo</button>')
  56         ok(!btn.hasClass('active'), 'btn does not have active class')
  57         btn.button('toggle')
  58         ok(btn.hasClass('active'), 'btn has class active')
  59       })
  60
  61       test("should toggle active when btn children are clicked", function () {
  62         var btn = $('<button class="btn" data-toggle="button">mdo</button>')
  63           , inner = $('<i></i>')
  64         btn
  65           .append(inner)
  66           .appendTo($('#qunit-fixture'))
  67         ok(!btn.hasClass('active'), 'btn does not have active class')
  68         inner.click()
  69         ok(btn.hasClass('active'), 'btn has class active')
  70       })
  71
  72       test("should toggle active when btn children are clicked within btn-group", function () {
  73         var btngroup = $('<div class="btn-group" data-toggle="buttons"></div>')
  74           , btn = $('<button class="btn">fat</button>')
  75           , inner = $('<i></i>')
  76         btngroup
  77           .append(btn.append(inner))
  78           .appendTo($('#qunit-fixture'))
  79         ok(!btn.hasClass('active'), 'btn does not have active class')
  80         inner.click()
  81         ok(btn.hasClass('active'), 'btn has class active')
  82       })
  83
  84       test("should check for closest matching toggle", function () {
  85         var group = '<div class="btn-group" data-toggle="buttons">' +
  86           '<label class="btn btn-primary active">' +
  87             '<input type="radio" name="options" id="option1" checked="true"> Option 1' +
  88           '</label>' +
  89           '<label class="btn btn-primary">' +
  90             '<input type="radio" name="options" id="option2"> Option 2' +
  91           '</label>' +
  92           '<label class="btn btn-primary">' +
  93             '<input type="radio" name="options" id="option3"> Option 3' +
  94           '</label>' +
  95         '</div>'
  96
  97         group = $(group)
  98
  99         var btn1 = $(group.children()[0])
 100         var btn2 = $(group.children()[1])
 101         var btn3 = $(group.children()[2])
 102
 103         group.appendTo($('#qunit-fixture'))
 104
 105         ok(btn1.hasClass('active'), 'btn1 has active class')
 106         ok(btn1.find('input').prop('checked'), 'btn1 is checked')
 107         ok(!btn2.hasClass('active'), 'btn2 does not have active class')
 108         ok(!btn2.find('input').prop('checked'), 'btn2 is not checked')
 109         btn2.find('input').click()
 110         ok(!btn1.hasClass('active'), 'btn1 does not have active class')
 111         ok(!btn1.find('input').prop('checked'), 'btn1 is checked')
 112         ok(btn2.hasClass('active'), 'btn2 has active class')
 113         ok(btn2.find('input').prop('checked'), 'btn2 is checked')
 114       })
 115
 116 })