angularjs - 使用 Jasmine 测试在 Angular 应用程序中呈现的测试元素？

Question

这应该是一个非常简单的问题，我希望……我是 Angular 新手，也是编写测试全过程的新手。

这是我的 Controller :

angular
  .module('myModule', [])
  .controller('myCtrl', ['$scope', function ($scope) {
    $scope.questionIndex = -1;
    $scope.text = "Hello world";
}]);

我的观点(index.html)如下:

<div id="text">{{ text }}</div>

这是我的测试，通过的很好:

describe('Controller: myCtrl', function () {

  // load the controller's module
  beforeEach(module('myApp'));

  var MainCtrl,
    scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('myCtrl', {
      $scope: scope
    });
  }));

  it('should have the initial question index set to -1', function () {
    expect(scope.questionIndex).toBe(-1);
  });

});

现在我想写一个测试来检查 text元素实际上已呈现到页面。

我怎样才能在 Jasmine 中做到这一点？抱歉，这可能是一个愚蠢的问题，但我无法从文档中弄清楚。

Answer 1

对于你的问题，我会给你两个答案:

第一:在您的 View 中测试绑定(bind)可能应该在端到端 (E2E) 测试中完成。端到端测试用于确保 Controller 、模型和 View 按预期协同工作，以及正确集成后端(如果有的话)。在这里你可以测试给定的 div里面有预期的文字。您可以在开发者指南 here 中阅读所有相关信息.您为此使用 E2E 测试的原因是，绑定(bind)并不是您的 Controller 真正的责任。 Controller 处理/操纵模型。然后将模型传递给 View ，然后 View 负责使用该模型渲染 DOM 元素。测试 DOM 元素的唯一可靠方法是通过 E2E 测试。

二:它实际上可以在单元测试中完成，但这样做的方式并不完全漂亮。您可以使用 Angular 的 $compile 来做到这一点。服务。该服务是 Angular 用来解析 DOM 并将所有绑定(bind)/指令/等转换为最终产品的服务。这是一个如何完成的示例:

var scope, compile, elem;
beforeEach(inject(function ($controller, $rootScope, $compile) {
    scope = $rootScope.$new();
    compile = $compile;
    MainCtrl = $controller('myCtrl', {
       $scope: scope
    });
}));

it('should set the div content to "' + scope.text + '"', function(){
    var html = '<div id="text">{{ text }}</div>';
    elem = angular.element(html);  // turn html into an element object
    compile(elem)(scope); // compile the html
    scope.$digest();  // update the scope
    expect(elem.text()).toBe(scope.text);  //test to see if it was updated.
});

有关第二个选项的更多信息，请参阅找到的详细教程 here .希望有帮助。