In my component file, I have the following code snippet
@ViewChild('clusterCard', { static: false }) clusterCard: ElementRef;
highLightTheClusterCard(point: PickupClusterPoint) {
if (point) {
const card: HTMLElement = _get(this.clusterCard, 'nativeElement');
const selectedPoint: PositioningPoint = this.lane.data.selectedPostioningPoint;
/* Check if the card is available, position point of the card and the cluster are the same, and the infowindow over the cluster is open, then highlight the card */
if (card && _isEqual(point.pointData, selectedPoint) && point.openInfoWindow) {
card.scrollIntoView();
card['style'].borderLeft = `5px solid ${this.lane.data.color || 'transparent'}`;
} else {
card['style'].borderLeft = `5px solid transparent`;
}
}
}
ngAfterViewChecked(): void {
...some code
this.pickupClusterPointsService.positioningPoint$
.pipe(skip(1), takeUntil(this.unsubscriber.done))
.subscribe((point: PickupClusterPoint) => {
this.highLightTheClusterCard(point);
});
}
The HTML file for this code snippet looks like:
<div #clusterCard>
<pickup-cluster-stop-card
..some code
>
</pickup-cluster-stop-card>
</div>
I am trying to unit test the highLightTheClusterCard method, but I encounter errors such as "TypeError: Cannot read property 'pipe' of undefined" and "TypeError: Cannot set property 'borderLeft' of undefined."
For the unit test in the test file, I've included:
beforeEach(() => {
...some code
fixture = TestBed.createComponent(RouteLaneComponent);
component = fixture.componentInstance;
....some code
fixture.detectChanges();
});
fdescribe('highLightTheClusterCard', () => {
it('should expect cluster card to be defined ', () => {
// component.clusterCard.nativeElement = new HTMLElement();
component.clusterCard = new ElementRef({ nativeElement: jasmine.createSpyObj('nativeElement', ['scrollIntoView', 'style'])});
component.highLightTheClusterCard({ pointData: new PositioningPoint(), openInfoWindow: true} as PickupClusterPoint);
// expect(component.clusterCard).toBeDefined();
// expect(component.clusterCard.nativeElement.scrollIntoView).toHaveBeenCalled();
});
});
Despite trying different approaches like mocking 'nativeElement.focus()', the test is still failing.
MockService(PickupClusterPointsService, {
...more code
positioningPoint$: of(undefined),
}),
Solution: To resolve the issue, I added positioningPoint$: of(undefined) in the mock service within the Provider section.
describe('highLightTheClusterCard', () => {
it('should expect the cluster card to be highlighted when hovering over the infowindow ', () => {
component.lane.data.selectedPostioningPoint = new PositioningPoint();
component.lane.data.color = '#2196F3';
component.clusterCard = {
nativeElement: jasmine.createSpyObj('nativeElement', ['scrollIntoView', 'style'])
};
component.highLightTheClusterCard({ pointData: new PositioningPoint(), openInfoWindow: true} as PickupClusterPoint);
expect(component.clusterCard).toBeDefined();
expect(component.clusterCard.nativeElement.scrollIntoView).toHaveBeenCalled();
expect(component.clusterCard.nativeElement.style.borderLeft).toBe('5px solid #2196F3');
});
it('should expect the cluster card not to be highlighted when moving away from the infowindow', () => {
component.lane.data.selectedPostioningPoint = new PositioningPoint();
component.clusterCard = {
nativeElement: jasmine.createSpyObj('nativeElement', ['scrollIntoView', 'style'])
};
component.highLightTheClusterCard({ pointData: new PositioningPoint(), openInfoWindow: false} as PickupClusterPoint);
expect(component.clusterCard).toBeDefined();
expect(component.clusterCard.nativeElement.style.borderLeft).toBe('5px solid transparent');
});
});