docs: RouterTestingModule should be added to Testing guide

[Splaktar]

📚 Docs or angular.io bug report

Description

The Testing Guide has the following "helpful" alert:

A future guide update will explain how to write such tests with the RouterTestingModule.

This was added as part of PR https://github.com/angular/angular/pull/20697 in 2017. Since this hasn't been addressed yet, I figured it would be a good idea to open an issue to ensure that it gets documented.

There are some minimal RouterTestingModule API docs but they are not sufficient. This is something that really needs to be included in the Testing Guide. Both for Services that cause routing and components.

🔬 Minimal Reproduction

What's the affected URL?**

Guide: https://angular.io/guide/testing#what-good-are-these-tests Source: https://github.com/angular/angular/blame/fe4447d56860c55000bc7424a61462b6de8596e5/aio/content/guide/testing.md#L2250-L2251

[kapunahelewong]

Agreed on the "helpful" note. According to guidelines it's ideal for documentation not to make references to what "should" come in the future. Instead, we're supposed to stick with what we're documenting in the present moment.

Note for docs team: when this becomes a PR, we'll need to remove this note and sweep for any other future-related notes in there.

[ajitsinghkaler]

@kapunahelewong can I take this issue

[kapunahelewong]

Yes, @ajitsinghkaler, thank you!! Please let me know if you need help with any of the issues you've volunteered for. 🌟

[LayZeeDK]

A few references, @ajitsinghkaler:

• Testing routed Angular components with the RouterTestingModule
• Testing Angular routing components with the RouterTestingModule
• Testing Angular route guards with the RouterTestingModule

[LayZeeDK]

The alert seems to be directly related to the preceding paragraph:

A different battery of tests can explore whether the application navigates as expected in the presence of conditions that influence guards such as whether the user is authenticated and authorized.

What's the scope for this issue? Adding a guide for different types of tests using the RouterTestingModule or only integration tests exercising conditions affected by route guards?

[kapunahelewong]

Good questions, @LayZeeDK. These are exactly the kinds of questions we are discussing with in the docs team as we rework a lot of the documentation. Do you have any particular thoughts on the scope and types of example tests that you'd be interested in? If you search for something regarding testing what are the topics that first come to mind? Your use cases would also be interesting to hear. If you or others would like to log your thoughts here in this issue I'd be happy to link to this issue from the Jira as context for the writer.

[LayZeeDK]

Different types of tests involving the RouterTestingModule:

• Testing routed components
• Testing routing components
• Testing route guards
• Testing route resolvers
• Integration testing routed feature modules/standalone routes
• Integration testing routed feature modules/standalone routes with route guards
• Integration testing a routed component with nested routes
• Integration testing a routed component with route resolvers

[LayZeeDK]

I've been intensively looking into this 3 year old issue for the past week: https://github.com/angular/angular/issues/15779

I feel more and more convinced that for the most part we don't need to extend our testing APIs to close it, but rather write a guide covering the types of tests listed above.

[kapunahelewong]

Thank you, @LayZeeDK! I've added this and #15779 to the Jira work item so the writer who works on it can refer back for context.

Docs team: See https://angular-team.atlassian.net/browse/DOCS-784

[Splaktar]

I've been intensively looking into this 3 year old issue for the past week: #15779

I feel more and more convinced that for the most part we don't need to extend our testing APIs to close it, but rather write a guide covering the types of tests listed above.

Yes, the update to the testing guide for routing should include details on how to provide snapshot data for use via ActivatedRoute.snapshot and ActivatedRouteSnapshot. This is discussed in #15779.

@LayZeeDK thank you for helping move this issue forward!

[LayZeeDK]

I'm working on another article on unit and integration testing route guards. The isolated unit tests show that it could be nice to have helpers to create the complex data structures that we need to pass to route guards and route resolvers.

Example solutions 2 and 3 in this comment also show that routing data structure helpers could be useful for testing routed components in both isolated component tests and isolated unit tests.

