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

【问题标题】：How to trigger change on file input in ember integration test?如何在 ember 集成测试中触发文件输入的更改？
【发布时间】：2017-02-02 14:30:35
【问题描述】：

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

我正在用一个简单的对象模拟一个事件，并将这个事件传递给 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' }) 触发 ember 更改事件，但 this.$('input').trigger({ target: { files: [file] }, type: 'change' }) 在两者都为 jQuery 事件处理程序工作时不会：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);

请注意 document.createEvent() 或 new Event() 不能使用，因为 Event 对象的 target 属性是只读的。

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

更新：我不太确定它是否曾经在 ember 中工作过。我注意到我想到的示例 (ember-cli-file-pickers uploadFileHelper) 可能仅适用，因为它没有使用 embers 更改事件，而是在 didInsertElement 挂钩中使用 registers a jQuery event handler。

【问题讨论】：

标签： unit-testing ember.js mocking

【解决方案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

【讨论】：