diff --git a/docs/angular/testing.md b/docs/angular/testing.md index 1278551b0b9..5d2cb402e82 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -178,6 +178,47 @@ describe('PayrolService', () => { }); ``` +### Import `componentOnReady` for standalone projects + +When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests. See an example here: + +```tsx +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { axe, toHaveNoViolations } from 'jasmine-axe'; +import { componentOnReady } from '@ionic/core'; + +import { Component } from './component'; + +describe('Component', () => { + let component: Component; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [Component], + }).compileComponents(); + + fixture = TestBed.createComponent(Component); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should pass accessibility test', async () => { + const el = fixture.nativeElement.querySelector('ion-button'); + + await new Promise((resolve) => { + componentOnReady(el, () => resolve()); + }); + + jasmine.addMatchers(toHaveNoViolations); + + const a11y = await axe(fixture.nativeElement); + + expect(a11y).toHaveNoViolations(); + }); +}); +``` + #### Testing HTTP Data Services Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide. diff --git a/docs/react/testing/unit-testing/best-practices.md b/docs/react/testing/unit-testing/best-practices.md index ce1562d391f..8991f5f3b28 100644 --- a/docs/react/testing/unit-testing/best-practices.md +++ b/docs/react/testing/unit-testing/best-practices.md @@ -49,3 +49,7 @@ test('example', async () => { ``` For more information on `user-event`, see the [user-event documentation](https://testing-library.com/docs/user-event/intro/). + +## Import `componentOnReady` for standalone projects + +When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests. diff --git a/docs/vue/testing.md b/docs/vue/testing.md new file mode 100644 index 00000000000..d259a4a029d --- /dev/null +++ b/docs/vue/testing.md @@ -0,0 +1,25 @@ +--- +title: Testing +--- + + + Vue Unit and End-to-End Testing for Ionic App Components + + + +# Testing Ionic Vue + +This document provides an overview of how to test an application built with `@ionic/vue`. It covers the basics of testing with Vue, as well as the specific tools and libraries developers can use to test their applications. + +## Introduction + +Testing is an important part of the development process, and it helps to ensure that an application is working as intended. + +## Best Practices + +### Import `componentOnReady` for standalone projects + +When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests.