Добавление валидаторов в угловых формах

Question

Я тестирую эту HTML-форму:

 <input #nhcInput type="text" class="form-control" name="nhc" id="field_nhc"
	                [(ngModel)]="paciente.nhc" maxlength="38" pattern="[0-9]+"/>
	            <div [hidden]="!(editForm.controls.nhc?.dirty && editForm.controls.nhc?.invalid)">
	                <small class="form-text text-danger"
	                   [hidden]="!editForm.controls.nhc?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 38 }">
	                   This field cannot be longer than 38 characters.
	                </small>
	               

TEH RESULT {{nhcInput.className}} //This line prints ng-valid/ dirty, touched correctly

У меня есть это в моем компоненте:

    paciente: Paciente = {nhc: '23423' } as Paciente;

  it ('NHC cannot have more than 38 characters', async(() => {
               
                      comp.paciente.nhc = 'rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr' ;             
                      console.log(fixture.nativeElement.querySelector('input[name="nhc"]').className);
                      fixture.detectChanges();              
                     expect(fixture.nativeElement.querySelector('input[name="nhc"]').className.includes('ng-invalid')).toEqual(true);
                      })); 

Теперь я хочу проверить правильность проверки vaidator.Console.log выводит только элемент управления формой без типа валидатора, поскольку он не находит его.

Я поставил валидатор для этого поля, как это в моем компоненте:

@ViewChild('editForm') editForm: any;
 editform.controls["nhc"].setValidators([ Validators.maxLength(38)]);

Но это не работает.Я что-то здесь не так делаю?

Спасибо!

Answer 1

Ваша проблема возникает из-за того, что вы не делаете вещи по порядку и не полагаетесь на среду, чтобы сделать ваши тесты.

Я сделал песочницу с рабочим тестом, не стесняйтесь смотреть на нее.Теперь для объяснения:

Давайте начнем с компонента:

@Component({
  selector: 'hello',
  template: `
  <form #myForm="ngForm">
    <input type="text" maxlength="20" name="patient" id="patient" [(ngModel)]="patient">
  </form>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @ViewChild('myForm') myForm: NgForm;
  patient: string;
}

Очень простой компонент с управляемой шаблоном формой и базовой проверкой и связыванием.

Если вы сделаете это

ngOnInit() {
  console.log(this.myForm.controls);
  setTimeout(() => console.log(this.myForm.controls));
}

Вы увидите и undefined, и { patient: FormControl }.Это происходит потому, что вы не ждете инициализации представления перед выполнением ваших тестов.Это означает, что тест не может найти элемент управления формы и, следовательно, не может пройти.

Теперь для самого теста:

import { Component } from '@angular/core';
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { HelloComponent } from './hello.component';

import { FormsModule } from '@angular/forms';

describe('HelloComponent', () => {
  let fixture: ComponentFixture<HelloComponent>;
  let component: HelloComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [HelloComponent]
    });

    fixture = TestBed.createComponent(HelloComponent);
    component = fixture.debugElement.children[0].componentInstance;

    fixture.detectChanges();
  });

  it('should be invalid with more than 20 chars', async(() => {
    setTimeout(() => {
      component.myForm.controls['patient'].setValue('ddddddddddddddddddddd'); // 21
      fixture.detectChanges();
      expect(component.myForm.control.invalid).toEqual(true);
    });
  }));
});

старт очень прост, тестовый стенд настроен и изменения обнаружены.

Теперь идет часть, где вы тестируете: сначала вы должны дождаться загрузки компонента с тайм-аутом, затем вам нужно установить значение в форме с помощью фреймворка:

component.myForm.controls['patient'].setValue('ddddddddddddddddddddd'); // 21

Это ввод 21 d на вход, что делает его недействительным.После этого вам нужно активировать обнаружение изменений, и теперь вы можете сделать свое ожидание с помощью

expect(component.myForm.control.invalid).toEqual(true);

. Эта форма примет форму элемента управления, то есть она будет иметь все свойства и функции, которые имеет FormControl.Среди них вы можете найти свойство invalid, в котором указывается, что ваш элемент управления находится в недопустимом состоянии.

Опять же, я должен сказать, что этот вид теста бесполезен, потому что вы в основном пытаетесь проверить, работает ли Framework должным образом.Это не твоя работа, это работа команды Angular.Если вы хотите что-то протестировать, вы должны проверить, что форма не может быть отправлена, когда она имеет недопустимое состояние, что является бизнес-правилом (я полагаю) и предотвращает побочные эффекты (в отличие от этого теста).