Question

我正在尝试使用Jasmine对指令进行单元测试：

app.directive('helloWorld', function() {
  return {
    restrict: 'E',
    scope: {
      messages: '=',
      onSelect: '&'
    },
    template: '<a ng-repeat="message in messages track by $index" href="" ng-click="onSelect({message: message})">Test: {{ message.name }}</a>',
    link: function(scope) {
    }
  }
});

理想情况下，我想传递messages的一些模拟数据，并确保指令中的DOM元素正确填充。

但是我无法理解如何使用模拟数据来编译模板。具体来说，messages: '&'表示只要控制器更新messages，指令就会监视。这是测试：

describe('Directive: HelloWorld', function() {
    var $scope, ctrl, $compile, $rootScope;

    beforeEach(module('app'));

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

      ctrl = $controller('MainCtrl', {
        $scope: $scope
      });
    }));

    it('should list three messages', function() {
      ctrl.messages = [{name: 'foo'}, {name: 'bar'}, {name: 'foobar'}];
      var template = '<hello-world messages="messages" on-select="ctrl.foo(message)"></hello-world>';
      var element = $compile(template)($scope);
      $rootScope.$digest();

      expect(element.children().length).toBe(3);
    });
  });

以下是plunker：https://plnkr.co/edit/8Jy4eGXotduGvBsr8jkN?p=preview

我看过许多SO问题，但我还不清楚它。如何将数据传递给模拟控制器，以便模板可以访问它？

更新我修改了我的Plunker来执行此操作：$scope.messages = [{name: 'foo'}, {name: 'bar'}, {name: 'foobar'}];而不是ctrl.messages = ...。现在工作正常。

Answer 1

您应该在控制器中使用$scope并在模板中公开要在模板中使用的变量，方法是将其添加到$scope而不是this。

见plunk。进行测试的相关更改位于测试文件的MainCtrl代码和第21行。另请参阅index.html上的第18行，了解如何在html中传递范围变量。

如何让模拟控制器使用Jasmine将数据传递给指令

1 个答案: