QUnit测试ajax成功函数

Question

我知道已经有很多帖子介绍了这一点，但我并不擅长 Javascript 作为基线，而且大多数应该有意义的帖子都使用了较旧的语法，即把我弄糊涂了。

这是我想要使用的功能：

function getUpdateForm() {
  $.ajax({
    url: 'test_response.html',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      $("#Form_div").html(data);
    },
  });
};

这是我的响应文件：

<html>
  <head>
    <title>Test Response</title>
  </head>
  <body>
    <h1>Test Page</h1>
  </body>
</html>

这是我的 QUnit 测试：

QUnit.test('getUpdateForm ajax request', function(assert) {

  $.ajax = function(request) {
    assert.equal(
      request.url,
      'test_response.html',
      'request url is correct'
    );
    assert.equal(request.type, 'GET',
      'request type is correct'
    );
    assert.equal(request.dataType, 'json',
      'request dataType is correct'
    );
  };

  getUpdateForm();

  setTimeout(function() {
    assert.equal($("#Form_div").html(), '',// not exactly sure what to put
      'Received correct html in response'
    );
    assert.async();
  }, 1000);
});

目前它甚至不尝试运行 setTimeout 函数中的 assert.equal。

请尽可能详细地说明，我可能会有很多问题。第一个是，测试如何从 $.ajax = function(request) 中获得正确的函数？

Answer 1

我明白你想做什么...但是有一个 tool to mock out Ajax requests 就是为了这个目的！（我是它的维护者，但仍然...）

基本上，在您的测试（或 beforeEach hook）中，您根据真实的 Ajax 调用创建一个模拟，然后进行代码测试。

首先，我将首先在您的源代码函数中添加一个回调，以便我们知道 ajax 调用何时在测试中完成：

function getUpdateForm(doneFunction) {
  $.ajax({
    url: 'test_response.html',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      $("#Form_div").html(data);
    },
    complete: doneFunction   // <-- this is new!
  });
};

现在使用模拟设置您的测试，并执行断言...

QUnit.test('getUpdateForm ajax request', function(assert) {
  let done = assert.async(); // set up an async test

  $.mockjax({
    url: "test_response.html",
    responseText: "<h1>Test Page</h1>"
  });

  getUpdateForm(function() {  // this is our callback function
    // now do your assertions on the content in the form div...
    assert.equal($("#Form_div h1").text(), 'Test Page', 'Received correct title in html response');

    done(); // then tell QUnit you are done testing.
  });
});

除了 QUnit JS 文件之外，别忘了包含 Mockjax JS 文件！

QUnit测试ajax成功函数

QUnit test ajax success function

javascript

jquery

unit-testing

qunit