Question

我正在尝试为文件上传组件编写集成测试，但无法在输入类型文件上触发更改事件。触发jQuery监听器时，不会触发余烬更改事件。

我正在用一个简单的对象模拟一个事件，并将这个传递给jQuery trigger方法。如果我没有设置模拟事件的target属性，它工作正常。在这些情况下，会触发jQuery事件处理程序和ember事件。

我正在使用Blob个对象模拟文件并将其用作我的模拟事件的target属性。如果我传递这个触发jQuery事件处理程序仍然被触发但是ember事件不是。

这就是它在代码中的样子。

// mock a file
let file = new Blob(['content'], { type: 'image/jpeg' });
// mock an event
let event = { type: 'change' };
// set events target
event.target = { files: [file] };
this.$('input').trigger(event);

我创建了一个Ember Twiddle，证明this.$('input').trigger({ type: 'change' })触发了包含更改事件但this.$('input').trigger({ target: { files: [file] }, type: 'change' })没有触发更改事件处理器：https://ember-twiddle.com/5189be1875c147e96d31dea41668b006?openFiles=tests.integration.components.file-input-test.js%2C

它在早期的ember版本中工作但是没有使用更长时间，所以我不太确定它什么时候坏了。

使用jQuery.Event('change')代替普通对象会显示相同的结果。所以这也行不通：

jQuery.Event('change');
event.target = { files: [file] };
this.$('input').trigger(event);

请注意，由于Event对象的document.createEvent()属性是只读的，因此无法使用new Event()或target。

我特别困惑的是，当ember的更改事件没有被触发时this.$('input').on('change', () => { })被触发。

更新：我不太确定它是否曾在ember中运行过。我注意到我想到的示例（ember-cli-file-pickers uploadFileHelper）可能只有用，因为它不使用余烬更改事件，而是在didInsertElement钩子中使用registers a jQuery event handler。

Answer 1

您可以使用Ember测试助手triggerEvent。

我看起来像这样

import { triggerEvent } from '@ember/test-helpers'
...
triggerEvent(selector, eventName, options)

我已经实现了这样的文件上传事件 triggerEvent(selector, 'change', files)

以下是文档：https://github.com/emberjs/ember-test-helpers/blob/master/API.md#triggerevent

如何在ember集成测试中触发文件输入的更改？

1 个答案: