Блог

Я пытаюсь получить элементы внутри ng-шаблона, которые видны по условию, но это не работает, и я получаю ошибку «Ожидаемое значение false равно true».

 <ng-template #staticDataTemplate>
  <div class="static-data-container">
    Static field goes here...
    <button class="edit-button" (click)="showEditableData()">Edit</button>
  </div>
</ng-template>

<ng-template #editableDataTemplate>
  <div class="editable-data-container">
    editable form goes here...
  </div>
</ng-template>

  <ng-container *ngIf="!editing">
    <ng-container *ngTemplateOutlet="staticDataTemplate"></ng-container>
  </ng-container>
  <ng-container *ngIf="editing">
    <ng-container *ngTemplateOutlet="editableDataTemplate"></ng-container>
  </ng-container>
 

И мой компонент.ts похож на

 showEditableData(){
  this.editable = true;
}
 

И мой компонент.spec.ts

  it('should enable editing form', fakeAsync(() => {

    const queryStaticContainer = fixture.debugElement.query(By.css('.static-data-container'));
    const isStaticContainerShown = () => !!queryStaticContainer();

    const queryEditableContainer = fixture.debugElement.query(By.css('.editable-data-container'));
    const isEditableContainerShown = () => !!queryEditableContainer();

    expect(isStaticContainerShown()).toEqual(true);
    expect(isEditableContainerShown()).toEqual(false);
    fixture.detectChanges();

    const buttonEdit = fixture.debugElement.query(By.css('.edit-button'));
    buttonEdit.triggerEventHandler('click', null);

    fixture.detectChanges();
    fixture.whenStable();

    expect(isEditableContainerShown()).toEqual(true); //here where the error shown
    expect(component.editing).toBeTrue();
  }));
 

По-видимому, триггер кнопки не сработал, поэтому шаблон не виден в dom, так как я могу сделать шаблон видимым?

Вы можете попробовать позвонить fixture.debugElement.query(By.css('.editable-data-container'))
после нажатия кнопки, а не до

Я бы также сделал нажатие кнопки и fixture.detectChanges() в блоке beforeEach перед блоком it.

Вы также можете console.log(fixture.nativeElement.innerHTML), чтобы точно видеть, что отображается.