test(QSelect): explicitly ensure elements are visible before clicking (…

…#16970)

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

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,13 +307,15 @@ describe('QSelect API', () => {
             persistent: true,
             fn: () => {
               cy.contains('Option 1')
+                .should('be.visible')
                 .click()
               cy.contains('Option 1')
                 .then(() => {
                   expect(model.value).to.eql([ options[ 0 ] ])
                 })
 
               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(() => {