5

我正在尝试实现一个依赖于范围变量的测试。我想启用ng-switch-when来解析表达式。这就是我想要做的（使用 $rootScope更新）：

it('should switch on array changes', inject(function($rootScope, $compile) {
  element = $compile(
    '<div ng-switch="select">' +
      '<div ng-switch-when="test[0]">test[0]:{{test[0]}}</div>' +
    '</div>')($rootScope);
  expect(element.html()).toEqual('<!-- ngSwitchWhen: test[0] -->');
  $rootScope.test = ["leog"];
  $rootScope.select = "leog";
  $rootScope.$apply();
  expect(element.text()).toEqual('test[0]:leog');
}));

我的问题是我为此工作的实现没有让范围变量“test”按我的预期进行评估和工作。这是实现：

var ngSwitchWhenDirective = ngDirective({
  transclude: 'element',
  priority: 800,
  require: '^ngSwitch',
  compile: function(element, attrs) {
    return function(scope, element, attr, ctrl, $transclude) {
      var expr = scope.$eval(attrs.ngSwitchWhen),
          ngSwitchWhen = expr !== undefined ? expr : attrs.ngSwitchWhen;
      ctrl.cases['!' + ngSwitchWhen] = (ctrl.cases['!' + ngSwitchWhen] || []);
      ctrl.cases['!' + ngSwitchWhen].push({ transclude: $transclude, element: element });
    };
  }
});

有谁知道我做错了什么？任何帮助将不胜感激。

提前致谢！

更新

澄清一下，这是 Angular 团队如何测试 ng-switch 的一个示例。只是为了表明我正在以类似的方式进行测试，但没有得到预期的结果。

而且，我忘记将我的代码反转为 $rootScope，到目前为止，您所看到的是我试图让这项工作创建一个新范围以避免依赖 $rootScope 进行更改的尝试之一。

it('should switch on value change', inject(function($rootScope, $compile) {
    element = $compile(
      '<div ng-switch="select">' +
      '<div ng-switch-when="1">first:{{name}}</div>' +
      '<div ng-switch-when="2">second:{{name}}</div>' +
      '<div ng-switch-when="true">true:{{name}}</div>' +
      '</div>')($rootScope);
    expect(element.html()).toEqual(
       '<!-- ngSwitchWhen: 1 --><!-- ngSwitchWhen: 2 --><!-- ngSwitchWhen: true -->');
    $rootScope.select = 1;
    $rootScope.$apply();
    expect(element.text()).toEqual('first:');
    $rootScope.name="shyam";
    $rootScope.$apply();
    expect(element.text()).toEqual('first:shyam');
    $rootScope.select = 2;
    $rootScope.$apply();
    expect(element.text()).toEqual('second:shyam');
    $rootScope.name = 'misko';
    $rootScope.$apply();
    expect(element.text()).toEqual('second:misko');
    $rootScope.select = true;
    $rootScope.$apply();
    expect(element.text()).toEqual('true:misko');
}));
4

2 回答 2

1

So, after moving some code around I found that the variables not involved on making $rootScope change to test the feature, should be defined before compiling the element to test. Thanks @Jonathan for the hint.

Here is the working code with additional test cases:

it('should evaluate expressions to match switch value', inject(function($rootScope, $compile) {
  $rootScope.array = ["leog", ".me"];
  $rootScope.obj = {"key": "value"};
  $rootScope.$apply();
  element = $compile(
    '<div ng-switch="select">' +
      '<div ng-switch-when="obj.key">obj.key:{{obj.key}}</div>' +
      '<div ng-switch-when="array[0]">array[0]:{{array[0]}}</div>' +
      '<div ng-switch-when="array[1]">array[1]:{{array[1]}}</div>' +
    '</div>')($rootScope);
  expect(element.html()).toEqual('<!-- ngSwitchWhen: obj.key -->' +
                                 '<!-- ngSwitchWhen: array[0] -->' +
                                 '<!-- ngSwitchWhen: array[1] -->');
  $rootScope.select = "value1";
  $rootScope.$apply();
  expect(element.text()).toEqual('obj.key:value');
  $rootScope.select = "leog";
  $rootScope.$apply();
  expect(element.text()).toEqual('array[0]:leog');
  $rootScope.select = ".me";
  $rootScope.$apply();
  expect(element.text()).toEqual('array[1]:.me');
}));

Thanks you all.

于 2013-12-22T18:36:25.740 回答
0

$scope.$apply 需要在要执行的括号内有一个函数，这是您的测试代码所缺少的。为了在测试时让事情发生，我使用 $scope.$digest() （而不是 $scope.$apply(); 这会启动一个手动摘要循环，否则该循环不会在测试中运行。

于 2013-12-18T15:44:03.587 回答