Как написать примеры модульных тестов в угловых, чтобы проверить, присутствуют ли несколько меток на моей HTML-странице?

Question

Я довольно новичок в angular и только начал работать над написанием кейсов в Angular. Для начала я просто хочу проверить, есть ли на моей странице определенные ярлыки с определенным текстом.

<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');
  });

Тогда он не проходит второй тест и показывает это ...

Ожидаемые «Комментарии» будут содержать «Город».

Я тоже пробовал это, но результаты были такими же

it('should render   in an anchor tag', () => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.query(By.css('label')).nativeElement.innerText;
    expect(compiled).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');