toBeFalsy（）的目的是什么？ [英] what is the purpose of toBeFalsy()?
问题描述
<表单名称=editFormrole =formnovalidate（ngSubmit）=save（）＃editForm =ngForm>
将输入#cardInput类型= 文本 类= 形式控制 名称= tarjetaSanitaria ID = field_tarjetaSanitaria
[（ngModel）] = paciente.tarjetaSanitaria MAXLENGTH = 20/>
将 ！？editForm.controls.tarjetaSanitaria .errors .maxlength 小班= 形式的文本文字危险
[隐藏] = jhiTranslate = entity.validation.maxlength translateValues = {max：20}>
此字段不能超过20个字符。
< / small>
我如何测试它只能输入最大长度为20的文本。
我在我的组件中有这个：
导出类PacienteDialogComponent实现OnInit {
paciente：Paciente;
构造函数（//其他东西不是paciente
）{
}
.....
这是我的paciente.model.ts，它具有我想测试的输入tarjetaSanitaria的属性：
从'./../../shared'导入{BaseEntity};
export class Paciente implements BaseEntity {
构造函数（public tarjetaSanitaria？：string）
{
}
}
这里是我的测试类：
import {Paciente} from ...
导入{PacienteDialogComponent} from'..
describe（....）{
让comp：PacienteDialogComponent;
让夹具：ComponentFixture< PacienteDialogComponent取代; ....
beforeEach（（）=> {
夹具= TestBed.createComponent（PacienteDialogComponent）;
排版= fixture.componentInstance; ...
它（ '输入验证'，异步（（）=> {
comp.cardInput.nativeElement.value = 'dddddddddddddddddddddddddddddddddddddddddddddddddddddd' ; //超过20个字符的文本
expect（comp.cardInput.nativeElement.valid）.toBeFalsy（）;
}））;
测试通过，但无论如何，这是测试输入验证的正确方法吗？在toBeFalsy（）之后会发生什么？用户如何知道这是错误的在这种情况下，如果它是假的，我可以输出一条消息吗？
是否有其他方法来测试表单输入验证？
该测试有效，因为它依赖于虚假值。
试试这个：
expect（comp.cardInput .nativeElement.valid）.toEqual（假）;
expect（comp.cardInput.nativeElement.invalid）.toEqual（true）;
expect（comp.cardInput.nativeElement.invalid）.toBeTruthy（）;
他们都不会工作。
为什么会这样？
comp.cardInput.nativeElement 代表 HTMLElement 。它包含诸如 className ， onclick ， querySelector 和等等。另一方面，
有效不是HTML标准的一部分：这是一个Angular概念。
这意味着当你编写
expect（comp.cardInput .nativeElement.valid）.toBeFalsy（）
输出到
expect（undefined）.toBeFalsy（）
这是真的，因为undefined是虚假的。 b
$ b
测试这种方法的正确方法是测试元素是否包含特殊的Angular类， ng-invalid （或测试它不包含 ng-valid ）。
在给出代码之前，我建议你切换到反应形式，它们更强大，更容易测试。
但无论如何，这里是你如何做到的。
$ b
it（'should be invalid to given a value of 20 chars'，（）=> ; {
//切勿使用nativeElement设定值这是不好的做法
component.paciente.tarjetaSanitaria = 'dddddddddddddddddddddddddd';
//发现变化，它不是自动
fixture.detectChanges（）;
//测试（坏习惯）
expect（component.cardInput.nativeElement.className.includes（'ng-invalid'）。toEqual（true）;
/ / test（好习惯）
expect（fixture.nativeElement.querySelector（'input [name =tarjetaSanitaria]'）。className.includes（'ng-invalid'））。toEqual（true）;
}）;
I have an input in angular inside a template driven form.
<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>
How can I unit test that it can only input texts that have a maxlength of 20.
I have this in my component:
export class PacienteDialogComponent implements OnInit {
paciente: Paciente;
constructor( //other things not paciente
){
}
.....
And this is my paciente.model.ts that has the property of the input tarjetaSanitaria I wanna test:
import { BaseEntity } from './../../shared';
export class Paciente implements BaseEntity {
constructor( public tarjetaSanitaria?: string)
{
}
}
And here is my testing class:
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();
}));
The test passes, but anyway is this the right way to test the validation of an input? What happens after toBeFalsy()? How can the user know that this is false? Can I output a message in this case if it is false,?
Is therea nother way to test the form inputs validation?
The test works because it relies on falsy values.
Try using this :
expect(comp.cardInput.nativeElement.valid).toEqual(false);
expect(comp.cardInput.nativeElement.invalid).toEqual(true);
expect(comp.cardInput.nativeElement.invalid).toBeTruthy();
None of them will work.
Why is that ?
comp.cardInput.nativeElement represents an HTMLElement. It contains properties such as className, onclick, querySelector and so on.
valid, on the other side, isn't part of the HTML standard : it's an Angular concept.
This means that when you write
expect(comp.cardInput.nativeElement.valid).toBeFalsy()
It outputs to
expect(undefined).toBeFalsy()
Which is true, because undefined is falsy.
The correct way to test this would be to test if the element contains a special Angular class, ng-invalid (or test that it doesn't contain ng-valid).
Before giving the code, I would suggest you to switch to reactive forms, they're way more powerful and easy to test.
But anyways, here is how you can do it.
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);
});
这篇关于toBeFalsy（）的目的是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
