[SOLVED] How to write unit test case of ag agrid cellRenderer with return value in angular

How to write unit test case of ag agrid cellRenderer with return value in angular

TS:

columnDefs = [
 { headerName: 'columnone', field: 'one', width: 120, sortable: true, 
   cellRenderer: (data) => {
        return this.limitCommonUtil.numberFormatter(data?.data?.upperAmount);
 }
    },
    { headerName: 'columntwo', field: 'two', width: 120, sortable: true,
      cellRenderer: (data) => {
        return this.limitCommonUtil.dateFormatterDDMMMYYYY(data?.data?.startDate);
      }]

HTML:

<ag-grid-angular
            [rowData]="(dataStream)"
            [columnDefs]="columnDefs"
            class="side-panels-container-grid"
            [gridOptions]="gridOptionsDefault"
            (selectionChanged)="onSelectionChanged()">
        </ag-grid-angular>

how to write unit test case for columndefs in jasmine and karma? am not able to cover cellRendered return function. Getting error as below.

Error: Cannot read properties of undefined (reading 'data') thrown

Solution

Have you mocked the data for the grid properly in your test? If you're only interested in unit testing the cellRenderer itself you can:

const cellRenderer = component.columnDefs.find(c => c.headerName === 'columnone').cellRenderer as any;
expect(cellRenderer({data: { upperAmount: 10 }})).toEqual('Whatever is expected');