Question

我们正在开发一个有角度的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但是在注入和测试构建器之间迷失了。

Answer 1

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

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

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

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

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

Answer 2

我能够使用Deferred对象来完成它。代码看起来像。

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

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

2 个答案: