Тестирование подачи угловой формы

Question

Я тестирую угловое приложение и особенно этот ввод HTML:

<form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
     <input type="text" name="nombre" id="field_nombre"
    	                [(ngModel)]="paciente.nombre" required/>
(etc. f.e. button on submit...)

Вот мой компонент:

imports....


export class PacienteDialogComponent implements OnInit {
    
    paciente: Paciente;
    
    ....
    
       save() {
        this.isSaving = true;
        if (this.paciente.id !== undefined) {
            this.subscribeToSaveResponse(
                this.pacienteService.update(this.paciente));
        } else {
            this.subscribeToSaveResponse(
                this.pacienteService.create(this.paciente));
        }
    }
}

Вот мой пациент.модель.тс

export class Paciente implements BaseEntity {
    constructor(
        public id?: number,
        public nombre?: string,
        public sexo?: Sexo,
        
        .....

Я хочу протестировать форму, что означает, что при отправке она действительно вызывает функцию save ().У меня есть это в моем тесте:

describe('Paciente Management Dialog Component', () => {
        let comp: PacienteDialogComponent;
        let fixture: ComponentFixture<PacienteDialogComponent>;
        let debugElement: DebugElement; //create a debgElement for testing

        beforeEach(async(() => {
            TestBed.configureTestingModule({
                imports: [OncosupTestModule,
                    OncosupSharedModule,
                    BrowserModule,
                    FormsModule,
                  
                ],
                declarations:...
                ],
                providers: [
                    ...
            })
            .compileComponents();
        }));

  beforeEach(() => {
            fixture = TestBed.createComponent(PacienteDialogComponent);
            comp = fixture.componentInstance;
            debugElement = fixture.debugElement;
        });
                //a default generated test which controls if the save method really saves a new patient with its name, id, sex, etc.
        it('Should call create service on save for new entity',
           inject([],
               fakeAsync(() => {
                   // GIVEN
                   const entity = new Paciente();
                   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();
               })
           )
       );
// And teh second thing I want to test is if ngSubmit is really calling the save() function


           it ('should call the onSubmit method', async(() => {
            //fixture.detectChanges();
            spyOn(comp,'save');
            var1 = debugElement.query(By.css('button')).nativeElement;
            console.log('print button ' + var1);
            var1.click();
            expect(comp.save).toHaveBeenCalledTimes(0);//verify...
            }));

//And also if isSaving is set to true


 it ('should set isSaving to true', async(() => {
           comp.save();
            expect(comp.isSaving).toBeTruthy();
         
           }));





         
        
        

1. Теперь у меня есть следующие вопросы: Первый тест генерируется по умолчанию и не написан мной.В этой строке const entity = new Paciente(); я должен назвать параметры Paciente?Например, id, sex, name или оставьте это по умолчанию без параметров.Цель этого первого теста состоит в том, чтобы проверить, действительно ли функция save () сохраняет пациента и его данные, такие как идентификатор, пол и т. Д.

2. Для второго теста я прочитал его в учебнике по угловым: HaveBennCalled (0) - правильная вещь, чтобы проверить, вызван ли этот шпион и сколько раз.Но в любом случае он действительно проверяет, вызывает ли кнопка функцию save ().Я думаю, что он только проверяет, не вызывалась ли ранее кнопка, но не вызывает ли она прямо сейчас в функции сохранения.

3. И достаточно ли и завершены ли эти 3 теста для отправки формы?

Answer 1

После моих комментариев, вот как проверить, правильно ли отправлена ​​форма.

Допустим, у вас есть интерфейс Patient:

export interface Patient {
  id: number;
  name: string;
}

В вашем компоненте у вас есть форма, и вы отправляете ее через submit():

submit() {
  this.patientService.savePatient(this.patient).subscribe(result => {
    console.log('Patient created');
  });
}

Теперь ваш сервис выполняет HTTP-вызов и проверяет, все ли поля в порядке:

savePatient(patient: Patient): Observable<any> {
  if (typeof patient.id !== number) { return Observable.throw('ID is not a number'); }
  if (typeof patient.name !== string) { return Observable.throw('Name is not a string'); }

  return this.http.post<any>(this.url, patient);
}

Тогда ваши тесты должны выглядеть следующим образом. Во-первых, компонент:

it('Should call the service to save the patient in DB', () => {
  // Spy on service call
  // Expect spy to have been called
});

it('Should log a message on success', () => {
  // Spy on console log
  // Expect console log to have been called with a string
});

Вы также можете проверить правильность обработки ошибки, наличие кодов ошибок и т. Д.

Сейчас на службе:

it('Should throw an error if the ID is not a number', () => {
  // Mock a patient with a string ID
  // Expect an error to be thrown
});

// Same thing for the name, you get the idea

it('Should make an HTTP call with a valid patient', () => {
  // Spy on the HttpTestingController
  // Expect the correct endpoint to have been called, with the patient as the payload
});

Общая идея этих тестов - , чтобы охватить любой случай, который может произойти . Это позволит вам предотвратить побочных эффектов : например, если однажды вы решите передать свой идентификатор в строку, модульный тест не пройдёт и сообщит вам

Вы ожидаете, что я отправлю строку, но я передаю только с номером

Это цель модульного теста.