How can I simulate a callback function that was not tested?

Question

How can I simulate a callback function that was not tested?

Currently experimenting with the method below:

  startScriptLoad(): void {
    const documentDefaultView = this.getDocumentDefaultView();
    if (documentDefaultView) {
      const twitterData: ICourseContentElementEmbedTweetWidgetData = this.getTwitterWidgetData() ?? {
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        ready: () => {},
        _e: [],
      };
      if (this.scriptExists()) {
        ((this.document.defaultView as unknown) as ICourseContentElementEmbedTweetDocument)[
          this.TWITTER_OBJECT
        ] = twitterData;
        return;
      }
      this.appendScriptToDOM();
      twitterData._e = [];
      twitterData.ready = (callback: () => void) => {
        twitterData._e.push(callback);
      };
      ((this.document.defaultView as unknown) as ICourseContentElementEmbedTweetDocument)[
        this.TWITTER_OBJECT
      ] = twitterData;
    }
  }

Testing out the above with the following test scenario:

  describe('startScriptLoad()', () => {
    it('should load script', () => {
      jest.spyOn(service, 'getDocumentDefaultView');
      jest.spyOn(service, 'appendScriptToDOM');
      service.startScriptLoad();
      expect(service.getDocumentDefaultView).toHaveBeenCalled();
      expect(service.appendScriptToDOM).toHaveBeenCalled();
    });
  });

I'm encountering issues getting coverage for these specific lines within startScriptLoad():

  twitterData.ready = (callback: () => void) => {
    twitterData._e.push(callback);
  };

Any suggestions on how to potentially mock the callback method call?

javascript angular typescript unit-testing jestjs

Answer 1

Answer №1

Utilize the power of a Proxy object to create a mocked version of an object, allowing us to intercept and redefine key operations for that object. Specifically, we can use handler.set() to establish a trap for setting the private method ready on the mTwitterData object.

The concept is to assign the anonymous method associated with ready to a variable like _ready. This way, we can call it manually during testing procedures.

service.ts:

export class SomeService {
  getTwitterWidgetData() {
    return {} as any;
  }
  startScriptLoad(): void {
    const twitterData = this.getTwitterWidgetData();
    twitterData._e = [];
    twitterData.ready = (callback: () => void) => {
      twitterData._e.push(callback);
    };
  }
}

service.test.ts:

import { SomeService } from './service';

describe('69041800', () => {
  test('should pass', () => {
    const service = new SomeService();
    let _ready;
    const mTwitterData = new Proxy({} as any, {
      set: (obj, prop, value) => {
        if (prop === 'ready') {
          _ready = value;
        }
        obj[prop] = value;
        return true;
      },
    });
    const getTwitterWidgetDataSpy = jest.spyOn(service, 'getTwitterWidgetData').mockReturnValue(mTwitterData);
    service.startScriptLoad();
    expect(getTwitterWidgetDataSpy).toBeCalledTimes(1);
    // test ready private method
    const mCallback = jest.fn();
    _ready(mCallback);
    expect(mTwitterData._e).toEqual([mCallback]);
    getTwitterWidgetDataSpy.mockRestore();
  });
});

test result:

 PASS  examples/69041800/service.test.ts (9.519 s)
  69041800
    ✓ should pass (4 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |   83.33 |      100 |   66.67 |   83.33 |                   
 service.ts |   83.33 |      100 |   66.67 |   83.33 | 3                 
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.148 s

Answer 2

Utilize the power of a Proxy object to create a mocked version of an object, allowing us to intercept and redefine key operations for that object. Specifically, we can use handler.set() to establish a trap for setting the private method ready on the mTwitterData object.

The concept is to assign the anonymous method associated with ready to a variable like _ready. This way, we can call it manually during testing procedures.

service.ts:

export class SomeService {
  getTwitterWidgetData() {
    return {} as any;
  }
  startScriptLoad(): void {
    const twitterData = this.getTwitterWidgetData();
    twitterData._e = [];
    twitterData.ready = (callback: () => void) => {
      twitterData._e.push(callback);
    };
  }
}

service.test.ts:

import { SomeService } from './service';

describe('69041800', () => {
  test('should pass', () => {
    const service = new SomeService();
    let _ready;
    const mTwitterData = new Proxy({} as any, {
      set: (obj, prop, value) => {
        if (prop === 'ready') {
          _ready = value;
        }
        obj[prop] = value;
        return true;
      },
    });
    const getTwitterWidgetDataSpy = jest.spyOn(service, 'getTwitterWidgetData').mockReturnValue(mTwitterData);
    service.startScriptLoad();
    expect(getTwitterWidgetDataSpy).toBeCalledTimes(1);
    // test ready private method
    const mCallback = jest.fn();
    _ready(mCallback);
    expect(mTwitterData._e).toEqual([mCallback]);
    getTwitterWidgetDataSpy.mockRestore();
  });
});

test result:

 PASS  examples/69041800/service.test.ts (9.519 s)
  69041800
    ✓ should pass (4 ms)

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
------------|---------|----------|---------|---------|-------------------
All files   |   83.33 |      100 |   66.67 |   83.33 |                   
 service.ts |   83.33 |      100 |   66.67 |   83.33 | 3                 
------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        10.148 s

How can I simulate a callback function that was not tested?

Answer №1

Similar questions

Include draggable functionality to a seating chart that is generated dynamically

Exploring the functionalities of bootstrapFactory with DartAngular 5

Failure to trigger Ajax callback function

Exploring and extracting values from nested arrays of objects in JavaScript and React

Testing the signin component using jest and react testing library: A step-by-step guide

Verifying the visibility status of a div and toggling a class based on it

The request body is not defined within the Express controller

Having trouble integrating CKEditor into a React Typescript project

What is the correct way to utilize Array.reduce with Typescript?

What is the method used by three.js to render video with spherical UV mapping?

Create distinct projects for WebApi and Angular to keep them separate

JavaScript getting overshadowed by other JavaScript libraries

Passing $index variable from a bootstrap modal window does not work in AngularJS

What is the most effective method in React JS to achieve real-time results with every keystroke by making REST calls to the server?

Is there a way to transform an Array or Object into a new Object mapping?

What options do I have for personalizing event listeners in d3.js?

When I submit a form with an empty date input field, the Datepicker is sending a 0000-00-00 date

What are the best methods for preserving paint color when changing wheel styles, and vice versa?

Using CSS and JavaScript to hide a div element

The most effective method for transforming an array into an object in JavaScript using a prefixed value as the key