angularjs - 用 karma : how to set scope测试 Angular

Question

我有一个相当复杂的 Angular 指令，叫做 hy-plugin-window ，我在 ng-repeat 中使用 block (complete directive code here):

<div ng-repeat="pluginD in pluginsDisplayed">
    <div hy-plugin-window content="pluginD" remove="remove"></div>
</div>

该指令使用隔离范围，双向链接到父级的 content成员:

return {
        restrict: 'A',
        replace: true,
        link: linker,
        scope: {
            content:'=',
        }
    };

这意味着，当它被创建时，列表中的每个指令都可以访问其唯一的内容(它是对象 pluginsDisplayed 的单个成员)并执行以下操作:

scope.statusMessage = 'Loading ' + scope.content.name + '...';

一切正常，除了我不知道如何用 Karma 测试它。通过这样一个相当常见的测试，我希望手动设置指令内的范围:

'use strict';

describe('Directive: hyPluginWindow', function () {

    beforeEach(module('hyacinthHostApp'));

    var element, $compile, scope;

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


  it('should do something', inject(function () {

      scope.content = {
          name: "testElement",
          id: "testElement000",
          uiType: "canvas"
      };

      element = angular.element('<div hy-plugin-window></div>');
      element = $compile(element)(scope);

      //expect(...);
  }));
});

但它悲惨地失败了:

TypeError: Cannot read property 'name' of undefined

我的指令第一次尝试访问它的 scope.content.name .

考虑到我是一个测试完整的新手，我错过了什么？

Answer 1

短篇小说:将编译后的元素更改为<div hy-plugin-window content="content"></div>我认为它应该工作。

该指令具有 ISOLATE 范围，这意味着它在原型(prototype)上不会从“常规”范围继承。

在您的测试中，您定义了 content在常规范围内，但指令本身是封装的 - 它具有隔离范围，因此看不到 content在常规范围上定义的属性。

您需要通过组件的显式接口(interface)进行通信，即 content属性。