Angular 4+，ag-grid：实现 AgRendererComponent 的单元测试 Angular 组件答案

【问题标题】：Angular 4+ , ag-grid: Unit test angular component that implements AgRendererComponentAngular 4+，ag-grid：实现 AgRendererComponent 的单元测试 Angular 组件
【发布时间】：2018-05-01 16:07:10
【问题描述】：

我有一个角度组件，它为 ag-grid 中的一列实现 AgRendererComponent。

我想为下面的组件编写单元测试。有人可以指导我完成。这可能看起来是一个非常简单的组件，但我稍后可能会添加更多逻辑。我使用 ag-grid - 13.0.0 和 angular - 4.4+

如果有任何语法错误，请忽略。

@Component({
  selector: 'grid-column',
  template: `<span class="hyperlink"><a href="#">{{ columnValue }}</a></span>`
})

export class GridColumnComponent implements AgRendererComponent  {

 private params: any;
 columnValue: string;

 constructor() { }

 refresh(params: any) {
    this.params = params;
 }
 agInit(params:any):void {
    this.params = params;
    this.columnValue = this.params.node.data.columnValue;
 }
}

【问题讨论】：

标签： angular unit-testing ag-grid angular-components

【解决方案1】：

测试这个组件与测试任何其他组件应该没有区别，即使它实现了 AgRendererComponent。

  beforeEach(() => {
    fixture = TestBed.createComponent(GridColumnComponent);
    component = fixture.componentInstance;
//this might be the only tricky part, where to initialize the params object of Aggrid
    component.agInit({
      context: TestBed.createComponent(YourParentComponent).componentInstance,
      data: { otherdata :"tomock"},
      node: { data : "moreDataToMock"}

    });
    fixture.detectChanges();
  });

【讨论】：