如何为单元测试提供模拟文件以更改事件

5 浏览
0 Comments

如何为单元测试提供模拟文件以更改事件

我在一个单元测试中遇到了困难。我想验证处理文件的过程，该文件通常可以通过视图中的进行选择。

在我的AngularJS应用程序的控制器部分，文件是在输入的change事件中处理的，代码如下：

//绑定文件输入的change事件并处理选择的文件
inputElement.on("change", function (evt) {
    var fileList = evt.target.files;
    var selectedFile = fileList[0];
    if (selectedFile.size > 500000) {
        alert('文件太大！');
    // ...

在我的单元测试中，我希望evt.target.files包含我的模拟数据，而不是用户选择的文件。我意识到我无法自己实例化FileList和File对象，这是浏览器正在使用的对象。所以我选择将模拟的FileList分配给输入的files属性，并手动触发change事件：

describe('文件上传：', function () {
    var input;
    beforeEach(function () {
        input = angular.element("");
        spyOn(document, 'getElementById').andReturn(input);
        createController();
    });
    it('should check file size of the selected file', function () {
        var file = {
            name: "test.png",
            size: 500001,
            type: "image/png"
        };
        var fileList = {
            0: file,
            length: 1,
            item: function (index) { return file; }
        };
        input.files = fileList; // 将模拟的文件分配给输入元素
        input.triggerHandler("change"); // 触发change事件
        expect(window.alert).toHaveBeenCalledWith('文件太大！');
    });

不幸的是，这在控制器中引发了以下错误，显示这个尝试失败，因为根本没有将文件分配给输入元素：

TypeError: 'undefined' is not an object (evaluating 'evt.target.files')

我已经发现input.files属性是只读的，出于安全原因。所以我又尝试了另一种方法，通过分派一个自定义的change事件来提供文件属性，但仍然没有成功。

所以长话短说：我渴望学习一个可行的解决方案或任何关于如何处理这个测试用例的最佳实践。

0