单元测试 - 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 测试的更多信息