From 91ab07003f2800ce4e4a6307148a760f9d9d07fe Mon Sep 17 00:00:00 2001
From: Nemanja Glumac <31325167+nemanjaglumac@users.noreply.github.com>
Date: Fri, 17 Feb 2023 19:29:48 +0100
Subject: [PATCH] [E2E] Fix native field filter related flakes (#28410)

---
 .../src/metabase/components/Popover/Popover.jsx     |  7 ++++++-
 .../helpers/e2e-field-filter-helpers.js             | 13 ++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/metabase/components/Popover/Popover.jsx b/frontend/src/metabase/components/Popover/Popover.jsx
index a39bc544451..4edfd5206e1 100644
--- a/frontend/src/metabase/components/Popover/Popover.jsx
+++ b/frontend/src/metabase/components/Popover/Popover.jsx
@@ -6,6 +6,7 @@ import Tether from "tether";
 
 import cx from "classnames";
 import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
+import { isCypressActive } from "metabase/env";
 
 import "./Popover.css";
 
@@ -87,6 +88,10 @@ export default class Popover extends Component {
   };
 
   _getPopoverElement(isOpen) {
+    // 3s is an overkill for Cypress, but let's start with it and dial it down
+    // if we see that the flakes don't appear anymore
+    const resizeTimer = isCypressActive ? 3000 : 100;
+
     if (!this._popoverElement && isOpen) {
       this._popoverElement = document.createElement("span");
       this._popoverElement.className = `PopoverContainer ${this.props.containerClassName}`;
@@ -96,7 +101,7 @@ export default class Popover extends Component {
         if (this.state.width !== width || this.state.height !== height) {
           this.setState({ width, height });
         }
-      }, 100);
+      }, resizeTimer);
     }
     return this._popoverElement;
   }
diff --git a/frontend/test/metabase/scenarios/native-filters/helpers/e2e-field-filter-helpers.js b/frontend/test/metabase/scenarios/native-filters/helpers/e2e-field-filter-helpers.js
index 95f3df7305b..9b7578a0e09 100644
--- a/frontend/test/metabase/scenarios/native-filters/helpers/e2e-field-filter-helpers.js
+++ b/frontend/test/metabase/scenarios/native-filters/helpers/e2e-field-filter-helpers.js
@@ -175,12 +175,15 @@ export function pickDefaultValue(searchTerm, result) {
   cy.findByText("Enter a default value…").click();
   cy.findByPlaceholderText("Enter a default value…").type(searchTerm);
 
-  // We could search for only one result inside popover()
-  // instead of `all` then `last`,
-  // but it flakes out as sometimes the popover
-  // is detached from the DOM.
+  // Popover is re-rendering every 100ms!
+  // That prevents us from targeting popover() element first,
+  // and then searching for strings inside of it.
   //
-  cy.findAllByText(result).last().click();
+  // Until FE finds a better solution, our best bet for E2E tests
+  // is to make sure the string is "visible" before acting on it.
+  // This seems to help with the flakiness.
+  //
+  cy.findByTestId(`${result}-filter-value`).should("be.visible").click();
 
   cy.button("Add filter").click();
 }
-- 
GitLab