angularjs - Angular js 使用 md-option 测试指令

Question

我正在尝试为使用md-select的指令编写单元测试。我可以定位 md-select 元素，但无法访问 md-option 元素。

指令.js:

angular.module('myApp')

 .directive('myDirective', function ($rootScope) {
   return {
     restrict: 'A',
       scope: {
        foo: '=',
     },
     templateUrl: 'static/partials/my-directive.tmpl.html',
     link: function (scope, element, attrs) {
       ...
       scope.options = [
         {
           name: 'Download', fn: function() {
             console.log('download');
           },
         },
         {
           name: 'Share', fn: function() {
             console.log('share');
           },
         },
       ];
     }
  };
});

指令.tmpl.html:

<md-input-container>
  <md-select ng-model="option" placeholder="Options">
    <md-option ng-value="opt" ng-click="opt.fn()" ng-repeat="opt in options">{{ opt.name }}</md-option>
  </md-select>
</md-input-container>

指令.spec.js

describe('My Directive', function () {
  var elm, scope;

  beforeEach(module('scriptspeakerApp'));
  beforeEach(module('templates'));

  beforeEach(inject( function ($rootScope, $compile) {
    elm = angular.element(
     '<div my-directive foo="script"></div>'
    );
    $scope = $rootScope.$new();
    $scope.foo = 'bar';
    elm = $compile(elm)($scope);
    $scope.$digest();

  }));

  it('should have one select element and 2 md-option elements', function () {
    var select = elm.find('md-select');
    select.triggerHandler("click");
    var options = elm.find('md-option');
    console.log('options', options);
    // output: Object{}
  });

我意识到 Angular Material 会在页面底部加载 md-option 元素。这是否意味着无法在指令范围内访问选项，而是需要进行 e2e 测试？

Answer 1

问题可能是你的 JavaScript 的有效格式，因为有几个尾随逗号应该被删除。您需要将scope.options更改为

scope.options = [
     {
       name: 'Download', fn: function() {
         console.log('download');
       } // Removed comma from here
     },
     {
       name: 'Share', fn: function() {
         console.log('share');
       } // Removed comma from here
     } // Removed comma from here
   ];

我在我创建的关于测试基于 md-dialog 的组件的示例中添加了一个根据您的指令测试指令的示例

https://github.com/gseabrook/md-dialog-test-issue