upgraded cypress 11.x -> 13.x

.dockerignore

@@ -1,4 +1,5 @@
 client/.tmp/
+client/cypress/
 node_modules/
 viz-lib/node_modules/
 .tmp/
@@ -12,3 +13,8 @@ venv/
 /.github/
 /netlify.toml
 /setup/
+.github/
+compose.*
+*.md
+LICENSE*
+Dockerfile*

.github/workflows/ci.yml

@@ -10,6 +10,7 @@ on:
       - master
 env:
   CYPRESS_COVERAGE: "true"
+  CYPRESS_CACHE_FOLDER: ${{ github.workspace }}/node_modules/.cache/Cypress
   NODE_VERSION: 18
   YARN_VERSION: 1.22.22
   REDASH_COOKIE_SECRET: 2H9gNG9obnAQ9qnR9BDTQUph6CbXKCzF
@@ -148,10 +149,7 @@ jobs:
     runs-on: ubuntu-22.04
     needs: frontend-lint
     env:
-      CYPRESS_INSTALL_BINARY: 0
-      PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 1
       INSTALL_GROUPS: main
-      COMPOSE_PROFILES: e2e
       PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
       CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
       CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
@@ -177,8 +175,7 @@ jobs:
           set -x
           yarn build
           yarn cypress build
-          yarn cypress start -- --skip-db-seed
-          docker compose run cypress yarn cypress db-seed
+          yarn cypress start
       - name: Execute Cypress Tests
         run: yarn cypress run-ci
       - name: "Failure: output container logs to console"

Dockerfile

@@ -20,11 +20,10 @@ ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1
 RUN useradd -m -d /frontend redash
 USER redash
 WORKDIR /frontend
-COPY --chown=redash package.json yarn.lock .yarnrc /frontend/
+COPY --chown=redash package.json yarn.lock /frontend/
 COPY --chown=redash viz-lib /frontend/viz-lib
-COPY --chown=redash scripts /frontend/scripts
 
-RUN yarn --frozen-lockfile --network-concurrency 1;
+RUN yarn --frozen-lockfile --network-concurrency 1
 COPY --chown=redash client /frontend/client
 COPY --chown=redash webpack.config.js /frontend/
 RUN yarn build

Makefile

@@ -2,7 +2,6 @@
 
 export COMPOSE_DOCKER_CLI_BUILD=1
 export DOCKER_BUILDKIT=1
-export COMPOSE_PROFILES=local
 
 compose_build: .env
 	docker compose build
@@ -28,12 +27,7 @@ create_database: create_db
 
 clean:
 	docker compose down
-	docker compose --project-name cypress down
 	docker compose rm --stop --force
-	docker compose --project-name cypress rm --stop --force
-	docker image rm --force \
-		cypress-server:latest cypress-worker:latest cypress-scheduler:latest \
-		redash-server:latest redash-worker:latest redash-scheduler:latest
 	docker container prune --force
 	docker image prune --force
 	docker volume prune --force

client/.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
       },
     ],
     "jsx-a11y/no-redundant-roles": "error",
+    "cypress/unsafe-to-chain-command": "off",
     "jsx-a11y/no-autofocus": "off",
     "jsx-a11y/click-events-have-key-events": "off", // TMP
     "jsx-a11y/no-static-element-interactions": "off", // TMP

client/app/components/TagsList.tsx

