toBeFalsy() 的目的是什么？

Question

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

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

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

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

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);
});