Я использую 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.
}
}
Вопросы:
- I я не могу понять правильный поток управления в ag-grid, как console.log в gridSizeChanged () вызывается 2 раза, я не знаю причину, почему и когда.
- В конструкторе gridOptions часть console.log ('initiate ...') не вызывается.
- Я выполняю модульное тестирование для этого компонента и хотел проверить, вызван ли 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 не вызывается. Как это возможно?