Question

我对angular还是比较陌生，并且刚开始使用angular编写单元测试案例。首先，我只想检查我的页面是否具有带有特定文本的某些标签。

$Now=Get-Date

Get-Childitem C:\Users\Me\Downloads | Where-Object { $_.LastWriteTime –lt 
$Now.AddDays(-5) } | Remove-Item

当我编写第一个测试用例以检查是否有带有“ Comments”的标签时，它工作正常，但是当为两个标签编写了测试用例时。.

<div class="form-group row">
            <label for="staticEmail" class="col-lg-4 col-form-label">Comments</label>
            <div class="col-lg-8">
                <textarea class="form-control h-85"></textarea>
            </div>
</div>
<div class="form-group row">
            <label class="col-lg-4 col-form-label">City</label>
            <div class="col-lg-8">
                <input class="form-control" type="text">
            </div>
</div>

然后第二次测试失败，并显示此内容...

期望“评论”包含“城市”。

我也尝试过，但结果相同

it('should render Comments in a label tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('label').textContent).toContain('Comments');
  });

  it('should render City in a label tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('label').textContent).toContain('City');
  });

Answer 1

querySelector方法根据查询选择它可以找到的第一个元素。我想您正在寻找querySelectorAll：

expect(compiled.querySelectorAll('label')[1].textContent).toContain('City');

如果您只想测试是否包含City的标签，我想这也可以：

const labels = Array.from(compiled.querySelectorAll('label')).map(
  ({ textContent }) => textContent
);
expect(labels).toContain('City');

如何以角度编写单元测试用例以检查HTML页面中是否存在多个标签？

1 个答案: