Javascript 测试angularjs指令（更改隔离范围变量后测试中未更新模板）

我正在创建一个angularjs组件，它（将）提供一个带有过滤、排序、切换选项、滚动等的复选框列表指令。。。一旦完成。它应该可以帮助人们处理长长的复选框列表

我正在尝试测试order by label或id功能，但即使在$digest或$apply调用之后，模板也不会反映模型更改。我试图解决，但没有办法

以下是指令定义：

angular.module('angularjsSmartcheckboxApp')
  .directive('smartCheckbox', [function () {
    return {
      templateUrl: 'views/smartcheckbox.html',
      restrict: 'E',
      replace: true,
      scope: {model: '='},
      controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        // TODO
      }]
    };
  }]);

用法：

<smart-checkbox model="smartList" />

以下是模板：

...
<div class="input-group ordercontrols">
  Order options:
  <label class="radio-inline">
    <input type="radio" value="label" ng-model="orderby"> Label
  </label>
  <label class="radio-inline">
    <input type="radio" value="id" ng-model="orderby"> Id
  </label>
  <label>
    <input type="checkbox" ng-model="reverse" />
    Reverse
  </label>
</div>

<div>
  <div class="checkbox widgetcontrols" ng-repeat="elem in model | filter:{$:filter} | orderBy: orderby:reverse">
    <label>
      <input class="smart" type="checkbox" ng-model="elem.value" value="{{elem.value || false}}" />
      <span class="itemid">[{{elem.id}}]</span> {{elem.label}}
    </label>
  </div>
</div>

。。。
订购选项：
标签
身份证件
颠倒
[{{elem.id}}]{{elem.label}

在这里，您可以找到失败的测试“标签顺序（反向）”：

description（'Directive:smartCheckbox'，函数（）{
//加载指令的模块
在每个模块之前（模块（'angularjsSmartcheckboxApp'，'views/smartcheckbox.html'）；
var元素，
$rootScope，
$compile，
范围
beforeach（注入（函数（$rootScope，$compile）{
$rootScope=\u$rootScope；
scope=$rootScope.$new（）；
$compile=\$compile；
$rootScope.model=[
{id:'001'，标签：'First item'}，
{id:'002'，标签：'Second item'}
];
元素=$compile（angular.element（“”））（范围）；
$rootScope.$apply（）；
}));
它（‘标签顺序（反向）’，函数（）{
scope.reverse=true；
scope.orderby='label'；
作用域：$apply（）；
expect（element.children（）.eq（3）.find（'label'）.eq（0）.find（'span'）.text（））.toBe（'002]'）；
});
});

存储库链接：

PS：如果你打开浏览器，重新排序就可以了，所以我想测试方法可能有问题

有什么问题？ 提前感谢您

我是如何解决的：

-    element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope);
+    $element = angular.element('<smart-checkbox model="model"></smart-checkbox>');
+    element = $compile($element)(scope);

...

   it('Labels order (reverse)', function () {

-    scope.reverse = true;
-    scope.orderby = 'label';
-    scope.$apply();
+    $element.isolateScope().reverse = true;
+    $element.isolateScope().orderby = 'label';
+    $element.isolateScope().$apply();

-    expect(element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
+    expect($element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
   });

-element=$compile（angular.element（“”））（范围）；
+$element=angular.element（“”）；
+元素=$compile（$element）（范围）；
...
它（‘标签顺序（反向）’，函数（）{
-scope.reverse=true；
-scope.orderby='label'；
-作用域：$apply（）；
+$element.isolateScope（）.reverse=true；
+$element.isolateScope（）.orderby='label'；
+$element.isolateScope（）.$apply（）；
-expect（element.children（）.eq（3）.find（'label'）.eq（0）.find（'span'）.text（））.toBe（'002]'）；
+expect（$element.children（）.eq（3）.find（'label'）.eq（0）.find（'span'）.text（））.toBe（'[002]'）；
});

由于该指令使用隔离作用域，因此我需要使用.isolateScope方法。 希望它能帮助其他人：）

更新：我根据这个答案写了一篇博文。请参见我是如何解决的：

-    element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope);
+    $element = angular.element('<smart-checkbox model="model"></smart-checkbox>');
+    element = $compile($element)(scope);

...

   it('Labels order (reverse)', function () {

-    scope.reverse = true;
-    scope.orderby = 'label';
-    scope.$apply();
+    $element.isolateScope().reverse = true;
+    $element.isolateScope().orderby = 'label';
+    $element.isolateScope().$apply();

-    expect(element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
+    expect($element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
   });

-element=$compile（angular.element（“”））（范围）；
+$element=angular.element（“”）；
+元素=$compile（$element）（范围）；
...
它（‘标签顺序（反向）’，函数（）{
-scope.reverse=true；
-scope.orderby='label'；
-作用域：$apply（）；
+$element.isolateScope（）.reverse=true；
+$element.isolateScope（）.orderby='label'；
+$element.isolateScope（）.$apply（）；
-expect（element.children（）.eq（3）.find（'label'）.eq（0）.find（'span'）.text（））.toBe（'002]'）；
+expect（$element.children（）.eq（3）.find（'label'）.eq（0）.find（'span'）.text（））.toBe（'[002]'）；
});

由于该指令使用隔离作用域，因此我需要使用.isolateScope方法。 希望它能帮助其他人：）

---

更新：我根据这个答案写了一篇博文。请参见

您是否尝试过检查什么是

元素。children（）

，第一个跨度的实际文本内容是什么等？是的，我检查过：元素按错误的顺序列出（启动真正的应用程序一切正常）。在测试过程中，$digest循环似乎无法检测label或orderby上的更改。您是否尝试过检查什么是

元素。children（）

，第一个跨度的实际文本内容是什么等？是的，我检查过：元素按错误的顺序列出（启动真正的应用程序，一切正常）。在测试期间，$digest循环似乎无法检测到label或orderby上的更改。

-    element = $compile(angular.element('<smart-checkbox model="model"></smart-checkbox>'))(scope);
+    $element = angular.element('<smart-checkbox model="model"></smart-checkbox>');
+    element = $compile($element)(scope);

...

   it('Labels order (reverse)', function () {

-    scope.reverse = true;
-    scope.orderby = 'label';
-    scope.$apply();
+    $element.isolateScope().reverse = true;
+    $element.isolateScope().orderby = 'label';
+    $element.isolateScope().$apply();

-    expect(element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
+    expect($element.children().eq(3).find('label').eq(0).find('span').text()).toBe('[002]');
   });