使用 Angular 和 Jasmine 在单元测试中单击模拟

Question

我想在使用 Jasmine 开发的单元测试中模拟点击。这是我的代码，

首先，我单击输入元素并输入内容：

inputElement().click();
inputElement().value = typedValue;

tick();
fixture.detectChanges();

function inputElement(): HTMLInputElement {
    return debugElement.query(By.css('#id-parent input')).nativeElement;
}

重点是在 "click" 之后，我没有在输入元素内看到光标。

其次：我在该输入之外单击。实际上，我单击一个标签元素来模拟：

andClickOutside();

function andClickOutside(): void {
    const label: HTMLLabelElement = debugElement.query(By.css('#id-label')).nativeElement;
    label.click();

    tick();
    fixture.detectChanges();
  }

我正在创建一个测试来检查 是否具有特定类型的值，当我在元素外部单击时，类型值将被删除 （输入为空）。

当我以正常方式启动 angular 应用程序时，该组件运行良好，因此我可以重现该情况。但由于某种原因，在茉莉花单元测试中不起作用。

有什么想法吗？

Answer 1

听起来您希望输入元素 "blur" 以便删除键入的值。与其尝试在元素外部单击，不如使用 Angular's triggerEventHandler.

触发元素模糊

const input = debugElement.query(By.css('#id-parent input'));
input.triggerEventHandler('blur', {});
fixture.detectChanges();

// input should be empty here
expect(input.nativeElement.value).toBe('');

使用 Angular 和 Jasmine 在单元测试中单击模拟

Click simulation in a unit test with Angular and Jasmine

unit-testing

jasmine

karma-jasmine

angular