Angular e2e - должен отображать заголовок в теге h1

Question

Я разрабатываю свой собственный сайт. Я новичок в Angular и, основываясь только на обучающих и онлайн-постах, я начал разработку своего сайта. Во время выполнения тестов я столкнулся с ошибкой при получении значения тега h1.

Я разработал маршруты. Один из маршрутов, которые загружает AppComponent, - это HomeComponent, в котором доступен тег h1.

В файле app.component.spec.ts ниже не удалось получить значение h1.

it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to jc-web!');});

Может кто-нибудь предложить, как я могу получить значение h1 из HomeComponent в приведенном выше коде?

Ценю твою помощь.

Answer 1

Чтобы получить доступ к значению h1 внутри HomeComponent, которое вложено в AppComponent, вам нужно либо предоставить фактический HomeComponent в свой TestBed:

TestBed.configureTestingModule({
    declarations: [
        AppComponent,
        HomeComponent
    ]
});

или предоставьте версию для вашего теста. Если вы решите предоставить фактический компонент, вы также должны включить все его зависимости. Более подробное объяснение о том, как тестировать вложенные компоненты в документации Angular здесь.

Answer 2

Вам просто нужно добавить следующий код в файл app.component.ts.

заголовок = 'заголовок';

      it(`should have as title 'the title'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('the title');

});

Это в файле app.component.spec.ts

      export class AppComponent {
title = ‘the title’ ;
}

Это в файле app.component.ts

Answer 3

Вам просто нужно добавить следующий код в файл app.component.ts.

заголовок = 'заголовок';

app.component.spec.ts app.component.ts

Вам нужно внести изменения в 2 файла, и код будет работать нормально.