ag-Grid：我如何对 ICellRendererAngularComp 进行单元测试

Posted 2023-03-28

【中文标题】ag-Grid：我如何对 ICellRendererAngularComp 进行单元测试

【英文标题】：ag-Grid: How can I Unit test ICellRendererAngularComp

【发布时间】：2021-12-17 11:33:23

【问题描述】：

我创建了一个自定义控件，它通过一组操作从 ag-grid 实现 ICellRendererAngularComp 并将其注入到我的 ag-grid 主组件中，但我不确定如何为自定义控件编写测试模拟params 我们是否有任何需要导入的预定义类或模块

以下是我的代码块

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);
  

以下是我尝试过的测试

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');
  );
);

在最后一次测试中，我不确定如何模拟 this.params.clicked(this.params.data);

【参考方案1】：

您可以为params 附加一个模拟函数。

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

然后断言clicked函数是否以这种方式被调用。不言自明..

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);
);