I have a component using ag-grid.

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.scss']
})
export class SummaryComponent implements OnInit {
  IsChecked: boolean = false;
  rowData: Array<any>;
  errorMessage: any =  null;
  summaryData: Array<Summary>;
  defaultColWidth: number = 200;
  numberColWidth: number = 120;
  defaultColDef: any;
  innerHeight: any;
  private gridApi;
  gridOptions: GridOptions;
  pivotMode: boolean;
  
  ngOnInit(): void {
    this.pivotMode = false;
    this.gridOptions = this.agGridServ.getDefaultGridOptions();
    
  }
  
  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;    
  }
  
  handleUserSelection(selection) {
    ..
    ..
    this.getSummaryData(requestObject);   
    ..
    ..
    
  }
  getSummaryData(selections: any): void {
    this.summaryData = [];
    this.errorMessage = null;
    this.gridApi.setDomLayout('normal');
    this.summaryService.getSummaryViewData(
       selections
    )
    .subscribe (
    .
    .
    )
  }
}

When I run the test for this method, it fails.

describe('SummaryComponent', () => {

  let spectator: Spectator<SummaryComponent>;

  let selection: any = {
    selectedDateFrom: {year: 2020, month: 5, day: 29},
    selectedDateTo: {year: 2020, month: 6, day: 30},
  }
  
  const createComponent = createComponentFactory({
    component: SummaryComponent,
    declarations: [],
    imports: [HttpClientTestingModule,
              MatSnackBarModule,
              RouterTestingModule,
              AgGridModule.withComponents([])
             ],
    providers: [
      { provide: MatDialog, useClass: MatDialogMock },
    ],
    schemas: [NO_ERRORS_SCHEMA],
    mocks: [BasicAuthService,
            RefdataService,
            SummaryDataService,            
           ],
    detectChanges: false
  });
  
  beforeEach(()=> {
    spectator= createComponent();
    
  });
  
  it('should handle user selection', () => {    
    jest.spyOn(spectator.component.refData, 'getReferenceData').mockReturnValue(of(refDataSample));
    spectator.detectChanges();
    spectator.component.handleUserSelection(selection);
    expect(spectator.component.handleUserSelection).toBeTruthy();
  });
}

Below is the error when I run the test. I tried to use detect changes (assuming gridapi should initailize), but it doesn't help? Can we even skip this line in test? i.e. mock (only the gridapi line)?

 TypeError: Cannot read property 'setDomLayout' of undefined

   560 |     this.expandedState = [];
 > 561 |     this.gridApi.setDomLayout('normal');
       |   

The gridAPi of the component (which is tested) is undefined. How can I fix this?

UPDATE:

Please note that I do not want to test ag grid api, my component (which I am testing) has a method (which I am testing) calling

this.gridApi.setDomLayout('normal');

Which is failing saying gridApi is undefined. I am looking for a way to resolve this error, as my test is no where related to see gridApi work. So I am fine to mock gridApi in test ? How should I do it?

0

There are 0 best solutions below