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

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属性。