Question

我通过链接功能对Angular指令进行单元测试。通过编译指令建议在这里 - http://brilliantbritz.com/2015/02/04/getting-the-isolate-scope-of-a-directive/

第一组测试正常运行我可以访问element.scope（）对象，即该指令的isolatedScope。

但是当运行以下测试以从链接函数获取scope.welcomeMessage值时。它返回undefined：

it("should contain a welcomeMessage scope value", function() {
    console.log(element.scope()); //value present in scope object
    expect(element.scope().welcomeMessage).toBe("Hello World!"); //undefined
  });

我通过记录包含welcomeMessage的element.scope（）值来调试此问题。

问题：

如何在Jasmine测试规范中访问链接函数范围值？

MY-app.spec.js

 describe("my-app", function() {
  var $scope, $compile, element;

  beforeEach(function(){
    //register module and mock dependency
    angular.mock.module("my-app");

  });

  beforeEach(inject(function($rootScope, _$compile_) {

    $scope = $rootScope.$new(), //create instance of rootScope
    $compile = _$compile_; // compile attaches directives to HTML template
    element = $compile("<my-app></my-app>")($scope);
    $scope.$digest(); //loop through DOM watchers, check values and trigger listeners
  }));

  it("should contain a defined scope", function() {
    expect(element.scope()).toBeDefined(); //true
  });

  it("should contain a welcomeMessage scope value", function() {
    console.log(element.scope());
    expect(element.scope().welcomeMessage).toBe("Hello World!"); //undefined
  });

});

element.scope（）的日志值

LOG LOG: Scope{$$childTail: Scope{$id: 12, $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null, $$watchers: 
[..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ..., ...], $parent: Scope{$$childTail: ..., $$childHead: ..., 
$$nextSibling: ..., $$watchers: ..., $$listeners: ..., $$listenerCount: ..., $$watchersCount: ..., $id: ..., $$ChildScope: ..., $parent: ..., $$prevSibling: ...}, 
$$phase: null, $root: Scope{$id: ..., $$childTail: ..., $$childHead: ..., $$prevSibling: ..., $$nextSibling: ..., $$watchers: ..., $parent: ..., $$phase: ..., 
$root: ..., $$destroyed: ..., $$listeners: ..., $$listenerCount: ..., $$watchersCount: ..., $$isolateBindings: ..., $$asyncQueue: ..., $$postDigestQueue: ..., 
$$applyAsyncQueue: ..., $$ChildScope: ...}, $$destroyed: false, $$listeners: Object{$destroy: ...}, $$listenerCount: Object{$destroy: ...}, $$watchersCount: 21, 
$$isolateBindings: Object{}, welcomeMessage: 'Hello World!'}, $$childHead: Scope{$id: 12, $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null,

指令要点

(function() {

  var component = {
    id: "my-app",
    name: "my-app",
    templateUrl: "my-app/my-app.html"
  };

  component.ui = angular.module("my-app");
  component.ui.directive("myApp", fizzComponent);

  function fizzComponent() {

    function fizzContainer(scope, element, params) {

      scope.welcomeMessage = "Hello World!";  
    }
    return {
      scope: {},
      replace: true,
      link: fizzContainer,
      templateUrl: component.templateUrl
    };
  }
})();

Answer 1

使用tox.ini检索隔离范围属性，而不是[testenv] commands = grep -FInrq TODO . && exit 1 || exit 0。

另一个不能影响此处但可能产生后果的问题是element.isolateScope().welcomeMessage。它应该是element.scope().welcomeMessage或$scope.$digest()。

如何在Jasmine测试规范中访问链接函数范围值？

1 个答案: