It’s because of @Component({ providers: [FundingPlanService] <=== }) The @Component.providers takes precedence over any global providers, since using the @Component.providers makes the provider scoped only to the component. In the test, Angular creates the mocked service in the module scope and the original service in the component scope. To solve this problem, Angular provides the … Read more
For testing we now create a testing module using TestBed. We can use the TestBed#configureTestingModule and pass a metadata object to it the same way we would pass to @NgModule beforeEach(() => { TestBed.configureTestingModule({ imports: [ /* modules to import */ ], providers: [ /* add providers */ ], declarations: [ /* components, directives, and … Read more
You need to cast. Because of the multi-platform strategy, they didn’t specify a specific type for nativeElement: (myComponentFixture.nativeElement as HTMLElement)….
I had the same problem recently. It was caused by a call to router.navigate inside the ngOnInit method of a component. The test was trying to create the component, but inside ngOnInit it was attempting to navigate away from the component (because certain conditions were not met). In my case, I am importing the RouterTestingModule … Read more
tl;dr In almost all cases, they can be used interchangeably, but using fakeAsync()/tick() combo is preferred unless you need to make an XHR call, in which case you MUST use async()/whenStable() combo, as fakeAsync() does not support XHR calls. For the most part they can be used interchangeably. I can’t think of anything off the … Read more
Because of the DI in your pipe, you need to configure a test environment (test bed) to resolve the dependency: import { BrowserModule, DomSanitizer } from ‘@angular/platform-browser’; import { inject, TestBed } from ‘@angular/core/testing’; describe(‘SanitiseHtmlPipe’, () => { beforeEach(() => { TestBed .configureTestingModule({ imports: [ BrowserModule ] }); }); it(‘create an instance’, inject([DomSanitizer], (domSanitizer: DomSanitizer) … Read more
Guess I’m a little late to the party, However this may be useful to some one in the future. There have been a few changes to testing since RC 5 of angular has been released. However the main issue over here is ngOnChanges is not called when inputs are set programmatically. See this for more … Read more
Assuming you have a service that has a method that returns an observable, say class SomeService { getData(): Observable<Data> {} } You could…. Create a spy1 where you return an object with a noop subscribe function. let mockSomeService = { getData: () => {} } TestBed.configureTestingModule({ providers: [ { provide: SomeService, useValue: mockSomeService } ] … Read more
I could mock the router and make my own navigate function, but then what’s the point of RouterTestingModule? Perhaps you even want to check that navigation worked. There’s no real point. If his is just a unit test for the auth guard, then just mock and spy on the mock to check that it’s navigate … Read more
You can simply mock Observable throw error object like Observable.throw({status: 404})and test error block of observable. const xService = fixture.debugElement.injector.get(SomeService); const mockCall = spyOn(xService, ‘method’).and.returnValue(Observable.throw({status: 404})); Update 2019 : Since some people are lazy to read comment let me put this here : It’s a best practice to use errors for Rxjs import { throwError … Read more