From 1ef0cf5db51a7195d2bba7279335095c36a1a8be Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 27 Sep 2022 12:47:33 +0530
Subject: [PATCH] fix(cypress): Added getSettled cypress command which will
 decrease the flakyiness while getting dom elements in cypress and integrated
 in some places

---
 .../common/00_pre_configurations.js           |  3 +-
 scripts/cypress/support/commands.js           | 34 +++++++++++++++++--
 .../support/page_objects/navigation.js        |  4 +--
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/scripts/cypress/integration/common/00_pre_configurations.js b/scripts/cypress/integration/common/00_pre_configurations.js
index 847b2a43d7..0e7b53df95 100644
--- a/scripts/cypress/integration/common/00_pre_configurations.js
+++ b/scripts/cypress/integration/common/00_pre_configurations.js
@@ -239,9 +239,8 @@ export const genTest = (apiType, dbType) => {
           cy_createProjectBlock(proj, apiType, dbType);
         }
 
-        cy.wait(2000);
         // close team & auth tab
-        cy.get("button.ant-tabs-tab-remove").should("be.visible").click();
+        cy.getSettled("button.ant-tabs-tab-remove").should("be.visible").click();
         cy.get("button.ant-tabs-tab-remove").should("not.exist");
 
         // first instance of updating local storage information
diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index 26a50b58d0..6a8155f0b5 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -29,6 +29,36 @@ import { isXcdb, isPostgres } from "./page_objects/projectConstants";
 
 require("@4tw/cypress-drag-drop");
 
+// recursively gets an element, returning only after it's determined to be attached to the DOM for good
+Cypress.Commands.add('getSettled', (selector, opts = {}) => {
+  const retries = opts.retries || 3;
+  const delay = opts.delay || 300;
+
+  const isAttached = (resolve, count = 0) => {
+      const el = Cypress.$(selector);
+
+      // is element attached to the DOM?
+      count = Cypress.dom.isAttached(el) ? count + 1 : 0;
+
+      // hit our base case, return the element
+      if (count >= retries) {
+          return resolve(el);
+      }
+
+      // retry after a bit of a delay
+      setTimeout(() => isAttached(resolve, count), delay);
+  };
+
+  // wrap, so we can chain cypress commands off the result
+  return cy.wrap(null).then(() => {
+      return new Cypress.Promise((resolve) => {
+          return isAttached(resolve, 0);
+      }).then((el) => {
+          return cy.wrap(el);
+      });
+  });
+});
+
 // for waiting until page load
 Cypress.Commands.add("waitForSpinners", () => {
   cy.visit("http://localhost:3000/signup", {
@@ -252,9 +282,9 @@ Cypress.Commands.add("getActiveModal", (wrapperSelector) => {
 
 Cypress.Commands.add("getActiveMenu", (overlaySelector) => {
   if (overlaySelector) {
-    return cy.get(`${overlaySelector} .ant-dropdown-content:visible`);
+    return cy.getSettled(`${overlaySelector} .ant-dropdown-content:visible`);
   }
-  return cy.get(".ant-dropdown-content:visible").last();
+  return cy.getSettled(".ant-dropdown-content:visible").last();
 });
 
 Cypress.Commands.add("getActivePopUp", () => {
diff --git a/scripts/cypress/support/page_objects/navigation.js b/scripts/cypress/support/page_objects/navigation.js
index 84dcb25ee8..20f664c7ee 100644
--- a/scripts/cypress/support/page_objects/navigation.js
+++ b/scripts/cypress/support/page_objects/navigation.js
@@ -107,10 +107,8 @@ export class _projectsPage {
 
     cy.wait("@waitForPageLoad");
 
-    cy.wait(2000);
-    
     // close team & auth tab
-    cy.get("button.ant-tabs-tab-remove").should("be.visible").click();
+    cy.getSettled("button.ant-tabs-tab-remove").should("be.visible").click();
     cy.get("button.ant-tabs-tab-remove").should("not.exist");
   }