{"id":3898,"date":"2020-08-05T14:53:45","date_gmt":"2020-08-05T14:53:45","guid":{"rendered":"https:\/\/codethataint.com\/blog\/?p=3898"},"modified":"2020-08-05T15:25:34","modified_gmt":"2020-08-05T15:25:34","slug":"mocking-dependent-objects-in-jasmine","status":"publish","type":"post","link":"https:\/\/codethataint.com\/blog\/mocking-dependent-objects-in-jasmine\/","title":{"rendered":"Mocking Dependent Objects in Jasmine"},"content":{"rendered":"

Mocking Dependency Injection Objects<\/strong>
\nThere may be times where the service would be injected into the component using constructor by DI. In such a case while creating a component instance for test class we could end up with a problem. To answer this we pass mock objects as alternate to constructors<\/p>\n

add.employee.component.ts<\/strong><\/p>\n

\r\nexport class EmployeeComponent implements OnInit {\r\n .\r\n .\r\n  constructor(private objEmpserviceService : EmpserviceService) {\r\n  }\r\n\r\n  checkForAuthentication(): string {\r\n    if(this.objEmpserviceService.authenticateEmp('Admin')){\r\n      return "You are allowed to Edit";\r\n    }\r\n    return "You are Not allowed to Edit";\r\n  }\r\n .\r\n .\r\n<\/pre>\n
Two Methods to Answer this Problem<\/strong>
\nMethod 1<\/strong> : If you are not going to call the mockedObject methods <\/p>\n
To address this the injected object using dependency injection we use providers. Providers provide mockedobject to constructor instead of real object like below <\/p>\n
add.employee.component.spec.ts<\/strong><\/p>\n
\r\nlet mockEmpserviceService:EmpserviceService;\r\n\r\nbeforeEach(async(() => {\r\n    mockEmpserviceService = jasmine.createSpyObj(['authenticateEmp', 'addEmployee', 'deleteEmployee']); \r\n\r\n    TestBed.configureTestingModule({\r\n      .\r\n      declarations: [ EmployeeComponent ],\r\n      providers : [ \r\n                   {provide:EmpserviceService, useValue:mockEmpserviceService}\r\n                  ]\r\n      .\r\n      .\r\n    }).compileComponents();\r\n  }));\r\n<\/pre>\n<\/li>\n
  • Now in the above code we have mocked the service using mockEmpserviceService and providing a list of methods. But the returnType is still missing. So this could be used only to check if the actual method under test is called without using callThrough which in turn calls the method in mockedObject.\n
    \r\n .\r\n it('Check for Service Method', ()=>{\r\n    spyOn(component, 'checkForAuthentication');\r\n   \r\n    let auth = component.checkForAuthentication();\r\n    (or)\r\n    const btnAddEmp = fixture.debugElement.query(By.css("#btnAddEmp"));\r\n    btnAddEmp.triggerEventHandler('click', {});\r\n    fixture.detectChanges();\r\n     \r\n    expect(auth).toHaveCalled();\r\n });\r\n .\r\n<\/pre>\n
    Method 2<\/strong> : If you are going to call the mocked object methods then in such case the return type of the method should be defined.The same code can be done using actual EmpserviceService in provider and using spyOn inside its block to define the returnType of service method. <\/p>\n
    \r\nlet empService: EmpserviceService;\r\n\r\nbeforeEach(async(() => {\r\n    TestBed.configureTestingModule({\r\n      declarations: [ EmployeeComponent],\r\n      providers : [ EmpserviceService],\r\n      imports: [HttpClientTestingModule]\r\n    })\r\n    .compileComponents();\r\n\r\n    empService = Testbed.inject(EmpserviceService);\r\n  }));\r\n\r\n  fit('Check for Service Method', ()=>{  \r\n    \/\/Mocking authenticateEmp to return true as if it is called    \r\n    spyOn(empService, 'authenticateEmp').withArgs('Admin').and.returnValue(true);      \r\n    spyOn(component, 'checkForAuthentication').and.callThrough();\r\n    let auth = component.checkForAuthentication();\r\n    expect(auth).toBe('You are allowed to Edit');\r\n  })\r\n<\/pre>\n
    In the above code, checkForAuthentication calls authenticateEmp in empService since it does callThrough. <\/p>\n
    Note:<\/strong>Even now the control doesnt goes through empService. It would be called and returnvalue would be sent back.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Mocking Dependency Injection Objects There may be times where the service would be injected into the component using constructor by DI. In such a case while creating a component instance for test class we could end up with a problem. To answer this we pass mock objects as alternate to constructors add.employee.component.ts export class EmployeeComponent… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[321],"tags":[],"class_list":["post-3898","post","type-post","status-publish","format-standard","hentry","category-mocking"],"_links":{"self":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/comments?post=3898"}],"version-history":[{"count":5,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3898\/revisions"}],"predecessor-version":[{"id":3908,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/posts\/3898\/revisions\/3908"}],"wp:attachment":[{"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/media?parent=3898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/categories?post=3898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codethataint.com\/blog\/wp-json\/wp\/v2\/tags?post=3898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}