Angular 使用 Jasmine 测试无法比较 html 节点

Question

我正在使用 Jasmine 在 Angular 中构建指令测试。我有一个小示例测试，如下所示：

it("should compare html node", inject( function ($compile, $rootScope) {
  var elm = angular.element('<input>');
  elm = $compile(elm)($scope);
  $scope.$digest();
  console.log('btn', elm); // output: '<input class="ng-scope">'
  expect(elm).toBe('<input class="ng-scope">');

  expect(elm[0]).toBe('<input class="ng-scope">'); // these also fail
  expect(elm.html()).toBe('<input class="ng-scope">'); // ""
}));

所以我得到了控制台的预期输出，但 Jasmine 抱怨错误 Expected { length: 1, 0: HTMLNode } to be '<input class="ng-scope">'

我也尝试过使用 elm[0] 和 elm.html() 一样的错误，但只是 returns 一个空字符串。如何正确比较 HTML 节点与字符串？

注意我知道这是一个不切实际的测试，但我只是想演示我当前的问题。

Answer 1

在进行 Jasmine 测试时，我会测试 element.html()，这样我就可以使用 jQuery 来搜索特定条件，例如

expect(element.html()).toContain($('input.ng-scope'));

我确实更深入地尝试比较 HTMLNode 和 HTMLNode，但我相信这是 Jasmine 的局限性。你可以试试，

expect(element[0]).toEqual($.parseHTML('<input class="ng-scope">')[0])

但茉莉回馈"Expected HTMLNode to equal HTMLNode"。最好的方法是用不同的测试用例解构编译后的 HTML 元素，如上所示。

Answer 2

所以榆树是一个 angular.element，它是一个 jqLite 对象。正如您所指出的，您可以使用 elm[0] 来获取实际的 dom 元素。然后可以通过访问.outerHTML字段来访问节点的html。所以我们最终的解决方案是使用

elm[0].outerHTML

Angular 使用 Jasmine 测试无法比较 html 节点

Angular testing with Jasmine can't compare html node

angularjs

angularjs-directive

jasmine