角度指令控制器单元测试使用窗口.确认



我正在尝试为指令获得 100% 的测试覆盖率。 该指令具有一个控制器,其函数使用 window.confirm 方法。

'use strict';
(function() {
    angular
        .module('app')
        .directive('buttonToggle', buttonToggle);
    function buttonToggle() {
        var buttonToggleController = ['$scope', function($scope) {
            $scope.toggle = function() {
                var confirmResponse = (window.confirm('Are you sure?') === true);
                if(confirmResponse) {
                    $scope.on = !$scope.on;
                }
                return $scope.on;
            };
        }];
        return {
            restrict: 'E',
            templateUrl: 'client/modules/buttonToggle/buttonToggle.html',
            replace: true,
            scope: {
                on: '='
            },
            controller: buttonToggleController
        };
    }
})();

我已经测试以确保所有内容都已定义,但我无法在控制器的$scope.toggle方法中输入 if 语句。

describe('The buttonToggle directive', function() {
    var $compile,
        $scope,
        btElement = '<button-toggle></button-toggle>',
        compiledElement,
        window,
        confirm,
        btElementPath = 'client/modules/buttonToggle/buttonToggle.html',
        btController;
    beforeEach(module('app'));
    beforeEach(module(btElementPath));
    beforeEach(inject(function(_$compile_, _$rootScope_, $templateCache, $window) {
        $compile = _$compile_;
        window = $window;
        spyOn(window, 'confirm');
        $scope = _$rootScope_.$new();
        var template = $templateCache.get(btElementPath);
        $templateCache.put(btElementPath, template);
        var element = angular.element(btElement);
        compiledElement = $compile(element)($scope);
        $scope.$digest();
        btController = element.controller('buttonToggle', {
            $window: window
        });
        scope = element.isolateScope() || element.scope();
    }));
    it('should be defined', function() {
        expect(compiledElement.html()).toContain('btn');
    });
    describe('buttonToggle controller', function() {
        it('should be defined', function() {
            expect(btController).not.toBeNull();
            expect(btController).toBeDefined();
        });
        describe('toggle', function() {
            it('should be defined', function() {
                expect(scope.toggle).toBeDefined();
            });
            it('should confirm the confirmation dialog', function() {
                scope.toggle();
                expect(window.confirm).toHaveBeenCalled();
            });
        });
    });
});

我猜这与嘲笑$window服务有关,但我不确定我是否能够测试它,因为它不是全局声明的。 那么,控制器的功能是否完全"单元可测试"? 如果没有,我应该将指令的控制器写在一个单独的文件中并使用angular.module.controller吗? 如果是,那么我如何能够测试它,或者我错过了什么?

直接使用 Angular 的 $window 服务而不是 window,这是您在测试中所做的,而不是在您的指令中所做的。

然后你可以模拟它的任何函数:

spyOn($window, 'confirm').and.returnValue(false);

最新更新