From 38dd3ff248deb2917199bd1bce7a1fdb2d1ffa9b Mon Sep 17 00:00:00 2001
From: Levko Kravets <levko.ne@gmail.com>
Date: Tue, 26 May 2020 10:57:08 +0300
Subject: [PATCH] Fix flaky Map (Markers) tests (#4915)

* Fix flaky Map (Markers) tests

* Fix flaky Choropleth tests
---
 .../app/assets/images/fixtures/map-tile.png   | Bin 0 -> 5447 bytes
 .../visualizations/choropleth_spec.js         |   6 +--
 .../integration/visualizations/map_spec.js    |  37 ++++++++----------
 .../choropleth/Renderer/index.jsx             |   2 +-
 4 files changed, 20 insertions(+), 25 deletions(-)
 create mode 100644 client/app/assets/images/fixtures/map-tile.png

diff --git a/client/app/assets/images/fixtures/map-tile.png b/client/app/assets/images/fixtures/map-tile.png
new file mode 100644
index 0000000000000000000000000000000000000000..060626296e59499479c5bbf546d53d79f5b5b818
GIT binary patch
literal 5447
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
IckLqn52C=@{Qv*}

literal 0
HcmV?d00001

diff --git a/client/cypress/integration/visualizations/choropleth_spec.js b/client/cypress/integration/visualizations/choropleth_spec.js
index 55ffc2b8..d9199f8e 100644
--- a/client/cypress/integration/visualizations/choropleth_spec.js
+++ b/client/cypress/integration/visualizations/choropleth_spec.js
@@ -30,6 +30,8 @@ const SQL = `
 `;
 
 describe("Choropleth", () => {
+  const viewportWidth = Cypress.config("viewportWidth");
+
   beforeEach(() => {
     cy.login();
     createQuery({ query: SQL }).then(({ id }) => {
@@ -84,8 +86,6 @@ describe("Choropleth", () => {
       .find(".map-visualization-container.leaflet-container")
       .should("exist");
 
-    // This is unstable and therefore disabled until a better solution is available.
-    // const viewportWidth = Cypress.config("viewportWidth");
-    // cy.percySnapshot("Visualizations - Choropleth", { widths: [viewportWidth] });
+    cy.percySnapshot("Visualizations - Choropleth", { widths: [viewportWidth] });
   });
 });
diff --git a/client/cypress/integration/visualizations/map_spec.js b/client/cypress/integration/visualizations/map_spec.js
index 297e3665..693a6eb9 100644
--- a/client/cypress/integration/visualizations/map_spec.js
+++ b/client/cypress/integration/visualizations/map_spec.js
@@ -1,15 +1,15 @@
 /* global cy */
 
-import { createQuery } from "../../support/redash-api";
+import { createQuery, createVisualization } from "../../support/redash-api";
 
 const SQL = `
-  SELECT 'Israel' AS country, 32.0808800 AS lat, 34.7805700 AS lng UNION ALL 
+  SELECT 'Israel' AS country, 32.0808800 AS lat, 34.7805700 AS lng UNION ALL
   SELECT 'Israel' AS country, 31.7690400 AS lat, 35.2163300 AS lng UNION ALL
   SELECT 'Israel' AS country, 32.8184100 AS lat, 34.9885000 AS lng UNION ALL
-  
+
   SELECT 'Ukraine' AS country, 50.4546600 AS lat, 30.5238000 AS lng UNION ALL
-  SELECT 'Ukraine' AS country, 49.8382600 AS lat, 24.0232400 AS lng UNION ALL 
-  SELECT 'Ukraine' AS country, 49.9808100 AS lat, 36.2527200 AS lng UNION ALL 
+  SELECT 'Ukraine' AS country, 49.8382600 AS lat, 24.0232400 AS lng UNION ALL
+  SELECT 'Ukraine' AS country, 49.9808100 AS lat, 36.2527200 AS lng UNION ALL
 
   SELECT 'Hungary' AS country, 47.4980100 AS lat, 19.0399100 AS lng
 `;
@@ -19,20 +19,20 @@ describe("Map (Markers)", () => {
 
   beforeEach(() => {
     cy.login();
-    createQuery({ query: SQL }).then(({ id }) => {
-      cy.visit(`queries/${id}/source`);
-      cy.getByTestId("ExecuteButton").click();
-    });
+
+    const mapTileUrl = "/static/images/fixtures/map-tile.png";
+
+    createQuery({ query: SQL })
+      .then(({ id }) => createVisualization(id, "MAP", "Map (Markers)", { mapTileUrl }))
+      .then(({ id: visualizationId, query_id: queryId }) => {
+        cy.visit(`queries/${queryId}/source#${visualizationId}`);
+        cy.getByTestId("ExecuteButton").click();
+      });
   });
 
   it("creates Map with groups", () => {
     cy.clickThrough(`
-      NewVisualization
-      VisualizationType
-      VisualizationType.MAP
-    `);
-
-    cy.clickThrough(`
+      EditVisualization
       VisualizationEditor.Tabs.General
       Map.Editor.LatitudeColumnName
       Map.Editor.LatitudeColumnName.lat
@@ -64,12 +64,7 @@ describe("Map (Markers)", () => {
 
   it("creates Map with custom markers", () => {
     cy.clickThrough(`
-      NewVisualization
-      VisualizationType
-      VisualizationType.MAP
-    `);
-
-    cy.clickThrough(`
+      EditVisualization
       VisualizationEditor.Tabs.General
       Map.Editor.LatitudeColumnName
       Map.Editor.LatitudeColumnName.lat
diff --git a/viz-lib/src/visualizations/choropleth/Renderer/index.jsx b/viz-lib/src/visualizations/choropleth/Renderer/index.jsx
index 96cada33..0abae34d 100644
--- a/viz-lib/src/visualizations/choropleth/Renderer/index.jsx
+++ b/viz-lib/src/visualizations/choropleth/Renderer/index.jsx
@@ -53,7 +53,7 @@ export default function Renderer({ data, options, onOptionsChange }) {
         options // detect changes for all options except bounds, but pass them all!
       );
     }
-  }, [map, geoJson, data, optionsWithoutBounds]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [map, geoJson, data.rows, optionsWithoutBounds]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     if (map) {