How to add a specs for checking ion-title, ion-content with Karma/Jasmine?

Question

I am performing unit testing on Ionic2, using Karma/Jasmine. How to write specs for ion-title and ion-content?Will it be similar to how I wrote for h4 tag?

And can we make the custom mocks for using in the test? 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?
    });
});

score 0 · Answer 1 · answered Apr 06 '18 at 00:34

You need to declare another debug element - call it 'title' for example
In the beforeEach function make it available there, but change the arg in the By.css('.toolbar-title') - this can be found by inspecting on the element in Chrome Dev Tools

Write a similar assertion to the checking that the title is matches the content...for example '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"');
    });
});

How to add a specs for checking ion-title, ion-content with Karma/Jasmine?

1 Answers1