ag-Grid：如何對ICellRendererAngularComp進行單元測驗-有解無憂

我創建了一個自定義控制元件，它通過一組操作從 ag-grid 實作 ICellRendererAngularComp 并將其注入我的 ag-grid 主要組件，但我不確定如何為自定義控制元件撰寫測驗以模擬該params操作我們有任何需要匯入的預定義類或模塊

以下是我的代碼塊

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

@Component({
  template: ` <button
    type="button"
    
    title="Copy"
    (click)="triggerAction('copy')"
  >
    <i ></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);

uj5u.com熱心網友回復：

您可以為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);
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/346202.html

標籤：有角的农业网格 ag-grid-angular

上一篇：在物體類中創建多個地址欄位

下一篇：如何隨機化（洗牌）一個有角度的Observable？