refactor(ci): dont use dev server for e2e tests (#6150)

Author: BatuhanW

.github/workflows/scripts/build-example-chunks.js

@@ -45,7 +45,7 @@ const isExampleAffected = (example, changedPackages) => {
 
 const isExampleModified = (example) => {
   const output = execSync(
-    `git diff --quiet HEAD origin/${BASE_REF} -- ${EXAMPLES_DIR}/${example} || echo changed`,
+    `git diff --quiet HEAD origin/${BASE_REF} -- ${EXAMPLES_DIR}/${example} cypress/e2e/${example} || echo changed`,
     { stdio: "pipe" },
   );
 

.github/workflows/scripts/e2e-examples.js

@@ -45,34 +45,26 @@ const getProjectInfo = (path) => {
   const dependencies = Object.keys(packageJson.dependencies || {});
   const devDependencies = Object.keys(packageJson.devDependencies || {});
 
-  let port = 3000;
-  let command = `pnpm dev --scope ${projectName}`;
-  let additionalParams = "";
+  const allDependencies = [...dependencies, ...devDependencies];
 
-  // check for vite
-  if (dependencies.includes("vite") || devDependencies.includes("vite")) {
-    port = 5173;
+  const command = `pnpm start --scope ${projectName}`;
 
-    if (dependencies.includes("@refinedev/devtools")) {
-      additionalParams = "-- --devtools false";
-    }
+  let port;
+
+  if (allDependencies.includes("vite")) {
+    port = 4173;
   }
 
-  // check for next and remix
   if (
-    dependencies.includes("next") ||
-    devDependencies.includes("next") ||
-    dependencies.includes("@remix-run/node") ||
-    devDependencies.includes("@remix-run/node")
+    allDependencies.includes("next") ||
+    allDependencies.includes("@remix-run/node")
   ) {
     port = 3000;
-    command = `pnpm build --scope ${projectName} && pnpm run --filter ${projectName} start:prod`;
   }
 
   return {
     port,
     command,
-    additionalParams,
   };
 };
 
@@ -177,12 +169,9 @@ const runTests = async () => {
   for await (const path of examplesToRun) {
     console.log(`::group::Example ${path}`);
 
-    const { port, command, additionalParams } = getProjectInfo(
-      `${EXAMPLES_DIR}/${path}`,
-    );
+    const { port, command } = getProjectInfo(`${EXAMPLES_DIR}/${path}`);
     console.log("port", port);
     console.log("command", command);
-    console.log("additionalParams", additionalParams);
 
     prettyLog("blue", `Running for ${path} at port ${port}`);
 
@@ -192,9 +181,9 @@ const runTests = async () => {
 
     let failed = false;
 
-    // starting the dev server
+    // build and start example
     try {
-      start = exec(`${command} ${additionalParams}`);
+      start = exec(command);
 
       start.stdout.on("data", console.log);
       start.stderr.on("data", console.error);
@@ -225,12 +214,17 @@ const runTests = async () => {
 
     try {
       if (!failed) {
-        const params = `--record --group ${path}`;
-        const runner = `pnpm cypress:run --spec cypress/e2e/${path} ${params}`;
+        const additionalParams = [
+          `--record --group ${path}`,
+          `--spec cypress/e2e/${path}`,
+          `--config baseUrl=http://localhost:${port}`,
+        ];
+
+        const runCommand = `pnpm cypress:run ${additionalParams.join(" ")} `;
 
         prettyLog("blue", `Running tests for ${path}`);
 
-        const { promise } = execPromise(runner);
+        const { promise } = execPromise(runCommand);
 
         await promise;
 

cypress/cypress.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
   viewportWidth: 1920,
   viewportHeight: 1080,
   e2e: {
+    baseUrl: "http://localhost:5173",
     setupNodeEvents(on, config) {
       // implement node event listeners here
     },

cypress/e2e/auth-antd/all.cy.ts

@@ -2,13 +2,11 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-antd", () => {
-  const BASE_URL = "http://localhost:5173";
-
   beforeEach(() => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   const submitAuthForm = () => {
@@ -32,7 +30,7 @@ describe("auth-antd", () => {
 
       cy.location("pathname").should("eq", "/");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
 
@@ -48,7 +46,7 @@ describe("auth-antd", () => {
       login();
       cy.location("pathname").should("eq", "/");
 
-      cy.visit(`${BASE_URL}/test`);
+      cy.visit("/test");
       cy.location("pathname").should("eq", "/test");
       cy.clearAllLocalStorage();
       cy.reload();
@@ -60,7 +58,7 @@ describe("auth-antd", () => {
     });
 
     it("should redirect to /login?to= if user not authenticated", () => {
-      cy.visit(`${BASE_URL}/test-route`);
+      cy.visit("/test-route");
       cy.get(".ant-card-head-title > .ant-typography").contains(
         /sign in to your account/i,
       );
@@ -78,7 +76,7 @@ describe("auth-antd", () => {
       login();
       cy.location("pathname").should("eq", "/");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
 
@@ -97,7 +95,7 @@ describe("auth-antd", () => {
 
   describe("forgot password", () => {
     it("should throw error if forgot password email is wrong", () => {
-      cy.visit(`${BASE_URL}/forgot-password`);
+      cy.visit("/forgot-password");
       cy.get("#email").clear().type("[email protected]");
       submitAuthForm();
       cy.getAntdNotification().contains(/invalid email/i);
@@ -107,7 +105,7 @@ describe("auth-antd", () => {
 
   describe("update password", () => {
     it("should throw error if update password is wrong", () => {
-      cy.visit(`${BASE_URL}/update-password`);
+      cy.visit("/update-password");
       cy.get("#password").clear().type("123456");
       cy.get("#confirmPassword").clear().type("123456");
       submitAuthForm();

cypress/e2e/auth-auth0/all.cy.ts

@@ -2,8 +2,6 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-auth0", () => {
-  const BASE_URL = "http://localhost:5173";
-
   const login = () => {
     cy.get("button")
       .contains(/sign in/i)
@@ -23,7 +21,7 @@ describe("auth-auth0", () => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   describe("login", () => {
@@ -36,7 +34,7 @@ describe("auth-auth0", () => {
       cy.location("pathname").should("eq", "/login");
       login();
       cy.location("pathname").should("eq", "/posts");
-      cy.visit(`${BASE_URL}/test-route`);
+      cy.visit("/test-route");
       cy.get(".ant-result-404").should("exist");
       cy.clearAllCookies();
       cy.clearAllSessionStorage();

cypress/e2e/auth-chakra-ui/all.cy.ts

@@ -2,8 +2,6 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-chakra-ui", () => {
-  const BASE_URL = "http://localhost:5173";
-
   const submitAuthForm = () => {
     return cy.get("button[type=submit]").click();
   };
@@ -22,15 +20,15 @@ describe("auth-chakra-ui", () => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   describe("login", () => {
     it("should login", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
 
@@ -46,7 +44,7 @@ describe("auth-chakra-ui", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
 
-      cy.visit(`${BASE_URL}/test`);
+      cy.visit("/test");
       cy.location("pathname").should("eq", "/test");
       cy.clearAllLocalStorage();
       cy.reload();
@@ -58,7 +56,7 @@ describe("auth-chakra-ui", () => {
     });
 
     it("should redirect to /login?to= if user not authenticated", () => {
-      cy.visit(`${BASE_URL}/test-route`);
+      cy.visit("/test-route");
       cy.get(".chakra-heading").contains(/sign in to your account/i);
       cy.location("search").should("contains", "to=%2Ftest");
       cy.location("pathname").should("eq", "/login");
@@ -74,7 +72,7 @@ describe("auth-chakra-ui", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
 
@@ -93,7 +91,7 @@ describe("auth-chakra-ui", () => {
 
   describe("forgot password", () => {
     it("should throw error if forgot password email is wrong", () => {
-      cy.visit(`${BASE_URL}/forgot-password`);
+      cy.visit("/forgot-password");
       cy.get("#email").clear().type("[email protected]");
       submitAuthForm();
       cy.getChakraUINotification().contains(/invalid email/i);
@@ -103,7 +101,7 @@ describe("auth-chakra-ui", () => {
 
   describe("update password", () => {
     it("should throw error if update password is wrong", () => {
-      cy.visit(`${BASE_URL}/update-password`);
+      cy.visit("/update-password");
       cy.get("#password").clear().type("123456");
       cy.get("#confirmPassword").clear().type("123456");
       submitAuthForm();

cypress/e2e/auth-google-login/all.cy.ts

@@ -2,13 +2,11 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-google-login", () => {
-  const BASE_URL = "http://localhost:5173";
-
   beforeEach(() => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   it("has google button", () => {

cypress/e2e/auth-headless/all.cy.ts

@@ -2,8 +2,6 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-headless", () => {
-  const BASE_URL = "http://localhost:5173";
-
   const submitAuthForm = () => {
     return cy.get("[type=submit]").click();
   };
@@ -22,23 +20,23 @@ describe("auth-headless", () => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
     cy.clearAllSessionStorage();
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   describe("login", () => {
     it("should login", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
 
     it("should has 'to' param on URL after redirected to /login", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
 
-      cy.visit(`${BASE_URL}/test`);
+      cy.visit("/test");
       cy.location("pathname").should("eq", "/test");
       cy.clearAllLocalStorage();
       cy.reload();
@@ -47,7 +45,7 @@ describe("auth-headless", () => {
     });
 
     it("should redirect to /login?to= if user not authenticated", () => {
-      cy.visit(`${BASE_URL}/test-route`);
+      cy.visit("/test-route");
       cy.get("h1").contains(/sign in to your account/i);
       cy.location("search").should("contains", "to=%2Ftest");
       cy.location("pathname").should("eq", "/login");
@@ -63,7 +61,7 @@ describe("auth-headless", () => {
       login();
       cy.location("pathname").should("eq", "/posts");
       cy.getAllLocalStorage().then((ls) => {
-        expect(ls[BASE_URL]).to.have.property("email");
+        expect(ls[Cypress.config("baseUrl")!]).to.have.property("email");
       });
     });
   });

cypress/e2e/auth-keycloak/all.cy.ts

@@ -2,8 +2,6 @@
 /// <reference types="../../cypress/support" />
 
 describe("auth-keycloak", () => {
-  const BASE_URL = "http://localhost:5173";
-
   const login = () => {
     cy.get("button")
       .contains(/sign in/i)
@@ -25,7 +23,7 @@ describe("auth-keycloak", () => {
     cy.interceptGETPosts();
     cy.interceptGETCategories();
 
-    cy.visit(BASE_URL);
+    cy.visit("/");
   });
 
   describe("login", () => {
@@ -36,7 +34,7 @@ describe("auth-keycloak", () => {
 
     it("should redirect to /login if user not authenticated", () => {
       login();
-      cy.visit(`${BASE_URL}/test-route`);
+      cy.visit("/test-route");
       cy.clearAllCookies();
       cy.reload();
       cy.location("pathname").should("eq", "/login");