Юнит Тест Угловой 6

Question

У меня есть две кнопки со входами, например:

 <div class="input-group col-5 align-self-center">
      <input id="endeDate" class="form-control" placeholder="dd.mm.yyyy" name="endeDate"
             [minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateEnd')"
             ngbDatepicker #endeDate="ngbDatepicker" formControlName="dateEnd" (focus)="endeDate.toggle()">
      <div class="input-group-append">
        <button class="btn btn-primary calendar" (click)="endeDate.toggle()" type="button">
          <fa-icon icon="calendar-alt"></fa-icon>
        </button>
      </div>
    </div>


<div class="input-group col-5 align-self-center">
      <input id="startDate" class="form-control" placeholder="dd.mm.yyyy" name="startDate"
             [minDate]="minDate" [markDisabled]="disableWeekend" [class.is-invalid]="checkValidity('dateStart')"
             ngbDatepicker #startDate="ngbDatepicker" formControlName="dateStart" (focus)="startDate.toggle()">
      <div class="input-group-append">
        <button class="btn btn-primary calendar" (click)="startDate.toggle()" type="button">
          <fa-icon icon="calendar-alt"></fa-icon>
        </button>
      </div>
    </div>

Мне нужно написать модульные тесты. Юнит тест должен проверить дату выбора.

  it('check Validation field Ende', () => {
       let datepicker = fixture.debugElement.nativeElement.querySelector('button').endeDate.toggle();
       expect(document.querySelector('.dropdown-menu.show')).toBeNull();
       datepicker.click();
       expect(document.querySelector('.dropdown-menu.show')).not.toBeNull();
  });

Но в первом и втором он открыл одну и ту же первую кнопку. Я пробовал также это:

   let datepicker = 
   fixture.debugElement.query(By.css('input[id=endeDate]'));
   datepicker.nativeElement.click();

но это не работает. У кого-нибудь есть другая идея

Answer 1

Как правило - с Angular, являющимся большим компонентом пользовательского интерфейса, - я не рекомендую делать это как «модульный тест» изнутри Angular. Это скорее комплексный тест, который вы проводите, так почему бы не использовать что-то вроде Selenium?

Также - вы выбираете элемент с помощью CSS - настоятельно рекомендуем вместо этого сделать это по ID.