如何在业力单元测试中获取表单视图

时间:2015-10-14 19:25:00

标签: angularjs unit-testing karma-jasmine

我正在尝试测试我在注册视图中的表单的一些验证。我创建了包含表单的视图文件。现在我需要知道如何从单元测试中访问此表单,以便我可以验证$ setValidity是否按预期工作。

这是我要测试的代码:

angular
    .module('enigma.registration', ['ngMessages'])
    .controller('Registration', Registration);

Registration.$inject = ['$state', 'authFactory'];

function Registration($state, authFactory) {
    var reg = this;

    reg.alreadyRegistered = alreadyRegistered;
    reg.error = '';

    function alreadyRegistered() {
        if(reg.regForm.email.$valid){
            authFactory.doesUserExist(reg.user)
                .then(function(response){
                    if(response.data.message === 'user exists') {
                        reg.regForm.email.$setValidity('userExists', false); // I am missing coverage of this line.
                    } else {
                        reg.regForm.email.$setValidity('userExists', true); // I am missing coverage of this line.
                    }
                })
                .catch(function(err){
                    reg.error = err;
                });
        } else { // Input is invalid for reasons other than existing email, do not delete ~ EFarley 9/23/15
            reg.regForm.email.$setValidity('userExists', true); // Remove userExists validation error.
        }
    };    
}

我已尝试对此进行单元测试,但无论我做什么,我都无法从单元测试中访问regForm.email。$ error属性。

最后在这里我是如何编写单元测试的:

describe('Registration Controller Tests', function() {
    var $controller, $scope, defer, doesUserExistSpy, authFactory, Registration, $httpBackend, authReqHandler, loginReqHandler, userReqHandler, $state, goSpy, setValiditySpy;

    beforeEach(module('enigma'));

    beforeEach(inject(function (_$controller_, _$rootScope_, $q, $injector) {
        $controller = _$controller_;
        $scope = _$rootScope_;
        defer = $q.defer();

        // Create spies
        doesUserExistSpy = jasmine.createSpy('doesUserExist').and.returnValue(defer.promise);

        authFactory = {
            doesUserExist: doesUserExistSpy
        };   

        Registration = $controller('Registration', {
            $scope: $scope,
            authFactory: authFactory,
            $state: $state
        });
    });

    describe('check email field validity', function () {
        var template, element, regForm;

        beforeEach(inject(function ($templateCache, $compile) {
            template = $templateCache.get('../public/modules/registration/registration.html');
            element = angular.element(template);
            $compile(element)($scope);
            regForm = $scope.regForm;
        }));

        it('should set regForm.email.$error.userExists to true if /doesUserExist returns "user exists"', function () {
            $httpBackend.whenPOST('/doesUserExist').respond('user exists');
            Registration.alreadyRegistered;
            $scope.$digest();
            expect(regForm.email.$error.userExists).toEqual(true);
        });
    });
});

但是模板总是等于undefined,这会导致元素未定义,最后regForm未定义。由于一切都未定义,我无法访问电子邮件字段的$ error属性。如何在测试中访问表单?

0 个答案:

没有答案