Ag Grid 在刷新过程中吞下点击（服务器端行模型）

Question

基本上，我们的网格每 6 秒获取一次数据 (

purge=false

)。如果用户在第 6 秒和第 7 秒之间的 500 毫秒的微小窗口中单击行，网格将吞掉该单击，并且即使单击的单元格具有焦点，也不会选择行。当我尝试使用 agGrid Api

setSelected

方法通过代码复制该行为时，一切都像魅力一样。

这是赛普拉斯测试的问题，由于不可预测的点击行为，它们很不稳定 - 如果它发生在 500 毫秒的窗口之间，点击将被忽略。

export function selectRow(
  value: string,
) {
  getRow(value).then(($el1) => {
    const isSelectedBeforeClick = $el1.closest('.ag-row').hasClass('ag-row-selected');
    getRow(value)
      .click()
      .then(() => {
        getRow(value).then(($el2) => {
          const isSelectedAfterClick = $el2.closest('.ag-row').hasClass('ag-row-selected');
          if (isSelectedBeforeClick === isSelectedAfterClick) {
            cy.wait(1000);
            getRow(value).click();
          }
        });
      });
  });

function getRow(value){
cy.get('my-grid [col-id="test"]').contains(value)
}

使用此功能，它总是单击行，但现在我遇到了另一个问题 - 如果选择了其他行，有时不会使用此方法取消选择它们（我将

rowSelection

设置为

single

），即使单击是第一次成功，重试单击没有发生，所以我最终得到了两个而不是一个选定的行。

有没有更聪明的方法来做到这一点，或者有人知道为什么会发生这种情况？

我正在使用 Angular 14 和 Ag Grid 版本 27

Answer 1

确保测试在正确时间点击的另一种方法是设置拦截并等待响应，然后执行点击。

我读到该应用程序正在按设定的时间间隔执行获取，因此

clock()

和

tick()

可以控制其时间。

理想情况下，我想看到更多细节，但这大致是我会尝试的模式

cy.clock()                         // stop the timer that sends API fetch
cy.intercept(the-url).as('api')    // set up intercept for the reponse
cy.tick(6000)                      // move clock forward, expect api is triggered
cy.wait('@api')                    // wait on the response

cy.contains('my-grid [col-id="test"]', value)
  .parent('.ag-row')
  .should('have.class', 'ag-row-selected')  // retry that cell and it's parent row
                                            // up to 4 seconds for required class

该代码应该是最简单的赛普拉斯方法，使您的测试可通过间隔获取进行预测。

---

WRT 对于取消选择其他行，可以在没有可运行示例的情况下给出两条一般建议

• 添加 cypress-real-events 并替换

  .realClick()

  - 有时应用程序会更好地响应此库中的事件。

• 找出是否需要同时触发其他事件

  click

  ，也许

  .trigger('change')

• 如果

  setSelected

  正在工作，请调用它

  .parent('.ag-row').invoke('setSelected', true, false)

  （我不确定此处适用的参数，但可以替换您犯规的任何参数）。