Angularjs 茉莉花测角

测试角度指令有点困难

本质上，我只有一个文件输入，指令向外部div添加了一个类，以显示输入已被拖拽

现在，这在应用程序中运行良好，但在测试中很难确认行为是否正常：

指令：

angular.module('mymodule')
.directive('fileDrop', () => {
  const link = (scope, elem) => {
    const input = elem.find('input[type="file"]');
    const dragEnter = (e) => {
      e.stopPropagation();
      e.preventDefault();
      elem.addClass('file_drop--over');
    };
    const dragLeave = (e) => {
      e.stopPropagation();
      e.preventDefault();
      elem.removeClass('file_drop--over');
    };
    input.bind('dragenter', dragEnter);
    input.bind('dragleave', dragLeave);
  };
  return {
    'restrict': 'A',
    link,
  };
});

测试：

description（'fileDrop'，（）=>{
让我们来编译；
让范围；
让我们放弃一切；
常量getCompiledElement=（）=>{
常量元素=“”；
const compiledElement=编译（元素）（范围）；
范围。$digest（）；
返回编译元素；
};
在每个之前（（）=>{
模块（“mymodule”）；
注入（$compile，$rootScope）=>{
compile=$compile；
scope=$rootScope.$new（）；
});
fileDropElem=getCompiledElement（）；
});
它（'should add file_drop--over class on drag enter'，（）=>{
fileDropElem.find（'input[type=“file”]'））.trigger（'dragenter'）；
expect（fileDropElem.hasglass（'file_drop--over'））.toEqual（true）；
});
});

---

测试失败是因为没有添加类

它不应该是triggerHandler而不是trigger吗？啊，是的，我想我也可以使用它。我认为问题在于它没有触发指令中的dragEnter功能。尝试在那里添加断点，但什么也没有发生，所以可能是测试如何连接指令的问题。我发现Angular中的指令比其他片段更难测试，我只是犯了一个愚蠢的错误，没有附加指令，所以上面的示例可以工作，但是要修改编译的字符串以包含指令：哦，我也错过了！发生的事情比我想承认的要多。

describe('fileDrop', () => {
  let compile;
  let scope;
  let fileDropElem;

  const getCompiledElement = () => {
    const element = '<div class="file_drop"><input type="file" /></div>';
    const compiledElement = compile(element)(scope);
    scope.$digest();
    return compiledElement;
  };

  beforeEach(() => {
    module('mymodule');

    inject(($compile, $rootScope) => {
      compile = $compile;
      scope = $rootScope.$new();
    });

    fileDropElem = getCompiledElement();
  });


  it('should add file_drop--over class on drag enter', () => {
    fileDropElem.find('input[type="file"]').trigger('dragenter');
    expect(fileDropElem.hasClass('file_drop--over')).toEqual(true);
  });
});