Угловой js, проверяющий директиву с опцией md

Question

Я пытаюсь написать модульный тест для директивы, которая использует md-select. Я могу настроить таргетинг на элемент md-select, но не могу получить доступ к элементам md-option.

directive.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'); 
      }, 
     }, 
     ]; 
    } 
    }; 
}); 

directive.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> 

directive.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 
    ]; 

Я добавил пример тестирования директиву, основанную на вашем к примеру я создал о тестировании компонентов на основе мкр-DIALOG

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