如何在 Angular 中使用 Jasmine 对 d3 元素进行单元测试？

Question

我正在尝试使用 d3 选择器测试世界图表。

所以我想做的是：

• 使用属性 x 触发鼠标移动事件。
• 测试数据输出是否等于预期结果。

 this.z.selectAll('path')
            .data(this.getMapData())
            .enter()
            .append('path')
            .attr('d', this.mapPath)
            .attr('id', (x: any) => `${this.mapId}-${x.properties.id}`)
            .attr('class', 'country')
            .on('mousemove', (x: any) => {
                console.log('test:', x.properties.id, x) // TODO: to be deleted
                d3.selectAll('.country').classed('country-on', false);
                d3Select(`#${this.mapId}-${x.properties.id}`).classed('country-on', true);
 
                if (this.data.countries[x.properties.id]) {
                    d3Select(`#${this.mapId} .tooltip`).classed('visible', true);
                    const toolTipWidth = this.tooltip._groups[0][0].clientWidth;
                    const toolTipHeight = this.tooltip._groups[0][0].clientHeight;
                    const mapSvgHeight = this.mapSvg._groups[0][0].clientHeight;
                    const positionY = d3Event.layerY;
                    const positionX = d3Event.layerX;
                    const leftPosition = positionX - 30 > toolTipWidth ?
                        `${positionX - toolTipWidth - 30}px` : `${positionX + 20}px`;
 
                    const topPosition = positionY < toolTipHeight ?
                        `${positionY + 10}px` : (positionY + toolTipHeight) > mapSvgHeight ?
                            `${positionY - toolTipHeight}px` : `${positionY - 28}px`;
 
                    this.tooltip
                        .html(
                            `${this.data.countries[x.properties.id].description}<br>
                            <span>${this.data.countries[x.properties.id].formatted || ''}</span><br>
                            <span>
                            ${this.data.countries[x.properties.id].details?.map(obj=>obj.label+':').filter(item =>item)[0] || ''}
    )
                        .style('left', leftPosition)
                        .style('top', topPosition);

                } else {
                    d3Select(`#${this.mapId} .tooltip`).classed('visible', false);
                }
            })
    }

这是我想要通过的测试：

        it('should trigger mousemove event', () => {
            component.data = {
                values: [],
                worldMapType: WorldMapType.WORLD, 
                countries:{
                    MY: countriesMockData
                } 
            };

            let de = fixture.debugElement.query(By.css('.country'));
            let el = de.nativeElement;
            let styles = window.getComputedStyle(el);

            let event = new Event('mouseover', {});
            el.dispatchEvent(event);

            el.addEventListener('mouseover', () => {
                tick();
                fixture.detectChanges();

                expect(component.data.countries['MY']).toEqual(countriesMockData);
                expect(component.data.countries['ML']).not.toEqual(countriesMockData);
              });
        });

我希望你能帮助我完成这个测试或引导我走向正确的道路。

提前谢谢你。

Answer 1

以下是适合我的解决方案：

it('should trigger mousemove event and fetch the values', () => {
    component.data = {values: [], worldMapType: WorldMapType.WORLD, countries: {MY: countriesMockData}};
    component.mapId = 'map-b6806f6d-9ca3-456a-8e7d-d6772c6262a4';
    component.onZoom(true);

    spyOn(component, 'ngAfterViewInit');
    component.ngAfterViewInit();
    fixture.nativeElement.querySelector('path').dispatchEvent(new MouseEvent('mousemove'));

    expect(d3.select('path')).toBeDefined();
    expect(component.mapId).toEqual('map-b6806f6d-9ca3-456a-8e7d-d6772c6262a4')
    expect(component.data.countries['MY']).toEqual(countriesMockData);
    expect(component.data.countries['ML']).not.toEqual(countriesMockData);
});