не в состоянии правильно использовать сделано в жасмине

Question

Мой HTML использует шаблон ng.Шаблон предназначен для создания миниатюр.

 <ng-template #thumbnailTemplate let-option="option">

      <div id="{{option.divId}}"> <!-- top level div of thumbnail. This will have ids thumbnail-1, thumbnail-2 etc.-->
        <img id="{{option.imgId}}" src="{{option.imgSrc}}"> <!-- this will have width, height=80-->
        <a href="#" id="{{option.closeId}}" (click)="deleteThumbnail(option)"></a> <!-- the X button is created using CSS. This will have ids close-button-1, close-button-2. They'll also containn reference to the parent div id (thumbnail-1, thumbnail-2 ) -->
      </div>
    </ng-template>

handleFileSelect создает FileReader, назначает обратные вызовы для FileReader и вызывает функцию readAsDataURL, чтобы начать чтение файла.

handleFileSelect(files:ArrayLike<File>):FileReader|null{
...      let reader:FileReader = new FileReader();


      reader.onload = this.handleReaderLoaded.bind(this);
      reader.onerror = this.handleFileLoadError.bind(this);
      reader.onabort = this.handleFileAbort.bind(this);
      reader.readAsDataURL(file);

  }

Метод handleReaderLoaded, вызываемый асинхронно, берет загруженный файл и обрабатывает его.

Я хочу провести модульное тестирование метода handleReaderLoaded.Я делаю это, проверяя две переменные currentImageAttachmentCount и thumbnailContainerRef, которые должны были быть обновлены, если handleReaderLoaded работал правильно.Я написал следующую спецификацию, которая работает, но я не использую здесь функцию done, которую, я полагаю, рекомендуется проверять асинхронный код для жасмина.

 fit('should upload image if user selects an image', async(() => {
    let newPracticeQuestionComponent = component;
    expect(newPracticeQuestionComponent.currentImageAttachmentCount).toBe(0);
    expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(0);


    let file1 = new File(["foo1"], "foo1.txt");

    let reader = newPracticeQuestionComponent.handleFileSelect([file1]);
    setTimeout(function() {
      console.log("in timeout");
      expect(newPracticeQuestionComponent.currentImageAttachmentCount).toBe(1);
      expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(1);

    }, 2000);


  }));

1) Я хочу использовать done метод, но я не могу понять, как его использовать.Как я мог переписать вышеупомянутую спецификацию, используя done.2) Поскольку я могу проводить тестирование без метода done, мне интересно, для чего нужен done?

Answer 1

Я ошибся, что моя спецификация работала нормально без done.Происходило то, что Jasmine просто заканчивал спецификацию it, даже не ожидая setTimeout.Поскольку не было никаких утверждений, которые должны были быть сделаны, спецификация была показана как пройденная.

Правильно было вызвать done в асинхронном коде

 setTimeout(function() {
      console.log("in timeout");
      expect(newPracticeQuestionComponent.currentImageAttachmentCount).toBe(1);
      expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(1);
done(); //without done, jasmine will finish this test spec without checking the assertions in the timeout
    }, 2000);

Я думаю doneдействует как контрольная точка в Jasmine.Когда Jasmine видит, что спецификация использует done, он знает, что не может перейти к следующему шагу (скажем, запустить следующую спецификацию или пометить эту спецификацию как завершенную), если не вызвана часть кода, содержащая done.