单元测试 - onGridReady - Angular 中的 Ag-grid 事件

Posted 2023-03-16

【中文标题】单元测试 - onGridReady - Angular 中的 Ag-grid 事件

【英文标题】：Unit testing - onGridReady - Ag-grid event in Angular

【发布时间】：2021-01-15 04:31:54

【问题描述】：

我的组件文件中有一个类似下面的函数，如下所示

onGridReady(params) 
  this.gridApi = params.api;
  this.columnApi = params.columnApi;
  this.gridApi.setDomLayout('autoHeight');
  this.gridApi.sizeColumnsToFit();
  params.api.setRowData(this.deviceConfigurations);

对于上述功能，我正在编写如下规范

describe('#onGridReady()', () => 
    const params = 
      api: new MockGridApi(),
      ColumnApi: new MockColumnApi(),
    ;

    it('call the function', () => 
      spyOn(component, 'onGridReady').and.callThrough();
      component.onGridReady(params);

      expect(component.onGridReady).toHaveBeenCalled();
    );
  );

规范通过以及上述功能的覆盖范围已完成。但我想知道这是正确的方法还是编写规范，或者我是否需要编写更多规范，例如 sizeColumnsToFit() 已被调用等， 任何人都可以发表你的看法。

【问题讨论】：

有一种更好的方法来测试该 ag-grid 事件，它应该在您提供组件时由 grid API 自动调用...

@HDJEMAI 请问我是怎么做到的

初始化你的组件，你必须验证onGridReady()所做的事情是否已经设置。验证所有内容并不容易，但您应该验证与您的应用业务相关的内容，而不是 Ag-grid 特定的行为。

【参考方案1】：

onGridReady() 应该在 ngOnInit() 之后自动调用，所以我的偏好是测试 onGridReady() 正在做什么。

这就是我的做法：

    import waitForAsync from '@angular/core/testing';

    // 1) Add waitForAsync() to my test
    it('should do things onGridReady() is supposed to do', waitForAsync(() => 

        const expectedRowData = [id: 1, dataPoint: 'someDataPoint'];

        // call ngOnInit directly
        component.ngOnInit();
        fixture.detectChanges();

        // wait for the fixture to stabilize
        fixture.whenStable().then(() => 
            console.log(' ==> stable!');
            expect(component.gridOptions.rowData).toEqual(expectedRowData);
            // whatever other tests...
        );

    ));

我的 ts 文件看起来像这样：

    onGridReady(params: any): void 
        console.log('the grid is ready!');
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        this.gridApi.setDomLayout('autoHeight');
        this.gridApi.sizeColumnsToFit();
        this.gridOptions.rowData = this.deviceConfigurations;
    

PS~如果你在 onGridReady() 方法中调用 setRowData，我想你可能会陷入死循环。