I am looking to test how a component handles this.activatedRoute.paramMap in my tests, without resorting to mocking the ActivatedRoute (using RouterTestingModule with no spies or mocks).
Check out this stackblitz example, where I have set up a simple component that listens for the id route parameter:
@Component({ /* ... */})
export class RoutingExamplesComponent {
constructor(private readonly route: ActivatedRoute, /* ... */) {}
readonly param$ = this.route.paramMap.pipe(map(params => params.get('id') ?? '<none>'));
// ...
}
In my testing scenario, I want to configure the route and ensure that the parameter gets propagated correctly:
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
RoutingExamplesModule,
RouterTestingModule.withRoutes([
{
path: "route/:id",
component: RoutingExamplesComponent
}
])
]
});
fixture = TestBed.createComponent(RoutingExamplesComponent);
component = fixture.componentInstance;
router = TestBed.get(Router);
});
it("receives initial setup", async () => {
fixture.detectChanges();
await router.navigate(["route", "1234"]);
fixture.detectChanges();
expect(fixture.nativeElement.querySelector("p").textContent).toContain(
"1234"
);
});
However, it seems like the parameter is not being properly propagated as the test fails:
Expected '<none>' to contain '1234'.
Error: Expected '<none>' to contain '1234'. at <Jasmine> at UserContext.eval (https://angular-routing-playground-routing-test.stackblitz.io/~/app/routing-examples/routing-examples.component.spec.ts:31:80)
Is there a way to ensure that the parameter is correctly passed without any form of router mocking?
Additional information about the context of my query: Many responses on forums recommend mocking the router for testing purposes, but I strongly believe that avoiding such actions is crucial. Although I have successfully tested against RouterTestingModule overall, the issue arises when dealing with the paramMap specific to the sub router.