Question

这应该是一个非常简单的问题，我希望...我是一个Angular新手，并且是编写测试的整个过程的新手。

这是我的控制者：

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

我会给你两个问题的答案：

首先：您的视图中的测试绑定应该可以在端到端（E2E）测试中完成。端到端测试用于确保控制器，模型和视图按预期协同工作，并正确集成后端（如果有的话）。您可以在此测试给定的div中是否包含预期文本。您可以在开发人员指南here中阅读所有相关内容。您使用E2E测试的原因是因为绑定不是您的控制器的真正责任。控制器处理/操纵模型。然后将模型传递给视图，然后视图负责使用该模型呈现DOM元素。测试DOM元素的唯一可靠方法是通过E2E测试。

第二：它实际上可以在单元测试中完成，但实现它的方式并不完美。您可以使用angular $compile服务来完成此操作。此服务是角度用于解析DOM并将所有绑定/指令/等转换为最终产品的服务。以下是如何完成的示例：

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。希望有所帮助。

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

1 个答案: