javascript - what is the purpose of toBeFalsy()? - Stack Overflow

admin管理员组

文章数量:1353252

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 ponent:

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 p: PacienteDialogComponent;
        let fixture: ComponentFixture<PacienteDialogComponent>;....

  beforeEach(() => {
            fixture = TestBed.createComponent(PacienteDialogComponent);
            p = fixtureponentInstance;...

      it ('Input validation', async(() => {
                   
                     p.cardInput.nativeElement.value = 'dddddddddddddddddddddddddddddddddddddddddddddddddddddd' ; // a text longer than 20 characters
                    expect(p.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?

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 ponent:

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 p: PacienteDialogComponent;
        let fixture: ComponentFixture<PacienteDialogComponent>;....

  beforeEach(() => {
            fixture = TestBed.createComponent(PacienteDialogComponent);
            p = fixture.ponentInstance;...

      it ('Input validation', async(() => {
                   
                     p.cardInput.nativeElement.value = 'dddddddddddddddddddddddddddddddddddddddddddddddddddddd' ; // a text longer than 20 characters
                    expect(p.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?

• javascript
• html
• angular
• unit-testing

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 25, 2018 at 8:06 TesterTester 44922 gold badges1010 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

The test works because it relies on falsy values.

Try using this :

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

None of them will work.

Why is that ?

p.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(p.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. 
  ponent.paciente.tarjetaSanitaria = 'dddddddddddddddddddddddddd';
  // Detect changes, it's not automatic
  fixture.detectChanges();
  // Test (bad practice)
  expect(ponent.cardInput.nativeElement.className.includes('ng-invalid').toEqual(true);
  // Test (good practice)
  expect(fixture.nativeElement.querySelector('input[name="tarjetaSanitaria"]').className.includes('ng-invalid')).toEqual(true);
});

本文标签： javascriptwhat is the purpose of toBeFalsy()Stack Overflow