angularjs - AngularJS 测试一个替换设置为 true 的指令

Question

我的<custom-directive>有replace:true和template: '<img />'。如何为它编写单元测试？我想我想测试一下它实际上用 img 替换了 custom-directive。

it('should be transformed to <img>', function(){
  var elm = $compile('<custom-directive></custom-directive>')(scope);
  scope.$digest();

  var t = elm.find('img'); // wrong! it replaces the element. it won't find another one inside
 //expect(elm).toBeAnImgElement ?
});

我找不到正确的匹配器。我见过的最接近的情况是检查内容（elm.html()或elm.text()）但我的标签是空的。

Answer 1

将您的指令包装在一个 div 中，例如：

describe('Directive: custom', function () {
  beforeEach(module('App'));

  var element, $scope;

  it('should be transformed to <img>', inject(function ($rootScope, $compile) {
    $scope = $rootScope.$new();
    element = angular.element('<div><custom-directive></custom-directive></div>');
    element = $compile(element)($scope);

    expect(element.children('img').length).toBe(1);
  }));
});

Answer 2

您可以获取实际的 HTMLElement 对象并检查其标记名。使用以下命令获取实际的 HTMLElement elm[0]：

expect(elm[0].tagName).toEqual('A');