-2

有一个我想在这里测试的功能是我到目前为止所拥有的

it('should push Image to URLs Array', () => {
    const files = new File(['sdfsd'], 'filename', { type: 'image/jpg' });

    component.getImage(files);

    expect(component.URLs.length).toBe(1);
});

这是尝试测试的功能。它失败了，因为它指望一个事件，我该如何解决这个问题

 getImage(file: File): void {
    const reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = (event) => {
        // called once readAsDataURL is completed
        const url = event.target.result;
        this.URLs.push(url);
    };
}
4

1 回答 1

0

由于您的FileReader实例完全包含在您的方法中，因此您无法访问它并触发该onload()方法。

一种选择可能是从方法返回FileReader引用。

 getImage(file: File): FileReader {
    const reader = new FileReader();

    reader.readAsDataURL(file);
    reader.onload = (event) => {
        // called once readAsDataURL is completed
        const url = event.target.result;
        this.URLs.push(url);
    };
    return reader;
}

那么你的测试将是这样的：

it('should push Image to URLs Array', () => {
    const files = new File(['sdfsd'], 'filename', { type: 'image/jpg' });

    const reader = component.getImage(files);
    reader.onload({target: { result: 'someUrl'}}); // Mock event created here

    expect(component.URLs.length).toBe(1);
});

第二种选择可能是不直接创建 FileReader，而是使用工厂或服务来创建它。这样你就可以监视 create 方法并返回你自己的对象。

一些工厂方法，为简化组件：

createFileReader(): FileReader {
  return new FileReader();
}

getImage() 会改变：

 getImage(file: File): void {
    const reader = this.createFileReader();

    reader.readAsDataURL(file);
    reader.onload = (event) => {
        // called once readAsDataURL is completed
        const url = event.target.result;
        this.URLs.push(url);
    };
}

测试可能是这样的：

it('should push Image to URLs Array', () => {
    const reader = new FileReader();
    spyOn(component, 'createFileReader').and.return(reader);
    const files = new File(['sdfsd'], 'filename', { type: 'image/jpg' });

    const reader = component.getImage(files);
    reader.onload({target: { result: 'someUrl'}}); // Mock event created here

    expect(component.URLs.length).toBe(1);
});

如果我们新建类的内部细节FileReader以及如何onload创建/分派；您完全有可能通过从 Observable 中引用内部观察者来触发它。但是，我不会为此写出解决方案，因为它会根据您未共享的代码进行大量推测。

于 2021-04-14T00:53:08.553 回答