JEST Mocks

A test mock is an object that looks and behaves like its release intended counterpart but is actually a simplified version that reduces the complexity and facilitates testing.

Trying to test such an interconnected code base is difficult without test mocks. The only option you are left with is to recreate the entire object graph in the test, which may not be a feasible task if the number of classes is too high.

The following are some examples:

The first case belongs to the WmusercontrolComponent class, in a unit test where a mock is implemented for the isCustomControl function that belongs to the ControlComponent class, this method is outside the class we are testing so it is replaced by an implementation that simulates its real functionality but in a simpler way facilitating the test and avoiding dependencies.

it('WmusercontrolComponent should call isCustomControl on ngAfterViewInit', () => {
    //Arrange
    const spy1 = jest.spyOn(component as any, 'isCustomControl').mockImplementation(() => {
      return true;
    });

    //Act
    component.ngAfterViewInit();

    //Assert
    expect(spy1).toHaveBeenCalled();
    expect(component.model.Visible).toBeTruthy();
  });

The second case belongs to the C1TrueDBGridComponent class. To avoid the use of external classes to simulate the response of an API, you can use a mock for the WebMapService fetch function where you declare the response that the case needs to be tested. Also if there is a case where you need to make several queries with the fetch function but you need different answers, JEST allows you to do this by using mockReturnValueOnce.

it('C1TrueDBGridComponent should update groups", () => (
//Arrange
webMapService.fetch = jest.fn(() =>
of([{'field': 'col1'}])
);
component.model.RefreshGroups = true;
const spy1 = jest.spyOn(component, 'setGroupableSettings');

//Act
component.detectChanges();
component.ngDoCheck();

//Assert
expect(spy1).toHaveBeenCalled();
expect(component.refreshGroups).toBeFalsy();
expect(component.groupedColumsInternal).toEqual([{'field': 'col1'}]);

});


As with the FakeTimers it is important to remember at the end of the tests to clear, restore or reset the mocks depending on what is needed for the tests, for this purpose JEST offers the functions clearAllMocks, resetAllMocks and restoreAllMocks... All this information can be consulted in the official documentation of JEST Jest Mocks.

In case of doubts about how to perform any process you can consult the official documentation of JEST, Mock Functions or Manual Mocks.