如何对document.ready内部的ajax jquery函数进行单元测试

时间:2019-02-26 20:37:33

标签: javascript jquery ajax unit-testing

我有一个脚本,该脚本向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
   });
});

1 个答案:

答案 0 :(得分:0)

在测试中,您首先需要准备一个HTML装置,其中将包含所有必需的元素,例如#search。准备好之后,您可以通过$.getScript()加载脚本-它会将点击事件监听器附加到#search。最后,您必须监视$.ajax并通过$('#search').trigger('click')

手动触发点击