[英]How to Unit test the @viewChild ElementRef angular
My component file has the following code我的组件文件有以下代码
@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;
/* if card is available, position point of the card and the cluster is same and 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);
});
}
HTML file HTML 文件
<div #clusterCard>
<pickup-cluster-stop-card
..some code
>
</pickup-cluster-stop-card>
</div>
I want to unit test the highLightTheClusterCard method.我想对 highLightTheClusterCard 方法进行单元测试。 I am getting
我正进入(状态
TypeError: Cannot read property 'pipe' of undefined error properties
TypeError:无法读取未定义错误属性的属性“管道”
and TypeError: Cannot set property 'borderLeft' of undefined at
和 TypeError:无法设置未定义的属性“borderLeft”
Unit test file单元测试文件
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();
});
});
I read this How to mock a nativeElement.focus() in Angular 4 spec file我读了这篇如何在 Angular 4 规范文件中模拟 nativeElement.focus()
but still, I am unable to make it green.但是,我仍然无法将其变为绿色。
MockService(PickupClusterPointsService, {
...more code
positioningPoint$: of(undefined),
}),
Solution: I have added positioningPoint$: of(undefined)
in mock service.解决方案:我在模拟服务中添加了
positioningPoint$: of(undefined)
。 MockService is inside the Provider. MockService 在 Provider 内部。 you can see above lines.
你可以看到上面的行。
describe('highLightTheClusterCard', () => {
it('should expect cluster card to be highlighted when hover over 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 cluster card not to be highlighted when hover out 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');
});
});
You have several issues it seems.你似乎有几个问题。
Your first error你的第一个错误
TypeError: Cannot read property 'pipe' of undefined error properties
TypeError:无法读取未定义错误属性的属性“管道”
come from that you haven't instantiated your pickupClusterPointsService service properly.来自您没有正确实例化您的pickupClusterPointsService 服务。
The second error第二个错误
TypeError: Cannot set property 'borderLeft' of undefined at
TypeError:无法设置未定义的属性“borderLeft”
I'm not sure just yet我还不确定
You have created your spy with "style" as a function of native element您已经使用“样式”创建了您的间谍作为原生元素的 function
jasmine.createSpyObj('nativeElement', ['scrollIntoView', 'style'])
instead of property而不是财产
jasmine.createSpyObj('nativeElement', ['scrollIntoView'], {style: {}])
Therefore TypeError: Cannot set property 'borderLeft' of undefined
is because in card['style'].borderLeft
, card['style']
doesn't exist.因此
TypeError: Cannot set property 'borderLeft' of undefined
是因为在card['style'].borderLeft
中, card['style']
不存在。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.