Испытание переплета на угловой

Question

Может кто-нибудь дать подсказки по этому вопросу?У меня есть эта форма в угловых со входом для сохранения имени пациента в дБ с помощью функции save () в Component1 .

 <form  name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
 
 <input #inputValid type="text" class="form-control" name="nombre" id="field_nombre"
	                [(ngModel)]="paciente.nombre" required/>

Эта форма закрывается при сохранении, и я должен увидеть результат на html-странице другого компонента Component2.Его HTML выглядит так:

    <div class="table-responsive" *ngIf="pacientes">
     <tr *ngFor="let paciente of pacientes ;trackBy: trackId">
                <td>{{paciente.nombre}}</td>
                ....

Я на самом деле проверил, что данные сохранены, я имею в виду функцию сохранения, а также то, что кнопка отправляет вызовы для сохранения.

Я хочуПротестируйте интерфейсную часть с помощью Jasmine, чтобы ранее сохраненные данные появились в моей таблице.Как я могу это сделать?До сих пор я мог использовать ViewChild, чтобы взять ссылки на входные данные и таблицу, но мне нужен совет о том, как на самом деле его протестировать. Угловое руководство по тестированию не содержит подобных примеров.Спасибо,

Answer 1

попробуйте это, вы можете дать имя класса вашему элементу tr и подсчитать ngfor элементов после отправки и проверить, что оно не равно 0 и что длина элементов передана от 0 до 1, и добавить идентификатор в вашу форму "id = 'FormId' "

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


<tr class="patient" *ngFor="let paciente of pacientes ;trackBy: trackId">

вот тест, новый элемент вставлен в конец, поэтому его индекс имеет длину 1, вы можете проверить, что его значение равно вашему входному значению

it('should submit the form and save data', async(() => {
   let formElement: DebugElement;
   formElement = fixture.debugElement.query(By.css('#FormId'));
   formElement .triggerEventHandler('ngSubmit', null);
   expect(component.save).toHaveBeenCalledTimes(1); // check that save is called on sybmit
   const tableLength = fixture.debugElement.queryAll(By.css('.patient')).length;
   expect(tableLength ).toBe(1) // check that the element is added and length pass from 0 to 1
   expect(fixture.debugElement.queryAll(By.css('.patient'))[tableLength-1].nativeElement.value).toEqual(component.paciente.nombre)

  }))