I am writing a ponent unit tests for my Angular application. I have a currentUser variable i am using in my ponent as well as html template. It is been mocked (hardcoded via ponent.currentUser = {...}) on every test. Anyway, Karma fails. Would appreciate any help.
UserProfileComponent > should create
TypeError: Cannot read property 'id' of null
at UserProfileComponent.ngOnInit (http://localhost:9877/_karma_webpack_/webpack:/src/app/modules/user-profile/page/user-profile/user-profileponent.ts:4:21)
at callHook (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2573:1)
at callHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2542:1)
at executeInitAndCheckHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2493:1)
at refreshView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9481:1)
at renderComponentOrTemplate (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9580:1)
at tickRootContext (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10811:1)
at detectChangesInRootView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10836:1)
at RootViewRef.detectChanges (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22815:1)
at ComponentFixture._tick (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:141:1)
Code example below.
user-profileponent.ts
ngOnInit(): void {
this.currentUser = this.userService.getUser();
console.log(this.currentUser.id);
this.userAnnouncements();
}
user-profileponent.spec.ts
describe('UserProfileComponent', () => {
let ponent: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})pileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
ponent = fixtureponentInstance;
ponent.currentUser = {
id: 1,
email: '[email protected]',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
};
fixture.detectChanges();
});
it('should create', () => {
expect(ponent).toBeTruthy();
});
});
I am writing a ponent unit tests for my Angular application. I have a currentUser variable i am using in my ponent as well as html template. It is been mocked (hardcoded via ponent.currentUser = {...}) on every test. Anyway, Karma fails. Would appreciate any help.
UserProfileComponent > should create
TypeError: Cannot read property 'id' of null
at UserProfileComponent.ngOnInit (http://localhost:9877/_karma_webpack_/webpack:/src/app/modules/user-profile/page/user-profile/user-profile.ponent.ts:4:21)
at callHook (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2573:1)
at callHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2542:1)
at executeInitAndCheckHooks (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2493:1)
at refreshView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9481:1)
at renderComponentOrTemplate (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9580:1)
at tickRootContext (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10811:1)
at detectChangesInRootView (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10836:1)
at RootViewRef.detectChanges (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22815:1)
at ComponentFixture._tick (http://localhost:9877/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:141:1)
Code example below.
user-profile.ponent.ts
ngOnInit(): void {
this.currentUser = this.userService.getUser();
console.log(this.currentUser.id);
this.userAnnouncements();
}
user-profile.ponent.spec.ts
describe('UserProfileComponent', () => {
let ponent: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).pileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
ponent = fixture.ponentInstance;
ponent.currentUser = {
id: 1,
email: '[email protected]',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
};
fixture.detectChanges();
});
it('should create', () => {
expect(ponent).toBeTruthy();
});
});
2 Answers
Reset to default 5Problem is that you have not mocked the data for userService, hence it overrides the value you are setting.
You should mock the service as below:
describe('UserProfileComponent', () => {
let ponent: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
let userService: jasmine.SpyObj<UserService>;
beforeEach(async () => {
const userServiceSpy = jasmine.createSpyObj('UserService', ['getUser']);
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
providers: [ {provide: UserService, useValue: userServiceSpy }],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).pileComponents();
});
beforeEach(() => {
userService = TestBed.inject(UserService) as jasmine.SpyObj<UserService>;
userService.getUser.and.returnValue({
id: 1,
email: '[email protected]',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
});
fixture = TestBed.createComponent(UserProfileComponent);
ponent = fixture.ponentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(ponent).toBeTruthy();
expect(ponent.currentUser.id).toBe(1)
});
});
I would remend you to read the collection of articles to know how to unit test with well defined practice
There is a pretty easy way to fix this issue: You can do the following:
// In your service file, do this:
@Injectable()
class MockUserService extends UserService {
getUser() {
const mockData = {
id: 1,
email: '[email protected]',
firstname: 'admin',
img_name: 'photo',
lastname: 'admin',
location: 1,
password: 'hashed_pass',
role: 'admin',
username: 'admin',
};
return mockData;
}
// You can add more methods your service provides and mock here
}
describe('UserProfileComponent', () => {
let ponent: UserProfileComponent;
let fixture: ComponentFixture<UserProfileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, RouterTestingModule],
declarations: [UserProfileComponent],
providers: [{
provide: UserService,
useClass: MockUserService
}],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).pileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UserProfileComponent);
ponent = fixture.ponentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(ponent).toBeTruthy();
expect(ponent.currentUser.id).toBe(1)
});
it('should run #ngOnInit() method', () => {
spyOn(ponent, 'ngOnInit').and.callThrough();
ponent.ngOnInit();
expect(ponent.ngOnInit).toHaveBeenCalled();
});
});