Как написать модульный тест для кода внутри onloadend? - PullRequest
Новая
       9

Как написать модульный тест для кода внутри onloadend?

0 голосов
/ 13 марта 2020

Моя функция в файле user-profile.component.ts: 

    loadImage(file) {
      const myReader: FileReader = new FileReader();
      myReader.onloadend = () => {
        this.imageInBase64 = myReader.result;
      };
      myReader.readAsDataURL(file);
    }

и user-profile.component.spe c .ts 

    it('upload image success', async () => {
      const file = new File([new Blob(['123'])], 'abc.png', { type: 'image/png' });

      component.loadImage(file);

      expect(component.imageInBase64.length).toBeGreaterThan(0);
    });

Я всегда получаю " Ожидаемый 0 будет больше 0 ". Как написать правильный модульный тест для этого случая?

Я попробовал mockFileReader из Как мне написать FileReader test в Jasmine? , но не повезло.

1 Ответ

0 голосов
/ 13 марта 2020

Ваш тест выполняется до загрузки изображения. Изображение загружается в событие load, но ваша функция loadImage возвращается до того, как событие было запущено.

Вы можете решить эту проблему, вернув Обещание из loadImage: 

    loadImage(file) {
      return new Promise((resolve, reject) => {
        const myReader: FileReader = new FileReader();
        myReader.onloadend = () => {
          this.imageInBase64 = myReader.result;
          resolve();
        };
        myReader.readAsDataURL(file);
      });
    }

А затем дождитесь loadImage в своем тесте: 

    it('upload image success', async () => {
      const file = new File([new Blob(['123'])], 'abc.png', { type: 'image/png' });

      await component.loadImage(file);

      expect(component.imageInBase64.length).toBeGreaterThan(0);
    });

Возможно, вам также потребуется добавить некоторую обработку ошибок и вызвать reject при возникновении ошибки. Кроме того, вы можете вернуть myReader.result из Promise вместо использования переменной-члена.

...