QUnit Test Ajax Успешная функция - PullRequest
Новая
       27

QUnit Test Ajax Успешная функция

0 голосов
/ 30 декабря 2018

Я знаю, что уже есть много постов, посвященных этому, но я не очень хорош в 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);
});

В настоящее время он даже не пытается запустить assert.equal в функции setTimeout.

Пожалуйста, дайте как можно больше подробностей, и у меня, вероятно, будет много вопросов.Во-первых, как тест может получить правильную функцию из $.ajax = function(request)?

1 Ответ

0 голосов
/ 04 января 2019

Я вижу, что вы пытаетесь сделать ... но есть инструмент для имитации запросов Ajax именно для этой цели!(Который я поддерживаю, но все же ...)

По сути, в своем тесте (или 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.
  });
});

Не забудьте включить файл Mockjax JS в дополнение к файлу QUnit JS!

...