javascript - 从 capybara/poltergeist 功能测试触发 Angular Directive(指令)

Question

Capybara + Poltergeist 在 Rails 4 + Angular 应用程序中的大多数功能测试中运行良好。但是，我在测试使用 danielfard--angular-file-upload 的代码时遇到问题JS 库。我的文件上传代码依赖于该库中名为 ngFileSelect (source for the directive here) 的指令。 。当我在浏览器中单击该进程时，这非常有效，但我无法在功能测试中触发它。

我的 Angular 化 HAML:

%input{ng: {"file-select" => "onFileSelect($files)"}, type: "file", multiple: true, id: "img-file-select"}

我尝试使用 Capybara 的 attach_file 方法。这不会归档，但通过观察数据库我可以知道没有上传发生。

#does not fail but does not trigger upload
attach_file "img-file-select", 
  ["#{Rails.root}/spec/fixtures/images/property.jpg",
  "#{Rails.root}/spec/fixtures/images/kitchen.jpg"]

我还尝试使用trigger方法手动触发事件。这些确实失败了。

#these fail with with 'Capybara::Poltergeist::BrowserError: Unknown event [object Object]'
find("#img-file-select").trigger('ngFileSelect')
find("#img-file-select").trigger('fileSelect')
find("#img-file-select").trigger('change')

是否有某种方法可以从 capybara 测试中触发此指令？

Answer 1

您可以执行以下操作:

page.execute_script <<-JS
  fakeFileInput = window.$('<input/>').attr({ id: 'fileFileInput', type: 'file' }).appendTo('body');
JS

page.attach_file('fakeFileInput', Rails.root.join('spec', 'fixtures', 'images', 'property.jpg'))

page.execute_script <<-JS
  var scope = angular.element('#img-file-select').scope();
  scope.files = [fakeFileInput.get(0).files[0]];
JS