Question

我的html使用ng-template。该模板用于创建缩略图。

 <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函数，我建议将其推荐为测试茉莉的asyn代码。

 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的代码段，否则它无法继续进行下一步（例如，运行下一个规范或将该规范标记为完成）。 / p>

无法正确使用茉莉花

1 个答案: