How to add correct mock logic for angular ionic capacitor plugins on jasmine unit-tests

Question

What I need?

• test, if on mobile devices Capacitor App Plugin call removeAllListeners() function.

What I have in my App Component:

  ngOnDestroy(): void {
    if (Capacitor.isNativePlatform()) {
      App.removeAllListeners();
    }

    this.destroy$.next();
    this.destroy$.complete();
  }

What I do on my unit-test

following this steps from https://capacitorjs.com/docs/guides/mocking-plugins i created mock folder and added functions which I use in my AppComponent

then I try to implement the tests:

describe('test ngOnDestroy', () => {
    beforeEach(fakeAsync(() => {
      spyOn(App, 'removeAllListeners');

      (App.removeAllListeners as any).and.returnValue(Promise.resolve());

      fixture.detectChanges();
      fixture.whenStable();
    }));

    it('should call App.removeAllListeners on mobile app', fakeAsync(() => {
      spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);

      component.ngOnDestroy();

      fixture.detectChanges();
      fixture.whenStable();

      expect(Capacitor.isNativePlatform()).toBeTrue();
      // throw an error:
      // > Error: Expected spy removeAllListeners to have been called once. It was called 0 times.
      // expect(App.removeAllListeners).toHaveBeenCalledTimes(1);

      expect(App.removeAllListeners).toHaveBeenCalled();
    }));

    it('should not call App.removeAllListeners on web app', fakeAsync(() => {
      spyOn(Capacitor, 'isNativePlatform').and.returnValue(false);

      component.ngOnDestroy();

      fixture.detectChanges();
      fixture.whenStable();

      expect(Capacitor.isNativePlatform()).toBeFalse();
      expect(App.removeAllListeners).not.toHaveBeenCalled();
    }));
  });

the errors in logs

Error: Expected spy removeAllListeners to have been called.
        at <Jasmine>
        at UserContext.apply (src/app/app.component.spec.ts:120:38)
        at UserContext.fakeAsyncFn (node_modules/zone.js/dist/zone-testing.js:2046:34)
        at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:400:1)

Update:

the second test was successful!

Can anyone give me a right direction, how it should be tested correctly?

Thank you!

Answer 1

For the first test case to work, you need to create an App.ts mock file and spyOn on "removeAllListeners" function.

Example:

App.ts

export const App = {
 async removeAllListeners(): Promise<any> {}
}

and now in spec file

it('', fakeAsync(() => {
 spyOn(App, 'removeAllListeners');
 spyOn(Capacitor, 'isNativePlatform').and.returnValue(true);

 component.ngOnDestroy();
 flushMicrotasks();
 expect(App.removeAllListeners).toHaveBeenCalled();
}))

You can find the documentation of creating mocks for capacitor plugin here