Question

我有一个模板组件，如下所示：

<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>

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

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

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

Answer 1

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

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

您应该检查错误消息是否作为

应用

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

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

1 个答案: