我试图单元测试一个简单的指令,但范围中的变量总是未定义的.
指令Src代码:
- .directive('ratingButton',['$rootScope',function($rootScope) {
- return {
- restrict: "E",replace: true,template: '<button type="button" class="btn btn-circle" ng-class="getRatingClass()"></button>',scope: {
- buttonRating: "="
- },link: function(scope,elem,attr) {
- scope.getRatingClass = function() {
- if (!scope.buttonRating)
- return '';
- else if (scope.buttonRating.toUpperCase() === 'GREEN')
- return 'btn-success';
- else if (scope.buttonRating.toUpperCase() === 'YELLOW')
- return 'btn-warning warning-text';
- else if (scope.buttonRating.toUpperCase() === 'RED')
- return 'btn-danger';
- else if (scope.buttonRating.toUpperCase() === 'BLUE')
- return 'btn-info';
- }
- }
- };
- }])
测试:
- describe('Form Directive: ratingButton',function() {
- // load the controller's module
- beforeEach(module('dashboardApp'));
- var scope,element;
- // Initialize the controller and a mock scope
- beforeEach(inject(function($compile,$rootScope) {
- scope = $rootScope.$new();
- //set our view html.
- element = angular.element('<rating-button button-rating="green"></rating-button>');
- $compile(element)(scope);
- scope.$digest();
- }));
- it('should return appropriate class based on rating',function() {
- //console.log(element.isolateScope());
- expect(element.isolateScope().buttonRating).toBe('green');
- expect(element.isolateScope().getRatingClass()).toBe('btn-success');
- });
- });
我在另一个指令单元测试中使用了类似的代码,通过元素属性传递值,并且按预期工作.对于这个测试buttonRating总是不确定不知道从哪里去(我是相当新的茉莉/羯磨)
任何帮助将是伟大的!
当您在启动测试时编译指令元素时,而不是设置字符串绿色将设置为范围界限.否则,它将在绑定的范围上查找名称为green的scope属性的值,当然在您的情况下也没有定义.
即scope.buttonRating =’green’;
和
angular.element(‘< rating-button button-rating =“buttonRating”>< / rating-button>‘)
尝试:
- // Initialize the controller and a mock scope
- beforeEach(inject(function($compile,$rootScope) {
- scope = $rootScope.$new();
- scope.buttonRating = 'green'; //<-- Here
- //set our view html.
- element = angular.element('<rating-button button-rating="buttonRating"></rating-button>');
- $compile(element)(scope);
- scope.$digest();
- }));
- it('should return appropriate class based on rating',function() {
- expect(element.isolateScope().buttonRating).toBe('green');
- expect(element.isolateScope().getRatingClass()).toBe('btn-success');
- });