无法对我的 angular.js 指令进行单元测试

Question

我无法成功地对我的 angular.js 指令（karma + jasmine）进行单元测试...

基本上，在我的指令的编译函数中，我确实将元素内容替换为表单。
进行单元测试时，在

之后

scope = $rootScope;
element = angular.element('<my-directive></my-directive>');
$compile(element)($rootScope);
scope.$digest();

我希望找到包含我的表单的元素，带有'... abc ...'...
事实并非如此...... :-(

这是我的（简化的）指令：

angular.module('myApp')
  .directive('myDirective', function() {
    return {
      restrict: 'E',
      scope: {},
      compile: function(element) {
        element.replaceWith('<form> ... abc ... </form>');
      }
    };
  });

这是我的测试：

describe('Directive: paypalButton', function () {

  beforeEach(angular.mock.module('myApp'));

  var element, scope;

  beforeEach(inject(function ($rootScope, $compile) {
    scope = $rootScope;
    element = angular.element('<my-directive></my-directive>');
    $compile(element)($rootScope);
    scope.$digest();
  }));

  it('replaced content should contain abc', function() {
    expect(element.html()).toContain('abc');
  });

});

该指令有效（在浏览器中我看到“abc”），但“预期”测试总是失败：我在元素的 html() 中没有得到 'abc'，但总是得到 'xyz'...

我确定我遗漏了一些明显的东西...... :-(

Answer 1

我将编写如下测试。演示PLUNKER

describe('Directive: paypalButton', function () {
  var element, scope, $compile;

  beforeEach(function(){
      module('myApp');

      inject(function ($rootScope, $compile) {
          scope = $rootScope;
          element = angular.element('<my-directive></my-directive>');
          $compile(element)(scope);
      });
  });

  it('replaced content should be abc', function() {
      element.scope().$digest();

      expect(element.text()).toEqual(' ... abc ... ');
  });
});

随着指令的这种变化：

app.directive('myDirective', function() {
    return {
      restrict: 'E',
      scope: {},
      compile: function(element) {
          element.append('<form> ... abc ... </form>');  
      }
    };
  });

注意：-

• 我认为在测试时它不喜欢完全替换元素，因为指令范围绑定到该元素。您可以在元素上尝试append()。
• 此外，由于您在指令中使用了隔离作用域，因此必须在隔离作用域中启动摘要循环。因此，element.scope().$digest();。