From c68ee3cf9d8faa60a78f8f1e3a61bad992fb4f08 Mon Sep 17 00:00:00 2001
From: unknown <y.lovato01@gmail.com>
Date: Thu, 2 May 2024 17:29:43 +0200
Subject: [PATCH] Test di integrazione homepage

---
 frontend/README.md                       |  5 ++
 frontend/cypress.json                    |  3 +-
 frontend/src/components/InputFile.vue    |  4 +-
 frontend/src/views/HomePage.vue          | 79 ++++++++++++------------
 frontend/tests/e2e/specs/int_homepage.js | 34 ++++++++++
 frontend/tests/e2e/specs/test.js         |  8 ---
 6 files changed, 82 insertions(+), 51 deletions(-)
 create mode 100644 frontend/tests/e2e/specs/int_homepage.js
 delete mode 100644 frontend/tests/e2e/specs/test.js

diff --git a/frontend/README.md b/frontend/README.md
index 2367eaf..a05772e 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -42,3 +42,8 @@ npx jest
 ```
 npx jest --coverage
 ```
+
+## Cypress
+```
+npx cypress open
+```
\ No newline at end of file
diff --git a/frontend/cypress.json b/frontend/cypress.json
index 470c720..acac844 100644
--- a/frontend/cypress.json
+++ b/frontend/cypress.json
@@ -1,3 +1,4 @@
 {
+  "baseUrl": "http://localhost:8080",
   "pluginsFile": "tests/e2e/plugins/index.js"
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/InputFile.vue b/frontend/src/components/InputFile.vue
index b095c70..8f55421 100644
--- a/frontend/src/components/InputFile.vue
+++ b/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>
diff --git a/frontend/src/views/HomePage.vue b/frontend/src/views/HomePage.vue
index d807157..c51703f 100644
--- a/frontend/src/views/HomePage.vue
+++ b/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>
-  
\ No newline at end of file
+
+<script>
+import RedirectButton from "../components/RedirectButton.vue";
+
+export default {
+  components: {
+    RedirectButton
+  },
+  setup() {
+    return {
+      buttonClass: "btn btn-primary mt-auto",
+      destinationManager: "/manager",
+      destinationRequest: "/request"
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/frontend/tests/e2e/specs/int_homepage.js b/frontend/tests/e2e/specs/int_homepage.js
new file mode 100644
index 0000000..f44811a
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/frontend/tests/e2e/specs/test.js b/frontend/tests/e2e/specs/test.js
deleted file mode 100644
index 155e302..0000000
--- a/frontend/tests/e2e/specs/test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/table-of-contents
-
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('h1', 'Welcome to Your Vue.js App')
-  })
-})