試圖弄清楚如何正確測驗可調整大小的<circle>svg 元素。我是 React 測驗庫的新手，所以我不確定 RTL（使用 Mocha 測驗框架）是否可行，或者我是否應該使用 Cypress。
假設我有一個圓形元素：
<circle data-testid='circle-element' cx="100" cy="100" r="50"/>
注意：0,0 原點位于左上角。
圓心位于 x=100, y=100，半徑為 50。
y=100 位于圓的邊緣 x=150 處，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')
})
注意：<Circle>是我們實際<circle>svg 元素所在的組件。
測驗調整大小部分的任何幫助真是太棒了！
謝謝你。
uj5u.com熱心網友回復：
如果使用 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)
})
筆記
以上僅適用于您的圖形<svg>，但不能用于<canvas>.
uj5u.com熱心網友回復：
嘗試以下無庫解決方案進行拖放：
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 解決方案來檢查結果
uj5u.com熱心網友回復：
好的 - 終于有了一個使用 React 測驗庫和的解決方案user-events@14！
希望這會對其他人有所幫助。
user-events必須為 14.0 或更高版本。
在測驗檔案中匯入 userEvent：
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)
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/461177.html