angular - 如何在 Angular/Jasmine 中测试 Filereader.onload 回调函数？

Question

在组件的 ngOnInit 中，我定义了 Filereader.onload 回调函数。我发现了几个解决方案，说要模拟文件读取器和 onload，但我认为这违背了我测试调用 onload 时回调是否正确执行的目的。 所以我尝试模拟 onload 事件，然后测试回调中的函数是否被调用。

it("should import data on filereader onload event", () => {
 const fileReader = new FileReader();
      let loadEvent: ProgressEvent<FileReader>;
     
      spyOn(fileReader, "onload").and.callThrough();

      spyOn(mockServiceOne, "convertData").and.returnValue(
        mockData
      );
      spyOn(mockServiceTwo, "importData").and.callThrough();

      fileReader.onload(loadEvent);
      fixture.detectChanges();

      expect(fileReader.result).toBeDefined();

      expect(mockServiceOne.convertData).toHaveBeenCalled();
      expect(mockServiceTwo.importData).toHaveBeenCalledTimes(1);
    });
  });

我要测试的功能是这样的:

this.fileReader.onload = (event) => {
      const jsonData = JSON.parse(event.target.result.toString());
      const data = this.serviceOne.convertData(
        jsonData
      );
      this.serviceTwo.importData(data);
    };

我 mock 了其中的两个服务和方法。但在测试规范中，他们从未被调用。 然而，需要定义 onload 事件的结果 (event.target.result) 的第一个断言似乎检查为 true。

也许将数据转换为 json 的函数中的第一行有问题，因为我实际上并没有为该函数提供一个真实的文件。但是，当我尝试提供除模拟 ProgressEvent 之外的任何内容时，它会给出错误。

请帮助我测试 onload 回调。我无法为此模拟文件读取器加载，这是正确的吗？

Answer 1

您不必模拟FileReader。几天前我遇到了同样的问题。一位 friend 通过描述代码的异步性质帮助我创建了一个解决方法。

将代码包装在 Promise 中，并调用其 resolve() 回调，传递 FileReader 的结果。

// you would load your file here and return the result in a Promise
readFileMethod(file: File): Promise<string> {
      return new Promise<string>((resolve) => {
            const fileReader = new FileReader();
            fileReader.onload = (event) => {
                  const jsonData = JSON.parse(event.target.result.toString());
                  const data = this.serviceOne.convertData(jsonData);
                  resolve(data);
            }
            fileReader.readAsText(); // I suppose this is what you called
      });
}

然后，你的 onInit 看起来像这样:

ngOnInit(): void {
    let file; // init your file however you do
    this.readFileMethod(file).then((data) => {
        this.serviceTwo.importData(data);
    });
}

要测试新方法，请在成功回调中使用 waitForAsync 和 expect():

it('should do whatever with the file', waitForAsync(() => {
    component.readFileMethod(file).then((data) => {
        expect(); // your test here
    });
}));

要测试 onInit，请使用 fakeAsync() 和 tick():

it('should do whatever with the file', fakeAsync(() => {
    spyOn(mockServiceOne, "convertData").and.returnValue(
        mockData
    );
    spyOn(mockServiceTwo, "importData").and.callThrough();

    fixture.detectChanges();
    tick();
    expect(mockServiceOne.convertData).toHaveBeenCalled();
    expect(mockServiceTwo.importData).toHaveBeenCalledTimes(1);
}));