如何對document.ready內部的ajax jquery函數進行單元測試

Question

我有一個腳本，向json API發出$ .ajax請求。 所以我要做的是構建單元測試，以便可以測試來自ajax請求的結果。 例如，如果我得到json對象。 我知道結果應該包括數組的“項目”和“結果”。 事情是我不知道如何初始化$ .ajax函數

$("#button").click(function() { });

這是我的javascript index.js文件的框架。 文件不完整。 因為它更長。 我只包含了相關部分。 但這有效。 這是在線在線應用程序http://pctechtips.org/apps/books/

$(document).ready(function() {
  var item, tile, author, publisher, bookLink, bookImg;
  var outputList = document.getElementById("list-output");
  var bookUrl = "https://www.googleapis.com/books/v1/volumes?q=";
  var searchData;
$("#search").click(function() {
    outputList.innerHTML = ""; //empty html output
     searchData = $("#search-box").val();
     //handling empty search input field
     if(searchData === "" || searchData === null) {
       displayError();
     }
    else {
       // console.log(searchData);
       // $.get("https://www.googleapis.com/books/v1/volumes?q="+searchData, getBookData()});
       $.ajax({
          url: bookUrl + searchData,
          dataType: "json",
          success: function(response) {
            console.log(response)
            if (response.totalItems === 0) {
              alert("no result!.. try again")
            }
            else {
              $("#title").animate({'margin-top': '5px'}, 1000); //search box animation
              $(".book-list").css("visibility", "visible");
              displayResults(response);
            }
          },
          error: function () {
            alert("Something went wrong.. <br>"+"Try again!");
          }
        });
      }
      $("#search-box").val(""); //clearn search box
   });
});

Answer 1

在測試中，您首先需要准備一個HTML夾具，其中將包含所有必需的元素，例如#search 。 准備好之后，您可以通過$.getScript()加載腳本-它會將click事件監聽器附加到#search 。 最后，您必須監視$.ajax並通過$('#search').trigger('click')手動$('#search').trigger('click')