Угловая форма жасмина 5 не работает - PullRequest
0 голосов
/ 08 октября 2018

Привет, я пишу тестовые случаи в Жасмин.У меня есть одна форма с кнопкой отправки.Я пытаюсь написать блок дела для отправки формы.Ниже мой 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();
    }));

Эти примеры модульных тестов дают следующую ошибку.

Ошибка: не удается прочитать свойство 'форма' из неопределенного

После настройки значений для форм я пытаюсь отправить форму.Может кто-нибудь помочь мне найти причину ошибки.Любая помощь будет оценена.Спасибо.

1 Ответ

0 голосов
/ 08 октября 2018

Вы должны использовать detectChanges() в beforeEach, чтобы форма создавалась перед ее использованием.Это очень распространено в большинстве угловых тестов.

Чтобы отправить форму, просто нажмите на кнопку отправки.Для этого используйте помощника, который angular предоставляет: https://angular.io/guide/testing#click-helper

Кроме того, не забудьте снова detechChanges и, возможно, даже tick, если произойдет что-то асинхронное

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...