Проверить функцию, вызванную в * ngFor и FormGroup в Angular?

Question

Я пытаюсь выполнить модульное тестирование приложения Angular, но у меня возникли некоторые проблемы с переменными внутри компонентов.

Здесь у меня есть *ngFor и FormGroup и каждое из них вызывает проблему, когда я запускаю тест, второй выдает мне эту ошибку: Cannot read property '0' of undefined, первый также выдает мне ту же ошибку, но только если я определяю component.parentProps.activeStepIndexSkills как 0, если я прохожу к нему любое другое значение сверх 0 я получу: Cannot read property 'textContent' of null.

мой тестовый скрипт (я тестирую 'function onGoToStep':

describe('ListEditComponent', () => {
  let component: ListEditComponent;
  let fixture: ComponentFixture<ListEditComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [ ListEditComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(ListEditComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create list edit', () => {
    expect(component).toBeTruthy();
  });

  it('function onGoToStep', fakeAsync(() => {
    const i = 1
    component.parentProps =  { applicationsData: [''], editMode: 1,  activeStepIndexSkills: i}
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement
    expect(compiled.querySelector('.teste').textContent).toContain('teste');

  }))

});

Это пример мой шаблон:

<ng-container *ngIf="parentProps" >
  <div *ngIf="parentProps.editMode === 1" >
    <br />
    <form class="detalhes-container">
      <ng-container *ngFor="let info of parentProps.applicationsData; let i = index; trackBy: trackByFn">
        <!--Test container-->
        <ng-container *ngIf="i === parentProps.activeStepIndexSkills">
          <p id="teste" >teste</p>
        </ng-container>
        <!---->
        <div
          class="detalhes-bloco"
          *ngIf="parentProps.activeStepIndexSkills === i"
          [formGroup]="parentProps.masterFormEdit[i]"
        >
          <div
            class="detalhes-conhecimento-container"
            formGroupName="conhecimento"
          >
          <!-- <p class="teste" >teste</p> -->
          </div>
        </div>
      </ng-container>
    </form>
   </div>
</ng-container>

Как видно, у меня есть test container до тега FormGroup и p после него, оба для целей тестирования. Я понял, что если я заменю i для целого числа и установите component.parentProps.activeStepIndexSkills с тем же значением в моем файле spe c .ts. Я могу добраться до элемента p внутри test container, что заставило меня подумать, что я не смог получить элемент потому что i не существует внутри теста, но я не знаю, как это исправить. Я пытался издеваться над v например, i с использованием component, но это не работает. Итак, верна ли моя теория? Если это так, как я могу это исправить?

Но, как я уже сказал, у меня также есть вторая проблема с parentProps.masterFormEdit[i], которая возвращает Cannot read property '0' of undefined, в этом случае я не мог сказать, является ли проблема с i или с masterForm, потому что я пытался решить проблему одновременно, но, поскольку я здесь, я считаю, что стоит попытаться получить ответ и на это.

Существует одна вещь, которая сделала меня еще более запутанным, у меня есть другой компонент, очень похожий на этот вопрос, и я не получаю ни одной из этих ошибок.

<div *ngIf="parentProps" class="detalhes-container">
  <div *ngFor="let info of parentProps.applicationsData; let i = index; trackBy: trackByFn">
    <ng-container *ngIf="i === parentProps.activeStepIndexSkills">
      <div class="detalhes-bloco">
        <thead class="detalhes-conhecimento-header">
          <th>Tecnologia</th>
          <th>Nível</th>
        </thead>
        <div class="detalhes-icons">
          <p class="modo-edicao-icon" *ngIf="parentProps.editMode === 1">MODO EDIÇÃO</p>
          <i class="material-icons edit-btn" (click)="onEdit()">edit</i>
        </div>
      </div>
    </ng-container>
  </div>
</div>

spe c .ts:

it('function onEdit', fakeAsync(() => {
    component.parentProps =  { applicationsData: [''], activeStepIndexSkills: 0 }
    fixture.detectChanges();

    spyOn(component, 'onEdit');

    let button = fixture.debugElement.nativeElement.querySelector('.edit-btn');
    button.click();
    tick();
    expect(component.onEdit).toHaveBeenCalled();

  }))

Как видите, у меня также есть *ngFor и *ngIf с использованием i, и он отлично работает.