Ionic framework 如何添加用于检查离子标题、离子内容和Karma/Jasmine的规范？

我正在使用Karma/Jasmine对Ionic2进行单元测试。 如何为离子标题和离子内容编写规范？它是否与我为h4标签编写的规范类似

我们可以制作用于测试的自定义模拟吗？ homePage.html

 <ion-header>
      <ion-navbar>
        <ion-title>
          Ionic Blank
        </ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      The world is your oyster.
      <p>
        If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
      </p>
      <h4>Testing</h4>
    </ion-content>

离子空白
世界就是你的牡蛎。

如果你迷路了，那条路将是你的向导。

测试

homePage.spec.ts

import { async, TestBed, ComponentFixture } from "@angular/core/testing";
import { HomePage } from "./home";
import { IonicModule, NavController } from "ionic-angular";
import { DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";

describe('HomePage', () => {

    let fixture: ComponentFixture<HomePage>;
    let comp: HomePage;
    let de: DebugElement;
    let el: HTMLElement;

    beforeEach(async(() => {
        TestBed.configureTestingModule({

            declarations: [HomePage],
            imports: [
                IonicModule.forRoot(HomePage)
            ],
            providers: [
                NavController
            ]

        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(HomePage);
        comp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('h4'));
        el = de.nativeElement;
    });

    it('initializes', () => {
        expect(fixture).toBeTruthy();
        expect(comp).toBeDefined();
    });

    it('checks for the h4 element in the DOM', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain('Testing');
    });

    it('checks the ion-title', ()=>{
        //how to write a test case for checking ion-title,
          ion-content?
    });
});

import{async，TestBed，ComponentFixture}来自“@angular/core/testing”；
从“/home”导入{HomePage}；
从“离子角度”导入{IonicModule，NavController}；
从“@angular/core”导入{DebugElement}；
从“@angular/platform browser”导入{By}”；
描述（'主页'，（）=>{
let夹具：组件夹具；
让comp：主页；
设de:DebugElement；
让el:HTMLElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[主页]，
进口：[
IonicModule.forRoot（主页）
],
供应商：[
导航控制器
]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（主页）；
comp=夹具。组件状态；
de=fixture.debugElement.query（By.css（'h4'）；
el=自然元素；
});
它（'初始化'，（）=>{
expect（fixture.toBeTruthy（）；
期望（comp.toBeDefined（）；
});
它（'检查DOM中的h4元素'，（）=>{
fixture.detectChanges（）；
expect（el.textContent）.toContain（'Testing'）；
});
它（'检查离子标题'，（）=>{
//如何编写用于检查ion标题的测试用例，
离子含量？
});
});

您需要声明另一个调试元素—例如，将其称为“title”

在beforeach函数中，可以在那里使用它，但要更改By.css（“.toolbar title”）中的参数，可以通过检查Chrome Dev Tools中的元素来找到

写一个类似于检查标题是否与内容匹配的断言…例如“Ionic Blank”

describe('HomePage', () => { 

   let fixture: ComponentFixture<HomePage>;
   let comp: HomePage;
   let de: DebugElement;
   let title: DebugElement;
   let el: HTMLElement;


   beforeEach(async(() => {
      TestBed.configureTestingModule({

    declarations: [HomePage],
    imports: [
        IonicModule.forRoot(HomePage)
    ],
    providers: [
        NavController
    ]

    }).compileComponents();
    }));

    beforeEach(() => {
         fixture = TestBed.createComponent(HomePage);
         comp = fixture.componentInstance;
         de = fixture.debugElement.query(By.css('h4'));
         title = fixture.debugElement.query(By.css('.toolbar-title'));
         el = de.nativeElement;
    });

    it('initializes', () => {
        expect(fixture).toBeTruthy();
        expect(comp).toBeDefined();
    });

    it('checks for the h4 element in the DOM', () => {
        fixture.detectChanges();
        expect(el.textContent).toContain('Testing');
    });

    it('checks the ion-title', ()=>{
       fixture.detectChanges();
       const _title = title.nativeElement;
       expect(_title.innerText).toMatch(/ionic/i,
       '<div class="toolbar-title"> should say something about "Ionic"');
    });
});

description（'主页'，（）=>{
let夹具：组件夹具；
让comp：主页；
设de:DebugElement；
let标题：DebugElement；
让el:HTMLElement；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[主页]，
进口：[
IonicModule.forRoot（主页）
],
供应商：[
导航控制器
]
}).compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（主页）；
comp=夹具。组件状态；
de=fixture.debugElement.query（By.css（'h4'）；
title=fixture.debugElement.query（By.css（'.toolbar title'）；
el=自然元素；
});
它（'初始化'，（）=>{
expect（fixture.toBeTruthy（）；
期望（comp.toBeDefined（）；
});
它（'检查DOM中的h4元素'，（）=>{
fixture.detectChanges（）；
expect（el.textContent）.toContain（'Testing'）；
});
它（'检查离子标题'，（）=>{
fixture.detectChanges（）；
const_title=title.nativeElement；
expect（_title.innerText）.toMatch（/ionic/i，
'应该说一些关于“离子”的东西'）；
});
});