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

   1 $(function () {
   2
   3     module("collapse")
   4
   5       test("should provide no conflict", function () {
   6         var collapse = $.fn.collapse.noConflict()
   7         ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
   8         $.fn.collapse = collapse
   9       })
  10
  11       test("should be defined on jquery object", function () {
  12         ok($(document.body).collapse, 'collapse method is defined')
  13       })
  14
  15       test("should return element", function () {
  16         ok($(document.body).collapse()[0] == document.body, 'document.body returned')
  17       })
  18
  19       test("should show a collapsed element", function () {
  20         var el = $('<div class="collapse"></div>').collapse('show')
  21         ok(el.hasClass('in'), 'has class in')
  22         ok(/height/.test(el.attr('style')), 'has height set')
  23       })
  24
  25       test("should hide a collapsed element", function () {
  26         var el = $('<div class="collapse"></div>').collapse('hide')
  27         ok(!el.hasClass('in'), 'does not have class in')
  28         ok(/height/.test(el.attr('style')), 'has height set')
  29       })
  30
  31       test("should not fire shown when show is prevented", function () {
  32         $.support.transition = false
  33         stop()
  34         $('<div class="collapse"/>')
  35           .on('show.bs.collapse', function (e) {
  36             e.preventDefault();
  37             ok(true);
  38             start();
  39           })
  40           .on('shown.bs.collapse', function () {
  41             ok(false);
  42           })
  43           .collapse('show')
  44       })
  45
  46       test("should reset style to auto after finishing opening collapse", function () {
  47         $.support.transition = false
  48         stop()
  49         $('<div class="collapse" style="height: 0px"/>')
  50           .on('show.bs.collapse', function () {
  51             ok(this.style.height == '0px')
  52           })
  53           .on('shown.bs.collapse', function () {
  54             ok(this.style.height == 'auto')
  55             start()
  56           })
  57           .collapse('show')
  58       })
  59
  60       test("should add active class to target when collapse shown", function () {
  61         $.support.transition = false
  62         stop()
  63
  64         var target = $('<a data-toggle="collapse" href="#test1"></a>')
  65           .appendTo($('#qunit-fixture'))
  66
  67         var collapsible = $('<div id="test1"></div>')
  68           .appendTo($('#qunit-fixture'))
  69           .on('show.bs.collapse', function () {
  70             ok(!target.hasClass('collapsed'))
  71             start()
  72           })
  73
  74         target.click()
  75       })
  76
  77       test("should remove active class to target when collapse hidden", function () {
  78         $.support.transition = false
  79         stop()
  80
  81         var target = $('<a data-toggle="collapse" href="#test1"></a>')
  82           .appendTo($('#qunit-fixture'))
  83
  84         var collapsible = $('<div id="test1" class="in"></div>')
  85           .appendTo($('#qunit-fixture'))
  86           .on('hide.bs.collapse', function () {
  87             ok(target.hasClass('collapsed'))
  88             start()
  89           })
  90
  91         target.click()
  92       })
  93
  94       test("should remove active class from inactive accordion targets", function () {
  95         $.support.transition = false
  96         stop()
  97
  98         var accordion = $('<div id="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
  99           .appendTo($('#qunit-fixture'))
 100
 101         var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
 102           .appendTo(accordion.find('.accordion-group').eq(0))
 103
 104         var collapsible1 = $('<div id="body1" class="in"></div>')
 105           .appendTo(accordion.find('.accordion-group').eq(0))
 106
 107         var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
 108           .appendTo(accordion.find('.accordion-group').eq(1))
 109
 110         var collapsible2 = $('<div id="body2"></div>')
 111           .appendTo(accordion.find('.accordion-group').eq(1))
 112
 113         var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
 114           .appendTo(accordion.find('.accordion-group').eq(2))
 115
 116         var collapsible3 = $('<div id="body3"></div>')
 117           .appendTo(accordion.find('.accordion-group').eq(2))
 118           .on('show.bs.collapse', function () {
 119             ok(target1.hasClass('collapsed'))
 120             ok(target2.hasClass('collapsed'))
 121             ok(!target3.hasClass('collapsed'))
 122
 123             start()
 124           })
 125
 126         target3.click()
 127       })
 128
 129       test("should allow dots in data-parent", function () {
 130         $.support.transition = false
 131         stop()
 132
 133         var accordion = $('<div class="accordion"><div class="accordion-group"></div><div class="accordion-group"></div><div class="accordion-group"></div></div>')
 134           .appendTo($('#qunit-fixture'))
 135
 136         var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
 137           .appendTo(accordion.find('.accordion-group').eq(0))
 138
 139         var collapsible1 = $('<div id="body1" class="in"></div>')
 140           .appendTo(accordion.find('.accordion-group').eq(0))
 141
 142         var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
 143           .appendTo(accordion.find('.accordion-group').eq(1))
 144
 145         var collapsible2 = $('<div id="body2"></div>')
 146           .appendTo(accordion.find('.accordion-group').eq(1))
 147
 148         var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
 149           .appendTo(accordion.find('.accordion-group').eq(2))
 150
 151         var collapsible3 = $('<div id="body3"></div>')
 152           .appendTo(accordion.find('.accordion-group').eq(2))
 153           .on('show.bs.collapse', function () {
 154             ok(target1.hasClass('collapsed'))
 155             ok(target2.hasClass('collapsed'))
 156             ok(!target3.hasClass('collapsed'))
 157
 158             start()
 159           })
 160
 161         target3.click()
 162       })
 163
 164 })