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，则测试用例可能如下所示：

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，它有两个测试用例，每个元素状态一个。

span标签的测试用例

1 个答案: