注射服务测试控制器内部茉莉angularJS [英] Testing controller with injected service inside angularJS with jasmine

问题描述

我想了解如何测试我的code茉莉和angularJS。我写了一个测试项目与控制器和注入服务。现在我想测试控制器，并试图嘲弄注射服务。但我没有找到一个方法来测试从我的控制器到达的功能。这里是我的jsfiddle：的 http://jsfiddle.net/2fwxS/ 的

I am trying to understand how to test my code with jasmine and angularJS. I wrote a test project with a controller and an injected service. Now i want to test the controller and tried to mock the injected service. But i didn’t found a way to test the function "Arrived" from my controller. Here’s my jsfiddle: http://jsfiddle.net/2fwxS/

controller.js：

angular.module('myApp.controllers', [])
    .controller('MyCtrl', ['$scope', 'MyService', function ($scope, MyService) {
    $scope.User = {};
    $scope.HasUserArrived = false;
    $scope.Arrived = function(firstname, lastname) {
    $scope.HasUserArrived = MyService.Arrive(firstname, lastname);
    return $scope.HasUserArrived;
    }
}]);

services.js：

var myApp = angular.module('myApp.services', []).
  value('version', '0.1');

myApp.factory('MyService', [function () {
    return {
        HasArrived: false,
        Arrive: function (firstname, lastname) {
            this.HasArrived = false;

            if (firstname && lastname) {
                this.HasArrived = true;
            }

            console.log("User has arrived: " + this.HasArrived);
            return this.HasArrived;
        }
    }
}]);

我发现了一些类似的解释，其中$提供可能是正确的解决方案（<一个href=\"http://stackoverflow.com/questions/16255759/how-can-i-write-jasmine-test-for-angular-controller-and-service-like-this\">How我可以写角控制器和服务也是这样吗？）或createSpy（<茉莉花测试href=\"http://stackoverflow.com/questions/14531904/how-do-you-mock-angular-service-that-is-a-function\">How你嘲笑角服务，是一个功能？），但我无法理解，当我需要$ provider.factory或$ provider.value或当我应该使用createSpy？

I found some similar explanations where $provide could be the correct solution (How can I write jasmine test for angular controller and service like this?) or createSpy (How do you mock Angular service that is a function?) but I wasn’t able to understand when I need $provider.factory or $provider.value or when should I use createSpy?

我想AP preciate如果有人可以帮助我了解的差异，并得到停用code在我的jsfiddle（ 的 http://jsfiddle.net/2fwxS/ 的）的例子和运行...

I would appreciate if someone could help me to understand the differences and gets the deactivated code in my jsFiddle (http://jsfiddle.net/2fwxS/) example up and running...

推荐答案

您应该按顺序，以取代原有的服务实例使用 $ provide.value A嘲笑之一：

You should use $provide.value in order to replace the original service instance with a mocked one:

beforeEach(module(function($provide) {
    var service = { 
        Arrive: function (firstname, lastname) {
            if (firstname && lastname) {
                return true;
            }
        }
    };
    $provide.value('MyService', service);
}));

我真的不知道为什么 $ provide.value 的作品，但 $ provide.factory 不。我会尝试看看的角code以后让我自己看着办吧。如果我发现了一些东西，我会更新这个答案。

I really don't know why $provide.value works but $provide.factory doesn't. I'll try to take a look at the Angular code later so I can figure it out. I'll update this answer if I find out something.

关于间谍，你应该，如果你想测试你的嘲弄正在使用它们应该的方式使用它们。这包括检测参数和调用。这里是你的code改为使用间谍：

About spies, you should use them if you want to test that your mocks are being used the way they are supposed to. That includes checking parameters and invocations. Here's your code changed to use a spy:

it('checks that Arrived is correctly used', function() {
    // Arrange
    spyOn(service, 'Arrive');

    // Act
    scope.Arrived('Franz', 'Kafka');

    // Assert
    expect(service.Arrive).toHaveBeenCalledWith('Franz', 'Kafka');
});

这是你的固定的jsfiddle 。

这篇关于注射服务测试控制器内部茉莉angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！