Testing Ionic Applications

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from 'ionic-angular';
import { MyComponent } from './my-component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyComponent],
      imports: [IonicModule.forRoot()]
    }).compileComponents();
  });

  it(&#x27;should create&#x27;, () => {
    expect(component).toBeTruthy();
  });
});

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from 'ionic-angular';
import { MyButtonComponent } from './my-button.component';

describe('MyButtonComponent', () => {
  let component: MyButtonComponent;
  let fixture: ComponentFixture<MyButtonComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MyButtonComponent],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(MyButtonComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it(&#x27;should create&#x27;, () => {
    expect(component).toBeTruthy();
  });

  it(&#x27;should emit click event&#x27;, () => {
    spyOn(component.clickEvent, &#x27;emit&#x27;);
    component.onClick();
    expect(component.clickEvent.emit).toHaveBeenCalled();
  });
});

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';

describe('MyComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [MyService]
    });
  });

  it('should fetch data', () => {
    const service = TestBed.inject(MyService);
    const httpSpy = spyOn(service.http, 'get').and.returnValue(of({ data: 'mocked' }));
    service.fetchData().subscribe(res => {
      expect(res).toEqual({ data: 'mocked' });
    });
  });
});

import { Storage } from '@ionic/storage-angular';

const mockStorage = {
  get: jest.fn(),
  set: jest.fn()
};

describe('MyComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        { provide: Storage, useValue: mockStorage }
      ]
    });
  });

  it('should use mocked storage', () => {
    const service = TestBed.inject(MyService);
    mockStorage.get.mockResolvedValue('mockedValue');
    service.getData().then(res => {
      expect(res).toBe('mockedValue');
    });
  });
});

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';

describe('MyApp', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyApp],
      imports: [
        IonicModule.forRoot(MyApp),
        RouterTestingModule
      ]
    });
  });

  it('should navigate to home page', () => {
    const fixture = TestBed.createComponent(MyApp);
    const app = fixture.debugElement.componentInstance;
    app.nav.push(HomePage);
    expect(app.nav.getActive().component).toBe(HomePage);
  });
});

import { test, expect } from '@playwright/test';

test('should display welcome message', async ({ page }) => {
  await page.goto('/');
  const heading = page.locator('h1');
  await expect(heading).toHaveText('Welcome to Ionic!');
});

describe('Ionic App E2E Tests', () => {
  it('should show welcome message', () => {
    cy.visit('/');
    cy.get('h1').contains('Welcome to Ionic!');
  });
});

import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

it('should handle tap on button', () => {
  const fixture = TestBed.createComponent(MyComponent);
  const button = fixture.debugElement.query(By.css('ion-button'));
  button.triggerEventHandler('click', null);
  fixture.detectChanges();
  expect(component.buttonClicked).toBeTrue();
});

it('should handle scroll event', () => {
  const fixture = TestBed.createComponent(MyScrollComponent);
  const scrollElement = fixture.debugElement.query(By.css('.scroll-container'));
  const scrollEvent = new UIEvent('scroll');
  scrollElement.triggerEventHandler('scroll', scrollEvent);
  fixture.detectChanges();
  expect(component.scrollPosition).toBe(100);
});

// percy.config.js
module.exports = {
  snapshot: {
    widths: [375, 768, 1024],
    minHeight: 1024
  },
  upload: {
    asset: {
      ignore: ['**/node_modules/**']
    }
  }
}

import { Platform } from '@ionic/angular';

describe('Platform-specific logic', () => {
  let platform: Platform;

  beforeEach(() => {
    platform = new Platform();
  });

  it('should run web logic on web platform', () => {
    spyOn(platform, 'is').and.returnValue(false);
    // Test web-specific logic here
  });

  it('should run mobile logic on mobile platform', () => {
    spyOn(platform, 'is').and.returnValue(true);
    // Test mobile-specific logic here
  });
});

npm run test

{
  "scripts": {
    "test": "jest --coverage"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{ts,js}",
      "!src/**/*.d.ts"
    ]
  }
}