unit testing - Angular 6

Issue

I am looking to make two tests.

1. Check that the h1 tag contains text i.e. is not empty.

2. Check the h1 tag contains 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(() => {

    }));
});

Solution

To check if text content exists within h1 tag

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

To check if child tag title-icon exists inside h1, you could this way

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

Read more about DOM testing

Answered By - Amit Chigadani