How can I lure an Angular 2 route?

Question

I have the following code ...

export class LoginComponent { userName: string; password: string; rememberMe: boolean = false; constructor( private auth: AuthenticationService, private router: Router) { ... } ... } 

I am trying Unit test but my first attempt failed ....

 beforeEach(() => { router = new Router(); component = new LoginComponent(authService, router); }); 

Because he needs parameters for the Router constructor. Here I saw ...

 beforeEach(() => addProviders([ APP_ROUTER_PROVIDERS, // must be first {provide: APP_BASE_HREF, useValue: '/'}, // must be second {provide: ActivatedRoute, useClass: Mock}, {provide: Router, useClass: Mock} ])); 

But I don't seem to have APP_ROUTER_PROVIDERS or Mock anywhere in my dependencies, so I think it might be deprecated (or I need the dependencies).

How am I mocking this? It doesn’t even matter for the test I'm working on.

Answer 1

For a simple case, you can simply create your own layout and provide it by value, for example:

 describe('whatever', () => { let mockRouter: any; ... beforeEach(async(() => { // create your own mock mockRouter = jasmine.createSpyObj('Router', ['navigate']); ... TestBed.configureTestingModule({ declarations: [LoginComponent], providers: [ // provide it by value { provide: Router, useValue: mockRouter }, ... ], }).compileComponents(); })); ... }); 

For this, injection of the dependency of the test layer is used, and not an attempt to " new -up" the tested class.

For an example in context, see, for example, one of my projects on GitHub .

Answer 2

I accepted the above answer because it seems to be correct, however I actually implemented it differently ...

 describe("Login Component", () => { let component: LoginComponent; let authService: AuthenticationService; let router: Router; describe("Testing the subscription happens", () => { beforeEach(() => { TestBed.configureTestingModule({imports: [RouterTestingModule]}); router = TestBed.get(Router); authService = new AuthenticationService(); authService.notifications = new Subject(); authService.notifications.subscribe = jasmine.createSpy("SpyToTestNotifications"); }); it("Make sure we try to subscribe to the auth event", () => { component = new LoginComponent(authService, router); expect(authService.notifications.subscribe).toHaveBeenCalled(); }) }); }); 

As you can see, this only requires 2 lines in beforeEach ...

 TestBed.configureTestingModule({imports: [RouterTestingModule]}); router = TestBed.get(Router); 

However, for @jonrsharpe it does a lot of things, so you cannot guarantee what other side effects may occur. But it’s fast, it’s dirty and it seems that it “works”

Answer 3

The following is a working example of loading query string parameters for each test. Powered by Angular 2.3.

  beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ MyViewerComponent, ... ], imports: [ HttpModule, FormsModule, RouterModule, ... ], providers: [ {provide: ActivatedRoute, useValue: {queryParams: {test: 111}}}, {provide: MyService, useClass: MyMockService} ] }) .compileComponents(); }));