在 AngularJS 的单元测试中获取 sessionStorage 项答案

【问题标题】：Get sessionStorage item in AngularJS's unit tests在 AngularJS 的单元测试中获取 sessionStorage 项
【发布时间】：2014-04-25 06:56:36
【问题描述】：

我想知道，在测试我的控制器时，是否在调用函数后设置了 sessionStorage 变量。这是我的测试：

it('should be able to set language to the storage through SessionService', inject(['SessionService', function (SessionService) {
        $scope.openChooseLanguage();
        $scope.modalInstance.close('fr');
        // What to write there ?
 }]));

在我的控制器中，我有一个 openChooseLanguage 函数，它设置了一个“lang”项，并将返回的值设置为 SessionService 中的第二个参数：

$scope.openChooseLanguage = function(){
    if($scope.lang == '' || $scope.lang == null){
        $scope.modalInstance = $modal.open({
            templateUrl: 'views/modals/chooseLanguage.html',
            controller: 'ChooseLanguageCtrl'
        });

        $scope.modalInstance.result.then(function (result) {
            //Define user language in Session Storage
            SessionService.set('lang', result);
        }, function () {
            $scope.canceled = true;
            $scope.openChooseLanguage();
        });
    }
};

这是我的 SessionService，它只是设置、获取、取消设置我的项目：

return {
        get : function(key){
            return sessionStorage.getItem(key);
        },
        set : function(key, val){
            broadcast(key, val);
            return sessionStorage.setItem(key, val);
        },
        unset : function(key){
            return sessionStorage.removeItem(key);
        }
    };

那么知道'lang'项是否已设置的解决方案是什么？我刚刚开始使用 AngularJS 和 Jasmine 进行单元测试，所以我现在有点困惑......

更新

我只是尝试将此添加到我的测试中：

beforeEach(function() {
        $sessionStorage = jasmine.createSpyObj('SessionService', ['get', 'set', 'unset']);
    });

it('should be able to set language to the storage through SessionService', inject(['SessionService', function (SessionService) {
        $scope.openChooseLanguage();
        $scope.modalInstance.close('fr');
        expect($sessionStorage.set).toHaveBeenCalledWith('lang','fr');
    }]));

但是在运行我的测试时出现以下错误：

预计 spy SessionService.set 已使用 ['lang', 'fr' ] 但它从未被调用过

【问题讨论】：

标签： angularjs unit-testing jasmine karma-runner

【解决方案1】：

执行以下操作：

声明将保存注入的SessionService的变量
注入服务并在其set 方法上使用spyOn
使用toHaveBeenCalledWith方法查看

因此，你应该有这个：

var SessionService;

beforeEach(inject(function(_SessionService_) {
     SessionService = _SessionService_;   
     spyOn(SessionService,'set').andCallThrough();
}));

it('should be able to set language to the storage through SessionService',function(){
     $scope.openChooseLanguage();
     $scope.modalInstance.close('fr');

     expect(SessionService.set).toHaveBeenCalledWith('lang','fr');
});

【讨论】：