Какова цель toBeFalsy ()? - PullRequest
0 голосов
/ 25 мая 2018

У меня есть ввод в угловом виде внутри формы, управляемой шаблоном.

<form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">

<input #cardInput type="text" class="form-control" name="tarjetaSanitaria" id="field_tarjetaSanitaria"
                    [(ngModel)]="paciente.tarjetaSanitaria" maxlength="20"/>
               <small class="form-text text-danger"
                   [hidden]="!editForm.controls.tarjetaSanitaria?.errors?.maxlength" jhiTranslate="entity.validation.maxlength" translateValues="{ max: 20 }">
                   This field cannot be longer than 20 characters.
                </small>

Как мне выполнить модульное тестирование, чтобы он мог вводить только те тексты, которые имеют максимальную длину 20.

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

export class PacienteDialogComponent implements OnInit {
  paciente: Paciente;
      constructor( //other things not paciente
      ){
    }
.....

И это мой paciente.model.ts, который имеет свойство ввода tarjetaSanitaria Я хочу проверить:

import { BaseEntity } from './../../shared';

export class Paciente implements BaseEntity {
    constructor( public tarjetaSanitaria?: string)

    {
    }
}

А вот мой класс тестирования:

  import { Paciente } from...
import { PacienteDialogComponent } from '..
 describe(....){

 let comp: PacienteDialogComponent;
        let fixture: ComponentFixture<PacienteDialogComponent>;....

  beforeEach(() => {
            fixture = TestBed.createComponent(PacienteDialogComponent);
            comp = fixture.componentInstance;...

      it ('Input validation', async(() => {

                     comp.cardInput.nativeElement.value = 'dddddddddddddddddddddddddddddddddddddddddddddddddddddd' ; // a text longer than 20 characters
                    expect(comp.cardInput.nativeElement.valid).toBeFalsy();
                  }));

Тест пройден, но в любом случае это правильный способ проверить правильность ввода?Что происходит после toBeFalsy ()?Как пользователь может узнать, что это неверно?Могу ли я вывести сообщение в этом случае, если оно ложно?

Есть ли другой способ проверить правильность ввода формы?

1 Ответ

0 голосов
/ 25 мая 2018

Тест работает, потому что он основан на ложных значениях.

Попробуйте использовать это:

expect(comp.cardInput.nativeElement.valid).toEqual(false);    
expect(comp.cardInput.nativeElement.invalid).toEqual(true);    
expect(comp.cardInput.nativeElement.invalid).toBeTruthy();

Ни один из них не будет работать.

Почему это так?

comp.cardInput.nativeElement означает HTMLElement.Он содержит такие свойства, как className, onclick, querySelector и т. Д.

valid, с другой стороны, не является частью стандарта HTML: это концепция Angular.

Это означает, что когда вы пишете

expect(comp.cardInput.nativeElement.valid).toBeFalsy()

, выводится

expect(undefined).toBeFalsy()

Что верно, потому что undefined - это ложь.

Правильный способ проверить это - проверить, содержит ли элемент специальный класс Angular, ng-invalid (или проверить, что он не содержит ng-valid).

Прежде чем дать код, я бы посоветовал вам перейти к реактивным формам, они гораздо более мощные и простые в тестировании.

Но в любом случае, вот как вы можете это сделать.

it('should be invalid given a value of over 20 chars', () => {
  // NEVER use the nativeElement to set values. It's bad practice. 
  component.paciente.tarjetaSanitaria = 'dddddddddddddddddddddddddd';
  // Detect changes, it's not automatic
  fixture.detectChanges();
  // Test (bad practice)
  expect(component.cardInput.nativeElement.className.includes('ng-invalid').toEqual(true);
  // Test (good practice)
  expect(fixture.nativeElement.querySelector('input[name="tarjetaSanitaria"]').className.includes('ng-invalid')).toEqual(true);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...