如何使用 Karma/Jasmine 添加用于检查 ion-title、ion-content 的规范？答案

【问题标题】：How to add a specs for checking ion-title, ion-content with Karma/Jasmine?如何使用 Karma/Jasmine 添加用于检查 ion-title、ion-content 的规范？
【发布时间】：2017-05-24 01:58:55
【问题描述】：

我正在使用 Karma/Jasmine 在 Ionic2 上执行单元测试。如何为 ion-title 和 ion-content 编写规范？会和我为 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?
    });
});

【问题讨论】：

标签： ionic-framework ionic2 karma-jasmine angular2-testing

【解决方案1】：

您需要声明另一个调试元素 - 例如将其称为“标题”
在 beforeEach 函数中使其可用，但更改 By.css('.toolbar-title') 中的 arg - 这可以通过检查 Chrome 开发工具中的元素来找到

写一个类似的断言来检查标题是否匹配内容...例如'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"');
    });
});

【讨论】：