Тестирование Angular6: кнопка не захватывается вызовом By.css - PullRequest
0 голосов
/ 27 марта 2019

У меня есть HTML-код ниже, где я хочу протестировать событие кнопки отправки. Я добавил идентификатор, имя класса и т. Д. И попытался запустить. Это все еще терпит неудачу.

 <div *ngIf = 'reportParams' style="width:90%">
  <form (ngSubmit)="onSubmit()" [formGroup]="form"  target="_blank"  method="POST" > 
    <div align ="center">
      <span>
            <button mat-raised-button formControlName = "submitButtonControl" class="submitButtonControl"
            name="submitButtonControl" id = 'submitButtonControl' ngDefaultControl [disabled]="!form.valid" type = 'Submit' color='primary'  >
              {{generateButton}}
            </button>&nbsp;&nbsp;&nbsp;
        <button mat-raised-button (click)="resetButtonClick()" type="reset"  >
          Reset
        </button>
      </span>
    </div>
  </form>
</div>

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

describe('ReportingFormComponent', () => {
  let component: ReportingFormComponent;
  let fixture: ComponentFixture<ReportingFormComponent>;
  let debugElement: DebugElement;
    TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [ReportingFormComponent],
    });
    fixture = TestBed.createComponent(ReportingFormComponent);
    component = fixture.componentInstance;
  describe('onSubmit', () => {
    it('makes expected calls', () => {
      const value = {}

    let submitButton = 
      fixture.debugElement.query(By.css('#submitButtonControl')); 
      console.log(submitButton);    //capturing null
    });
  });
});

Я что-то упускаю в вызове fixture.debugElement.query(By.css('#submitButtonControl'));. Все примеры, которые я видел, используют то же самое. Чего мне не хватает?

1 Ответ

0 голосов
/ 27 марта 2019

После настройки тестового стенда обнаружить изменения:

beforeEach(async(() => {

TestBed.configureTestingModule({
      schemas: [NO_ERRORS_SCHEMA],
      declarations: [ReportingFormComponent],
    }).compileComponents();
}));

beforeEach(() => {    
        fixture = TestBed.createComponent(ReportingFormComponent);
        component = fixture.componentInstance;
        fixture.detectChanges(); // this is what you need
    });
...