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 btn2.find('input').click() /* clicking an already checked radio should not un-check it */ |
|
116 ok(!btn1.hasClass('active'), 'btn1 does not have active class') |
|
117 ok(!btn1.find('input').prop('checked'), 'btn1 is checked') |
|
118 ok(btn2.hasClass('active'), 'btn2 has active class') |
|
119 ok(btn2.find('input').prop('checked'), 'btn2 is checked') |
|
120 }) |
|
121 |
|
122 }) |
|