时间戳

首页 > 解决方案 > 在不设置 formcontrol 的情况下测试角度反应形式输入值

angular - 在不设置 formcontrol 的情况下测试角度反应形式输入值

问题描述

我有这样的表格：

<form id="save_form" (ngSubmit)="save()">
    <input id="input_user" type="text" [formControl]="myForm" />
    <button type="submit">save</button>
</form>

我有一个这样的测试：

const inputUser: HTMLInputElement = fixture.nativeElement.querySelector("#input_user");
const saveForm: DebugElement = fixture.debugElement.query(By.css("#save_form"));

inputUser.value = "Bob";
//component.myForm.setValue("Bob");

saveForm.triggerEventHandler("ngSubmit", null);

fixture.detectChanges();

在我的组件中，输入值没有更新 myForm。如果我使用注释掉的语法，表单会更新，但不会填充输入标签。

我正在尝试模拟来自用户的输入值，formcontrol 是否应该通过测试中的输入值进行更新？我觉得如果我只是手动更新了表单控件，我就不是在模拟用户。

更新：

    //component.searchUsers.setValue("Bob");
    const e: Event = document.createEvent("Event");
    e.initEvent("input", false, false);
    inputUser.value = "Bob";
    inputUser.dispatchEvent(e);
    fixture.detectChanges();

    myForm.triggerEventHandler("ngSubmit", null);
    fixture.detectChanges();
    fixture.whenStable().then(() => 
    expect(condition).toBe(true));

标签： angularkarma-jasmineangular-reactive-formsangular-test

解决方案

您需要通过从输入分派更改事件来触发更改检测，然后检测更改。我这样做如下。

const e:Event = document.createEvent('Event');
e.initEvent('input', false, false);
inputUser.value = 'Bob';
inputUser.dispatchEvent(e);
fixture.detectChanges();
fixture.whenStable().then(() => expect(something).toEqual('something'));

推荐阅读