Skip to content

docs: add dedicated router testing guide #62445

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.

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
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

bencodezen
Copy link
Contributor

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.dev application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Adds a dedicated testing guide for router.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@angular-robot angular-robot bot added the area: docs Related to the documentation label Jul 2, 2025
@ngbot ngbot bot added this to the Backlog milestone Jul 2, 2025
@bencodezen bencodezen requested a review from atscott July 2, 2025 21:15
Copy link

github-actions bot commented Jul 2, 2025

Deployed adev-preview for 3a59419 to: https://ng-dev-previews-fw--pr-angular-angular-62445-adev-prev-na7fzsww.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

Copy link
Member

@JeanMeche JeanMeche left a comment

Choose a reason for hiding this comment

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

Thanks for working on this, I droped some drive-by comments.

@bencodezen bencodezen force-pushed the docs/router-testing-guide branch from 37e39c7 to 16782c4 Compare July 10, 2025 19:28
@bencodezen bencodezen added the action: review The PR is still awaiting reviews from at least one requested reviewer label Jul 10, 2025
@bencodezen bencodezen requested a review from atscott July 10, 2025 19:29
@bencodezen bencodezen changed the title docs: add draft dedicated router testing guide docs: add dedicated router testing guide Jul 10, 2025
@bencodezen bencodezen marked this pull request as ready for review July 10, 2025 19:29
@bencodezen bencodezen force-pushed the docs/router-testing-guide branch from 16782c4 to 9bbcadd Compare July 10, 2025 19:30
@bencodezen bencodezen force-pushed the docs/router-testing-guide branch 2 times, most recently from 91d05d4 to 83634f9 Compare July 14, 2025 18:51
@bencodezen bencodezen requested a review from atscott July 14, 2025 18:52
@bencodezen bencodezen force-pushed the docs/router-testing-guide branch from 83634f9 to 3b2f36e Compare July 15, 2025 18:28
@bencodezen bencodezen requested a review from JeanMeche July 15, 2025 18:28
@atscott
Copy link
Contributor

atscott commented Jul 15, 2025

/gemini review

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request adds a new guide for testing routing and navigation in Angular applications. The guide covers route parameters, guards, router outlets, nested routes, and query parameters. It also includes best practices for router testing.

@bencodezen bencodezen force-pushed the docs/router-testing-guide branch from 3b2f36e to 3a59419 Compare July 28, 2025 14:17
@bencodezen bencodezen requested review from atscott and JeanMeche July 28, 2025 14:17
Comment on lines +60 to +64
userId: string | null;

constructor() {
this.userId = this.route.snapshot.paramMap.get('id');
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
userId: string | null;
constructor() {
this.userId = this.route.snapshot.paramMap.get('id');
}
userId = this.route.snapshot.paramMap.get('id');

const instance = await harness.navigateByUrl('/user/123', UserProfile);

expect(instance.userId).toBe('123');
expect(TestBed.inject(Router).url).toBe('/user/123');
Copy link
Contributor

Choose a reason for hiding this comment

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

This is testing Angular instead of the component stuff itself. Still don't know if we should keep it or not. It would be better if this tested the template (DOM) with the result instead of the typescript part .

Copy link
Contributor

@atscott atscott Jul 28, 2025

Choose a reason for hiding this comment

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

This is the correct way to write the tests. It is not simply "testing Angular", but testing the component's interaction with Angular and that the outcomes are correct. In addition, the Angular Router code is not static. If there's a breaking change in the router, intentional or not, your tests should catch it.

Edit: My apologies, I actually didn't look at the test here and thought this was testing something else (a guard). I agree that it would probably be better to test the template in this case since it's not testing anything in the application that causes or affects a navigation (in which case, the above would have applied)


it('allows navigation when user is authenticated', async () => {
await setup(true);
await harness.navigateByUrl('/protected');
Copy link
Contributor

Choose a reason for hiding this comment

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

Here we can pass the component that we expect to load, and the test will fail with the guard doesnt allow the route to be activated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: review The PR is still awaiting reviews from at least one requested reviewer adev: preview area: docs Related to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy