Angular - Jest unit testing of method with parameter

Question

I need to unit test the following method which takes one parameter. But I am unable to test.

Component Method:

resetAdd(qa: qaModel) {
    const street = qa.children.find(temp => temp.token === 'street');
    const zip = qa.children.find(temp => temp.token === 'zip');
    const city = qa.children.find(temp => temp.token === 'city');
    this.fGroup.controls[street.pathway].callReset();
    this.fGroup.controls[zip.pathway].callReset();
    this.fGroup.controls[city.pathway].callReset();
}

TestFile:

it('resetAdd Method is called', () => {
  const param1= jest.fn();
  expect(component.resetAdd).toHaveBeenCalledWith(param1);
});

I am not sure what's wrong and also please let me know what else test case I can write.

Answer 1

Here is the unit test solution, you can use jest.spyOn:

By default, jest.spyOn also calls the spied method. This is different behavior from most other test libraries.

That means when you can jest.spyOn to spy on a method of object without custom implementation, the original method of this object will be executed as usual. Beside, there is a spy on the method, so you can use assert of jest to check if it is executed or not. For your case, the method is callReset.

index.ts:

type qaModel = any;

export class SomeComponent {
  private fGroup = {
    controls: {
      street: {
        callReset() {}
      },
      zip: {
        callReset() {}
      },
      city: {
        callReset() {}
      }
    }
  };

  resetAdd(qa: qaModel) {
    const street = qa.children.find(temp => temp.token === 'street');
    const zip = qa.children.find(temp => temp.token === 'zip');
    const city = qa.children.find(temp => temp.token === 'city');
    this.fGroup.controls[street.pathway].callReset();
    this.fGroup.controls[zip.pathway].callReset();
    this.fGroup.controls[city.pathway].callReset();
  }
}

index.spec.ts:

import { SomeComponent } from './';

describe('SomeComponent', () => {
  it('should call resetAdd', () => {
    const comp = new SomeComponent();
    const streetCallResetSpy = jest.spyOn(comp['fGroup']['controls']['street'], 'callReset');
    const zipCallResetSpy = jest.spyOn(comp['fGroup']['controls']['zip'], 'callReset');
    const cityCallResetSpy = jest.spyOn(comp['fGroup']['controls']['city'], 'callReset');
    const qaModel = {
      children: [
        { token: 'street', pathway: 'street' },
        { token: 'zip', pathway: 'zip' },
        { token: 'city', pathway: 'city' }
      ]
    };
    comp.resetAdd(qaModel);
    expect(streetCallResetSpy).toBeCalledTimes(1);
    expect(zipCallResetSpy).toBeCalledTimes(1);
    expect(cityCallResetSpy).toBeCalledTimes(1);
  });
});

Unit test result with 100% coverage:

 PASS  src/stackoverflow/58818402/index.spec.ts
  SomeComponent
    ✓ should call resetAdd (5ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |      100 |      100 |      100 |      100 |                   |
 index.ts |      100 |      100 |      100 |      100 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.612s, estimated 8s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58818402

Answer 2

You are not calling resetAdd method in unit test, still expecting it should have been called.

Steps are :

1. Spy method which you want to be called,
2. call that method

3. then check for to have been called

   it('resetAdd Method is called', () => {
      const param: qaModel =  null // define param of type which is expected. I dont know structure of qaModel, so for example put as null 
      spyOn(component, 'resetAdd') // spy first
      component.resetAdd(param)
      expect(component.resetAdd).toHaveBeenCalledWith(param);});