jeudi 19 avril 2018

Angular forms cannot be tested

I am a beginner tester in Angular and I am using Jasmine for unit testing. I have a template driven form enter link description here like this:

<form name="editForm" role="form"  novalidate (ngSubmit)="save()" #editForm="ngForm">

    <div class="modal-header">
       .....
    </div>
    <div class="modal-body">
    
        <div class="half-block">
                <div class="form-group half-item">
                    <label class="form-control-label" jhiTranslate="oncosupApp.paciente.nombre" for="field_nombre">Nombre</label>
                    <input type="text" class="form-control" name="nombre" id="field_nombre"
                        [(ngModel)]="paciente.nombre" required/>
                    <div [hidden]="!(editForm.controls.nombre?.dirty && editForm.controls.nombre?.invalid)">
                        <small class="form-text text-danger"
                           [hidden]="!editForm.controls.nombre?.errors?.required" jhiTranslate="entity.validation.required">
                           This field is required.
                        </small>
                    </div>
                </div>
          
          
          ...........
Now I want to unit test it, but the probem is that I do not find any tutorial on how to test template driven forms. According to angular enter link description here these kind of forms cannot be unit tested:
TIP:With template driven forms the state is in the view and unless the component has a reference to the template form with a ViewChild decorator there is no way to test the form using a unit test. We would have to perform a full E2E test simulating button clicks and typing in values into forms.
I would appreciate if somebody that has had the same problem would share the solution with me, on how to test the validation of this form. Not very detailed but I only want to check if th efields really apear and if the submit button saves the data.

I have this model.ts that has its own imports and this code:

export class Paciente implements BaseEntity {
    constructor(
      
        public nombre?: string,
        ....
        
And one of teh specs where I want to create a new object is here:
  it('Should call create service on save for new entity',
                inject([],
                    fakeAsync(() => { //assync is used to let all the assync code to finish before continuing
                        // GIVEN
                        const entity = new Paciente('anna');//here is a NOMBRE THAT i WANT TO CHECK IF ITS FIELD APPEARS IN TEH FORM OR NOT
                        spyOn(service, 'create').and.returnValue(Observable.of(new HttpResponse({body: entity})));
                        comp.paciente = entity;
                        // WHEN
                        comp.save();
                        tick(); // simulate async

                        // THEN
                        expect(service.create).toHaveBeenCalledWith(entity);
                        expect(comp.isSaving).toEqual(false);
                        expect(mockEventManager.broadcastSpy).toHaveBeenCalledWith({ name: 'pacienteListModification', content: 'OK'});
                        expect(mockActiveModal.dismissSpy).toHaveBeenCalled();
                    })
                )
            );

Aucun commentaire:

Enregistrer un commentaire