angularjs - 使用 jasmine 测试使用 Controller 的 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

该指令具有隔离范围，因此传递给其 Controller 和链接函数(如果有)的范围是隔离的，与您的范围不同。

您可能有幸使用element.isolateScope()获得指令的范围；你可能不会，因为 replace: true - 尝试确保。您还可以使用 element.controller('mcgiBlurb') 访问 Controller 实例。