I have a custom cell renderer component which wil convert the text to link. Its all working fine. I am trying to unit test the renderer component. The issue am facing in unit testing is Grid is displaying with link but its not available when I query through native element, I am getting the value as empty other grid values are already present I am able to see it. I think this is to do with the lifecycle of testing or AG Grid rendering. How do I tell the test framework to wait untill the component is rendered?
link renderer component
@Component({
template: '<a [routerLink]="[params.inRouterLink,params.value]" (click)="navigate(params.inRouterLink)"></a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
params: any;
constructor(
private ngZone: NgZone,
private router: Router) { }
agInit(params: any): void {
this.params = params;
}
refresh(params: any): boolean {
return false;
}
}
Test Component:
@Component({
template: `
<ag-grid-angular
style="width: 500px; height: 500px;"
class="custom-theme"
[rowData]="rowData"
[columnDefs]="columnDefs"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
`
})
export class TestCustomComponent {
columnDefs = [
{
headerName: 'Make',
field: 'make',
cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
inRouterLink: '/#'
}
},
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
];
rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxter', price: 72000 }
];
}
Unit Testing
fdescribe('AgnavigatorComponent', () => {
let component: TestCustomComponent;
let fixture: ComponentFixture<TestCustomComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [RouterLinkRendererComponent, TestCustomComponent],
imports: [
RouterTestingModule,
AgGridModule.withComponents([RouterLinkRendererComponent])
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TestCustomComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
const appElement = fixture.nativeElement;
// here the values are empty only for the first column which uses custom renderer.
const cellElements = appElement.querySelectorAll('.ag-cell-value');
});
});
once the test execution completes I can see the column with proper value with href in it.
Aucun commentaire:
Enregistrer un commentaire