在javascript fetch.then块中测试代码时，预期失败

Question

我尝试验证window.open()是否在then块中被调用。这里是一个最小的例子。

import { fakeAsync, tick } from '@angular/core/testing';
function openWindow() {
const linksource = `data:application/pdf;base64,somePDF`;
fetch(linksource).then(() => {
window.open();
});
}
describe('Asynchronus Testing', () => {
it('opens a window', fakeAsync(() => {
// Dont actually open a window
window.open = () => window;
spyOn(window, 'open');
openWindow();
tick();
expect(window.open).toHaveBeenCalled();
}));
});

实际上调用了window.open()，但预期失败：

Error: Expected spy open to have been called.

即使我给它更多的时间，tick()也无济于事。我想它是特定于fetch的，因为Promise.resolve().then()块可以工作。

Answer 1

我注意到fakeAsync/tick也有同样的情况，其中tick不控制某些承诺。

我会监视fetch并让它返回一个随机承诺。

describe('Asynchronus Testing', () => {
it('opens a window', fakeAsync(() => {
// Dont actually open a window
window.open = () => window;
spyOn(window, 'open');
// !! spy on window fetch and return a random promise
spyOn(window, 'fetch').and.returnValue(Promise.resolve({}));
openWindow();
tick();
expect(window.open).toHaveBeenCalled();
}));
});

它应该有望进行这种修改。您也不应该在单元测试中进行Http调用(一般规则(。