From 22f98e7ce2345e60fe44f977649696a294ba8022 Mon Sep 17 00:00:00 2001
From: Sadeeq~ <sadeeqndanusa5@gmail.com>
Date: Sun, 31 May 2026 15:49:13 +0100
Subject: [PATCH] feat(dashboard): setup Cypress E2E testing for dashboard
 issue #349

---
 PR_ISSUE_349.md                       | 22 ++++++++++++++++++++++
 dashboard/cypress.config.ts           | 12 ++++++++++++
 dashboard/cypress/e2e/dashboard.cy.ts |  7 +++++++
 dashboard/cypress/support/commands.ts |  1 +
 dashboard/cypress/support/e2e.ts      |  4 ++++
 dashboard/cypress/tsconfig.json       |  8 ++++++++
 dashboard/package.json                |  4 +++-
 7 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 PR_ISSUE_349.md
 create mode 100644 dashboard/cypress.config.ts
 create mode 100644 dashboard/cypress/e2e/dashboard.cy.ts
 create mode 100644 dashboard/cypress/support/commands.ts
 create mode 100644 dashboard/cypress/support/e2e.ts
 create mode 100644 dashboard/cypress/tsconfig.json

diff --git a/PR_ISSUE_349.md b/PR_ISSUE_349.md
new file mode 100644
index 0000000..4c997f8
--- /dev/null
+++ b/PR_ISSUE_349.md
@@ -0,0 +1,22 @@
+# Pull Request: Cypress E2E Setup for Dashboard
+
+## Description
+This PR addresses issue #349 by setting up Cypress for End-to-End (E2E) testing in the `dashboard` application as part of the testnet deployment readiness wave.
+
+## Changes Included
+- Added `cypress` as a development dependency.
+- Configured Cypress basic settings (`cypress.config.ts`).
+- Added initial E2E setup files (`cypress/support/e2e.ts`, `cypress/support/commands.ts`).
+- Created a preliminary dashboard E2E test (`cypress/e2e/dashboard.cy.ts`) ensuring the application loads successfully.
+- Added a `test:e2e` script to the Dashboard's `package.json` for CI pipeline integration.
+- Configured a dedicated `tsconfig.json` for the Cypress directory to correctly type commands and avoid linter warnings.
+
+## Architectural Guidelines adherence
+- Implemented the Cypress test structure according to modern project standards and documented configurations.
+- Does not affect backend architecture or styling. Dark mode styling aesthetics are preserved as no visual changes were introduced.
+
+## Verification / Acceptance Criteria
+- [x] Implementation completed according to project standards.
+- [x] Code is properly documented and commented.
+- [x] E2E tests (`npm run test:e2e`) provided.
+- [x] Passes CI pipeline (linting, tests, build) locally.
diff --git a/dashboard/cypress.config.ts b/dashboard/cypress.config.ts
new file mode 100644
index 0000000..74d95e7
--- /dev/null
+++ b/dashboard/cypress.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    video: false,
+    screenshotOnRunFailure: false,
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: "http://localhost:5173", // Vite's default dev server port
+  },
+});
diff --git a/dashboard/cypress/e2e/dashboard.cy.ts b/dashboard/cypress/e2e/dashboard.cy.ts
new file mode 100644
index 0000000..b87bbe1
--- /dev/null
+++ b/dashboard/cypress/e2e/dashboard.cy.ts
@@ -0,0 +1,7 @@
+describe('Dashboard E2E Tests', () => {
+  it('should load the dashboard application successfully', () => {
+    cy.visit('/');
+    // Check that the body is visible
+    cy.get('body').should('be.visible');
+  });
+});
diff --git a/dashboard/cypress/support/commands.ts b/dashboard/cypress/support/commands.ts
new file mode 100644
index 0000000..047b8c5
--- /dev/null
+++ b/dashboard/cypress/support/commands.ts
@@ -0,0 +1 @@
+// Add any custom commands here
diff --git a/dashboard/cypress/support/e2e.ts b/dashboard/cypress/support/e2e.ts
new file mode 100644
index 0000000..5ae520e
--- /dev/null
+++ b/dashboard/cypress/support/e2e.ts
@@ -0,0 +1,4 @@
+// Import commands.js using ES2015 syntax:
+import './commands'
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/dashboard/cypress/tsconfig.json b/dashboard/cypress/tsconfig.json
new file mode 100644
index 0000000..f87a578
--- /dev/null
+++ b/dashboard/cypress/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}
diff --git a/dashboard/package.json b/dashboard/package.json
index 4bf0a83..798abd0 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest run"
+    "test": "vitest run",
+    "test:e2e": "cypress run"
   },
   "dependencies": {
     "@stellar/stellar-sdk": "^14.6.1",
@@ -38,6 +39,7 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.27",
+    "cypress": "^13.8.1",
     "eslint": "^10.4.1",
     "jsdom": "^29.1.1",
     "postcss": "^8.5.8",