flushMicrotasks не работает с image.onload

Question

В Angular я пишу объект с полем изображения.Метод, который загружает изображение, возвращает обещание, которое разрешается в функции загрузки изображения.

Теперь, чтобы протестировать этот метод, я использую функцию flushMicrotasks ().К сожалению, это не работает так, как я ожидал:).

Упрощенный код для воспроизведения моей проблемы:

describe("Flag", () => {

    it("should turn to true", fakeAsync(() => {

        let flag = false;
        let p = new Promise((resolve) => {
            let img = new Image();
            img.onload = () => {
                resolve();
            }

            img.onerror = () => {
                // handle error
                console.log('error');
            }
            img.src = "path/to/image";
        });

        p.then(() => {
            flag = true;
        })

        flushMicrotasks();
        expect(flag).toBe(true);

    }));
})

Может кто-нибудь объяснить мне, почему тест не проходит.Почему flushMicrotasks () не разрешает обещание, если оно находится в загрузке изображения?Если мы поставим resol () вне onload, тест пройден.

Answer 1

предложение Кемского использовать addEventListener не помогло.Я справился с проблемой, поместив в функцию callback функцию wait, и с помощью done:

describe("Flag", () => {

    it("should turn to true", (done) => {

        let flag = false;
        let p = new Promise((resolve) => {
            let img = new Image();
            img.onload = () => {
                resolve();
            }

            img.onerror = () => {
                // handle error
            }
            img.src = "path/to/image";
        });

        p.then(() => {
            flag = true;
            expect(flag).toBe(true);
            done();
        })
    });
})

Теперь тест работает нормально.

Answer 2

Скорее всего, onload плохо работает с zone.js, попробуйте заменить onload на соответствующий addEventListener вызов.