test: ✅ Add test cypress home,auth,search and application details

.github/workflows/main-ci.yml

@@ -32,3 +32,62 @@ jobs:
         run: |
           npm ci
           npm run format-check
+
+  test-e2e:
+    name: Run unit tests and E2E tests
+    if: ${{ !github.event.pull_request.draft }}
+    runs-on: ubuntu-latest
+
+    env:
+      API_PORT: 3500
+      API_HOST: localhost
+      PUBLIC_URL: http://localhost:5173
+      DATABASE_URL: postgresql://postgres:password@postgres:5432/postgres
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          check-latest: true
+          cache: "npm"
+          cache-dependency-path: "**/package-lock.json"
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Install server dependencies
+        run: |
+          cd server
+          pnpm install
+
+      - name: Install client dependencies
+        run: |
+          cd client
+          pnpm install
+
+      - name: Start server for E2E tests
+        run: |
+          cd server
+          pnpm run start:dev &
+          sleep 10  # Attendre que le serveur démarre
+
+      - name: Start client for E2E tests
+        run: |
+          cd client
+          pnpm run dev &
+          sleep 10  # Attendre que le client démarre
+
+      - name: Install Cypress
+        run: |
+          cd client
+          pnpm install
+          npx cypress install
+
+      - name: Run Cypress E2E tests
+        run: |
+          cd client
+          pnpm run test:e2e-run --headless --browser chrome

client/cypress.config.ts

@@ -2,27 +2,14 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:5173', // Remplacez par l'URL de votre application
+    baseUrl: "http://localhost:5173",
     setupNodeEvents(on, config) {
-      // Implémentez ici les écouteurs d'événements Node
-      // Exemple : utiliser un plugin
-      // require('cypress-plugin-snapshots/plugin')(on, config);
+      // Implement node event listeners here
       return config;
     },
     specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
     supportFile: "cypress/support/e2e.ts",
   },
-
-  component: {
-    devServer: {
-      framework: "vue",
-      bundler: "vite",
-    },
-    specPattern: "cypress/component/**/*.cy.{js,jsx,ts,tsx,vue}",
-    supportFile: "cypress/support/component.ts",
-  },
-
-  // Autres configurations globales si nécessaire
   retries: {
     runMode: 2,
     openMode: 0,

client/cypress/e2e/Search.cy.ts

@@ -0,0 +1,27 @@
+describe("Search Application Page", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173");
+    cy.login("user", "password");
+  });
+
+  it('should redirect to the search application page when clicking "Rechercher une application"', () => {
+    cy.get("a.fr-btn").contains("Rechercher une application").click();
+    cy.url().should("include", "/recherche-application");
+  });
+
+  it("should display search results when a valid search term is entered", () => {
+    cy.get("a.fr-btn").contains("Rechercher une application").click();
+    cy.url().should("include", "/recherche-application");
+
+    cy.get('input[placeholder="Rechercher une application"]').type("basegun");
+    cy.get(".card-container .fixed-card").should("have.length.greaterThan", 0);
+  });
+
+  it("should navigate to application details when clicking on a search result tile", () => {
+    cy.get("a.fr-btn").contains("Rechercher une application").click();
+    cy.url().should("include", "/recherche-application");
+
+    cy.get('input[placeholder="Rechercher une application"]').type("basegun");
+    cy.get(".card-container .fixed-card").first().click();
+  });
+});

client/cypress/e2e/applicationDetails.cy.ts

@@ -0,0 +1,21 @@
+describe("Application Details", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173");
+    cy.login("user", "password");
+    cy.get("a.fr-btn").contains("Rechercher une application").click();
+    cy.get('input[placeholder="Rechercher une application"]').type("basegun");
+    cy.get(".card-container .fixed-card").first().click();
+    cy.url().should("match", /\/applications\/[a-f0-9\-]+/);
+  });
+
+  it("should navigate through the tabs", () => {
+    cy.get('button[data-testid="test-tab-0"]').click();
+    cy.get("#tab-content-0").should("be.visible").and("contain.text", "Informations générales");
+    cy.get('button[data-testid="test-tab-1"]').click();
+    cy.get("#tab-content-1").should("be.visible").and("contain.text", "Description");
+    cy.get('button[data-testid="test-tab-2"]').click();
+    cy.get("#tab-content-2").should("be.visible").and("contain.text", "Objectifs");
+    cy.get('button[data-testid="test-tab-3"]').click();
+    cy.get("#tab-content-3").should("be.visible").and("contain.text", "Tags");
+  });
+});

