如何模拟FileReader的失败 [英] how to mock failure of FileReader

问题描述

我有一个创建FileReader的函数.在该函数中，我还设置了load和error事件处理程序

I have a function which creates a FileReader. In that function I also set the load and error event handlers

handleFileSelect(files:ArrayLike<File>){
...
      let reader = new FileReader()
      reader.onload = this.handleReaderLoaded;
      reader.onerror = this.handleReaderError;


      reader.readAsDataURL(file);
    }
  }

我想对handleFileSelect正确设置错误处理程序以及如果FileReader失败时调用错误处理程序(handleReaderError)进行单元测试.但是我不知道如何使FileReader失败.

I want to unit-test that handleFileSelect correctly sets the error handler and that the error handler (handleReaderError) gets called if FileReader fails. But I can't figure out how to make the FileReader fail.

到目前为止我写的规范是

The spec I have written so far is

fit('should call error handler when file doesn\'t get loaded successfully', (done) => {
    let newPracticeQuestionComponent = component;

    let file1 = new File(["foo1"], "foo1.txt");
    /*
    File reader will load the file asynchronously.
    The `done` method of `Jasmine` makes `Jasmine` wait
    When handleReaderError is called, call a fake function and within it call done
     */
    spyOn(newPracticeQuestionComponent,'handleReaderError').and.callFake(function(event:FileReaderProgressEvent){
      console.log("called fake implementation of handleReaderError ",event);
      expect(event.type).toEqual("abort");
      done();
    });

    newPracticeQuestionComponent.handleFileSelect([file1]);
//I SHOULD SIMULATE FILEREADER ERROR HERE BUT HOW??

  });

推荐答案

如果readAsDataURL失败时reader的行为正在调用onerror，则应该这样做:

If the reader's behaviour is calling onerror when readAsDataURL fails, this should do:

spyOn(newPracticeQuestionComponent.reader, 'readAsDataURL').and.callFake(() => {
    newPracticeQuestionComponent.reader.onerror();
});

由于此操作将作为同步调用运行，因此您可以像下面这样简化在测试结束时的声明(遵循三元组A):

Since this will be running as a synchronous call, you can simplify the assertion at the end of the test (following a triple A) like this:

// Arrange
const newPracticeQuestionComponent = component;
spyOn(newPracticeQuestionComponent, 'handleReaderError');
spyOn(newPracticeQuestionComponent.reader, 'readAsDataURL').and.callFake(() => {
    newPracticeQuestionComponent.reader.onerror();
});
let file1 = new File(["foo1"], "foo1.txt");

// Act
newPracticeQuestionComponent.handleFileSelect([file1]);

// Assert
expect(newPracticeQuestionComponent.handleReaderError).toHaveBeenCalledWith({ type: 'abort' });

但是，我不建议将参数传递给函数event.type，因为它是我们当前未测试的另一个单元的规格. (我们正在测试newPracticeQuestionComponent而不是reader调用事件错误的行为)

But I don't recommend expecting the parameter passes to the function, event.type, because it is the specification of another unit that we are not currently testing. (we are testing newPracticeQuestionComponent not the behaviour of reader calling an error with an event)

模拟reader的行为可能不是最好的方法.这取决于您要针对本机进行测试的内容.

Mocking the behaviour of reader might not be the best way. It depends on what you want to test against the unit.

如果我们想变得非常独立，newPracticeQuestionComponent甚至不知道reader的行为，即使有回调错误，该单元唯一应该知道的就是设置onerror回调，您可以断言您已正确设置阅读器的onerror.

In case we want to go extremely independent, newPracticeQuestionComponent should know nothing about reader's behaviour even the callback error, the only thing this unit should know is to set the onerror callback, you can just assert that you set the onerror of reader correctly.

// Arrange
const newPracticeQuestionComponent = component;
spyOn(newPracticeQuestionComponent.reader, 'readAsDataURL');
let file1 = new File(["foo1"], "foo1.txt");

// Act
newPracticeQuestionComponent.handleFileSelect([file1]);

// Assert
expect(newPracticeQuestionComponent.reader.onerror).toBe(newPracticeQuestionComponent.handleReaderError);

我不是测试方面的高手，但在许多因素上编写上面和下面的示例一样的测试似乎是有利有弊.

I am no master about testing, but it seems to be pros and cons writing tests like the above and below examples upon many factors.

希望这会有所帮助:)

这篇关于如何模拟FileReader的失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！