我正在努力了解如何使用Jasmine和Karma对单个应用程序AngularJS进行单元测试。我曾尝试使用Google，但没有取得任何进展，我自己的代码。特别是嘲笑和注入依赖于内置$ http服务的工厂服务。

另外，单元测试控制器和工厂服务或者其中一个就足够了。

我已经上传的代码plunkr并希望得到任何帮助

https://plnkr.co/edit/WBpJ7gUZrNm8LwnCOsnR

factory.main.js

angular.module('hwApp').factory('mainFactory', ['$http', function($http){ 
    return { 
    getData: function(){ 
     return $http.get('https://jsonplaceholder.typicode.com/posts/1'); 
    } 
    } 
}]);

controller.main.js

angular.module('hwApp').controller('MainCtrl', ['mainFactory', function(mainFactory){ 
    vm = this; 
    mainFactory.getData().then(function(res){ 
    vm.httpData = res.data; 
    }) 
}]);

指数.html

<!DOCTYPE html> 
<html ng-app="hwApp"> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script src="factory.main.js"></script> 
    <script src="controller.main.js"></script> 
    </head> 

    <body ng-controller="MainCtrl as vm"> 
    <h1>{{vm.httpData.title}}</h1> 
    </body> 
</html>

来源

2016-02-12 user1275105

通常情况下，您需要单独测试控制器和服务。 Pluralsight在使用ngMock为控制器和服务进行单元测试方面拥有丰富的经验。我建议找一些可以引导你完成的教程，但是我可以为你提供一个测试你的工厂的例子。

单元测试你的工厂

describe("your backend service", function() { 
    var dataWeWantToGet = [ "put", "your", "data", "here" ]; 
    var mainFactory; 
    var $httpBackend; 

    beforeEach(angular.mock.module("hwApp")); 

    beforeEach(inject(function (_mainFactory_, _$httpBackend_) { 
    mainFactory = _mainFactory_; 
    $httpBackend = _$httpBackend_; 
    })); 


    it("should return movie search data from the title", function() { 
    var response = []; 

    $httpBackend.when('GET', 'https://jsonplaceholder.typicode.com/posts/1') 
     .respond(200, dataWeWantToGet); 

    mainFactory.getData() 
     .then(function onSuccess(data) { 
     response = data; 
     }); 

    $httpBackend.flush(); 

    expect(response.data).toEqual(dataWeWantToGet); 
    }); // end it 

}); // end describe

在这个例子中，我们既嘲讽后端和控制器会发生的代码。这种隔离有必要证明你的工厂独立于你的控制器工作。

控制器如何？

测试你的控制器时，你希望实现类似的隔离，但是我认为你是否需要打扰通过控制器测试服务的功能是值得商榷的。你几乎做到了。要单元测试只是您的控制器的那一部分，您必须注入刚刚测试的服务，并以您的工厂的单元测试中刚刚测试的方式使用它。

这就是要测试多少和开始引起争议的问题？就个人而言，我不知道我是否会在控制器中使用该服务时进行测试。我会测试受它影响的东西是否正确更新。在Angular中，这通常是更大的挑战。我很乐意听取其他人的意见。

来源

2016-02-12 02:01:55

非常感谢。我的好处很少有问题： - 第8行：系统如何知道您注入的是控制器还是工厂等。想象一下，您有一个名为“main”的控制器和工厂。 - 第20行：mainFactory.getData（）<<<<您是否正在调用工厂中定义的实际方法？ – user1275105

我的理解是，我正在调用服务方法的模拟。最佳做法是始终使用不同的名称并根据它们的名称，控制器的“mainController”和工厂的“mainService”。坦率地说，我还没有尝试给服务和控制器同名。控制器被嘲笑的方式与服务略有不同。你必须注入$控制器...这是一个体面的演练如何做到这一点：http://nathanleclaire.com/blog/2013/12/13/how-to-unit-test-controllers-in-angularjs-without-setting-your-hair-on -火/ –

如何编写依赖于工厂服务的控制器的单元测试，该服务本身取决于$ http服务

回答

单元测试你的工厂

控制器如何？

如何编写依赖于工厂服务的控制器的单元测试，该服务本身取决于$ http服务

回答

单元测试你的工厂

控制器如何？

相关问题