how to write a mock data for getting the value from service in angular

Question

i have a customer details like customerName i have to use that in 2 pages so am using getter and setter in service file, i set the customerName in service(component 1) and getting it in where ever need (component 2) facing error while writing test case (component 2) for getting the value (in component 2)

i have tried like below

const customerSpy = jasmine.createSpyObj('customerService', ['getCustomerName', 'setCustomerName']); it('should tests save customer name function', () => { customerSpy.setCustomerName('xxx'); - I have tried to adding like this let response = { 'response': 'success' }; customerSpy.saveCustomerName.and.returnValue(of(response)); fixture.detectChanges(); component.saveCustomerName(); });

Spec file:

const customerSpy = jasmine.createSpyObj('customerService', ['getCustomerName', 'setCustomerName', 'saveCustomerName']); it('should tests save customer name function', () => { let response = { 'response': 'success' }; customerSpy.saveCustomerName.and.returnValue(of(response)); fixture.detectChanges(); component.saveCustomerName(); });

component code:

component 1:

public dummyFunc(){ this.customerService.setCustomerName('xxx'); }

component 2:

public saveCustomerName() { let name = this.customerService.getCustomerName(); this.customerService.saveCustomerName(name).subscribe( (success) => { }, (fail) => { } ); }

while Running the testcase for component 2 i should get the customer name in component 2 to pass it to the mockservice

Awesome ! Yeah, I think can help you with that. Let me know the question url, I'll try to answer. Feel free to upvote my answer as well. Here is series of articles which can help you more to write better karma test cases. :) — Shashank Vivek
– Shashank Vivek, Commented Aug 15, 2019 at 10:36

Shashank Vivek · Accepted Answer · 2019-07-18 06:16:17Z

You dont need to worry about component1 when you are testing component2.You can isolate it for below function as :

public saveCustomerName() { this.showSpinner = true; let name = this.customerService.getCustomerName(); this.customerService.saveCustomerName(name).subscribe( (success) => { this.showSpinner = false; // or something similar variable assignment. }, (fail) => { } ); }

and in spec file:

it('should set customer name on calling function "saveCustomerName()"', () => { spyOn(component.customerService,'getCustomerName').and.returnValue('testName'); spyOn(component.customerService,'saveCustomerName').and.returnValue(of('saved')); component.showSpinner = true; component.saveCustomerName(); expect(component.customerService.getCustomerName).toHaveBeenCalled(); expect(component.customerService.saveCustomerName).toHaveBeenCalledWith('testName); expect(component.showSpinner).toBeFalsy(); });

Collectives™ on Stack Overflow

how to write a mock data for getting the value from service in angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related