Issue
I’m trying to test if the mock service method is called by method in component.When I used
console.log() inside the method logOut() [Method inside the service] it printed in the console but the
test fails
Method in header.component.ts
onLogOut()
{
this.authenticationService.logOut();
}
File header.component.spec.ts
@Injectable()
class MockAuthService extends AuthenticationService {
user$ = of(new User('R-234', 'Alex', '[email protected]'));
logOut() {
console.log('Logged Out');
}
}
describe(‘HeaderComponent’, () => {
let component: HeaderComponent;
let authService: AuthenticationService;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [HeaderComponent],
imports: [HttpClientTestingModule, RouterTestingModule],
providers: [HttpClient, AuthenticationService, MockAuthService],
}).compileComponents();
TestBed.overrideComponent(HeaderComponent, {
set: {
providers: [
{ provide: AuthenticationService, useClass: MockAuthService },
],
},
});
});
beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
authService = TestBed.get(AuthenticationService);
});
it('should call logOut method once in the service', fakeAsync(() => {
let spy = spyOn(authService, 'logOut').and.callThrough();
component.onLogOut();
expect(spy).toHaveBeenCalledTimes(1);//this fails
}));
});
Solution
Try getting rid of the overrideComponent
, I think that could be causing the issue of getting the proper handle of the AuthenticationService
.
You should directly useClass
in the TestBed
for the mock.
let component: HeaderComponent;
let authService: AuthenticationService;
let fixture: ComponentFixture<HeaderComponent>;
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [HeaderComponent],
imports: [HttpClientTestingModule, RouterTestingModule],
providers: [HttpClient, AuthenticationService,
// add this line
{ provide: AuthenticationService, useClass: MockAuthService }
],
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(HeaderComponent);
component = fixture.componentInstance;
fixture.detectChanges();
authService = TestBed.get(AuthenticationService);
});
it('should call logOut method once in the service', fakeAsync(() => {
let spy = spyOn(authService, 'logOut').and.callThrough();
component.onLogOut();
expect(spy).toHaveBeenCalledTimes(1);//this fails
}));
});