英文:
How to write unit test case for cellrenderer in ag-grid
问题
<ag-grid-angular
style="width: 100%; height: 100%"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData$ | async"
[animateRows]="true"
[pagination]="true"
[paginationPageSize]="10"
(gridReady)="onGridReady($event)"></ag-grid-angular>
public columnDefs: ColDef[] = [
{
headerName: 'Source Name',
field: 'SourceName',
width: 300,
cellRenderer: function (params: any) {
return (
'<a href="javascript: void(0)" class="noUnderline">' + params.data.SourceName + '</a>'
);
}
},
{
headerName: 'Type',
field: 'Type',
width: 300,
cellRenderer: function (params: any) {
return '<a href="javascript: void(0)" class="noUnderline">' + params.data.Type + '</a>';
}
},
{ headerName: 'Location', field: 'Location', width: 350 },
{ headerName: 'Pipeline', field: 'Pipeline', width: 350 }
]
it('should call the cellrenderer function - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName').cellRenderer as any;
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
}));
The unit test throws an error saying "Object is possibly 'undefined'."
Can someone please help me with the correct test case?
英文:
.html
<ag-grid-angular
style="width: 100%; height: 100%"
class="ag-theme-alpine"
[columnDefs]="columnDefs"
[defaultColDef]="defaultColDef"
[rowData]="rowData$ | async"
[animateRows]="true"
[pagination]="true"
[paginationPageSize]="10"
(gridReady)="onGridReady($event)"></ag-grid-angular>
component.ts
public columnDefs: ColDef[] = [
{
headerName: 'Source Name',
field: 'SourceName',
width: 300,
cellRenderer: function (params: any) {
return (
'<a href="javascript: void(0)" class="noUnderline">' + params.data.SourceName + '</a>'
);
}
},
{
headerName: 'Type',
field: 'Type',
width: 300,
cellRenderer: function (params: any) {
return '<a href="javascript: void(0)" class="noUnderline">' + params.data.Type + '</a>';
}
},
{ headerName: 'Location', field: 'Location', width: 350 },
{ headerName: 'Pipeline', field: 'Pipeline', width: 350 }
]
component.spec.ts
it('should call the cellrenderer function - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName').cellRenderer as any;
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
}));
The unit test throws an error saying "Object is possibly 'undefined'."
Can someone please help me with the correct test case?
答案1
得分: 1
find函数在数组上返回数组的一个项或undefined。如果它找不到该元素，它将返回undefined。
要修复它，您可以使用一个if检查来保护：
it('应该调用cellrenderer函数 - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName');
// 如果找到了（并且不是undefined），进行断言。
if (cellRenderer) {
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
} else {
// 由于找不到cellRenderer，失败单元测试。
fail();
}
}));
英文:
The find function on an array returns an item of the array or undefined. It will return undefined if it doesn't find the element.
To fix it, you could protect with an if check:
it('should call the cellrenderer function - SourceName', fakeAsync(() => {
const cellRenderer = component.columnDefs.find(c => c.field === 'SourceName');
// If it is found (and not undefined), make the assertion.
if (cellRenderer) {
expect(cellRenderer({data: { 'SourceName': 'OPCUA_Site1' }})).toEqual('OPCUA_Site1');
}));
} else {
// fail the unit test since we couldn't find the cellRenderer.
fail();
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论