Code coverage for arrow functions inside an object in Karma

Question

I am writing a unit test for one of my applications in which the specifications are passed. But after seeing the code coverage, some parts do not seem to be covered as shown below:

this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
      ...gridColumns,
    ];

In which the valueGetter, CheckboxSelection are not covered

Component File:

export class ListComponent implements OnInit, OnDestroy {
  columnDefs: DeviceColumns[];
  defaultColumnDefs: any;
  gridApi: any;
  columnApi: any;

  constructor() {}

  ngOnInit() {
    this.initializeColumns();
  }

  initializeColumns() {
    this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
    ];
    this.columnDefs.forEach((columnDef) => {
      columnDef.floatingFilter = this.hasFloatingFilter;
    });
    this.columnDefs = map(this.columnDefs, (columnDef) => {
      return extend({}, columnDef, { headerValueGetter: this.localizeHeader.bind(this) });
    });
  }

  getId(args: any): any {
    return (
      this.pagination.per_page * this.pagination.prev_page + parseInt(args.node.rowIndex, 10) + 1
    );
  }

  OnGridReady(params) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}

I need help for performing code coverage for these arrow functions.

Answer 1

You can get the valueGetter , checkboxSelection and headerCheckboxSelection from columnDefs property of the component. Then, test them as usual.

Eg using angular v11+

list.component.ts :

import { OnInit, Component } from '@angular/core';

type DeviceColumns = any;

@Component({
  selector: 'app-list',
  template: 'list component',
})
export class ListComponent implements OnInit {
  columnDefs: DeviceColumns[];
  pagination = {
    per_page: 10,
    prev_page: 1,
  };
  defaultColumnDefs: any;
  gridApi: any;
  columnApi: any;

  constructor() {}

  ngOnInit() {
    this.initializeColumns();
  }

  initializeColumns() {
    this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
    ];
  }
  getId(args: any): any {
    console.log(this, args);
    return (
      this.pagination.per_page * this.pagination.prev_page +
      parseInt(args.node.rowIndex, 10) +
      1
    );
  }
}

list.component.spec.ts :

import { ListComponent } from './list.component';
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';

fdescribe('65438592', () => {
  let fixture: ComponentFixture<ListComponent>;
  let component: ListComponent;
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ListComponent],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(ListComponent);
          component = fixture.componentInstance;
        });
    })
  );

  it('should checkbox selection', () => {
    fixture.detectChanges();
    const { checkboxSelection } = component.columnDefs[0];
    const columnApiSpy = jasmine.createSpyObj('columnApi', [
      'getRowGroupColumns',
    ]);
    columnApiSpy.getRowGroupColumns.and.returnValue([]);
    const actual = checkboxSelection({ columnApi: columnApiSpy });
    expect(actual).toBeTruthy();
  });

  it('should handle checkbox selection', () => {
    fixture.detectChanges();
    const { headerCheckboxSelection } = component.columnDefs[0];
    const columnApiSpy = jasmine.createSpyObj('columnApi', [
      'getRowGroupColumns',
    ]);
    columnApiSpy.getRowGroupColumns.and.returnValue([]);
    const actual = headerCheckboxSelection({ columnApi: columnApiSpy });
    expect(actual).toBeTruthy();
  });

  it('should get value', () => {
    fixture.detectChanges();
    const { valueGetter } = component.columnDefs[0];
    const getIdSpy = spyOn(component, 'getId').and.returnValue(10);
    const actual = valueGetter({ node: { rowIndex: '0' } });
    expect(actual).toEqual(10);
    expect(getIdSpy).toHaveBeenCalled();
  });
});

unit test result: