Angular FormGroup недопустим во время теста Cypress - PullRequest
Новая
       27

Angular FormGroup недопустим во время теста Cypress

0 голосов
/ 10 марта 2020

У меня есть кнопка, которая отключена, а formGroup недействительна. Кнопка становится действительной при следующих условиях: 

 const field = this.formBuilder.group({
      fieldType: new FormControl("", [Validators.required]),
      fieldName: new FormControl("", [
        Validators.required,
        Validators.minLength(2)
      ]),
      fieldValue: new FormControl("", [
        Validators.required,
        Validators.minLength(1)
      ]),
      fieldUnit: new FormControl("", [
        Validators.required,
        Validators.minLength(2)
      ])
    });

Это прекрасно работает, взаимодействуя вручную и при запуске моего теста Cypress с консоли 

 cy.contains("Save changes").click();

, но при запуске из браузера Cypress Electron кнопка все еще отключена после того, как была сделана правильная запись Я даже пытался подождать секунду после ввода безрезультатно.

Это код, который проверяет на валидацию ts и html соответственно. 

 isInvalid(): boolean {
    const { invalid } = this.metadataForm; // FormGroup
    return invalid;
  }

<button
  mat-flat-button
  type="submit"
  color="primary"
  [disabled]="isInvalid()"
  (click)="doSave()"
>
  <mat-icon> save </mat-icon>
  Save changes
</button>

В электронном браузере хорошо видно что кнопка отключена, когда она должна быть включена. Так почему электронный браузер работает неправильно?

РЕДАКТИРОВАТЬ:

@ Принс любезно создал основы c stackblitz . Я провел те же тесты против этого, и это сработало как надо. с включением кнопки и последующим нажатием.

ниже - тест. 

describe("visit", () => {
    it("should go to site", () => {
      cy.visit('https://angular-validation-kr7qun.stackblitz.io');
      cy.get('form.ng-untouched > :nth-child(1) > .ng-untouched').type("some name{enter}");
      cy.get(':nth-child(2) > .ng-untouched').type("some name{enter}");
      cy.get(':nth-child(3) > .ng-untouched').type("some name{enter}");
      cy.get(':nth-child(4) > .ng-untouched').type("some name{enter}");
      cy.get('button').click()
    });
  });

enter image description here

ошибка в электронном браузере:

vendor . js: 68863 Ошибка: не удается найти элемент управления с путем: 'items -> 0 -> fieldType' в _throwError (vendor. js: 106904) в setUpControl (vendor. js: 106812) в FormGroupDirective.pu sh .. / node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (vendor. js: 110038) в FormControlName.pu sh .. / node_modules / @ angular / forms / fesm5 / forms. js .FormControlName._setUpControl (vendor. js: 110639) в FormControlName.pu sh .. / node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (вендор . js: 110560) в checkAndUpdateDirectiveInline (вендор. js: 85954) в checkAndUpdateNodeInline (вендор. js: 94356) в checkAndUpdateNode (вендор. js: 94318) в prodCheckAndUp: 59 * 499 ) в Object.eval [as updateDirectives] (нг: ///ScientificMetadataModule/MetadataEditComponent.ngfactory.js: 478)

Это на самом деле проблема с реализацией формы Dynami c

1 Ответ

1 голос
/ 10 марта 2020

Если мне нужно указать ошибку в вашем коде, то вы ссылаетесь на неправильное имя метода класса компонента.

В классе компонентов вы используете метод с именем - isInvalid(). Но в шаблоне, который вы используете isValid().

, я бы предложил вам просто обратиться непосредственно к FormGroup в temlate, чтобы проверить его правильность. При этом вы можете удалить избыточный код, просто для простоты. Используйте его, как показано ниже: 

<button
  mat-flat-button
  type="submit"
  color="primary"
  [disabled]="metadataForm.invalid"
  (click)="doSave()"
>
  <mat-icon> save </mat-icon>
  Save changes
</button>

Пожалуйста, создайте здесь экземпляр stackblitz - https://stackblitz.com/edit/angular-47uvne

Я не знаю, почему он не работает с вашей стороны, может пожалуйста, создайте экземпляр stackblitz для вашей проблемы.

...