Тестовые случаи для тега span

Question

Я хочу написать несколько тестов для класса <span>, который присутствует внутри <div>.Я попытался с некоторыми возможностями, но не мог понять это.Не удалось получить приведенный ниже тестовый пример.

sample.component.html:

<div *ngIf="element.status == 'Pending'" class="status-pending">
  <span class="part-status">Pending</span>
</div>
<div *ngIf="element.status == 'Approved'" class="status-pending">
  <span class="part-status">Approved</span>
</div>

sample.spec.ts file:

it('should have following status of Inspection',()=>{
  fixture.detectChanges();
  let debugTest = fixture.debugElement.queryAll(By.css('.part-status')); 
  let elementTest = debugTest[0].nativeElement;
  //let elementTest1 = debugTest[1].nativeElement;
  const content = elementTest.textContent;
  console.log(content ); // In console i am getting empty [].
  expect(content).toContain('Pending');
  //expect(content).toContain('Approved');
});

Может ли кто-нибудь помочь мне решить эту проблему?

Answer 1

В зависимости от element.status элемент DOM, к которому вы пытаетесь получить доступ, может фактически быть недоступен, что является наиболее вероятной причиной ошибки здесь.Кроме того, я бы изменил способ доступа к элементам DOM, просто перейдите по fixture.nativeElement.querySelector, мне кажется, это всегда работает без проблем.

Предполагая, что element.status имеет значение Pending, тестcase может выглядеть следующим образом:

it('check pending state', () => {
  let pendingDiv = fixture.nativeElement.querySelector('.status-pending');
  expect(pendingDiv).toBeTruthy();

  let pendingSpan = pendingDiv.querySelector('.part-status');
  expect(pendingSpan).toBeTruthy();
  expect(pendingSpan.textContent).toBe('Pending');            
});

Посмотрите на этот stackblitz , он имеет два теста, по одному для каждого состояния элемента.