ag-Grid: How can I Unit test ICellRendererAngularComp

Question

I have created a custom control which implements ICellRendererAngularComp from ag-grid with a set of actions and injected it into my ag-grid main component, but I'm not sure how can I write my tests for the custom control as to mock the params do we have any predefined class or module which needs to be imported

Following is my code block

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  template: ` <button
    type="button"
    class="btn btn-primary btn-xs"
    title="Copy"
    (click)="triggerAction('copy')"
  >
    <i class="fa fa-copy"></i>
  </button>`
})

export class GridButtonsComponent
  implements ICellRendererAngularComp
{
  public params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(): boolean {
    return false;
  }

  public triggerAction(actionType: string) {
    this.params.data.actionType = actionType; // custom property added
    this.params.clicked(this.params.data);
  }
}

Following is the test that I tried

describe('GridButtonsComponent', () => {
  let component: GridButtonsComponent;
  let fixture: ComponentFixture<GridButtonsComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [GridButtonsComponent]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(GridButtonsComponent);
    component = fixture.componentInstance;
    let params = {
      column: 'status',
      value: 'test-value',
      data: {
        actionType: ''
      }
    };
    component.agInit(params);
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should return false for refresh', () => {
    expect(component.refresh()).toBe(false);
  });

  it('should actionType be as input passed', () => {
    component.triggerAction('edit');
    expect(component.params.data.actionType).toBe('edit');
  });
});

with the last test, I'm not sure how to mock this.params.clicked(this.params.data);

score 2 · Accepted Answer · answered Nov 03 '21 at 06:02

You can have an additional mock function for params.

let params = {
  column: 'status',
  value: 'test-value',
  data: {
    actionType: ''
  },
  clicked: function () { }
};

And then assert whether the clicked function have been called or not in this way. Self explanatory..

it('should actionType be as input passed', () => {
  spyOn(params, 'clicked').and.callThrough();
  component.triggerAction('edit');
  expect(component.params.data.actionType).toBe('edit');
  expect(params.clicked).toHaveBeenCalledWith(params.data);
});

ag-Grid: How can I Unit test ICellRendererAngularComp

1 Answers1