使用 jasmine 测试使用控制器的 angular 指令

Question

我正在尝试编写一个 jasmine 测试来测试我编写的 angular 指令是否有效。

这是我的规范文件：

    describe('blurb directive', function () {
    var scope, httpMock, element, controller;

    beforeEach(module('mdotTamcCouncil'));
    beforeEach(module('mdotTamcCouncil.core'));
    beforeEach(module('blurb'));

    beforeEach(inject(function (_$httpBackend_, $rootScope, $compile) {
        element = angular.element('<mcgi-blurb text-key="mainPageIntro"></mcgi-blurb>');

        var httpResponse = '<textarea name="content" ng-model="content"></textarea>';

        scope = $rootScope.$new();
        httpMock = _$httpBackend_;

        httpMock.whenGET('components/blurb/blurb.html').respond(httpResponse);
        element = $compile(element)(scope);
        scope.$digest();
    }));

    it('should have some content', function () {
        expect(scope.content).toBeDefined();
    });
});

值 "scope.content" 始终未定义，当我查看范围对象时，它似乎是一个通用范围对象，上面没有我的自定义属性。

以下是其他相关文件：

blurb-directive.js

(function () {
    'use strict';
    angular.module('blurb')
        .directive('mcgiBlurb', blurb);

    function blurb() {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: jsGlobals.componentsFolder + '/blurb/blurb.html',
            controller: 'BlurbController',
            controllerAs: 'blurb',
            bindToController: false,
            scope: {
                textKey: "@"
            }

        };

    };
})();

blurb-controller.js

(function () {

    angular.module('blurb')
            .controller('BlurbController', ['$scope', 'blurbsFactory', 'userFactory', function ($scope, blurbsFactory, userFactory) {
                $scope.content = "";
                $scope.blurbs = {};
                $scope.currentUser = {};
                this.editMode = false;


                userFactory().success(function (data) {
                    $scope.currentUser = data;
                });

                blurbsFactory().success(function (data) {
                    $scope.blurbs = data;
                    $scope.content = $scope.blurbs[$scope.textKey];
                });

                this.enterEditMode = function () {
                    this.editMode = true;
                };

                this.saveEdits = function () {
                    this.editMode = false;
                    $scope.blurbs[$scope.textKey] = $scope.content;
                };
            }]);

})();

我做错了什么？

Answer 1

该指令具有独立作用域，因此传递给其控制器的作用域和 link 函数（如果有的话）是独立作用域，不同于您的 scope。

您可能使用element.isolateScope()幸运地获得指令的范围；您可能不会，因为 replace: true - 尝试确定。您还可以使用 element.controller('mcgiBlurb').

访问控制器实例

使用 jasmine 测试使用控制器的 angular 指令

Using jasmine to test angular directive that uses a controller

angularjs

angularjs-directive

jasmine

karma-jasmine