Ionic Cypress中的测试IonRange

vatpfxk5 于 2023-06-20 发布在 Ionic

关注(0)|答案(2)|浏览(177)

有趣的是，在这样一个标准组件中的这种标准行为是如此难以测试。
在我的Ionic React组件中给定一个IonRange元素：

<IonRange
  min={0}
  max={30}
  onIonInput={()=> console.log("changed")}
/>

当我手动测试IonRange时，我得到了预期的控制台输出。然而，当我有这样的Cypress测试时（几乎是从文档中复制过来的）：

cy.get("ion-range")
  .as('range')
  .invoke('val', 10)
  .trigger('change')

我希望在输出中看到log语句。
实际行为：范围旋钮跳到预期位置，但onIonInout回调从未被调用。
我还尝试了其他触发器，比如

.trigger('ion-change')
  .trigger('input')
  .trigger('ion-input')
  .trigger('range-change')
  .trigger('ionChange')
  .trigger('ionInput')

都导致了相同的行为。
我还尝试使用箭头键来解决问题。这将是一个非常不令人满意的解决方案，因为它不适用于范围为0到10，000的情况。无论如何，我试过了：

cy.get("ion-range").type('{rightArrow}') // trows "this is a non-typable element"

范围旋钮跳到中心（奇怪）。
我最终的解决方法是：

cy.get("ion-range").click() // clicks in the centre

(also由@SuchAnIgnorantThingToDo-UKR提到），然后我期望值为15。但由于渲染分辨率的差异（即使使用设置的视口），结果也会在15和16之间浮动。此外，这个解决方案是非常不令人满意的，因为我们可能想要Assert特定的值）
我回顾了以下内容：

请让我知道，如果你有任何想法，这个非常琐碎的日常问题。

ionic-framework

来源：https://stackoverflow.com/questions/76462916/test-ionrange-in-cypress

2条答案

按热度按时间

sirbozc51#

.click()命令将更改值并触发事件处理程序，但它不如直接设置值那么精确。

cy.window()
  .its('console')
  .then((console) => {
    cy.spy(console, 'log').as('log')
  })

cy.get('ion-range')
  .click(300,0)

cy.get('@log') 
  .should('have.been.calledWith', 'changed', 31)
  .invoke('getCalls')
  .then((calls) => {
    // open the DevTools to see the dumped table
    console.table(calls)
    expect(calls[0].args).to.deep.eq(['changed', 31]) // not exact, a +1 pixel occurs
  })

从

<IonRange onIonChange={({ detail })=> console.log("changed", detail.value)}></IonRange>

IonRange似乎与您引用的两个链接示例具有不同的内部机制。
这些都有一个<input>底层，但IonRange没有。相反，它是一个基于模板的Web组件，以自己特定的方式响应事件。

范围旋钮跳到中心（奇怪）

我用.click()得到了同样的结果，但没有指定要单击的坐标。我认为这是因为.type()内置了.click()。
默认单击位置（如果未指定）是图元的中心。

赞(0）回复(0）举报 2023-06-20

jtw3ybtb2#

@SuchAnIgnorantThingToDo-UKR已经详细回答了。
我只是想添加如何测试拖动。你可以这样做：

describe('Components', () => {
  it('ion-range', () => {
    cy.visit('https://ionicframework.com/docs/usage/v7/range/basic/demo.html?ionic:mode=ios')

    cy.get('ion-range').as('slider')

    const waitTime = 200

    cy.get('@slider') //
      .trigger('mouseenter')
      .wait(waitTime)
      .trigger('mousedown', 100, 0)
      .wait(waitTime)
      .trigger('mousemove', 150, 1, { force: true })
      .wait(waitTime)
      .trigger('mousemove', 200, 1, { force: true })
      .wait(waitTime)
      .trigger('mousemove', 300, 1, { force: true })
      .wait(waitTime)
      .trigger('mouseup', 300, 1)
  })
})

赞(0）回复(0）举报 2023-06-20

我来回答

Ionic Cypress中的测试IonRange

2条答案

相关问题

热门标签

最新问答