123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- $(function () {
- module("collapse")
- test("should provide no conflict", function () {
- var collapse = $.fn.collapse.noConflict()
- ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
- $.fn.collapse = collapse
- })
- test("should be defined on jquery object", function () {
- ok($(document.body).collapse, 'collapse method is defined')
- })
- test("should return element", function () {
- ok($(document.body).collapse()[0] == document.body, 'document.body returned')
- })
- test("should show a collapsed element", function () {
- var el = $('<div class="collapse"></div>').collapse('show')
- ok(el.hasClass('in'), 'has class in')
- ok(/height/.test(el.attr('style')), 'has height set')
- })
- test("should hide a collapsed element", function () {
- var el = $('<div class="collapse"></div>').collapse('hide')
- ok(!el.hasClass('in'), 'does not have class in')
- ok(/height/.test(el.attr('style')), 'has height set')
- })
- test("should not fire shown when show is prevented", function () {
- $.support.transition = false
- stop()
- $('<div class="collapse"/>')
- .on('show.bs.collapse', function (e) {
- e.preventDefault();
- ok(true);
- start();
- })
- .on('shown.bs.collapse', function () {
- ok(false);
- })
- .collapse('show')
- })
- test("should reset style to auto after finishing opening collapse", function () {
- $.support.transition = false
- stop()
- $('<div class="collapse" style="height: 0px"/>')
- .on('show.bs.collapse', function () {
- ok(this.style.height == '0px')
- })
- .on('shown.bs.collapse', function () {
- ok(this.style.height == 'auto')
- start()
- })
- .collapse('show')
- })
- test("should add active class to target when collapse shown", function () {
- $.support.transition = false
- stop()
- var target = $('<a data-toggle="collapse" href="#test1"></a>')
- .appendTo($('#qunit-fixture'))
- var collapsible = $('<div id="test1"></div>')
- .appendTo($('#qunit-fixture'))
- .on('show.bs.collapse', function () {
- ok(!target.hasClass('collapsed'))
- start()
- })
- target.click()
- })
- test("should remove active class to target when collapse hidden", function () {
- $.support.transition = false
- stop()
- var target = $('<a data-toggle="collapse" href="#test1"></a>')
- .appendTo($('#qunit-fixture'))
- var collapsible = $('<div id="test1" class="in"></div>')
- .appendTo($('#qunit-fixture'))
- .on('hide.bs.collapse', function () {
- ok(target.hasClass('collapsed'))
- start()
- })
- target.click()
- })
- test("should remove active class from inactive accordion targets", function () {
- $.support.transition = false
- stop()
- var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
- .appendTo($('#qunit-fixture'))
- var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(0))
- var collapsible1 = $('<div id="body1" class="in"></div>')
- .appendTo(accordion.find('.accordion-group').eq(0))
- var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(1))
- var collapsible2 = $('<div id="body2"></div>')
- .appendTo(accordion.find('.accordion-group').eq(1))
- var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(2))
- var collapsible3 = $('<div id="body3"></div>')
- .appendTo(accordion.find('.accordion-group').eq(2))
- .on('show.bs.collapse', function () {
- ok(target1.hasClass('collapsed'))
- ok(target2.hasClass('collapsed'))
- ok(!target3.hasClass('collapsed'))
- start()
- })
- target3.click()
- })
- test("should allow dots in data-parent", function () {
- $.support.transition = false
- stop()
- var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
- .appendTo($('#qunit-fixture'))
- var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(0))
- var collapsible1 = $('<div id="body1" class="in"></div>')
- .appendTo(accordion.find('.accordion-group').eq(0))
- var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(1))
- var collapsible2 = $('<div id="body2"></div>')
- .appendTo(accordion.find('.accordion-group').eq(1))
- var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
- .appendTo(accordion.find('.accordion-group').eq(2))
- var collapsible3 = $('<div id="body3"></div>')
- .appendTo(accordion.find('.accordion-group').eq(2))
- .on('show.bs.collapse', function () {
- ok(target1.hasClass('collapsed'))
- ok(target2.hasClass('collapsed'))
- ok(!target3.hasClass('collapsed'))
- start()
- })
- target3.click()
- })
- })
|