Clean modal unit tests up

js/tests/unit/modal.js

@@ -4,8 +4,7 @@ $(function () {
   module('modal plugin')
 
   test('should be defined on jquery object', function () {
-    var div = $('<div id="modal-test"></div>')
-    ok(div.modal, 'modal method is defined')
+    ok($(document.body).modal, 'modal method is defined')
   })
 
   module('modal', {
@@ -20,13 +19,14 @@ $(function () {
   })
 
   test('should provide no conflict', function () {
-    ok(!$.fn.modal, 'modal was set back to undefined (orig value)')
+    strictEqual($.fn.modal, undefined, 'modal was set back to undefined (orig value)')
   })
 
-  test('should return element', function () {
-    var div = $('<div id="modal-test"></div>')
-    ok(div.bootstrapModal() == div, 'document.body returned')
-    $('#modal-test').remove()
+  test('should return jquery collection containing the element', function () {
+    var $el = $('<div id="modal-test"/>')
+    var $modal = $el.bootstrapModal()
+    ok($modal instanceof $, 'returns jquery collection')
+    strictEqual($modal[0], $el[0], 'collection contains element')
   })
 
   test('should expose defaults var for settings', function () {
@@ -35,11 +35,10 @@ $(function () {
 
   test('should insert into dom when show method is called', function () {
     stop()
-    $.support.transition = false
-    $('<div id="modal-test"></div>')
+
+    $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').length, 'modal inserted into dom')
-        $(this).remove()
+        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
         start()
       })
       .bootstrapModal('show')
@@ -47,46 +46,41 @@ $(function () {
 
   test('should fire show event', function () {
     stop()
-    $.support.transition = false
-    $('<div id="modal-test"></div>')
+
+    $('<div id="modal-test"/>')
       .on('show.bs.modal', function () {
-        ok(true, 'show was called')
-      })
-      .on('shown.bs.modal', function () {
-        $(this).remove()
+        ok(true, 'show event fired')
         start()
       })
       .bootstrapModal('show')
   })
 
-  test('should not fire shown when default prevented', function () {
+  test('should not fire shown when show was prevented', function () {
     stop()
-    $.support.transition = false
-    $('<div id="modal-test"></div>')
+
+    $('<div id="modal-test"/>')
       .on('show.bs.modal', function (e) {
         e.preventDefault()
-        ok(true, 'show was called')
+        ok(true, 'show event fired')
         start()
       })
       .on('shown.bs.modal', function () {
-        ok(false, 'shown was called')
+        ok(false, 'shown event fired')
       })
       .bootstrapModal('show')
   })
 
   test('should hide modal when hide is called', function () {
     stop()
-    $.support.transition = false
 
-    $('<div id="modal-test"></div>')
+    $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
         ok($('#modal-test').is(':visible'), 'modal visible')
-        ok($('#modal-test').length, 'modal inserted into dom')
+        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
         $(this).bootstrapModal('hide')
       })
       .on('hidden.bs.modal', function () {
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        $('#modal-test').remove()
         start()
       })
       .bootstrapModal('show')
@@ -94,17 +88,15 @@ $(function () {
 
   test('should toggle when toggle is called', function () {
     stop()
-    $.support.transition = false
-    var div = $('<div id="modal-test"></div>')
-    div
+
+    $('<div id="modal-test"/>')
       .on('shown.bs.modal', function () {
         ok($('#modal-test').is(':visible'), 'modal visible')
-        ok($('#modal-test').length, 'modal inserted into dom')
-        div.bootstrapModal('toggle')
+        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        $(this).bootstrapModal('toggle')
       })
       .on('hidden.bs.modal', function () {
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        div.remove()
         start()
       })
       .bootstrapModal('toggle')
@@ -112,17 +104,15 @@ $(function () {
 
   test('should remove from dom when click [data-dismiss="modal"]', function () {
     stop()
-    $.support.transition = false
-    var div = $('<div id="modal-test"><span class="close" data-dismiss="modal"></span></div>')
-    div
+
+    $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
       .on('shown.bs.modal', function () {
         ok($('#modal-test').is(':visible'), 'modal visible')
-        ok($('#modal-test').length, 'modal inserted into dom')
-        div.find('.close').click()
+        notEqual($('#modal-test').length, 0, 'modal inserted into dom')
+        $(this).find('.close').click()
       })
       .on('hidden.bs.modal', function () {
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        div.remove()
         start()
       })
       .bootstrapModal('toggle')
@@ -130,16 +120,14 @@ $(function () {
 
   test('should allow modal close with "backdrop:false"', function () {
     stop()
-    $.support.transition = false
-    var div = $('<div>', { id: 'modal-test', 'data-backdrop': false })
-    div
+
+    $('<div id="modal-test" data-backdrop="false"/>')
       .on('shown.bs.modal', function () {
         ok($('#modal-test').is(':visible'), 'modal visible')
-        div.bootstrapModal('hide')
+        $(this).bootstrapModal('hide')
       })
       .on('hidden.bs.modal', function () {
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        div.remove()
         start()
       })
       .bootstrapModal('show')
@@ -147,18 +135,16 @@ $(function () {
 
   test('should close modal when clicking outside of modal-content', function () {
     stop()
-    $.support.transition = false
-    var div = $('<div id="modal-test"><div class="contents"></div></div>')
-    div
+
+    $('<div id="modal-test"><div class="contents"/></div>')
       .on('shown.bs.modal', function () {
-        ok($('#modal-test').length, 'modal insterted into dom')
+        notEqual($('#modal-test').length, 0, 'modal insterted into dom')
         $('.contents').click()
         ok($('#modal-test').is(':visible'), 'modal visible')
         $('#modal-test').mousedown()
       })
       .on('hidden.bs.modal', function () {
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        div.remove()
         start()
       })
       .bootstrapModal('show')
@@ -204,19 +190,17 @@ $(function () {
 
   test('should trigger hide event once when clicking outside of modal-content', function () {
     stop()
-    $.support.transition = false
 
     var triggered
-    var div = $('<div id="modal-test"><div class="contents"></div></div>')
 
-    div
+    $('<div id="modal-test"><div class="contents"/></div>')
       .on('shown.bs.modal', function () {
         triggered = 0
         $('#modal-test').mousedown()
       })
       .on('hide.bs.modal', function () {
         triggered += 1
-        ok(triggered === 1, 'modal hide triggered once')
+        strictEqual(triggered, 1, 'modal hide triggered once')
         start()
       })
       .bootstrapModal('show')
@@ -224,34 +208,31 @@ $(function () {
 
   test('should close reopened modal with [data-dismiss="modal"] click', function () {
     stop()
-    $.support.transition = false
-    var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
-    div
+
+    $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
       .on('shown.bs.modal', function () {
         $('#close').click()
         ok(!$('#modal-test').is(':visible'), 'modal hidden')
       })
       .one('hidden.bs.modal', function () {
-        div.one('hidden.bs.modal', function () {
-          start()
-        }).bootstrapModal('show')
+        $(this)
+          .one('hidden.bs.modal', function () {
+            start()
+          })
+          .bootstrapModal('show')
       })
       .bootstrapModal('show')
-
-    div.remove()
   })
 
   test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function () {
     stop()
-    $.support.transition = false
-    var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
-    var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
-    div
+
+    var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
+
+    $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
       .on('hidden.bs.modal', function () {
-        window.setTimeout(function () { // give the focus restoration callback a chance to run
-          equal(document.activeElement, toggleBtn[0], 'toggling element is once again focused')
-          div.remove()
-          toggleBtn.remove()
+        setTimeout(function () {
+          ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
           start()
         }, 0)
       })
@@ -259,29 +240,26 @@ $(function () {
         $('#close').click()
       })
       .appendTo('#qunit-fixture')
-    toggleBtn.click()
+
+    $toggleBtn.click()
   })
 
   test('should not restore focus to toggling element if the associated show event gets prevented', function () {
     stop()
-    $.support.transition = false
-    var toggleBtn = $('<button data-toggle="modal" data-target="#modal-test">Launch modal</button>').appendTo('#qunit-fixture')
-    var otherBtn = $('<button id="other-btn">Golden boy</button>').appendTo('#qunit-fixture')
-    var div = $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"></div></div></div>')
-    div
+    var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
+    var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
+
+    $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
       .one('show.bs.modal', function (e) {
         e.preventDefault()
-        otherBtn.focus()
-        window.setTimeout(function () { // give the focus event from the previous line a chance to run
-          div.bootstrapModal('show')
-        }, 0)
+        $otherBtn.focus()
+        setTimeout($.proxy(function () {
+          $(this).bootstrapModal('show')
+        }, this), 0)
       })
       .on('hidden.bs.modal', function () {
-        window.setTimeout(function () { // give the focus restoration callback a chance to run (except it shouldn't run in this case)
-          equal(document.activeElement, otherBtn[0], 'show was prevented, so focus should not have been restored to toggling element')
-          div.remove()
-          toggleBtn.remove()
-          otherBtn.remove()
+        setTimeout(function () {
+          ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
           start()
         }, 0)
       })
@@ -289,6 +267,7 @@ $(function () {
         $('#close').click()
       })
       .appendTo('#qunit-fixture')
-    toggleBtn.click()
+
+    $toggleBtn.click()
   })
 })