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

Answer 1

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();
});