Question

我的组件中有一个包含setTimeout()的close函数，以便为动画提供时间。

public close() {
    this.animate = "inactive"
    setTimeout(() => {
       this.show = false
    }, 250)
}

this.show绑定到ngIf。

this.animate绑定动画。

我有一个需要测试此功能的测试

it("tests the exit button click", () => {
  comp.close()
  fixture.detectChanges()
  //verifies the element is no longer in the DOM
  const popUpWindow = fixture.debugElement.query(By.css("#popup-window"))
  expect(popUpWindow).toEqual(null)
})

如果有setTimeout()？

，您如何正确测试此功能？

我正在使用jasmine.clock().tick(251)，但窗口永远不会消失。对此也有任何想法？

Answer 1

你可以做以下两件事之一：

1：实际上在setTimeout()中等待测试250 + 1 ms，然后检查该元素是否实际消失。

2：使用fakeAsync()和tick()来模拟测试中的时间 - tick()将解析原始close()中的setTimeout，并且可能会立即进行检查在fixture.whenStable().then(...)。

例如：

it("tests the exit button click", fakeAsync(() => {
  comp.close()
  tick(500)
  fixture.detectChanges()

  fixture.whenStable().then(() => {
    const popUpWindow = fixture.debugElement.query(By.css("#popup-window"))
    expect(popUpWindow).toBe(null)
  })
}))

我建议使用第二个，因为它比实际等待原始方法快得多。如果您仍然使用1st，请尝试在测试之前降低超时时间，以使其运行得更快。

Answer 2

只需在我的项目中尝试此操作即可

jasmine.clock（）。tick（10）;

Answer 3

在我的组件中，方法是：

hideToast() {
    setTimeout( () => {
      this.showToast = false;
    }, 5000);
  }

对此进行测试（注释中的解释）：

it('should hide toast', () => {
  component.showToast = true; // This value should change after timeout
  jasmine.clock().install();  // First install the clock
  component.hideToast();      // Call the component method that turns the showToast value as false
  jasmine.clock().tick(5000); // waits till 5000 milliseconds
  expect(component.showToast).toBeFalsy();  // Then executes this
  jasmine.clock().uninstall(); // uninstall clock when done
});

希望这会有所帮助！

Answer 4

我有一个与 OP 的设置非常相似的方法，所以我想我会添加我认为更简单的测试。

** 方法 **

public close() {
    this.animate = "inactive"
    setTimeout(() => {
       this.show = false
    }, 250)
}

**茉莉花测试**

it('should set show to "false" after 250ms when close is fired', (done) => {
      component.close();
      setTimeout(() => {
        expect(component.close).toBeFalse();
        done();
      }, 251);
    });

请注意使用“done”让 jasmine 知道测试已完成，并在我的方法的 setTimeout 之后向 setTimeout 添加 1 ms 以触发。

测试包含setTimeout（）的函数

4 个答案: