модульное тестирование - Angular 6

Question

Я хочу провести два теста.

1. Убедитесь, что тег h1 содержит текст, т. Е. Не пустой.

2. Проверьте h1тег содержит title-icon /title-icon.

COMPONENT.SPEC.TS

<h1 class="head"><title-icon></title-icon>Confirmation</h1>

COMPONENT.HTML

import {async,ComponentFixture,TestBed} from '@angular/core/testing';
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {ConfirmationDemoComponent} from './confirmation-demo.component';

describe('ConfirmationDemoComponent', () => {
    let component: ConfirmationDemoComponent;
    let fixture: ComponentFixture < ConfirmationDemoComponent > ;
    let compiled;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
                declarations: [ConfirmationDemoComponent],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
            })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ConfirmationDemoComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        compiled = fixture.debugElement.nativeElement;
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    it('-> should render text inside an h1 tag', async(() => {
        expect(compiled.querySelector('h1').textContent).not.toEqual(0);
    }));

    it('-> should render a <title-icon><title-icon> within an h1 tag', async(() => {

    }));
});

Answer 1

Чтобы проверить, существует ли текстовое содержимое внутри h1 тега

it('should render text inside an h1 tag', async(() => {
   // fetch debug element
   let h1El = fixture.debugElement.query(By.css('h1'));
   expect(h1El.nativeElement.textContent).not.toBeNull();
}));

Чтобы проверить, существует ли дочерний тег title-icon внутри h1, вы могли бы таким образом

it('should render a <title-icon><title-icon> within an h1 tag', async(() => {
   // fetch debug element
   let titleEl = fixture.debugElement.query(By.css('h1 title-icon'));
   expect(titleEl.nativeElement).toBeDefined();
}));

Подробнее о DOM тестировании