How to call a fake function in Angular 9 component unit test

Question

I have an angular component containing two methods

class MyComponent {

    constructor() {
     ...
    }

    loadDataSource() {
     ...
    }
    
    runFilter() {
      //some other logic here
      this.loadDataSource();
    }
}

And I have a unit test

describe('running filters', () => {
      beforeEach(() => {
        component.runFilter();
        const spy = jasmine.createSpyObj(['loadDataSource']);
        spy.loadDataSource.and.callFake(function() { });
      });
     
      it('should call load data source', () => {
        expect(component.loadDataSource).toHaveBeenCalled();
      });
 });

However, this seems to still call the actual implementation of loadDataSource when runFilter is called, instead of the empty fake function I provided.

How may I test that loadDataSource method was called when I call runFilter, without actually invoking the actual implementation? The reason for doing so is I do not want any of the logic for loadDataSource invoked.

Answer 1

Try this

 describe('running filters', () => {
          beforeEach(() => {
            spyOn(component, 'loadDataSource').and.callFake();
          });
         
          it('should call load data source', () => {
            component.runFilter();
            expect(component.loadDataSource).toHaveBeenCalled();
          });
     });