toBeFalsy() 的目的是啥？

Posted 2023-03-17

【中文标题】toBeFalsy() 的目的是啥？

【英文标题】：what is the purpose of toBeFalsy()?toBeFalsy() 的目的是什么？

【发布时间】：2018-11-04 13:40:38

【问题描述】：

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

<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】：

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

试试这个：

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

【讨论】：

我必须撤消对答案的接受，直到我确认它有效

我从来没有告诉过你接受我的回答，我只是来帮忙的。没问题，继续吧。

toEqual 之前缺少右大括号。请编辑

在应用程序中填充数据后，className 只打印 form-control insead form-control ng-valid、form-control ng-pristine 等，就像 angular 教程中一样。我该怎么办？

我不是你的按需代码猴子。遇到新问题时提出新问题。