client/cypress/e2e/auth.cy.ts

@@ -0,0 +1,20 @@
+describe("Authentication", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173");
+  });
+
+  it("should log in with valid credentials", () => {
+    cy.login("user", "password");
+    cy.url().should("include", "/");
+  });
+
+  it("should fail to log in with invalid credentials", () => {
+    cy.get(".fr-btn").contains("Se connecter").click();
+    cy.origin("http://localhost:8082", () => {
+      cy.get("#username").type("invaliduser");
+      cy.get("#password").type("wrongpassword");
+      cy.get("#kc-login").click();
+      cy.get("#kc-form-wrapper").should("contain.text", "Invalid username or password");
+    });
+  });
+});

client/cypress/e2e/home.cy.ts

@@ -0,0 +1,11 @@
+describe("Home Page", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173"); // URL de votre application
+  });
+
+  it("should display the header elements", () => {
+    cy.get('[data-testid="header-logo"]').should("exist").and("contain.text", "Ministère");
+    cy.get(".fr-header__service-title").should("exist").and("contain.text", "Référentiel des Applications");
+    cy.get(".fr-header__service-tagline").should("exist").and("contain.text", "Une application pour les réunir toutes");
+  });
+});

client/cypress/support/commands.ts

@@ -10,21 +10,21 @@
 // ***********************************************
 //
 //
-Cypress.Commands.add('login', (username: string, password: string) => {
+Cypress.Commands.add("login", (username: string, password: string) => {
   // Naviguer vers la page de connexion
-  cy.get('.fr-btn').contains('Se connecter').click();
+  cy.get(".fr-btn").contains("Se connecter").click();
   cy.wait(2000);
 
   // Interagir avec l'origine différente pour se connecter
-  cy.origin('http://localhost:8082', { args: { username, password } }, ({ username, password }) => {
-    cy.get('#username').type(username); // Saisir le nom d'utilisateur
-    cy.get('#password').type(password); // Saisir le mot de passe
-    cy.get('#rememberMe').check(); // Cocher "Remember me" (facultatif)
-    cy.get('#kc-login').click(); // Soumettre le formulaire
+  cy.origin("http://localhost:8082", { args: { username, password } }, ({ username, password }) => {
+    cy.get("#username").type(username); // Saisir le nom d'utilisateur
+    cy.get("#password").type(password); // Saisir le mot de passe
+    cy.get("#rememberMe").check(); // Cocher "Remember me" (facultatif)
+    cy.get("#kc-login").click(); // Soumettre le formulaire
   });
 
   // Attendre la redirection vers l'URL principale après connexion
-  cy.url().should('include', 'http://localhost:5173');
+  cy.url().should("include", "http://localhost:5173");
 });
 //
 //
@@ -48,4 +48,4 @@ Cypress.Commands.add('login', (username: string, password: string) => {
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }

client/cypress/support/component-index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <title>Components App</title>
   </head>
   <body>
     <div data-cy-root></div>
   </body>
-</html>
+</html>

client/cypress/support/component.ts

@@ -14,12 +14,12 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/vue'
+import { mount } from "cypress/vue";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -28,13 +28,13 @@ import { mount } from 'cypress/vue'
 declare global {
   namespace Cypress {
     interface Chainable {
-      mount: typeof mount
+      mount: typeof mount;
       login(username: string, password: string): Chainable<void>;
     }
   }
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
-// cy.mount(MyComponent)
+// cy.mount(MyComponent)

client/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

client/cypress/tsconfig.json

@@ -8,9 +8,6 @@
     "types": ["cypress", "node"],
     "noEmit": true
   },
-  "include": [
-    "./**/*.ts",
-     "vite.config.ts"
-  ],
+  "include": ["./**/*.ts", "vite.config.ts", "cypress/**/*.ts"],
   "exclude": []
-}
+}