Как тестировать анимацию мыши?

Question

У меня есть диаграмма, созданная с помощью D3, которая выполняет переход, когда она зависла, и я хочу провести модульное тестирование этого поведения.

Я пытался использовать фермент и получить узел по классу, а затем имитировать зависание,но я не могу найти элемент, используя его класс.

Я также пытаюсь отделить функции перехода, но меня поражает насмешливая часть.

Это код, который я пытаюсь проверить:

const renderSvg = select(node)
    .append('svg')
    .attr('width', diameter)
    .attr('height', diameter)
    .append('g')
    .attr('transform', center(diameter));

  const centerText = renderSvg.append('text').attr('text-anchor', 'middle');

  centerText
    .append('tspan')
    .attr('class', 'center-text-name')
    .attr('x', 0);

  centerText
    .append('tspan')
    .attr('class', 'center-text-percentage')
    .attr('dy', 20)
    .attr('x', 0);

  // Save data of slices to pieSlices
  const renderPie = pie().value(d => d[data.valueKey]);

  // Create shapes for slices
  const dg = renderSvg
    .selectAll(`.${data.elementClassName}`)
    .data(renderPie(values))
    .enter()
    .append('g')
    .attr('class', data.elementClassName)
    .style('cursor', 'pointer');

  // Append arcs to svg, add mouse events
  /* istanbul ignore next */
  dg.append('path')
    .each(d => {
      const datum = d;
      datum.outerRadius = outerRadius;
      datum.innerRadius = innerRadius;
    })
    .attr('d', renderArc)
    .style('fill', d => d.data.color)
    .on('mouseover', (datum, index, nodeList) =>
      animateChart(
        nodeList[index],
        datum,
        'mouseover',
        renderSvg,
        grownInnerRadius,
        grownOuterRadius,
      ),
    )
    .on('mouseout', (datum, index, nodeList) =>
      animateChart(
        nodeList[index],
        datum,
        'mouseout',
        renderSvg,
        innerRadius,
        outerRadius,
      ),
    );

const changeArc = (arcPath, datum, newOuterRadius, newInnerRadius) => {
  select(arcPath)
    .transition()
    .attrTween('d', () => t => {
      const interpol = interpolate(
        { innerRadius: datum.innerRadius, outerRadius: datum.outerRadius },
        { innerRadius: newInnerRadius, outerRadius: newOuterRadius },
      );
      const d = datum;
      d.outerRadius = interpol(t).outerRadius;
      d.innerRadius = interpol(t).innerRadius;
      return renderArc(d);
    });
};

const animateChart = (
  arcPath,
  datum,
  event,
  renderSvg,
  newInnerRadius,
  newOuterRadius,
) => {
  const selectedName = renderSvg.select('.center-text-name');
  const selectedPercentage = renderSvg.select('.center-text-percentage');
  switch (event) {
    case 'mouseover':
      changeArc(arcPath, datum, newOuterRadius, newInnerRadius);
      selectedName.text(datum.data.name);
      selectedPercentage.text(`${datum.data.percentage}%`);
      break;
    case 'mouseout':
      changeArc(arcPath, datum, newOuterRadius, newInnerRadius);
      selectedName.text('');
      selectedPercentage.text('');
      break;
    default:
      break;
  }
};