тестовый пример зависает при неправильной проверке

Question

Я надеюсь, что все в SO чувствуют себя хорошо и находятся в безопасности.

Я испытываю странное поведение. html моего приложения должно иметь элемент с id #submitted-answer-button.

Я извлекаю элемент и проверяю его следующим образом (среди прочего)

const editButton = fixture.debugElement.query(By.css('#edit-practice-question-button'));
    const createAnswerButton = fixture.debugElement.query(By.css('#answer-question-button'));
    const submittedAnswerButton = fixture.debugElement.query(By.css('#submitted-answer-button'));
    const deleteButton = fixture.debugElement.query(By.css('#delete-practice-question-button'));

    console.log('checking if buttons exist 1', editButton);
    expect(editButton).toBeTruthy();
    console.log('checking if buttons exist 2',deleteButton);
    expect(deleteButton).toBeTruthy();
    console.log('checking if buttons exist 3',submittedAnswerButton);
    expect(submittedAnswerButton).toBeTruthy();
    console.log('checking if buttons exist 4');
    expect(createAnswerButton).toBeFalsy();

Интересно , если я неправильно кодирую, что submittedAnswerButton должно быть falsy, то тестовый пример зависает !!

const editButton = fixture.debugElement.query (By. css ('# edit-practice-question- кнопка ')); const createAnswerButton = fixture.debugElement.query (By. css ('# answer-question-button')); const submitAnswerButton = fixture.debugElement.query (By. css ('# submit-answer-button')); const deleteButton = fixture.debugElement.query (By. css ('# delete-Practice-question-button'));

console.log('checking if buttons exist 1', editButton);
expect(editButton).toBeTruthy();
console.log('checking if buttons exist 2',deleteButton);
expect(deleteButton).toBeTruthy();
console.log('checking if buttons exist 3',submittedAnswerButton);
expect(submittedAnswerButton).toBeFalsy(); //THIS HANGS THE TEST RUN!
console.log('checking if buttons exist 4');
expect(createAnswerButton).toBeFalsy();

html из component равно

<div [hidden]= "(this.tabType != this.questionTab)" id="form-div-question">
  <app-question-form [readonlyFormStatus]="!this.isEditing" (questionEmitter)="this.handleQuestionEmitEvent($event)" #questionForm ></app-question-form>
  <button *ngIf="!this.isEditing && this.isCreator"  type="button" id="edit-practice-question-button" class="unselected-button" (click)="this.editQuestion()"> Edit </button>
  <button *ngIf="!this.isEditing && this.isCreator"  type="button" id="delete-practice-question-button" class="unselected-button" (click)="this.deleteQuestion()"> Delete </button>
  <button *ngIf="(!this.isEditing) && (this.submitted_answer.answer.length !== 0)"  type="button" id="submitted-answer-button" class="unselected-button" (click)="this.showLoggedInUserSubmittedAnswerToTheQuestion()"> Your Submitted answer </button>
  <button *ngIf="(!this.isEditing) && (this.submitted_answer.answer.length === 0)"  type="button" id="answer-question-button" class="unselected-button" (click)="this.showAnswerTabAsUserWantsToAnswerQuestion()"> Create your Answer </button>

</div>

<div [hidden]="!(this.tabType == this.answerTab)" id="form-div-answer">
  <app-answer-form [submittedAnswer]="this.submitted_answer" #answerComponent (answerEmitter)="this.handleAnswerSubmission($event)" [questionId]="this.question_id"></app-answer-form>
</div>

Почему?

Answer 1

Я подозреваю, что проблема была в коде fixture.debugElement.query(By.css('#answer-question-button'));, который вел себя странно, потому что у моего html было несколько элементов с одинаковым id. Я реорганизовал код так, чтобы каждый элемент имел уникальный id, и, похоже, проблема решена.