如何测试未触及的所需输入控制有效性答案

【问题标题】：How to test untouched required input control validity如何测试未触及的所需输入控制有效性
【发布时间】：2017-09-19 15:53:27
【问题描述】：

我有一个带有这样模板的组件：

<form class="form-horizontal" #privateEmailForm="ngForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label class="col-md-4 control-label text-left" for="tiNewEmail" >Email</label>
        <div class="col-md-8">
            <input id="tiNewEmail" #tiNewEmail="ngModel" class="form-control input-md"
                     [(ngModel)]="newEmail" type="text" email required>
            <span [shown]="tiNewEmail.invalid && (tiNewEmail.dirty || privateEmailForm.submitted)"></span>
        </div>
    </div>

    <button type="submit" class="btn btn-red btn-lg" >Save</button>
</form>

现在我必须在这个组件上编写单元测试，它会检查提交按钮点击后是否出现电子邮件验证消息，即使电子邮件输入是原始的。问题是在单元测试中，所有输入和表单默认都是有效的。我不想像这里建议的https://stackoverflow.com/a/39918775/360171 那样从输入分派事件，因为我需要保持输入控制的原始状态。我发现如果我从组件的本机元素中调度任何事件，空的所需控件和表单将变得无效：

debugElement.nativeElement.dispatchEvent(new Event('mouseover')); 
fixture.detectChanges();

至少，它对我有用，但我不确定，是否有更正确的方法来测试未触及的表单控件的有效性？

【问题讨论】：

标签： angular typescript angular2-forms angular2-testing

【解决方案1】：

您应该先分配一个空值，然后您应该检查是否显示所需的错误消息。

debugElement.query(ByCss('#tiNewEmail')).nativeElement.value = ''

你应该检查错误信息是否被应用为

expect(debugElement.query(ByCss('#tiNewEmail > span')).nativeElement.innerHTML).toBe('Required')

【讨论】：