Question

我知道那里已经有很多关于这一点的文章，但是我在基线时并不擅长Javascript，并且大多数应该使用较老的语法使我感到困惑的Java应该是有意义的。

这是我要工作的功能：

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);
});

目前，它甚至没有尝试在assert.equal函数中运行setTimeout。

请提供尽可能多的细节，我可能会有很多问题。首先，测试如何从$.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成功功能

1 个答案: