测试用例挂在错误的验证上

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 那么测试用例就会挂掉!

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).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 现在看来问题已经解决了。