How to click on element that should disappear on "touchmove" event?

Question

I'm writing a test-case for a mobile version of our web application, and I cannot click on a pop-up that is designed to disappear on "touchmove" event. Is there any way to overcome this particular problem?

Platform Info:
OS: Mac OS Mojave 10.14.13
TestCafe version: 1.0.1
Chrome version: 72.0.03626
TestCafe browsers value: chrome:emulation:device=iPhone X

When testcafe tries to perform a click, the pop-up disappears. I've tried to first hover the element and then click on it, but that doesn't help.

Here's the React code that handles the 'touchmove' event

  componentDidUpdate(prevProps) {
    if (!prevProps.undoRemove && this.props.undoRemove) {
      window.addEventListener('touchmove', this.props.onHideUndo)
    } else if (prevProps.undoRemove && !this.props.undoRemove) {
      window.removeEventListener('touchmove', this.props.onHideUndo)
    }
  }

  componentWillUnmount() {
    if (this.props.undoRemove) this.props.onHideUndo()
    window.removeEventListener('touchmove', this.props.onHideUndo)
  }

The code that verifies that behavior:

test('Undo Popup - Click on "Undo" button should return item back', async t => {
  const defItemCount = await page.itemCount;
  const rItemId = await page.getItemByIndex(1).info.sku.textContent;

  await page.removeItemByIndex(1);
  await t.expect(page.itemCount).notEql(defProdCount);
  await t.click(page.undoPopup.undoButton);
  await t.expect(page.itemCount).eql(defItemCount);
})

I expect that on testcafe click action I get that button clicked, and on drag action it should disappear as expected.

Answer 1

As I understood the cause of the issue is the touchmove event which forces the popup window to close. A click on any element should not raise the touchmove event, so I've created a separate ticket in the TestCafe repository. Please track it to see the progress