Test di integrazione homepage

frontend/README.md

@@ -42,3 +42,8 @@ npx jest
 ```
 npx jest --coverage
 ```
+
+## Cypress
+```
+npx cypress open
+```

frontend/cypress.json

@@ -1,3 +1,4 @@
 {
+  "baseUrl": "http://localhost:8080",
   "pluginsFile": "tests/e2e/plugins/index.js"
-}
+}

frontend/src/components/InputFile.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="input-group">
-      <input type="file" class="form-control" ref="fileInput" @change="handleFileUpload" />
-      <upload-button ref="uploadbtn" :class="uploadButtonClass" @upload-click="emitFile" :disabled="!file" :isuploading="isUploading"/>
+      <input type="file" class="form-control" ref="fileInput" @change="handleFileUpload" data-cy="file-input" />
+      <upload-button ref="uploadbtn" :class="uploadButtonClass" @upload-click="emitFile" :disabled="!file" :isuploading="isUploading" data-cy="upload-button"/>
     </div>
   </div>
 </template>

frontend/src/views/HomePage.vue

@@ -1,48 +1,47 @@
 <template>
-    <div class="container mt-5 px-5">
-      <img src="../assets/6Coders-logo.png" alt="Logo" class="img-fluid mt-5 mb-5 mx-auto d-block" style="max-width: 100px;">
-      <div class="row justify-content-center">
-        <div class="col-md-6 mb-3">
-          <div class="card h-100">
-            <div class="card-body">
-              <h2 class="card-title">Gestione dizionario dati</h2>
-              <p class="card-text">Qui potrai visualizzare e gestire i dizionari dati caricati all'interno 
-                dell'applicazione e decidere quello da utilizzare per la generazione del prompt, nonchè caricarne di nuovi, oppure eliminare quelli già presenti
-              </p>
-              <RedirectButton :buttonClass="buttonClass" :destination="destinationManager">Vai alla pagina Manager <i class="bi bi-arrow-right"></i></RedirectButton>
-            </div>
+  <div class="container mt-5 px-5">
+    <img src="../assets/6Coders-logo.png" alt="Logo" class="img-fluid mt-5 mb-5 mx-auto d-block" style="max-width: 100px;">
+    <div class="row justify-content-center">
+      <div class="col-md-6 mb-3">
+        <div class="card h-100" data-cy="gestione-dizionario">
+          <div class="card-body">
+            <h2 class="card-title">Gestione dizionario dati</h2>
+            <p class="card-text">Qui potrai visualizzare e gestire i dizionari dati caricati all'interno 
+              dell'applicazione e decidere quello da utilizzare per la generazione del prompt, nonché caricarne di nuovi, oppure eliminare quelli già presenti
+            </p>
+            <RedirectButton :buttonClass="buttonClass" :destination="destinationManager" data-cy="gestione-dizionario-button">Vai alla pagina Manager <i class="bi bi-arrow-right"></i></RedirectButton>
           </div>
         </div>
-        <div class="col-md-6 mb-3">
-          <div class="card h-100">
-            <div class="card-body">
-              <h2 class="card-title">ChatSQL</h2>
-              <p class="card-text">Qui potrai fare una richiesta in linguaggio naturale sui dati che vuoi ottenere, 
-                la nostra applicazione trasformerà la tua richiesta in un prompt adatto, che potrai poi utilizzare per 
-                ottenere una query in SQL 
-              </p>
-              <RedirectButton :buttonClass="buttonClass" :destination="destinationRequest">Vai alla pagina Request <i class="bi bi-arrow-right"></i></RedirectButton>
-            </div>
+      </div>
+      <div class="col-md-6 mb-3">
+        <div class="card h-100" data-cy="chatsql">
+          <div class="card-body">
+            <h2 class="card-title">ChatSQL</h2>
+            <p class="card-text">Qui potrai fare una richiesta in linguaggio naturale sui dati che vuoi ottenere, 
+              la nostra applicazione trasformerà la tua richiesta in un prompt adatto, che potrai poi utilizzare per 
+              ottenere una query in SQL 
+            </p>
+            <RedirectButton :buttonClass="buttonClass" :destination="destinationRequest" data-cy="chatsql-button">Vai alla pagina Request <i class="bi bi-arrow-right"></i></RedirectButton>
           </div>
         </div>
       </div>
     </div>
+  </div>
 </template>
-
-  <script>
-  import RedirectButton from "../components/RedirectButton.vue";
-  
-  export default {
-    components: {
-      RedirectButton
-    },
-    setup() {
-      return {
-        buttonClass: "btn btn-primary mt-auto",
-        destinationManager: "/manager",
-        destinationRequest: "/request"
-      };
-    }
-  };
-  </script>
-
+
+<script>
+import RedirectButton from "../components/RedirectButton.vue";
+
+export default {
+  components: {
+    RedirectButton
+  },
+  setup() {
+    return {
+      buttonClass: "btn btn-primary mt-auto",
+      destinationManager: "/manager",
+      destinationRequest: "/request"
+    };
+  }
+};
+</script>

frontend/tests/e2e/specs/int_homepage.js

@@ -0,0 +1,34 @@
+describe('HomePage', () => {
+  beforeEach(() => {
+    cy.visit('/');
+  });
+
+  it('renders the Gestione dizionario dati card', () => {
+    cy.get('[data-cy=gestione-dizionario]').should('exist');
+  });
+
+  it('displays the correct title and description for Gestione dizionario dati', () => {
+    cy.get('[data-cy=gestione-dizionario] .card-title').should('have.text', 'Gestione dizionario dati');
+    cy.get('[data-cy=gestione-dizionario] .card-text').should('contain', 'visualizzare e gestire i dizionari dati');
+  });
+
+  it('renders the ChatSQL card', () => {
+    cy.get('[data-cy=chatsql]').should('exist');
+  });
+
+  it('displays the correct title and description for ChatSQL', () => {
+    cy.get('[data-cy=chatsql] .card-title').should('have.text', 'ChatSQL');
+    cy.get('[data-cy=chatsql] .card-text').should('contain', 'fare una richiesta in linguaggio naturale');
+  });
+
+
+  it('navigates to the Request page when ChatSQL button is clicked', () => {
+    cy.get('[data-cy=chatsql-button]').click();
+    cy.url().should('include', '/request');
+  });
+
+  it('navigates to the Manager page when Gestione dizionario dati button is clicked', () => {
+    cy.get('[data-cy=gestione-dizionario-button]').click();
+    cy.url().should('include', '/manager');
+  });
+});