如何模拟 JQuery Ajax 调用以及 Angular 2 组件答案

【问题标题】：How to mock JQuery Ajax call along with Angular 2 component如何模拟 JQuery Ajax 调用以及 Angular 2 组件
【发布时间】：2016-06-29 10:31:16
【问题描述】：

我们正在开发一个 Angular 2 应用程序。对于单元测试，我们使用 Jasmine 作为我们的框架。我正在尝试为此设置编写我的第一个单元测试。我们有一个组件，它使用 $.ajax 调用来调用 Web 服务并接收 JSON 数据。代码如下 -

$.ajax({ url:(myurl), 
dataType: 'json', 
success:(returnedData) => {return myData;},
error:(returnedData) => {<log error>;
return}});

返回的数据格式如下-

{
               "MyClass": {
                   "searchFilter": "test",
                   "additionalIdeas": "moretest",
                   "results": [
                        ["resA", "result A"],
                        ["resB", "result B"],
                        ["resC", "result C"]
                    ]

               },
               "DataFormat": 1
           };

在我的单元测试中，我使用 testComponentBuilder 注入组件和服务，然后尝试调用该方法，该方法又调用该服务来填充我的数据。

如何在这里模拟 json 数据？我尝试查看 Jasmine-Ajax，但在注入和测试构建器之间迷路了。

【问题讨论】：

标签： jquery ajax angular mocking jasmine

【解决方案1】：

通常，单元测试不应尝试调用外部源。我建议你启动一个不允许调用出去的间谍，并断言它被调用以及你的代码段应该被调用的参数，你甚至可以模拟一个响应。

就模拟 JSON 而言，这里有什么问题？只需创建一个本地模拟资源作为 JSON 对象，该对象与 ajax 调用将返回的对象相似或相同。

具体来说，您为方法名称创建一个间谍，该名称进行 ajax 调用并使用模拟对象存根响应。例如，假设您使用的是 jQuery，您甚至可以为您的 jQuery ajax 调用添加一个间谍......

spyOn($, 'ajax').and.returnValue(yourMockedJsonObject);

http://jasmine.github.io/2.0/introduction.html#section-Spies

【讨论】：

我使用了那个路由，它返回 this.service.getData.done() is not a function。 getData 是我调用该 ajax 请求的函数。如您所见，它在那里使用了 success() 而不是 .done
在上述语句中的更正.. .done 在进行 ajax 调用时不使用。相反，它在调用我的服务类方法时在组件类中使用。调用看起来像这样 - this.myservice.getData(param1,param2).done(mydata=> { //进一步处理数据}

【解决方案2】：

我可以使用 Deferred 对象来做到这一点。代码看起来像。

spyOn($,'ajax').and.callFake(()=>{
    var d = $.deferred();
    d.resolve(myMockedJSON);
    d.promise();
});

【讨论】：