angulartypescriptjasminekarma-jasmineangular-unit-test

test angular if else block and subscribe(response => {} block in jasmine


I am facing an issue in writing test case on component method.

How to test a Angular component method if else block inside subscribe((res) => { ///block} and ToasterService inside it.

I have called the Angular service method in my component.ts file. within the service call subscribe(response=>{}.

I have validated the response value in if else block, and show toaster message according to result but my karma report says: response=> function not covered and inside if else block not statement not covered.

component.ts

constructor(private userService: UserService,
    private toastr: ToastrService) { }
sortUsers(sortKey: string) {
    this.userService.getSortUserList(sortKey).subscribe((res) => {
      if(res.Success){
        this.userService.users = res.Data as User[];
      }else{
        this.toastr.error(res.Message);
      }
      
    });
  }

component.spec.ts

it('call sortUser when users are sorted', () => {
    const users: User[] = [{
      User_Id: 1,
      First_Name: 'Madhu Ranjan',
      Last_Name: 'Vannia Rajan',
      Employee_Id: 12345,
      Project_Id: 1,
      Task_Id:1,
      _id: 'xcv'
    }];

    component.sortUsers('First_Name');
    const res = {Success: true, Data: users}
    spyOn(service, 'getSortUserList').and.returnValue(of({Success: true, Data: users}));    
  });

expecting the below block also to be tested by jasmine:

subscribe((res) => {
      if(res.Success){
        this.userService.users = res.Data as User[];
      }else{
        this.toastr.error(res.Message);
      }
      
    });

karma report:

Karma report


Solution

  • Try

    constructor(
        public userService: UserService,
        public toastr: ToastrService) { 
    }
    
    

    and in spec file:

    it('call sortUser when users are sorted with success', () => {
        const users: User[] = [{
          User_Id: 1,
          First_Name: 'Madhu Ranjan',
          Last_Name: 'Vannia Rajan',
          Employee_Id: 12345,
          Project_Id: 1,
          Task_Id:1,
          _id: 'xcv'
        }];    
        const res = {Success: true, Data: users}
        spyOn(component.userService, 'getSortUserList').and.returnValue(of(res));  
        spyOn(component.toastr,'error').and.callThrough();
        component.userService.users = undefined;
        component.sortUsers('First_Name');
        expect(component.userService.users).toBeDefined()   
        expect(component.toastr.error).not.toHaveBeenCalled()  
      });
    
    it('call Error Toaster in sortUser() when users are sorted', () => {
        const res = {Message: 'error_msg'}
        spyOn(component.userService, 'getSortUserList').and.returnValue(of(res));  
        spyOn(component.toastr,'error').and.callThrough();
        component.userService.users = undefined;
        component.sortUsers('First_Name');
        expect(component.userService.users).not.toBeDefined()   
        expect(component.toastr.error).toHaveBeenCalledWith('error_msg')  
      });
    

    Since you are new to karama I would strongly suggest you to read this article which contains a collection of articles to handle Angular Unit testing at the bottom page.