From 24ba5301d1ae3ef2f0fd6b455c1883ce078ecf77 Mon Sep 17 00:00:00 2001
From: adam-stasiak-polidea <adam.stasiak@polidea.com>
Date: Mon, 9 Nov 2020 02:53:43 +0100
Subject: [PATCH] Fixed unstable test (#11583)

---
 .../explore/visualizations/bubble.test.js     | 31 +++++++++++++------
 .../cypress-base/cypress/support/index.ts     | 20 +++++++-----
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
index 68ee5fd9e8..5249ef1bd3 100644
--- a/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
+++ b/superset-frontend/cypress-base/cypress/integration/explore/visualizations/bubble.test.js
@@ -60,13 +60,23 @@ describe('Visualization > Bubble', () => {
   // Number of circles are pretty unstable when there are a lot of circles
   // Since main functionality is already covered in fitler test below,
   // skip this test untill we find a solution.
-  it.skip('should work', () => {
-    verify(BUBBLE_FORM_DATA);
-    // number of circles = 214 rows
-    cy.get('.chart-container svg .nv-point-clips circle').should(
-      'have.length',
-      214,
-    );
+  it('should work', () => {
+    cy.visitChartByParams(JSON.stringify(BUBBLE_FORM_DATA)).then(() => {
+      cy.wait('@getJson').then(xhr => {
+        let expectedBubblesNumber = 0;
+        xhr.responseBody.data.forEach(element => {
+          expectedBubblesNumber += element.values.length;
+        });
+        cy.get('[data-test="chart-container"]')
+          .should('be.visible', { timeout: 15000 })
+          .within(() => {
+            cy.get('svg')
+              .should('exist')
+              .find('.nv-point-clips circle')
+              .should('have.length', expectedBubblesNumber);
+          });
+      });
+    });
   });
 
   it('should work with filter', () => {
@@ -84,8 +94,11 @@ describe('Visualization > Bubble', () => {
         },
       ],
     });
-    cy.get('.chart-container svg .nv-point-clips circle')
-      .should('have.length', 8)
+    cy.get('[data-test="chart-container"]')
+      .should('be.visible')
+      .within(() => {
+        cy.get('svg').find('.nv-point-clips circle').should('have.length', 8);
+      })
       .then(nodeList => {
         // Check that all circles have same color.
         const color = nodeList[0].getAttribute('fill');
diff --git a/superset-frontend/cypress-base/cypress/support/index.ts b/superset-frontend/cypress-base/cypress/support/index.ts
index 759539c5a6..f91eb10d78 100644
--- a/superset-frontend/cypress-base/cypress/support/index.ts
+++ b/superset-frontend/cypress-base/cypress/support/index.ts
@@ -61,14 +61,18 @@ Cypress.Commands.add('verifyResponseCodes', (xhr: XMLHttpRequest, callback) => {
 
 Cypress.Commands.add('verifySliceContainer', chartSelector => {
   // After a wait response check for valid slice container
-  cy.get('.slice_container').within(() => {
-    if (chartSelector) {
-      cy.get(chartSelector).then(chart => {
-        expect(chart[0].clientWidth).greaterThan(0);
-        expect(chart[0].clientHeight).greaterThan(0);
-      });
-    }
-  });
+  cy.get('.slice_container')
+    .should('be.visible')
+    .within(() => {
+      if (chartSelector) {
+        cy.get(chartSelector)
+          .should('be.visible')
+          .then(chart => {
+            expect(chart[0].clientWidth).greaterThan(0);
+            expect(chart[0].clientHeight).greaterThan(0);
+          });
+      }
+    });
   return cy;
 });