Skip to content

docs(contributing): improve Angular testing documentation and fix broken contributing link #31250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Zac-Smucker-Bryan wants to merge 4 commits into
base: main
Choose a base branch
from
+9 −5
Open

docs(contributing): improve Angular testing documentation and fix broken contributing link #31250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
df1f79f
docs: fix E2E testing guide link in contributing guide
Zac-Smucker-Bryan Jun 26, 2026
343fe06
docs: add steps to syncing local changes for Angular testing
Zac-Smucker-Bryan Jun 26, 2026
65d773b
docs: apply changes from code review for syncing local changes for An…
Zac-Smucker-Bryan Jul 31, 2026
7676f1b
docs: remove Playwright reference
Zac-Smucker-Bryan Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ npm install file:/~/ionic-vue-router-7.0.1.tgz
3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.

See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.
See [Ionic's E2E testing guide](/core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.

@thetaPC thetaPC Jul 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm unable to reproduce the 404 error when clicking it from the web. What am I missing so I can validate this change?

@Zac-Smucker-Bryan Zac-Smucker-Bryan Jul 31, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screen.Recording.2026-07-30.at.8.06.59.PM.mov

I get this when I am on the contributing tab, under modifying tests: https://github.com/ionic-team/ionic-framework?tab=contributing-ov-file#modifying-tests, and then click "See Ionic's E2E testing guide for more information..." at first it says error loading the page, but then if you do reload/refresh it says "Cannot find a valid ref in core/src/utils/test/playwright/docs/README.md"


##### Screenshot Tests

Expand Down
12 changes: 8 additions & 4 deletions docs/angular/testing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,17 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v

The Angular test app supports syncing your locally built changes for validation. This allows you to test local changes like `core` without having to publish a new version of the package.

> [!TIP]
> In the root directory, run `npm unlink *` to remove any previous links you have built.

1. Build the `core` directory.
2. Navigate to `packages/angular` and run `npm run sync`.
3. Build `packages/angular` using `npm run build`.
4. [Build the Angular test app](#test-app-build-structure).
5. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
6. Install dependencies using `npm install`.
7. Sync your local changes using `npm run sync`.
4. Navigate to `packages/angular-server` and run `npm install && npm run build`.
5. [Build the Angular test app](#test-app-build-structure).
6. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
7. Install dependencies using `npm install`.
8. Sync your local changes using `npm run sync`.

From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).

Expand Down