在测试用例中获得未定义的值但在生产中没有

Question

当我的测试用例调用此函数时，我看到 index 的值为 undefined。

delete thumbnail  clicked with context  {thumbnailContext: ThumbnailContext}thumbnailContext: ThumbnailContext {divId: "thumbnail-1", imgId: "img-1", closeId: "close-button-1", imgSrc: "data:image/png;base64,Zm9vMQ==", index: 0, …}__proto__: Object
context.js:1972 deleting index  undefined

但是在同一函数中之前的跟踪显示该值实际上是 0！

有问题的函数是

  deleteThumbnail(thumbnailContext:ThumbnailContext){

    console.log("delete thumbnail  clicked with context ",thumbnailContext); //the print of this shows index is 0
    let wasConfirmed = confirm("Are you sure you want to delete the attachment?");
    if(wasConfirmed) {


      console.log("deleting index ", thumbnailContext.index); //and then this becomes undefined!!
      this.thumbnailContainerRef.remove(thumbnailContext.index);

      return false; /*returning false cancels the click and thus cancels further navigation and prevents the browser from going to the page specified (in this case #).*/
    }
  }

如果运行在测试环境之外（即在开发模式下），代码运行会显示正确的打印结果

以下是测试用例。它测试用户是否可以删除视图的缩略图。缩略图是使用 Angular''sViewContainerRef` 创建的。

  fit('should delete image if user deletes a thumbnail', (done) => {
    let newPracticeQuestionComponent = component;

    expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(0);
    let imageThumbnailDiv = fixture.debugElement.query(By.css("#thumbnail-1"));
    let imageThumbnailImg = fixture.debugElement.query(By.css('#img-1'));
    let imageThumbnailClose = fixture.debugElement.query(By.css('#close-button-1'));


    expect(imageThumbnailDiv).toBeFalsy();
    expect(imageThumbnailImg).toBeFalsy();
    expect(imageThumbnailClose).toBeFalsy();
    let fileSelectControl = (fixture.debugElement.query(By.css("#question-file-upload"))).nativeElement as HTMLInputElement;
    let file1 = new File(["foo1"], "foo1.txt",{type: "image/png"});
    let reader = newPracticeQuestionComponent.handleFileSelect(fileSelectControl,[file1]);
    setTimeout(function() {
      console.log("in timeout");

      fixture.detectChanges();//without this, the view will not be updated with model
      expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(1);
      let imageThumbnailDiv2 = fixture.debugElement.query(By.css("#thumbnail-1"));
      let imageThumbnailImg2= fixture.debugElement.query(By.css('#img-1'));
      let imageThumbnailClose2 = fixture.debugElement.query(By.css('#close-button-1'));

      expect(imageThumbnailDiv2).toBeTruthy();
      expect(imageThumbnailImg2).toBeTruthy();
      expect(imageThumbnailClose2).toBeTruthy();

      let thumbnailViewRef:EmbeddedViewRef<ThumbnailContext> = newPracticeQuestionComponent.thumbnailContainerRef.get(0) as EmbeddedViewRef<ThumbnailContext>;
      newPracticeQuestionComponent.deleteThumbnail(thumbnailViewRef.context);
      expect(newPracticeQuestionComponent.thumbnailContainerRef.length).toBe(0);

      let imageThumbnailDiv3 = fixture.debugElement.query(By.css("#thumbnail-1"));
      let imageThumbnailImg3 = fixture.debugElement.query(By.css('#img-1'));
      let imageThumbnailClose3 = fixture.debugElement.query(By.css('#close-button-1'));


      expect(imageThumbnailDiv3).toBeFalsy();
      expect(imageThumbnailImg3).toBeFalsy();
      expect(imageThumbnailClose3).toBeFalsy();

      done();//without done, jasmine will finish this test spec without checking the assertions in the timeout
    }, 2000);


  });

测试用例通过。但是，我有另一个测试用例，它显示相同的行为但挂起。那个和这个测试用例的区别是另一个删除了多个缩略图。

Answer 1

为了达到预期效果，使用thumbnailContext.thumbnailContext.index获取索引值

在测试用例中获得未定义的值但在生产中没有

getting an undefined value in test case but not in production

javascript

angular6