Модульное тестирование gridSizeChanged ag-grid в Angular 7+ - PullRequest
0 голосов
/ 12 апреля 2020

Я использую ag-grid в Angular 7+.

Ссылка на документацию

Ниже приведен код в машинописном тексте:


@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [rowData]="rowData"
      [modules]="modules"
      [gridOptions]="gridOptions"
      rowHeight="20"
      headerHeight="25"
      [animateRows]="false"
      [pagination]="true"
      [paginationPageSize]="15"
      [defaultColDef]="defaultColDef"
      [suppressRowClickSelection]="true"
      [groupSelectsChildren]="true"
      [debug]="true"
      [rowSelection]="multiple"
      [rowGroupPanelShow]="false"
      [pivotPanelShow]="false"
      [enableRangeSelection]="true"
      (gridSizeChanged)="gridSizeChanged($event)"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;
  public gridOptions:GridOptions;
  public modules: Module[] = AllCommunityModules;
  private columnDefs;
  private defaultColDef;
  private rowData: [];

  constructor() {

      this.gridOptions = <GridOptions>{
        gridSizeChanged: (params) =>{
            this.gridOptions.api.sizeColumnsToFit();
            console.log('initiate ... '+ params.api);
            this.gridApi = params.api;
            this.gridColumnApi = params.columnApi;
        }, 
      rowClass = 'ag-theme-alpine',
      enableBrowserTooltips : true,
      domLayout: 'autoHeight',
      defaultColDef = {
          editable: true,
          enableRowGroup: true,
          enablePivot: true,
          enableValue: true,
          sortable: true,
          resizable: true,
          filter: true
        },
      columnDefs = [
          { headerName:'AGE',field: 'age' },
          { headerName:'COUNTRY',field: 'country' },
          { headerName:'YEAR',field: 'year' }
        ]
    };


  }

  ngOnInit(){
      this.someService.getData().subscribe((data:any) =>{
          this.rowData = data;
      },(err)=>{
          console.error(err);
      })
  }

  gridSizeChanged(params) {
    this.gridOptions.api.sizeColumnsToFit();
    console.log(params);

    var columnAttrs = [];
    if(this.gridColumnApi){
        this.gridColumnApi.getAllColumns().forEach(function(column){
            columnAttr.push(column.colId);
        });
        this.gridColumnApi.autoSizeColumns(columnAttr,true);
    }

    console.log(this.gridColumnApi); // it is logging undefined in the console.

  }
}

Вопросы:

  1. I я не могу понять правильный поток управления в ag-grid, как console.log в gridSizeChanged () вызывается 2 раза, я не знаю причину, почему и когда.
  2. В конструкторе gridOptions часть console.log ('initiate ...') не вызывается.
  3. Я выполняю модульное тестирование для этого компонента и хотел проверить, вызван ли gridSizeChanged.

spe c .ts

describe('App component',() =>{
    let someServiceStub;
    let component: AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    let mockData=[
       {"age":21,"country":"India","year":"1997"},
       {"age":26,"country":"Japan","year":"2007"}
];
    beforeEach(async(() =>{
       someServiceStub = jasmine.createSpyObj(['getData']);
       TestBed.configureTestingModule({
           declarations: [AppComponent],
           imports:[AgGridModule.withComponents([AppComponent])],
           providers:[{provide: someService, useValue: someServiceStub}]
       }) 
       .compileComponents();
    }));

    beforeEach(()=>{
       fixture = TestBed.createComponent(AppComponent);
       component = fixture.componentInstance;
    });

    it('should check gridSizeChanged is called or not',()=>{
       someServiceStub.getData.and.returnValue(of(mockData));
       spyOn(component,'gridSizeChanged');
       fixture.detectChanges();
       expect(component.gridSizeChanged).toHaveBeenCalled(); // shows error
    });
});

Во время работы фактического компонента, как я сказал, gridSizeChanged () вызывается 2 раза, как в журнале params печатается 2 раза с моими ожидаемыми данными. Однако, хотя я шпионю за функцией в тестовом файле, она всегда показывает ошибку, что gridSizeChanged не вызывается. Как это возможно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...