用茉莉花测试角度指令

Question

测试Angular指令时遇到一些麻烦。

基本上我只有一个文件输入，并且该指令将一个类添加到外部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,
  };
});

试验：

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);
  });
});

测试失败，因为没有添加课程