docs(testing): improve standalone testing documentation - #31313
docs(testing): improve standalone testing documentation#31313Zac-Smucker-Bryan wants to merge 1 commit into
Conversation
Add context about using exported `componentOnReady` helper to make tests more accurate for custom-element builds.
|
@Zac-Smucker-Bryan is attempting to deploy a commit to the Ionic Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
thetaPC
left a comment
There was a problem hiding this comment.
Thanks for picking this up, the Angular section is solid. The React and Vue sections are that same section copied across though, and the facts don't carry over (no /standalone route in either test app, no IonicModule outside Angular), so please verify guidance against each framework's own source before duplicating it. Suggestions left inline.
|
|
||
| If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. | ||
|
|
||
| ### Testing Standalone Ionic Components |
There was a problem hiding this comment.
| ### Testing Standalone Ionic Components | |
| ### Testing Ionic Components |
| Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. | ||
|
|
||
| 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. |
There was a problem hiding this comment.
Rewritten to describe how components actually load in the React test apps, with the componentOnReady guidance kept as a note for if we add unit tests later.
| Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. | |
| 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. | |
| `@ionic/react` imports every component through `defineCustomElement` from `@ionic/core/components`, so every test runs against the custom elements build. | |
| These test apps are Cypress only, and Cypress retries assertions until they pass, so there is nothing to wait on manually today. If we add unit tests that assert against rendered DOM, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. That method does not exist on custom elements, so the direct call throws. The helper waits one animation frame instead, giving the component's inner contents a chance to render. |
|
|
||
| If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y. | ||
|
|
||
| ### Testing Standalone Ionic Components |
There was a problem hiding this comment.
| ### Testing Standalone Ionic Components | |
| ### Testing Ionic Components |
|
|
||
| ### Testing Standalone Ionic Components | ||
|
|
||
| Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. |
There was a problem hiding this comment.
| Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation. | |
| `@ionic/vue` imports every component through `defineCustomElement` from `@ionic/core/components`, so every test runs against the custom elements build. | |
| These test apps are Cypress only, and Cypress retries assertions until they pass, so there is nothing to wait on manually today. If we add unit tests that assert against rendered DOM, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. That method does not exist on custom elements, so the direct call throws. The helper waits one animation frame instead, giving the component's inner contents a chance to render. |
Issue number: resolves #31312
What is the current behavior?
Current docs don't provide recommended testing guidance for accurately testing standalone components. This can create issues because a standalone (custom-elements) build doesn't expose
el.componentOnReady(), so any test that reads fixture.nativeElement before hydration in a standalone project has the potential to not be testing what they think they are.What is the new behavior?
componentOnReadyhelper from@ionic/corein Angular'stesting.mdfiletesting.mdfiles for React and VueDoes this introduce a breaking change?