Angular Ошибка проверки формы теста Карма Жасмин

Question

Я хочу протестировать, чтобы убедиться, что проверка, которую я даю элементу управления формы, применяется во время сборки. Может ли это быть потому, что я устанавливаю значение элемента управления формы перед проверкой ошибки? Форма строится в сервисе, посвященном общей форме. Это 6-страничная форма регистрации. Я хочу убедиться, что валидаторы, с которыми я строю форму, применяются в моем тесте карма-жасмин. Заявитель определяется в InInit с помощью службы, которая выполняет http-вызов для серверной части, и другой службы, которая создает форму. Я создал шаблон макета регистрации c для представления данных, возвращаемых из внутреннего вызова в spe c. В идеале мне нужно, чтобы я работал, ожидая, что требуемые шаблоны валидатора и валидатора на самом деле соответствуют тому, что было передано в форму во время сборки:

(см. Фото с ошибкой внизу этого поста)

expect(errors.required).toBeTruthy();
    expect(errors.pattern).toBeTruthy();

Этот элемент управления формы передается Validators.required при сборке. Тем не менее, во время теста валидаторы отображают ошибки как неопределенные ...

Построитель форм:

phone_number: [null, Validators.required],

Проверка формы Spe c:

    it('phone number field validity - required', () => {
    const phoneNumber = component.applicant.controls.phone_number;
    expect(phoneNumber.valid).toBeFalsy();

    phoneNumber.setValue(mockGenericMaEnrollmentRefresh.applicant.phone_number);
    const errors = phoneNumber.errors || {};
    // expect(errors.required).toBeTruthy();
    expect(errors.pattern).toBe(undefined);
    expect(phoneNumber.valid).toBeTruthy();
  });

Компонент HTML:

<mat-form-field>
            <mat-label>Phone *</mat-label>
            <input [textMask]="{mask: phoneMask}" formControlName="phone_number" id="phone_number" matInput
                   type="text">
            <mat-error *ngIf="applicant.controls.phone_number.errors?.required">Phone Number is
              required.
            </mat-error>
          </mat-form-field>

Компонент TS:

import {Component, OnInit} from '@angular/core';
import {GoToStepConfig, MaNavigationService} from '../../services/ma-navigation/ma-navigation.service';
import {MaEnrollmentFormService} from '../../services/ma-enrollment-form/ma-enrollment-form.service';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-ma-personal-info',
  templateUrl: './ma-personal-info.component.html',
  styleUrls: ['./ma-personal-info.component.css']
})
export class MaPersonalInfoComponent implements OnInit {
  phoneMask: any[] = [/\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
  mailingAddressSameAsResidential = new FormControl(null);

  constructor(private maNavigationService: MaNavigationService,
              private formService: MaEnrollmentFormService) {
  }

  get enrollmentForm(): FormGroup {
    return this.formService.enrollmentForm;
  }

  get applicant(): FormGroup {
    return this.formService.applicant as FormGroup;
  }

  get permanentAddress(): FormGroup {
    return this.formService.permanentAddress as FormGroup;
  }

  get mailingAddress(): FormGroup {
    return this.formService.mailingAddress as FormGroup;
  }

  get medicaid(): FormGroup {
    return this.formService.medicaid as FormGroup;
  }

  get providerForm(): FormGroup {
    return this.formService.providerForm as FormGroup;
  }

  ngOnInit() {
  }

  isApplicantBasicInfoValid(): boolean {
    return this.applicant.controls.first_name.valid &&
      this.applicant.controls.last_name.valid &&
      this.applicant.controls.date_of_birth.valid &&
      this.applicant.controls.phone_number.valid &&
      this.applicant.controls.gender.valid;
  }

  isAddressValid(): boolean {
    return this.permanentAddress.valid && this.mailingAddress.valid;
  }

  isMedicareInformationValid(): boolean {
    return this.applicant.controls.medicare_claim_number.valid &&
      this.applicant.controls.hospital_insurance_parta.valid &&
      this.applicant.controls.medical_insurance_partb.valid &&
      this.enrollmentForm.controls.proposed_effective_date.valid;
  }

  isMedicaidInformationValid(): boolean {
    return this.providerForm.valid && this.medicaid.valid;
  }

  areAllControlsValid(): boolean {
    return this.applicant.valid && this.medicaid.valid && this.providerForm.valid &&
      this.enrollmentForm.controls.proposed_effective_date.valid;
  }

  back() {
    this.maNavigationService.returnToQuotePage();
  }

  next() {

    this.applicant.markAllAsTouched();
    this.medicaid.markAllAsTouched();
    this.permanentAddress.markAllAsTouched();
    this.mailingAddress.markAllAsTouched();
    this.providerForm.markAllAsTouched();

    if (!this.areAllControlsValid()) {
      return;
    }

    const goToStepConfig: GoToStepConfig = {
      route: '/ma/enroll/2'
    };
    this.maNavigationService.goToStep(goToStepConfig);
  }

}

///////////// PAGE 1 GETTERS FORM SERVICE ///////////////
  get applicant(): FormGroup {
    return this.enrollmentForm.get('applicant') as FormGroup;
  }

  get permanentAddress(): FormGroup {
    return this.applicant.get('permanent_address') as FormGroup;
  }

  get mailingAddress(): FormGroup {
    return this.applicant.get('mailing_address') as FormGroup;
  }

  get medicaid(): FormGroup {
    return this.enrollmentForm.get('medicaid') as FormGroup;
  }

  get providerForm(): FormGroup {
    return this.enrollmentForm.get('plan.primary_care_physician.provider') as FormGroup;
  }

Answer 1

Похоже, что эта проблема не обнаруживается. Формы могут быть немного странными, когда вы напрямую обновляете внутренние значения. Валидатор logi c перезапускается всякий раз, когда форма обнаруживает, что произошло изменение, обычно это происходит, когда поле используется напрямую (думаю, размыто / грязно). Однако способ установки значений может обойти это.

Чтобы убедиться, что протокол проверки подлинности c работает и вы получаете соответствующий ответ об ошибке / форму журнала c, нужно сообщить элементу управления формы, что это устарело.

  component.yourForm.controls['yourFormField'].markAsTouched();
  fixture.detectChanges();

Это запустит валидаторы, и вы увидите ожидаемое поведение.

В качестве примечания вы можете также попробовать использовать собственный элемент для обновления формы, а не go к самому компоненту. Это гарантирует, что тест проверяет шаблон, который помогает имитировать пользовательский опыт. Если вы решите сделать этот маршрут, вы можете использовать этот код.

  yourFormInput = dom.query(By.css('[formcontrolname=yourFormField]')).nativeElement;
  yourFormInput.value = deviceName;
  yourFormInput.dispatchEvent(new Event('input'));
  fixture.detectChanges();