单元测试角度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是UI组件的更多部分-我不建议从Angular内部将其作为“单元测试”进行。 这更像是您正在执行的端到端测试，那么为什么不使用Selenium之类的东西呢？

另外-您正在通过CSS选择元素-强烈建议您改为使用ID。