javascript - 带有 templateUrl 和隔离范围的 Angular Testing 指令

Question

angular.js 的新手，无法弄清楚如何使用 templateUrl 和隔离范围为指令编写测试。

这是我的 Controller

(function(){
angular.module('buttons')
    .controller('buttonController', ['$scope', function($scope){

        //primary button
        $scope.primaryButton = { name: 'Submit'};
})();

这是我的观点index.html &

<div class="layoutLeft">
        <p>Primary Button</p>
        <primary-button info="primaryButton"></primary-button>
    </div>

primary-button.html

<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>

这是我的指令

(function(){
    angular.module('buttons')
        .directive('primaryButton', function() {
            return {
                restrict: 'EA',
                scope: {
                    buttonInfo: '=info'
                },
                templateUrl: 'scripts/local/views/primary-button.html'
            }
        })
    })();

这是我的测试

(function(){
    beforeEach(angular.mock.module('buttons'));
describe('Buttons Directive Test', function(){

    var $compile, $scope, $httpBackend;

    beforeEach(module('templates'));

    beforeEach(inject(function(_$compile_, _$rootScope_) {
        $compile = _$compile_;
        $scope = _$rootScope_.$new();

        $scope.primaryButton = {name: 'Save'};

        elm = angular.element("<primary-button info='buttonInfo'></primary-button>");
        e = $compile(elm)($scope);
        e.digest();
    }));

    it('should do something', function(){
        expect(e.html()).toContain($scope.primaryButton);
    });
});

})();

我正在使用 jasmine 和 karma 进行测试，有人可以指导我做错了什么吗

Answer 1

编辑:这里有一个 plunkr 演示非常接近您的代码所做的事情。您问题中的代码存在多个问题，我已修复:

http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview

1. 在您的测试中，您调用了 e.digest()，这将不起作用，因为您无法消化元素...您应该改为调用 $scope.$digest。
2. e.html() 将不包含该 JSON blob。我将其解释为希望它包含名称标签...
3. info='buttonInfo' 将信息绑定(bind)到外部作用域中的属性 buttonInfo，但您将其称为“primaryButton”。将 $scope.primaryButton 重命名为 $scope.buttonInfo
4. 您使用了一些并非完全必要的下划线，但这没什么大不了的，在注入(inject)编译时，rootscope
5. 我使用了一个内联模板而不是加载它只是为了 plunkr，加载它没有任何问题
6. 因为您的指令是我添加“替换”的元素，它用直接按钮替换元素。考虑改为将其设为属性。

我的 plunkr 通过了 Jasmine 测试和按钮的工作演示。如果您需要更多帮助，请告诉我。祝 AngularJS 好运。

(旧答案)

==============

您将需要使用类似 nghtml2js 的工具来加载您的模板并使它们可用于模板缓存。

using nghtml2js

这是您的第一个问题。您的第二个问题是通过在编译后对元素调用 isolateScope() 来获取隔离范围。记录在 elem 上调用它的结果，您将找到您想要的属性。

e.isolateScope()