Angular 5 茉莉花表单提交不起作用答案

【问题标题】：Angular 5 jasmine form submit not workingAngular 5 茉莉花表单提交不起作用
【发布时间】：2018-10-08 23:06:49
【问题描述】：

您好，我正在用 Jasmine 编写单元测试用例。我有一个带有提交按钮的表单。我正在尝试编写用于提交表单的单元案例。下面是我的html代码。

  <form *ngIf="formResetToggle" class="form-horizontal" name="tenantEditorForm" #f="ngForm" novalidate (ngSubmit)="f.form.valid ? saveTenant() :(!tenantname.valid && showErrorAlert('Tenant name is required', 'Please enter a name for the tenant'));">
          <div>
                        <label>Tenant Name</label>
                        <div [ngClass]="{'has-success': f.submitted && tenantname.valid, 'has-error' : f.submitted && !tenantname.valid}">
                            <input autofocus type="text" id="tenantname" name="tenantname" placeholder="Enter tenant name" class="form-control" [(ngModel)]="tenantEdit.tenantname" #tenantname="ngModel" required />
                            <span *ngIf="f.submitted" class="glyphicon form-control-feedback" [ngClass]="{'glyphicon-ok ':tenantname.valid}"></span>
                            <span *ngIf="f.submitted && !tenantname.valid" class="errorMessage">
                                <i class="abb_icon_16 ui_error_circle1 erroricon"></i> Tenant Name Required!
                            </span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" (click)="editorModal.hide()" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Add Tenant</button>
                    </div>
  </form>

saveTenant 将是提交表单时将在组件中调用的方法。

saveTenant{
  //method implementation
}

以下是我的设置。

 beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
            NgxDatatableModule,
            FormsModule
           ],
            declarations: [
                TenantEditorComponent,
                SearchBoxComponent
            ],
             providers: [
                {
                    provide: LogMessages, useClass: LogMessagesMock
                }
         ]
        }).compileComponents();
        fixture = TestBed.createComponent(TenantEditorComponent);

以下是我目前尝试过的单元测试用例。

 it('Form should be valid', async(() => {
        component.tenantsform.form.controls.tenantname.setValue('volvoaad');
        expect(component.tenantsform.valid).toBeTruthy();
    }));

    it('Form should be invalid', async(() => {
        component.tenantsform.form.controls.tenantname.setValue('');
        expect(component.tenantsform.valid).toBeFalsy();
    }));

这些单元测试用例给出了同样的错误。

失败：无法读取未定义的属性“表单”

为表单设置值后，我正在尝试提交表单。有人可以帮我找到错误的根本原因。任何帮助，将不胜感激。谢谢。

【问题讨论】：

您是否在beforeEach 方法中运行detectChanges()？在您运行之前，这些表单不存在。
另外，你在测试中使用async，但你没有在那里做任何异步工作，例如使用tick()。所以没必要
在删除异步并添加 detectChanges 后它起作用了。现在我该如何提交表格？
我尝试如下提交表单。 component.tenantsform.form.controls.tenantname.setValue('volvoaad');组件.tenantsform.ng提交；但问题是控制没有进入 saveTenant() 方法。有人可以纠正我吗？

标签： angular forms karma-jasmine

【解决方案1】：

您应该在beforeEach 中使用detectChanges()，以便在使用之前创建表单。这在大多数角度测试中很常见。

要提交表单，只需单击提交按钮。为此，请使用 angular 提供的帮助器： https://angular.io/guide/testing#click-helper

另外，如果发生任何异步事情，不要忘记再次detechChanges，甚至可能是tick

【讨论】：