Clash Royale CLAN TAG

why Jasmine is not returning fake data?

I have a component that calls a service class to do some operation. The service class uses httpClient to call an eternal api. I am trying to test the component as follows :

beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [SomeService],
}).compileComponents();
service = TestBed.get(SomeService);
}));

fit('should', async () => {
fixture.detectChanges();
const fakeHttpPromise = {
success: function () { }
};
spyOn(service, 'save').and.callFake(function () {
return fakeHttpPromise;
});

const textbox1 = fixture.debugElement.query(By.css('input[formControlName=control1]'));
textbox1.nativeElement.value = 'value';

const textbox2 = fixture.debugElement.query(By.css('input[formControlName=constrol2]'));
textbox2.nativeElement.value = 'value';

// here i Create model object using textbox1 and textbox2 value
// This should not call actual service
component.Save(model);
fixture.detectChanges();



fixture.whenStable().then(() => {
fixture.detectChanges();

expect(service.save).toHaveBeenCalled();
});
});


This is the components Save click :

Save(model: any) {
this.Service.save(model)
.then((res) => {
}
}


Question: why the actual service is called when the spy is returning fake promise? The actual service uses httpclient and I don't want to actually call it but just return a fake promise.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.