@@ -26,7 +26,7 @@ function TagsList({ tagsUrl, showUnselectAll = false, onUpdate }: TagsListProps)
   useEffect(() => {
     let isCancelled = false;
 
-    getTags(tagsUrl).then(tags => {
+    getTags(tagsUrl).then((tags: any) => {
       if (!isCancelled) {
         setAllTags(tags);
       }

client/app/services/axios.js

@@ -6,7 +6,10 @@ import qs from "query-string";
 import { restoreSession } from "@/services/restoreSession";
 
 export const axios = axiosLib.create({
-  paramsSerializer: params => qs.stringify(params),
+  paramsSerializer: {
+    encode: value => value,
+    serialize: params => qs.stringify(params),
+  },
   xsrfCookieName: "csrf_token",
   xsrfHeaderName: "X-CSRF-TOKEN",
 });

client/cypress/cypress.js

@@ -1,45 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies, no-console */
-const { find } = require("lodash");
-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;
-
-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:5001";
-
-function seedDatabase(seedValues) {
-  get(baseUrl + "/login", (_, { headers }) => {
-    const request = seedValues.shift();
-    const data = request.type === "form" ? { formData: request.data } : { json: request.data };
 
-    if (headers["set-cookie"]) {
-      const cookies = headers["set-cookie"].map(cookie => new Cookie(cookie));
-      const csrfCookie = find(cookies, { key: "csrf_token" });
-      if (csrfCookie) {
-        if (request.type === "form") {
-          data["formData"] = { ...data["formData"], csrf_token: csrfCookie.value };
-        } else {
-          data["headers"] = { "X-CSRFToken": csrfCookie.value };
-        }
-      }
-    }
-
-    post(baseUrl + request.route, data, (err, response) => {
-      const result = response ? response.statusCode : err;
-      console.log("POST " + request.route + " - " + result);
-      if (seedValues.length) {
-        seedDatabase(seedValues);
-      }
-    });
-  });
-}
+const { execSync } = require("child_process");
 
 function buildServer() {
   console.log("Building the server...");
@@ -49,7 +10,6 @@ function buildServer() {
 function startServer() {
   console.log("Starting the server...");
   execSync("docker compose up -d", { stdio: "inherit" });
-  execSync("docker compose run server create_db", { stdio: "inherit" });
 }
 
 function stopServer() {
@@ -66,11 +26,12 @@ function runCypressCI() {
   if (GITHUB_REPOSITORY === "getredash/redash") {
     process.env.CYPRESS_OPTIONS = "--record";
   }
+  // Remove four lines below after it's merged
+  delete process.env.CYPRESS_INSTALL_BINARY;
+  execSync("rm -r node_modules", { stdio: "inherit" });
+  execSync("yarn install", { stdio: "inherit" });
 
-  execSync(
-    "docker compose run --name cypress cypress ./node_modules/.bin/percy exec -t 300 -- ./node_modules/.bin/cypress run $CYPRESS_OPTIONS",
-    { stdio: "inherit" }
-  );
+  execSync("yarn percy cypress run $CYPRESS_OPTIONS", { stdio: "inherit" });
 }
 
 const command = process.argv[2] || "all";
@@ -81,12 +42,6 @@ switch (command) {
     break;
   case "start":
     startServer();
-    if (!process.argv.includes("--skip-db-seed")) {
-      seedDatabase(seedData);
-    }
-    break;
-  case "db-seed":
-    seedDatabase(seedData);
     break;
   case "run":
     execSync("cypress run", { stdio: "inherit" });
@@ -95,14 +50,14 @@ switch (command) {
     execSync("cypress open", { stdio: "inherit" });
     break;
   case "run-ci":
+    execSync("docker compose run server create_db", { stdio: "inherit" });
     runCypressCI();
     break;
   case "stop":
     stopServer();
     break;
   case "all":
     startServer();
-    seedDatabase(seedData);
     execSync("cypress run", { stdio: "inherit" });
     stopServer();
     break;

client/cypress/integration/alert/view_alert_spec.js

@@ -22,9 +22,8 @@ describe("View Alert", () => {
       .contains("Test Email Destination")
       .should("not.exist");
 
-    cy.server();
-    cy.route("GET", "**/api/destinations").as("Destinations");
-    cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
+    cy.intercept("GET", "**/api/destinations").as("Destinations");
+    cy.intercept("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
     cy.visit(this.alertUrl);
 
@@ -49,8 +48,7 @@ describe("View Alert", () => {
     });
 
     it("hides remove button from non-author", function() {
-      cy.server();
-      cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
+      cy.intercept("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
       cy.logout()
         .then(() => cy.login()) // as admin
@@ -81,8 +79,7 @@ describe("View Alert", () => {
     });
 
     it("shows remove button for non-author admin", function() {
-      cy.server();
-      cy.route("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
+      cy.intercept("GET", "**/api/alerts/*/subscriptions").as("Subscriptions");
 
       cy.logout()
         .then(() => cy.login("user@redash.io", "password"))

client/cypress/integration/dashboard/dashboard_spec.js

@@ -14,8 +14,7 @@ describe("Dashboard", () => {
     cy.getByTestId("CreateButton").click();
     cy.getByTestId("CreateDashboardMenuItem").click();
 
-    cy.server();
-    cy.route("POST", "**/api/dashboards").as("NewDashboard");
+    cy.intercept("POST", "**/api/dashboards").as("NewDashboard");
 
     cy.getByTestId("CreateDashboardDialog").within(() => {
       cy.getByTestId("DashboardSaveButton").should("be.disabled");
@@ -57,8 +56,7 @@ describe("Dashboard", () => {
   });
 
   it("is accessible through multiple urls", () => {
-    cy.server();
-    cy.route("GET", "**/api/dashboards/*").as("LoadDashboard");
+    cy.intercept("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);

client/cypress/integration/dashboard/dashboard_tags_spec.js

@@ -7,8 +7,7 @@ describe("Dashboard Tags", () => {
   });
 
   it("is possible to add and edit tags", () => {
-    cy.server();
-    cy.route("POST", "**/api/dashboards/*").as("DashboardSave");
+    cy.intercept("POST", "**/api/dashboards/*").as("DashboardSave");
 
     cy.getByTestId("TagsControl").contains(".label", "Unpublished");
 

client/cypress/integration/dashboard/grid_compliant_widgets_spec.js

@@ -48,8 +48,7 @@ describe("Grid compliant widgets", () => {
     });
 
     it("auto saves after drag", () => {
-      cy.server();
-      cy.route("POST", "**/api/widgets/*").as("WidgetSave");
+      cy.intercept("POST", "**/api/widgets/*").as("WidgetSave");
 
       editDashboard();
       cy.get("@textboxEl").dragBy(330);
@@ -116,8 +115,7 @@ describe("Grid compliant widgets", () => {
     });
 
     it("auto saves after resize", () => {
-      cy.server();
-      cy.route("POST", "**/api/widgets/*").as("WidgetSave");
+      cy.intercept("POST", "**/api/widgets/*").as("WidgetSave");
 
       editDashboard();
       resizeBy(cy.get("@textboxEl"), 200);

client/cypress/integration/dashboard/parameter_spec.js

@@ -53,6 +53,7 @@ describe("Dashboard Parameters", () => {
       .then(() => {
         if (closeMappingMenu) {
           cy.contains("button", "OK").click();
+          return cy.get("@Popover").should("not.exist");
         }
         return cy.get("@Popover").should("not.be.visible");
       });

client/cypress/integration/dashboard/textbox_spec.js

@@ -141,7 +141,7 @@ describe("Textbox", () => {
       })
       .should($el => {
         const { top, left } = $el.offset();
-        expect(top).to.be.oneOf([162, 162.015625]);
+        expect(parseInt(top)).to.eq(162);
         expect(left).to.eq(282);
         expect($el.width()).to.eq(545);
         expect($el.height()).to.eq(185);

client/cypress/integration/dashboard/widget_spec.js

@@ -103,8 +103,7 @@ describe("Widget", () => {
 
       it("grows when dynamically adding table rows", () => {
         // listen to results
-        cy.server();
-        cy.route("GET", "**/api/query_results/*").as("FreshResults");
+        cy.intercept("GET", "**/api/query_results/*").as("FreshResults");
 
         // start with 1 table row
         cy.get("@paramInput")
@@ -131,8 +130,7 @@ describe("Widget", () => {
 
       it("revokes auto height after manual height adjustment", () => {
         // listen to results
-        cy.server();
-        cy.route("GET", "**/api/query_results/*").as("FreshResults");
+        cy.intercept("GET", "**/api/query_results/*").as("FreshResults");
 
         editDashboard();
 

client/cypress/integration/data-source/create_data_source_spec.js

@@ -5,8 +5,7 @@ describe("Create Data Source", () => {
 
   it("opens the creation dialog when clicking in the create link or button", () => {
     cy.visit("/data_sources");
-    cy.server();
-    cy.route("**/api/data_sources", []); // force an empty response
+    cy.intercept("**/api/data_sources", []); // force an empty response
 
     ["CreateDataSourceButton", "CreateDataSourceLink"].forEach(createElementTestId => {
       cy.getByTestId(createElementTestId).click();
@@ -18,8 +17,7 @@ describe("Create Data Source", () => {
 
   it("renders the page and takes a screenshot", function() {
     cy.visit("/data_sources/new");
-    cy.server();
-    cy.route("**/api/data_sources/types").as("DataSourceTypesRequest");
+    cy.intercept("**/api/data_sources/types").as("DataSourceTypesRequest");
 
     cy.wait("@DataSourceTypesRequest")
       .then(({ response }) => response.body.filter(type => type.deprecated))

client/cypress/integration/destination/create_destination_spec.js

@@ -5,8 +5,7 @@ describe("Create Destination", () => {
 
   it("renders the page and takes a screenshot", function() {
     cy.visit("/destinations/new");
-    cy.server();
-    cy.route("**/api/destinations/types").as("DestinationTypesRequest");
+    cy.intercept("**/api/destinations/types").as("DestinationTypesRequest");
 
     cy.wait("@DestinationTypesRequest")
       .then(({ response }) => response.body.filter(type => type.deprecated))