Angularjs 如何在指令中对隔离范围进行单元测试

我试图对一个简单的指令进行单元测试，但是范围中的变量总是未定义的

指令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';
              }
          }
      };
  }])

.directive（'ratingButton'，['$rootScope'，
函数（$rootScope）{
返回{
限制：“E”，
替换：正确，
模板：“”，
范围：{
按钮等级：“=”
},
链接：功能（范围、要素、属性）{
scope.getRatingClass=函数（）{
如果（！scope.buttonRating）
返回“”；
else if（scope.buttonRating.toUpperCase（）=“绿色”）
返回“btn成功”；
else if（scope.buttonRating.toUpperCase（）=='YELLOW'）
返回“btn警告文本”；
else if（scope.buttonRating.toUpperCase（）=“红色”）
返回“btn危险”；
else if（scope.buttonRating.toUpperCase（）=='BLUE'）
返回“btn信息”；
}
}
};
}])

测试：

description（'Form指令：ratingButton'，函数（）{
//加载控制器的模块
每个模块之前（模块（“仪表板应用程序”）；
var范围，
元素；
//初始化控制器和模拟作用域
beforeach（注入函数（$compile，$rootScope）{
scope=$rootScope.$new（）；
//将我们的视图设置为html。
元素=角度。元素（“”）；
$compile（元素）（范围）；
范围。$digest（）；
}));
它（'应根据评级返回适当的类'，函数（）{
//log（element.isolateScope（））；
expect（element.isolateScope（）.buttonRating）.toBe（'green'）；
expect（element.isolateScope（）.getRatingClass（））.toBe（'btn-success'）；
});
});

我在另一个指令单元测试中使用了类似的代码，通过元素属性传递值，它按预期工作。对于这个测试按钮，等级总是未定义的，不确定从这里走到哪里（我对茉莉花/业力相当陌生）

---

任何帮助都会很好

在测试启动时编译指令元素时，不要设置字符串

绿色

而是在范围绑定上设置它。否则，它将在绑定的作用域上查找名为

green

的scope属性的值，当然在您的案例中没有定义该值

i、 e

scope.buttonRating='green'

及

angular.element（“”）

尝试：

  // 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');

    });

//初始化控制器和模拟作用域
beforeach（注入函数（$compile，$rootScope）{
scope=$rootScope.$new（）；
scope.buttonRating='green'；//啊，看起来很有效。不知道为什么我没有想到这个！啊，在这上面浪费了这么多时间。对@button=来说效果很好，但是=没有意识到不能将文本字符串放在那里（它是不可绑定的）.2正在摆脱引擎盖下的双向绑定。良好的测试方法不是设置变量，而是引用字符串文字（“”），我在这个插件上得到“TypeError:无法读取未定义的属性'isolateScope'。在本地应用程序上使用此代码时也是如此。
  // 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');

    });