Модульный тест для window.location.href в запросе AJAX с использованием mocha/chai

Question

Мне нужно проверить, действительно ли window.location.href = data.redirect_path когда-нибудь случится Как бы я посмеялся над этим в Sinon, если бы он не отвлекал меня от моего бегуна? Я использую chai/mocha.js с чайной ложкой в ​​качестве теста.

$.ajax({
    type: 'PUT',
    url: $url,
    dataType: 'json',
    data: { user: $userData },
    success: function(data) {
      if (data.success == true) {
        window.location.href = data.redirect_path
      } else {
        $errorsContainer.html(data.html);
        $codeInput.select();
        if (typeof data.redirect_path !== 'undefined') {
          window.location.href = data.redirect_path
        }              
      }
    }
  });

Answer 1

Последние 2-3 часа я вырывал свои волосы из-за подобной проблемы. К сожалению, с помощью window.location = href было очень важным поведением в моем плагине, поэтому я не мог просто принять это на веру. Выше использования window.location.assign(href) у меня не сработало - возможно из-за jsdom, Точно сказать не могу.

Наконец, я пришел к (довольно) простому решению, которое работает в моем случае.

it('reloads the page when using the browsers back button', (done) => {
    let stub = sinon.stub(window, 'location').set(() => { done() });

    // do whatever you need to here to trigger
    // window.location = href in your application
});

Я знаю, что он работает в течение длительного времени ожидания, поэтому, если он потерпит неудачу, вам придется подождать его, но это гораздо лучший компромисс для меня, чем отсутствие тестов, доказывающих, что мой плагин ведет себя так, как ожидалось.

НОТА jsdom не имеет установщика для window.location изначально но sinon позволяет вам создать один.

Answer 2

Вы можете stub на $ за ajax как показано ниже. Это требует некоторого рефакторинга вашего кода, чтобы его можно было легко проверить.

Ваш успех обратного вызова должен быть таким,

success: function(data) {
      if (data.success == true) {
        window.location.assign(data.redirect_path)
      } else {
        $errorsContainer.html(data.html);
        $codeInput.select();
        if (typeof data.redirect_path !== 'undefined') {
          window.location.assign(data.redirect_path);
        }              
      }
    }

Обратитесь в документ, как location.assign работает.

it("should fake successful ajax request", function () {
    sinon.stub($, "ajax").yieldsTo("success", {redirect_path: '/home', success: true});
    sinon.stub(window.location, 'assign'); // stubbing the assign. so that it wont redirect to the given url.

    //here you call the function which invokes $.ajax();
     someFunction();

    // assert here 

     // manually restoring the stubs.
     $.ajax.restore();
     window.location.assign.restore();
})