From d58cf3b4c7ff984083eace5e0e37c3f96d6aa304 Mon Sep 17 00:00:00 2001
From: Calson Chiatiah <chiacalson@gmail.com>
Date: Tue, 5 Mar 2024 13:53:52 +0100
Subject: [PATCH] test(QSelect): explicity check for visibility before clicking

- The QSelect random failure is caused by clicking on an element when it is not yet visible. Even though cypress is supposed to check that an element is visible before clicking, sometimes due to race conditions or for some other reason, the element may be found and clicked when it is not yet visible. So "should('be.visible')" has been explicitly added to ensure tests are much more deterministic
---
 .../components/select/__tests__/QSelect.cy.js | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/ui/src/components/select/__tests__/QSelect.cy.js b/ui/src/components/select/__tests__/QSelect.cy.js
index 2944debaa13f..1b9a019851d4 100644
--- a/ui/src/components/select/__tests__/QSelect.cy.js
+++ b/ui/src/components/select/__tests__/QSelect.cy.js
@@ -4,7 +4,10 @@ import { h, ref } from 'vue'
 import QSelect from '../QSelect.js'
 
 function getHostElement (extendedSelector = '') {
-  return cy.get(`.q-select ${ extendedSelector }`)
+  // A majority of tests click on the select, so we ensure the select is visible before the click happens.
+  // See https://github.com/cypress-io/cypress/discussions/14889
+  // See https://www.cypress.io/blog/2020/08/17/when-can-the-test-navigate#visible-elements
+  return extendedSelector ? cy.get(`.q-select ${ extendedSelector }`) : cy.get('.q-select').should('be.visible')
 }
 
 function mountQSelect (options = {}) {
@@ -222,6 +225,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -242,6 +246,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -266,6 +271,7 @@ describe('QSelect API', () => {
           getHostElement().click()
           cy.withinSelectMenu(() => {
             cy.contains('Option 1')
+              .should('be.visible')
               .click()
             cy.contains('Option 1')
               .then(() => {
@@ -276,6 +282,7 @@ describe('QSelect API', () => {
           getHostElement().click()
           cy.withinSelectMenu(() => {
             cy.contains('Option 2')
+              .should('be.visible')
               .click()
             cy.contains('Option 2')
               .then(() => {
@@ -300,6 +307,7 @@ describe('QSelect API', () => {
             persistent: true,
             fn: () => {
               cy.contains('Option 1')
+                .should('be.visible')
                 .click()
               cy.contains('Option 1')
                 .then(() => {
@@ -307,6 +315,7 @@ describe('QSelect API', () => {
                 })
 
               cy.contains('Option 2')
+                .should('be.visible')
                 .click()
               cy.contains('Option 2')
                 .then(() => {
@@ -353,6 +362,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -375,6 +385,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -397,6 +408,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
+            .should('be.visible')
             .click()
           cy.get('.q-menu')
             .then(() => {
@@ -636,6 +648,8 @@ describe('QSelect API', () => {
           })
           getHostElement()
             .click()
+          cy.get('.q-menu').should('be.visible')
+          getHostElement()
             .isNotActionable(done)
         })
 
@@ -868,6 +882,7 @@ describe('QSelect API', () => {
             .click()
           cy.get('.q-menu')
             .get('[role="option"]')
+            .should('be.visible')
             .as('clicked')
             .click({ multiple: true })
           cy.get('@clicked')
@@ -1242,6 +1257,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1292,6 +1308,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1301,6 +1318,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1330,6 +1348,7 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .get('[role="option"]')
           .first()
+          .should('be.visible')
           .as('clicked')
           .click()
         cy.get('@clicked')
@@ -1544,6 +1563,7 @@ describe('QSelect API', () => {
           }
         })
 
+        getHostElement()
         cy.get('.q-menu')
           .should('not.exist')
           .then(() => {