Merge pull request rails#46077 from lsylvester/qunit2

upgrade to QUnit 2 for UJS tests

Author: rafaelfranca

actionview/test/ujs/public/test/call-ajax.js

@@ -1,26 +1,28 @@
 (function() {
 
-module('call-ajax', {
-  setup: function() {
+QUnit.module('call-ajax', {
+  beforeEach: function() {
     $('#qunit-fixture')
       .append($('<a />', { href: '#' }))
   }
 })
 
-asyncTest('call ajax without "ajax:beforeSend"', 1, function() {
+QUnit.test('call ajax without "ajax:beforeSend"', function(assert) {
+  const done = assert.async()
+
   var link = $('#qunit-fixture a')
   link.bindNative('click', function() {
     Rails.ajax({
       type: 'get',
       url: '/',
       success: function() {
-        ok(true, 'calling request in ajax:success')
+        assert.ok(true, 'calling request in ajax:success')
+        done()
       }
     })
   })
 
   link.triggerNative('click')
-  setTimeout(function() { start() }, 50)
 })
 
 })()

actionview/test/ujs/public/test/call-remote-callbacks.js

@@ -1,12 +1,12 @@
 (function() {
 
-module('call-remote-callbacks', {
-  setup: function() {
+QUnit.module('call-remote-callbacks', {
+  beforeEach: function() {
     $('#qunit-fixture').append($('<form />', {
       action: '/echo', method: 'get', 'data-remote': 'true'
     }))
   },
-  teardown: function() {
+  afterEach: function() {
     $(document).undelegate('form[data-remote]', 'ajax:beforeSend')
     $(document).undelegate('form[data-remote]', 'ajax:before')
     $(document).undelegate('form[data-remote]', 'ajax:send')
@@ -17,15 +17,15 @@ module('call-remote-callbacks', {
 })
 
 function submit(fn) {
-  var form = $('form')
+  var form = $('#qunit-fixture form')
 
   if (fn) fn(form)
   form.triggerNative('submit')
-
-  setTimeout(function() { start() }, 13)
 }
 
-asyncTest('modifying form fields with "ajax:before" sends modified data in request', 3, function() {
+QUnit.test('modifying form fields with "ajax:before" sends modified data in request', function(assert) {
+  const done = assert.async()
+
   $('form[data-remote]')
     .append($('<input type="text" name="user_name" value="john">'))
     .append($('<input type="text" name="removed_user_name" value="john">'))
@@ -40,62 +40,67 @@ asyncTest('modifying form fields with "ajax:before" sends modified data in reque
 
   submit(function(form) {
     form.bindNative('ajax:success', function(e, data, status, xhr) {
-      equal(data.params.user_name, 'steve', 'modified field value should have been submitted')
-      equal(data.params.other_user_name, 'jonathan', 'added field value should have been submitted')
-      equal(data.params.removed_user_name, undefined, 'removed field value should be undefined')
+      assert.equal(data.params.user_name, 'steve', 'modified field value should have been submitted')
+      assert.equal(data.params.other_user_name, 'jonathan', 'added field value should have been submitted')
+      assert.equal(data.params.removed_user_name, undefined, 'removed field value should be undefined')
+      done()
     })
   })
 })
 
-asyncTest('modifying data("type") with "ajax:before" requests new dataType in request', 1, function() {
+QUnit.test('modifying data("type") with "ajax:before" requests new dataType in request', function(assert) {
   $('form[data-remote]').data('type', 'html')
     .bindNative('ajax:before', function() {
       this.setAttribute('data-type', 'xml')
     })
 
   submit(function(form) {
     form.bindNative('ajax:beforeSend', function(e, xhr, settings) {
-      equal(settings.dataType, 'xml', 'modified dataType should have been requested')
+      assert.equal(settings.dataType, 'xml', 'modified dataType should have been requested')
     })
   })
 })
 
-asyncTest('setting data("with-credentials",true) with "ajax:before" uses new setting in request', 1, function() {
+QUnit.test('setting data("with-credentials",true) with "ajax:before" uses new setting in request', function(assert) {
   $('form[data-remote]').data('with-credentials', false)
     .bindNative('ajax:before', function() {
       this.setAttribute('data-with-credentials', true)
     })
 
   submit(function(form) {
     form.bindNative('ajax:beforeSend', function(e, xhr, settings) {
-      equal(settings.withCredentials, true, 'setting modified in ajax:before should have forced withCredentials request')
+      assert.equal(settings.withCredentials, true, 'setting modified in ajax:before should have forced withCredentials request')
     })
   })
 })
 
-asyncTest('stopping the "ajax:beforeSend" event aborts the request', 1, function() {
+QUnit.test('stopping the "ajax:beforeSend" event aborts the request', function(assert) {
+  const done = assert.async()
+
   submit(function(form) {
     form.bindNative('ajax:beforeSend', function(e) {
-      ok(true, 'aborting request in ajax:beforeSend')
+      assert.ok(true, 'aborting request in ajax:beforeSend')
       e.preventDefault()
     })
     form.unbind('ajax:send').bindNative('ajax:send', function() {
-      ok(false, 'ajax:send should not run')
+      assert.ok(false, 'ajax:send should not run')
     })
     form.bindNative('ajax:error', function(e, response, status, xhr) {
-      ok(false, 'ajax:error should not run')
+      assert.ok(false, 'ajax:error should not run')
     })
     form.bindNative('ajax:complete', function() {
-      ok(false, 'ajax:complete should not run')
+      assert.ok(false, 'ajax:complete should not run')
     })
   })
+
+  setTimeout(function() { done() }, 13)
 })
 
 function skipIt() {
   // This test cannot work due to the security feature in browsers which makes the value
   // attribute of file input fields readonly, so it cannot be set with default value.
   // This is what the test would look like though if browsers let us automate this test.
-  asyncTest('non-blank file form input field should abort remote request, but submit normally', 5, function() {
+  QUnit.test('non-blank file form input field should abort remote request, but submit normally', function(assert) {
     var form = $('form[data-remote]')
           .append($('<input type="file" name="attachment" value="default.png">'))
           .bindNative('ajax:beforeSend', function() {
@@ -118,7 +123,7 @@ function skipIt() {
     }, 13)
   })
 
-  asyncTest('file form input field should not abort remote request if file form input does not have a name attribute', 5, function() {
+  QUnit.test('file form input field should not abort remote request if file form input does not have a name attribute', function(assert) {
     var form = $('form[data-remote]')
           .append($('<input type="file" value="default.png">'))
           .bindNative('ajax:beforeSend', function() {
@@ -139,7 +144,7 @@ function skipIt() {
     }, 13)
   })
 
-  asyncTest('blank file input field should abort request entirely if handler bound to "ajax:aborted:file" event that returns false', 1, function() {
+  QUnit.test('blank file input field should abort request entirely if handler bound to "ajax:aborted:file" event that returns false', function(assert) {
     var form = $('form[data-remote]')
           .append($('<input type="file" name="attachment" value="default.png">'))
           .bindNative('ajax:beforeSend', function() {
@@ -161,79 +166,103 @@ function skipIt() {
   })
 }
 
-asyncTest('"ajax:beforeSend" can be observed and stopped with event delegation', 1, function() {
+QUnit.test('"ajax:beforeSend" can be observed and stopped with event delegation', function(assert) {
+  const done = assert.async()
+
   $(document).delegate('form[data-remote]', 'ajax:beforeSend', function(e) {
-    ok(true, 'ajax:beforeSend observed with event delegation')
+    assert.ok(true, 'ajax:beforeSend observed with event delegation')
     e.preventDefault()
   })
 
   submit(function(form) {
     form.unbind('ajax:send').bindNative('ajax:send', function() {
-      ok(false, 'ajax:send should not run')
+      assert.ok(false, 'ajax:send should not run')
     })
     form.bindNative('ajax:complete', function() {
-      ok(false, 'ajax:complete should not run')
+      assert.ok(false, 'ajax:complete should not run')
     })
   })
+
+  setTimeout(function() { done() }, 13)
 })
 
-asyncTest('"ajax:beforeSend", "ajax:send", "ajax:success" and "ajax:complete" are triggered', 8, function() {
+QUnit.test('"ajax:beforeSend", "ajax:send", "ajax:success" and "ajax:complete" are triggered', function(assert) {
+  const done = assert.async(4)
+
   submit(function(form) {
     form.bindNative('ajax:beforeSend', function(e, xhr, settings) {
-      ok(xhr.setRequestHeader, 'first argument to "ajax:beforeSend" should be an XHR object')
-      equal(settings.url, '/echo', 'second argument to "ajax:beforeSend" should be a settings object')
+      assert.ok(xhr.setRequestHeader, 'first argument to "ajax:beforeSend" should be an XHR object')
+      assert.equal(settings.url, '/echo', 'second argument to "ajax:beforeSend" should be a settings object')
+      done()
     })
     form.bindNative('ajax:send', function(e, xhr) {
-      ok(xhr.abort, 'first argument to "ajax:send" should be an XHR object')
+      assert.ok(xhr.abort, 'first argument to "ajax:send" should be an XHR object')
+      done()
     })
     form.bindNative('ajax:success', function(e, data, status, xhr) {
-      ok(data.REQUEST_METHOD, 'first argument to ajax:success should be a data object')
-      equal(status, 'OK', 'second argument to ajax:success should be a status string')
-      ok(xhr.getResponseHeader, 'third argument to "ajax:success" should be an XHR object')
+      assert.ok(data.REQUEST_METHOD, 'first argument to ajax:success should be a data object')
+      assert.equal(status, 'OK', 'second argument to ajax:success should be a status string')
+      assert.ok(xhr.getResponseHeader, 'third argument to "ajax:success" should be an XHR object')
+      done()
     })
     form.bindNative('ajax:complete', function(e, xhr, status) {
-      ok(xhr.getResponseHeader, 'first argument to "ajax:complete" should be an XHR object')
-      equal(status, 'OK', 'second argument to ajax:complete should be a status string')
+      assert.ok(xhr.getResponseHeader, 'first argument to "ajax:complete" should be an XHR object')
+      assert.equal(status, 'OK', 'second argument to ajax:complete should be a status string')
+      done()
     })
   })
 })
 
-asyncTest('"ajax:beforeSend", "ajax:send", "ajax:error" and "ajax:complete" are triggered on error', 8, function() {
+QUnit.test('"ajax:beforeSend", "ajax:send", "ajax:error" and "ajax:complete" are triggered on error', function(assert) {
+  const done = assert.async(4)
+
   submit(function(form) {
     form.attr('action', '/error')
-    form.bindNative('ajax:beforeSend', function(arg) { ok(true, 'ajax:beforeSend') })
-    form.bindNative('ajax:send', function(arg) { ok(true, 'ajax:send') })
+    form.bindNative('ajax:beforeSend', function(arg) {
+      assert.ok(true, 'ajax:beforeSend')
+      done()
+    })
+    form.bindNative('ajax:send', function(arg) {
+      assert.ok(true, 'ajax:send')
+      done()
+    })
     form.bindNative('ajax:error', function(e, response, status, xhr) {
-      equal(response, '', 'first argument to ajax:error should be an HTTP status response')
-      equal(status, 'Forbidden', 'second argument to ajax:error should be a status string')
-      ok(xhr.getResponseHeader, 'third argument to "ajax:error" should be an XHR object')
+      assert.equal(response, '', 'first argument to ajax:error should be an HTTP status response')
+      assert.equal(status, 'Forbidden', 'second argument to ajax:error should be a status string')
+      assert.ok(xhr.getResponseHeader, 'third argument to "ajax:error" should be an XHR object')
       // Opera returns "0" for HTTP code
-      equal(xhr.status, window.opera ? 0 : 403, 'status code should be 403')
+      assert.equal(xhr.status, window.opera ? 0 : 403, 'status code should be 403')
+      done()
     })
     form.bindNative('ajax:complete', function(e, xhr, status) {
-      ok(xhr.getResponseHeader, 'first argument to "ajax:complete" should be an XHR object')
-      equal(status, 'Forbidden', 'second argument to ajax:complete should be a status string')
+      assert.ok(xhr.getResponseHeader, 'first argument to "ajax:complete" should be an XHR object')
+      assert.equal(status, 'Forbidden', 'second argument to ajax:complete should be a status string')
+      done()
     })
   })
 })
 
-asyncTest('binding to ajax callbacks via .delegate() triggers handlers properly', 4, function() {
+QUnit.test('binding to ajax callbacks via .delegate() triggers handlers properly', function(assert) {
+  const done = assert.async(4)
+
   $(document)
     .delegate('form[data-remote]', 'ajax:beforeSend', function() {
-      ok(true, 'ajax:beforeSend handler is triggered')
+      assert.ok(true, 'ajax:beforeSend handler is triggered')
+      done()
     })
     .delegate('form[data-remote]', 'ajax:send', function() {
-      ok(true, 'ajax:send handler is triggered')
+      assert.ok(true, 'ajax:send handler is triggered')
+      done()
     })
     .delegate('form[data-remote]', 'ajax:success', function() {
-      ok(true, 'ajax:success handler is triggered')
+      assert.ok(true, 'ajax:success handler is triggered')
+      done()
     })
     .delegate('form[data-remote]', 'ajax:complete', function() {
-      ok(true, 'ajax:complete handler is triggered')
+      assert.ok(true, 'ajax:complete handler is triggered')
+      done()
     })
   $('form[data-remote]').triggerNative('submit')
-
-  setTimeout(function() { start() }, 13)
 })
 
 })()