Cypress E2E Setup for Dashboard Issue #349

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.

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
+  },
+});

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');
+  });
+});

dashboard/cypress/support/commands.ts

@@ -0,0 +1 @@
+// Add any custom commands here

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')

dashboard/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["**/*.ts"]
+}

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",