Cypress touch-ups (getredash#5109)

* allow non-sequential IDs for DataSources in Cypress tests * refactor redash-api to a set of Cypress commands * support mounting Redash endpoints in Cypress routes * fix some parameter specs by waiting for schema to load * extract baseUrl from cypress.json * Restyled by prettier (getredash#5110) Co-authored-by: Restyled.io <commits@restyled.io> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
andrewdever · Oct 5, 2020 · c21a417 · c21a417
1 parent 6bd695c
commit c21a417
Show file tree

Hide file tree

Showing 34 changed files with 153 additions and 175 deletions.
diff --git a/client/cypress/cypress.js b/client/cypress/cypress.js
@@ -4,9 +4,16 @@ const atob = require("atob");
 const { execSync } = require("child_process");
 const { get, post } = require("request").defaults({ jar: true });
 const { seedData } = require("./seed-data");
+const fs = require("fs");
 var Cookie = require("request-cookies").Cookie;
 
-const baseUrl = process.env.CYPRESS_baseUrl || "http://localhost:5000";
+let cypressConfigBaseUrl;
+try {
+  const cypressConfig = JSON.parse(fs.readFileSync("cypress.json"));
+  cypressConfigBaseUrl = cypressConfig.baseUrl;
+} catch (e) {}
+
+const baseUrl = process.env.CYPRESS_baseUrl || cypressConfigBaseUrl || "http://localhost:5000";
 
 function seedDatabase(seedValues) {
   get(baseUrl + "/login", (_, { headers }) => {

diff --git a/client/cypress/integration/alert/create_alert_spec.js b/client/cypress/integration/alert/create_alert_spec.js
@@ -1,5 +1,3 @@
-import { createQuery } from "../../support/redash-api";
-
 describe("Create Alert", () => {
   beforeEach(() => {
     cy.login();
@@ -12,7 +10,7 @@ describe("Create Alert", () => {
   });
 
   it("selects query and takes a screenshot", () => {
-    createQuery({ name: "Create Alert Query" }).then(({ id: queryId }) => {
+    cy.createQuery({ name: "Create Alert Query" }).then(({ id: queryId }) => {
       cy.visit("/alerts/new");
       cy.getByTestId("QuerySelector")
         .click()

diff --git a/client/cypress/integration/alert/edit_alert_spec.js b/client/cypress/integration/alert/edit_alert_spec.js
@@ -1,13 +1,11 @@
-import { createAlert, createQuery } from "../../support/redash-api";
-
 describe("Edit Alert", () => {
   beforeEach(() => {
     cy.login();
   });
 
   it("renders the page and takes a screenshot", () => {
-    createQuery({ query: "select 1 as col_name" })
-      .then(({ id: queryId }) => createAlert(queryId, { column: "col_name" }))
+    cy.createQuery({ query: "select 1 as col_name" })
+      .then(({ id: queryId }) => cy.createAlert(queryId, { column: "col_name" }))
       .then(({ id: alertId }) => {
         cy.visit(`/alerts/${alertId}/edit`);
         cy.getByTestId("Criteria").should("exist");
@@ -16,8 +14,8 @@ describe("Edit Alert", () => {
   });
 
   it("edits the notification template and takes a screenshot", () => {
-    createQuery()
-      .then(({ id: queryId }) => createAlert(queryId, { custom_subject: "FOO", custom_body: "BAR" }))
+    cy.createQuery()
+      .then(({ id: queryId }) => cy.createAlert(queryId, { custom_subject: "FOO", custom_body: "BAR" }))
       .then(({ id: alertId }) => {
         cy.visit(`/alerts/${alertId}/edit`);
         cy.getByTestId("AlertCustomTemplate").should("exist");
@@ -33,8 +31,8 @@ describe("Edit Alert", () => {
       custom_body: "{{ ALERT_THRESHOLD }}",
     };
 
-    createQuery()
-      .then(({ id: queryId }) => createAlert(queryId, options))
+    cy.createQuery()
+      .then(({ id: queryId }) => cy.createAlert(queryId, options))
       .then(({ id: alertId }) => {
         cy.visit(`/alerts/${alertId}/edit`);
         cy.get(".alert-template-preview").click();

diff --git a/client/cypress/integration/alert/view_alert_spec.js b/client/cypress/integration/alert/view_alert_spec.js
@@ -1,14 +1,13 @@
-import { createAlert, createQuery, createUser, addDestinationSubscription } from "../../support/redash-api";
-
 describe("View Alert", () => {
   beforeEach(function() {
-    cy.login();
-    createQuery({ query: "select 1 as col_name" })
-      .then(({ id: queryId }) => createAlert(queryId, { column: "col_name" }))
-      .then(({ id: alertId }) => {
-        this.alertId = alertId;
-        this.alertUrl = `/alerts/${alertId}`;
-      });
+    cy.login().then(() => {
+      cy.createQuery({ query: "select 1 as col_name" })
+        .then(({ id: queryId }) => cy.createAlert(queryId, { column: "col_name" }))
+        .then(({ id: alertId }) => {
+          this.alertId = alertId;
+          this.alertUrl = `/alerts/${alertId}`;
+        });
+    });
   });
 
   it("renders the page and takes a screenshot", function() {
@@ -24,8 +23,8 @@ describe("View Alert", () => {
       .should("not.exist");
 
     cy.server();
-    cy.route("GET", "api/destinations").as("Destinations");
-    cy.route("GET", "api/alerts/*/subscriptions").as("Subscriptions");
+    cy.route("GET", "**/api/destinations").as("Destinations");
+    cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
     cy.visit(this.alertUrl);
 
@@ -42,7 +41,7 @@ describe("View Alert", () => {
   describe("Alert Destination permissions", () => {
     before(() => {
       cy.login();
-      createUser({
+      cy.createUser({
         name: "Example User",
         email: "user@redash.io",
         password: "password",
@@ -51,11 +50,11 @@ describe("View Alert", () => {
 
     it("hides remove button from non-author", function() {
       cy.server();
-      cy.route("GET", "api/alerts/*/subscriptions").as("Subscriptions");
+      cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
       cy.logout()
         .then(() => cy.login()) // as admin
-        .then(() => addDestinationSubscription(this.alertId, "Test Email Destination"))
+        .then(() => cy.addDestinationSubscription(this.alertId, "Test Email Destination"))
         .then(() => {
           cy.visit(this.alertUrl);
 
@@ -83,11 +82,11 @@ describe("View Alert", () => {
 
     it("shows remove button for non-author admin", function() {
       cy.server();
-      cy.route("GET", "api/alerts/*/subscriptions").as("Subscriptions");
+      cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
       cy.logout()
         .then(() => cy.login("user@redash.io", "password"))
-        .then(() => addDestinationSubscription(this.alertId, "Test Email Destination"))
+        .then(() => cy.addDestinationSubscription(this.alertId, "Test Email Destination"))
         .then(() => {
           cy.visit(this.alertUrl);
 

diff --git a/client/cypress/integration/dashboard/dashboard_spec.js b/client/cypress/integration/dashboard/dashboard_spec.js
@@ -1,6 +1,5 @@
 /* global cy, Cypress */
 
-import { createDashboard, addTextbox } from "../../support/redash-api";
 import { getWidgetTestId } from "../../support/dashboard";
 
 const menuWidth = 80;
@@ -16,7 +15,7 @@ describe("Dashboard", () => {
     cy.getByTestId("CreateDashboardMenuItem").click();
 
     cy.server();
-    cy.route("POST", "api/dashboards").as("NewDashboard");
+    cy.route("POST", "**/api/dashboards").as("NewDashboard");
 
     cy.getByTestId("CreateDashboardDialog").within(() => {
       cy.getByTestId("DashboardSaveButton").should("be.disabled");
@@ -36,7 +35,7 @@ describe("Dashboard", () => {
   });
 
   it("archives dashboard", () => {
-    createDashboard("Foo Bar").then(({ id }) => {
+    cy.createDashboard("Foo Bar").then(({ id }) => {
       cy.visit(`/dashboards/${id}`);
 
       cy.getByTestId("DashboardMoreButton").click();
@@ -59,8 +58,8 @@ describe("Dashboard", () => {
 
   it("is accessible through multiple urls", () => {
     cy.server();
-    cy.route("GET", "api/dashboards/*").as("LoadDashboard");
-    createDashboard("Dashboard multiple urls").then(({ id, slug }) => {
+    cy.route("GET", "**/api/dashboards/*").as("LoadDashboard");
+    cy.createDashboard("Dashboard multiple urls").then(({ id, slug }) => {
       [`/dashboards/${id}`, `/dashboards/${id}-anything-here`, `/dashboard/${slug}`].forEach(url => {
         cy.visit(url);
         cy.wait("@LoadDashboard");
@@ -75,11 +74,11 @@ describe("Dashboard", () => {
   context("viewport width is at 800px", () => {
     before(function() {
       cy.login();
-      createDashboard("Foo Bar")
+      cy.createDashboard("Foo Bar")
         .then(({ id }) => {
           this.dashboardUrl = `/dashboards/${id}`;
           this.dashboardEditUrl = `/dashboards/${id}?edit`;
-          return addTextbox(id, "Hello World!").then(getWidgetTestId);
+          return cy.addTextbox(id, "Hello World!").then(getWidgetTestId);
         })
         .then(elTestId => {
           cy.visit(this.dashboardUrl);
@@ -132,7 +131,7 @@ describe("Dashboard", () => {
   context("viewport width is at 767px", () => {
     before(function() {
       cy.login();
-      createDashboard("Foo Bar").then(({ id }) => {
+      cy.createDashboard("Foo Bar").then(({ id }) => {
         this.dashboardUrl = `/dashboards/${id}`;
       });
     });

diff --git a/client/cypress/integration/dashboard/dashboard_tags_spec.js b/client/cypress/integration/dashboard/dashboard_tags_spec.js
@@ -1,15 +1,14 @@
-import { createDashboard } from "../../support/redash-api";
 import { expectTagsToContain, typeInTagsSelectAndSave } from "../../support/tags";
 
 describe("Dashboard Tags", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ id }) => cy.visit(`/dashboards/${id}`));
+    cy.createDashboard("Foo Bar").then(({ id }) => cy.visit(`/dashboards/${id}`));
   });
 
   it("is possible to add and edit tags", () => {
     cy.server();
-    cy.route("POST", "api/dashboards/*").as("DashboardSave");
+    cy.route("POST", "**/api/dashboards/*").as("DashboardSave");
 
     cy.getByTestId("TagsControl").contains(".label", "Unpublished");
 

diff --git a/client/cypress/integration/dashboard/filters_spec.js b/client/cypress/integration/dashboard/filters_spec.js
@@ -1,4 +1,3 @@
-import { createDashboard } from "../../support/redash-api";
 import { createQueryAndAddWidget, editDashboard } from "../../support/dashboard";
 import { expectTableToHaveLength, expectFirstColumnToHaveMembers } from "../../support/visualizations/table";
 
@@ -24,7 +23,7 @@ describe("Dashboard Filters", () => {
       name: "Query Filters",
       query: `SELECT stage1 AS "stage1::filter", stage2, value FROM (${SQL}) q`,
     };
-    createDashboard("Dashboard Filters").then(dashboard => {
+    cy.createDashboard("Dashboard Filters").then(dashboard => {
       createQueryAndAddWidget(dashboard.id, queryData)
         .as("widget1TestId")
         .then(() => createQueryAndAddWidget(dashboard.id, queryData, { position: { col: 4 } }))

diff --git a/client/cypress/integration/dashboard/grid_compliant_widgets_spec.js b/client/cypress/integration/dashboard/grid_compliant_widgets_spec.js
@@ -1,6 +1,5 @@
 /* global cy */
 
-import { createDashboard, addTextbox } from "../../support/redash-api";
 import { getWidgetTestId, editDashboard, resizeBy } from "../../support/dashboard";
 
 const menuWidth = 80;
@@ -9,10 +8,10 @@ describe("Grid compliant widgets", () => {
   beforeEach(function() {
     cy.login();
     cy.viewport(1215 + menuWidth, 800);
-    createDashboard("Foo Bar")
+    cy.createDashboard("Foo Bar")
       .then(({ id }) => {
         this.dashboardUrl = `/dashboards/${id}`;
-        return addTextbox(id, "Hello World!").then(getWidgetTestId);
+        return cy.addTextbox(id, "Hello World!").then(getWidgetTestId);
       })
       .then(elTestId => {
         cy.visit(this.dashboardUrl);
@@ -50,7 +49,7 @@ describe("Grid compliant widgets", () => {
 
     it("auto saves after drag", () => {
       cy.server();
-      cy.route("POST", "api/widgets/*").as("WidgetSave");
+      cy.route("POST", "**/api/widgets/*").as("WidgetSave");
 
       editDashboard();
       cy.get("@textboxEl").dragBy(330);
@@ -118,7 +117,7 @@ describe("Grid compliant widgets", () => {
 
     it("auto saves after resize", () => {
       cy.server();
-      cy.route("POST", "api/widgets/*").as("WidgetSave");
+      cy.route("POST", "**/api/widgets/*").as("WidgetSave");
 
       editDashboard();
       resizeBy(cy.get("@textboxEl"), 200);

diff --git a/client/cypress/integration/dashboard/parameter_mapping_spec.js b/client/cypress/integration/dashboard/parameter_mapping_spec.js
@@ -1,10 +1,9 @@
-import { createDashboard } from "../../support/redash-api";
 import { createQueryAndAddWidget } from "../../support/dashboard";
 
 describe("Parameter Mapping", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar")
+    cy.createDashboard("Foo Bar")
       .then(({ id }) => {
         this.dashboardId = id;
         this.dashboardUrl = `/dashboards/${id}`;

diff --git a/client/cypress/integration/dashboard/sharing_spec.js b/client/cypress/integration/dashboard/sharing_spec.js
@@ -1,12 +1,11 @@
 /* global cy */
 
-import { createDashboard, createQuery } from "../../support/redash-api";
 import { editDashboard, shareDashboard, createQueryAndAddWidget } from "../../support/dashboard";
 
 describe("Dashboard Sharing", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ id }) => {
+    cy.createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
       this.dashboardUrl = `/dashboards/${id}`;
     });
@@ -23,7 +22,7 @@ describe("Dashboard Sharing", () => {
     };
 
     const dashboardUrl = this.dashboardUrl;
-    createQuery({ options }).then(({ id: queryId }) => {
+    cy.createQuery({ options }).then(({ id: queryId }) => {
       cy.visit(dashboardUrl);
       editDashboard();
       cy.getByTestId("AddWidgetButton").click();
@@ -148,7 +147,7 @@ describe("Dashboard Sharing", () => {
     };
 
     const dashboardUrl = this.dashboardUrl;
-    createQuery({ options }).then(({ id: queryId }) => {
+    cy.createQuery({ options }).then(({ id: queryId }) => {
       cy.visit(dashboardUrl);
       editDashboard();
       cy.getByTestId("AddWidgetButton").click();

diff --git a/client/cypress/integration/dashboard/textbox_spec.js b/client/cypress/integration/dashboard/textbox_spec.js
@@ -1,12 +1,11 @@
 /* global cy */
 
-import { createDashboard, addTextbox } from "../../support/redash-api";
 import { getWidgetTestId, editDashboard } from "../../support/dashboard";
 
 describe("Textbox", () => {
   beforeEach(function() {
     cy.login();
-    createDashboard("Foo Bar").then(({ id }) => {
+    cy.createDashboard("Foo Bar").then(({ id }) => {
       this.dashboardId = id;
       this.dashboardUrl = `/dashboards/${id}`;
     });
@@ -31,7 +30,7 @@ describe("Textbox", () => {
   });
 
   it("removes textbox by X button", function() {
-    addTextbox(this.dashboardId, "Hello World!")
+    cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
       .then(elTestId => {
         cy.visit(this.dashboardUrl);
@@ -47,7 +46,7 @@ describe("Textbox", () => {
   });
 
   it("removes textbox by menu", function() {
-    addTextbox(this.dashboardId, "Hello World!")
+    cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
       .then(elTestId => {
         cy.visit(this.dashboardUrl);
@@ -65,11 +64,11 @@ describe("Textbox", () => {
 
   it("allows opening menu after removal", function() {
     let elTestId1;
-    addTextbox(this.dashboardId, "txb 1")
+    cy.addTextbox(this.dashboardId, "txb 1")
       .then(getWidgetTestId)
       .then(elTestId => {
         elTestId1 = elTestId;
-        return addTextbox(this.dashboardId, "txb 2").then(getWidgetTestId);
+        return cy.addTextbox(this.dashboardId, "txb 2").then(getWidgetTestId);
       })
       .then(elTestId2 => {
         cy.visit(this.dashboardUrl);
@@ -99,7 +98,7 @@ describe("Textbox", () => {
   });
 
   it("edits textbox", function() {
-    addTextbox(this.dashboardId, "Hello World!")
+    cy.addTextbox(this.dashboardId, "Hello World!")
       .then(getWidgetTestId)
       .then(elTestId => {
         cy.visit(this.dashboardUrl);
@@ -133,8 +132,8 @@ describe("Textbox", () => {
     const txb2Pos = { col: 1, row: 1, sizeX: 3, sizeY: 4 };
 
     cy.viewport(1215, 800);
-    addTextbox(id, "x", { position: txb1Pos })
-      .then(() => addTextbox(id, "x", { position: txb2Pos }))
+    cy.addTextbox(id, "x", { position: txb1Pos })
+      .then(() => cy.addTextbox(id, "x", { position: txb2Pos }))
       .then(getWidgetTestId)
       .then(elTestId => {
         cy.visit(this.dashboardUrl);