[LayZeeDK]

Since this issue was started, the testing guide was split into several pieces. The alert in question has moved to https://angular.io/guide/testing-components-scenarios#what-good-are-these-tests

[Mikastark]

Since version 11.2.11, the following warning appeared when using RouterTestingModule :

'DEPRECATED: DI is instantiating a token "MockLocationStrategy" that inherits its @Injectable decorator but does not provide one itself.
This will become an error in a future version of Angular. Please add @Injectable() to the "MockLocationStrategy" class.'

Due to the lack of documentation, impossible to know if I'm doing wrong of if it's an angular issue

@Component({ template: '' })
class StubComponent {}

describe('MainMenuComponent', () => {
  let component: MainMenuComponent;
  let fixture: ComponentFixture<MainMenuComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [MainMenuComponent, StubComponent],
      imports: [
        RouterTestingModule.withRoutes([
          { path: '', component: StubComponent },
        ]),
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MainMenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

[guilhermebentomarques]

'DEPRECATED: DI is instantiating a token "MockLocationStrategy" that inherits its @Injectable decorator but does not provide one itself. This will become an error in a future version of Angular. Please add @Injectable() to the "MockLocationStrategy" class.'

Same here @MikaStark while runing tests.

[albert-asin]

same here after upgrade to angular 12 ;)

[condericson]

Also same here after Angular 12 upgrade. Any update on this?

[aikithoughts]

Hi all! I'm tracking this issue and am working with the product team to see when we can address this in the documentation. I appreciate your patience!

[benpetersen]

If anyone lands here and needs an example to follow, this helped: https://stackoverflow.com/questions/53823091/unable-to-test-routing-using-routertestingmodule

Essentially, we need to add the following because DI no longer instantiates it `import {MockLocationStrategy} from '@angular/common/testing' import { LocationStrategy } from '@angular/common';

{ provide: LocationStrategy, useClass: MockLocationStrategy }`

[Mikastark]

Essentially, we need to add the following because DI no longer instantiates it `import {MockLocationStrategy} from '@angular/common/testing' import { LocationStrategy } from '@angular/common';

{ provide: LocationStrategy, useClass: MockLocationStrategy }`

Is it a normal behavior intended by Angular or an Issue ?

[toureholder]

Updating angular/cli to 12.1.0 solved the WARN: 'DEPRECATED: DI is instantiating a token "MockLocationStrategy" that inherits its @Injectable decorator but does not provide one itself. This will become an error in a future version of Angular. Please add @Injectable() to the "MockLocationStrategy" class.'

[Dinosys]

Funnily enough, the warning is indeed gone in 12.1.0, but back again in 12.1.1 🤔

[Mikastark]

This issue seems to be solved. If someone get it again above version 12.1 you should remove your node_modules and package-lock.json and install again. It worked for me.

[daniel-seitz]

Also happens in 12.2.0. Regardless of documentation (thank you @aikidave though).

As a first step - after having this issue for >1.5years - it would be very welcomed to have an angular-team/product-team approved way to fixing this here. Is it our error and should we do something about it, or is it yours?

{ provide: LocationStrategy, useClass: MockLocationStrategy }

Is adding this the recommended way of fixing this?

Thank you.

[daniel-seitz]

Can anybody reproduce this? Trying hard with a new project with no luck so far..

[yuri1969]

Reporting that using ~12.2.14 this issue is solvable by nuking node_modules.

[LayZeeDK]

We could rewrite parts of the testing guide to include RouterTestingHarness.

[LayZeeDK]

The alert box described in this issue is still present at https://angular.io/guide/testing-components-scenarios#what-good-are-these-tests.

[JeanMeche]

This is not the case anymore.

Also we're looking at deprecating angular.io in favor of https://angular.dev/. Feel free to drop any suggestions for the new doc site, thank you.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}