如何测试可调整大小的圆形 SVG 元素？

Question

试图弄清楚如何正确测试可分解的＆lt; circle＆gt; svg元素。 我是React测试库的新手，因此我不确定RTL是否可以使用（使用Mocha测试框架），或者是否应该使用柏树。

假设我有一个圆元素：

＆lt; circle data-testid ='circle-element'cx =“ 100” cy =“ 100” r =“ 50”/＆gt;

注意：0,0,0原点在左上方。

圆的中心位于x = 100，y = 100，半径为50

。 =“ https://i.sstatic.net/mpsab.png” alt =“在此处输入图像说明”>

位于circle的边缘x = 150，y = 100是 draghandle 用户可以单击并拖动以调整圆的大小。

<DragHandle
  data-testid='circle-draghandle'
  x={handleX}
  y={handleY}
  dragMove={onHandleDrag}
/>

如果用户单击 draghandle 在其原始位置的x = 150，y = 100并将拖动到x = 200，y = 100，我们希望圆半径现在为100。

请注意：注意：圆的中心没有变化；仍处于x = 100，y = 100。

我该如何测试？

我确实弄清楚了如何使用用给定的坐标和半径进行 React Testing Library </

it('should render a Circle with the coordinates provided', function () {
    render(<Circle mark={{ cx: 100, cy: 100, r: 50}} />)

    expect(screen.getByTestId('circle-element'))
      .to.have.attr('r')
      .to.equal('50')
  })

code ：＆lt; circle＆gt; 是我们的组件，其中实际＆lt; circle＆gt; svg元素的生活。

在测试调整大小的部分方面有任何帮助！

谢谢。

Answer 1

好的 - 终于使用React Testing库和用户events@14 有一个解决方案！

希望这会帮助别人。

用户事件必须为14.0或更高。

导入测试文件中的USEREREFENT：

import userEvent from '@testing-library/user-event'

测试：

describe('Circle tool', function () {
  let mark
  beforeEach(function () {
    mark = CircleMark.create({
      id: 'circle1',
      toolType: 'circle',
      x_center: 200,
      y_center: 200,
      r: 50
    })
  })

  it('should change the radius when drag handle is moved', async () => {
    const user = userEvent.setup()

    render(<Circle mark={mark} />)

    expect(mark.x_center).to.equal(200)
    expect(mark.y_center).to.equal(200)
    expect(mark.r).to.equal(50)

    // click on dragHandle
    // move dragHandle
    // release mouse button
    const circleDragHandle = screen.getByTestId('draghandle')
    await user.pointer([
      { keys: '[MouseLeft>]', target: circleDragHandle },
      { coords: { x: 300, y: 200 } },
      { keys: '[/MouseLeft]' }
    ])

    expect(mark.x_center).to.equal(200)
    expect(mark.y_center).to.equal(200)
    expect(mark.r).to.equal(100)
  })
})

Answer 2

拖动测试可能很难实现，如果使用 Cypress，我建议添加 cypress-real-events 图书馆。

cy.get('[data-testid="circle-draghandle"]')
  .realClick()
  .realMouseMove(200, 100)  // drag 100 right
  .realMouseUp()

cy.getByTestId('circle-element')   // from cypress-testing-library add-on
  .should('have.attr', 'r', '50')

结果可能很接近但不准确（比如 49），在这种情况下测试日志会告诉您。

如果是这样，您可以使用 closeTo 断言

cy.getByTestId('circle-element')
  .should('have.attr', 'r')
  .and(radius => {
    expect(radius).to.be.closeTo(50, 1)
  })

注意

以上仅在您的图形为 时才有效，但不能用于。

Answer 3

尝试下面的无库解决方案进行拖放：

cy.get('[data-testid="circle-draghandle"]')
.trigger('mousedown', { //simulating hold click
    button: 0
}).wait(700)
.trigger('mousemove', { //simulating drag
    pageX: 200, 
    pageY: 100,
    force: true
}).wait(250)
.trigger('mouseup', {  //simulating drop
    force: true
});

然后您可以使用 Fody 建议的 closeTo 解决方案来检查结果