Clean collapse unit tests up

js/tests/unit/collapse.js

@@ -19,156 +19,153 @@ $(function () {
   })
 
   test('should provide no conflict', function () {
-    ok(!$.fn.collapse, 'collapse was set back to undefined (org value)')
+    strictEqual($.fn.collapse, undefined, 'collapse was set back to undefined (org value)')
   })
 
-  test('should return element', function () {
-    ok($(document.body).bootstrapCollapse()[0] == document.body, 'document.body returned')
+  test('should return jquery collection containing the element', function () {
+    var $el = $('<div/>')
+    var $collapse = $el.bootstrapCollapse()
+    ok($collapse instanceof $, 'returns jquery collection')
+    strictEqual($collapse[0], $el[0], 'collection contains element')
   })
 
   test('should show a collapsed element', function () {
-    var el = $('<div class="collapse"></div>').bootstrapCollapse('show')
-    ok(el.hasClass('in'), 'has class in')
-    ok(!/height/.test(el.attr('style')), 'has height reset')
+    var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
+
+    ok($el.hasClass('in'), 'has class "in"')
+    ok(!/height/.test($el.attr('style')), 'has height reset')
   })
 
   test('should hide a collapsed element', function () {
-    var el = $('<div class="collapse"></div>').bootstrapCollapse('hide')
-    ok(!el.hasClass('in'), 'does not have class in')
-    ok(/height/.test(el.attr('style')), 'has height set')
+    var $el = $('<div class="collapse"/>').bootstrapCollapse('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)
+        ok(true, 'show event fired')
         start()
       })
       .on('shown.bs.collapse', function () {
-        ok(false)
+        ok(false, 'shown event fired')
       })
       .bootstrapCollapse('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')
+        equal(this.style.height, '0px', 'height is 0px')
       })
       .on('shown.bs.collapse', function () {
-        ok(this.style.height === '')
+        strictEqual(this.style.height, '', 'height is auto')
         start()
       })
       .bootstrapCollapse('show')
   })
 
-  test('should add active class to target when collapse shown', function () {
-    $.support.transition = false
+  test('should remove "collapsed" class from target when collapse is shown', function () {
     stop()
 
-    var target = $('<a data-toggle="collapse" href="#test1"></a>')
-      .appendTo($('#qunit-fixture'))
+    var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1"></div>')
-      .appendTo($('#qunit-fixture'))
+    $('<div id="test1"/>')
+      .appendTo('#qunit-fixture')
       .on('show.bs.collapse', function () {
-        ok(!target.hasClass('collapsed'))
+        ok(!$target.hasClass('collapsed'))
         start()
       })
 
-    target.click()
+    $target.click()
   })
 
-  test('should remove active class to target when collapse hidden', function () {
-    $.support.transition = false
+  test('should add "collapsed" class to target when collapse is hidden', function () {
     stop()
 
-    var target = $('<a data-toggle="collapse" href="#test1"></a>')
-      .appendTo($('#qunit-fixture'))
+    var $target = $('<a data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
 
-    $('<div id="test1" class="in"></div>')
-      .appendTo($('#qunit-fixture'))
+    $('<div id="test1" class="in"/>')
+      .appendTo('#qunit-fixture')
       .on('hide.bs.collapse', function () {
-        ok(target.hasClass('collapsed'))
+        ok($target.hasClass('collapsed'))
         start()
       })
 
-    target.click()
+    $target.click()
   })
 
-  test('should remove active class from inactive accordion targets', function () {
-    $.support.transition = false
+  test('should remove "collapsed" class from active accordion target', function () {
     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 accordionHTML = '<div id="accordion">' +
+        '<div class="accordion-group"/>' +
+        '<div class="accordion-group"/>' +
+        '<div class="accordion-group"/>' +
+        '</div>'
+    var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
 
-    var target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(0))
+    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="in"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(0))
+    $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
 
-    var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
 
-    $('<div id="body2"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(1))
+    $('<div id="body2"/>').appendTo($groups.eq(1))
 
-    var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent="#accordion"/>').appendTo($groups.eq(2))
 
-    $('<div id="body3"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(2))
+    $('<div id="body3"/>')
+      .appendTo($groups.eq(2))
       .on('show.bs.collapse', function () {
-        ok(target1.hasClass('collapsed'))
-        ok(target2.hasClass('collapsed'))
-        ok(!target3.hasClass('collapsed'))
+        ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
+        ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
+        ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
 
         start()
       })
 
-    target3.click()
+    $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 accordionHTML = '<div class="accordion">' +
+        '<div class="accordion-group"/>' +
+        '<div class="accordion-group"/>' +
+        '<div class="accordion-group"/>' +
+        '</div>'
+    var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.accordion-group')
 
-    var target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(0))
+    var $target1 = $('<a data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
 
-    $('<div id="body1" class="in"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(0))
+    $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
 
-    var target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(1))
+    var $target2 = $('<a class="collapsed" data-toggle="collapse" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
 
-    $('<div id="body2"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(1))
+    $('<div id="body2"/>').appendTo($groups.eq(1))
 
-    var target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"></a>')
-      .appendTo(accordion.find('.accordion-group').eq(2))
+    var $target3 = $('<a class="collapsed" data-toggle="collapse" href="#body3" data-parent=".accordion"/>').appendTo($groups.eq(2))
 
-    $('<div id="body3"></div>')
-      .appendTo(accordion.find('.accordion-group').eq(2))
+    $('<div id="body3"/>')
+      .appendTo($groups.eq(2))
       .on('show.bs.collapse', function () {
-        ok(target1.hasClass('collapsed'))
-        ok(target2.hasClass('collapsed'))
-        ok(!target3.hasClass('collapsed'))
+        ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
+        ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
+        ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
 
         start()
       })
 
-    target3.click()
+    $target3.click()
   })
 
 })