toBeFalsy() 的目的是什么？

Question

我在模板驱动的表单中有一个 angular 输入。

<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() 之后会发生什么？用户怎么知道这是假的？在这种情况下，如果它是假的，我可以输出一条消息吗？

有没有其他方法来测试表单输入验证？

Answer 1

该测试有效，因为它依赖于虚假值。

尝试使用这个：

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）。

在给出代码之前，我建议您切换到反应式形式，它们更强大且易于测试。

但无论如何，这是你可以做到的。

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