Я надеюсь, что у всех в 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-button')); 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>
Почему?