test front

front/MyINPulse-front/src/components/Project-comp.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="project">
+    <div @click="goToLink" class="project">
         <div class="project-header">
-            <h2 @click="goToLink">{{ projectName }}</h2>
+            <h2 >{{ projectName }}</h2>
             <div class="project-buttons">
                 <button class="contact-btn">Contact</button>
             </div>
@@ -17,6 +17,7 @@
 
 <script setup lang="ts">
 import { defineProps } from "vue";
+import { useRouter } from 'vue-router'
 
 
 const props = defineProps<{
@@ -25,10 +26,13 @@ const props = defineProps<{
     projectLink: string;
 }>();
 
+const router = useRouter();
+
 const goToLink = () => {
-    if (props.projectLink) {
-        window.location.href = props.projectLink;
-    }
+  if (props.projectLink) {
+    router.push(props.projectLink);
+  }
+ 
 };
 </script>
 

front/MyINPulse-front/src/components/canvas/CanvasItem.vue

@@ -9,46 +9,36 @@
     </div>
 </template>
   
-<script>
-import { ref, onMounted } from "vue";
+<script setup lang="ts">
+import { ref, defineProps, onMounted } from "vue";
 import axios from "axios";
 
-export default {
-  props: {
-    title: String,
-    description: String,
-  },
+const props = defineProps<{  
+    title: string;
+    description: string;
+}>();
 
-  setup(props) {
-    const expanded = ref(false);
-    const currentDescription = ref(props.description);
+const expanded = ref(false);
+const currentDescription = ref(props.description);
 
-    const fetchData = async () => {
-      try {
-        const response = await axios.get("http://localhost:5000/data"); // to edit later!
-        currentDescription.value = response.data[0].canva_data;
-
-      } catch (error) {
-        console.error("Erreur lors de la récupération des données :", error);
-      }
-    };
-
-    const toggleExpand = async () => {
-      if (!expanded.value) {
-        await fetchData();
-      } else {
-        currentDescription.value = props.description;
-      }
-      expanded.value = !expanded.value;
-    };
-
-    return {
-      expanded,
-      currentDescription,
-      toggleExpand
-    };
+const fetchData = async () => {
+  try {
+    const response = await axios.get("http://localhost:5000/data"); // Update the URL if needed
+    currentDescription.value = response.data[0].canva_data;
+  } catch (error) {
+    console.error("Erreur lors de la récupération des données :", error);
   }
 };
+
+const toggleExpand = async () => {
+  if (!expanded.value) {
+    await fetchData();
+  } else {
+    currentDescription.value = props.description;
+  }
+  expanded.value = !expanded.value;
+};
+
 </script>
 
   

front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue

@@ -10,7 +10,9 @@
             {{ email }}
           </button>
         </div>
-        <button class="return-button"><a href="/">Return to list project</a></button>
+        <button class="return-button">
+            <RouterLink to="/">Return to list project</RouterLink>
+        </button>
       </div>
     </div>
   </header>

front/MyINPulse-front/src/components/canvas/LeanCanvas.vue

@@ -10,30 +10,21 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import { ref } from "vue";
 import CanvasItem from "@/components/canvas/CanvasItem.vue";
 
-export default {
-  components: {
-    CanvasItem
-  },
-  setup() {
-    const items = ref([
-      { title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
-      { title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
-      { title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
-      { title: "4. Solution", description: "Les solutions proposées", class: "Solution" },
-      { title: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
-      { title: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
-      { title: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
-      { title: "8. Coûts", description: "Les coûts associés", class: "Couts" },
-      { title: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
-    ]);
-
-    return { items };
-  }
-};
+const items = ref([
+  { title: "1. Problème", description: "3 problèmes essentiels à résoudre pour le client", class: "Probleme" },
+  { title: "2. Segments", description: "Les segments de clientèle visés", class: "Segments" },
+  { title: "3. Valeur", description: "La proposition de valeur", class: "Valeur" },
+  { title: "4. Solution", description: "Les solutions proposées", class: "Solution" },
+  { title: "5. Avantage", description: "Les avantages concurrentiels", class: "Avantage" },
+  { title: "6. Canaux", description: "Les canaux de distribution", class: "Canaux" },
+  { title: "7. Indicateurs", description: "Les indicateurs clés de performance", class: "Indicateurs" },
+  { title: "8. Coûts", description: "Les coûts associés", class: "Couts" },
+  { title: "9. Revenus", description: "Les sources de revenus", class: "Revenus" }
+]);
 </script>
 
 <style scoped>

front/MyINPulse-front/src/views/AdminMain.vue

@@ -27,12 +27,12 @@ import { ref } from "vue";
 const projects = ref([
   {
     name: "Projet Alpha",
-    link: "/project-alpha.html", // to test
+    link: "/canvas", // to test
     members: ["Alice", "Bob", "Charlie"],
   },
   {
     name: "Projet Beta",
-    link: "./project-beta.html", // to test
+    link: "./canvas", // to test
     members: ["David", "Eve", "Frank"],
   },
 ]);

tests/example.spec.js

@@ -0,0 +1,19 @@
+// @ts-check
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});

tests/front.spec.js

@@ -0,0 +1,123 @@
+import { test,expect } from '@playwright/test'
+
+test('Title Page',async({page}) =>{
+    await page.goto('http://localhost:5173/')
+    await expect(page).toHaveTitle(/Vite App/)
+})
+
+test('Navigation between pages', async ({ page }) => {
+  // Aller à la page d'accueil
+  await page.goto('http://localhost:5173/');
+
+  // Vérifier que l'URL a changé pour la page Canvas
+  await page.click('text=Canvas');
+  await expect(page).toHaveURL(/canvas/);
+
+  // Vérifier que l'URL a changé pour la page Home
+  await page.click('text=Home');
+  await expect(page).toHaveURL(/\//);
+
+
+});
+test.describe('Tests de la Page Canvas', () => {
+test('Vérifier que tous les blocs Canvas sont affichés', async ({ page }) => {
+  // Aller à la page Canvas
+  await page.goto('http://localhost:5173/canvas');
+  await expect(page.locator('h1')).toHaveText('Page Canvas');
+
+    const sections = [
+        '1. Problème', '2. Segments', '3. Valeur', '4. Solution',
+        '5. Avantage', '6. Canaux', '7. Indicateurs', '8. Coûts', '9. Revenus'
+    ];
+
+    for (const section of sections) {
+        await expect(page.locator(`text=${section}`)).toBeVisible();
+    }
+
+});
+
+test('Vérifier le contenu de la page Canvas', async ({ page }) => {
+  await page.goto('http://localhost:5173/canvas');
+
+  // Attendre le chargement des éléments
+  await page.waitForSelector('.canvas');
+
+  // Vérifier le titre
+  await expect(page.locator('h1')).toHaveText('Page Canvas');
+
+  // Nouveau sélecteur plus précis
+  const canvasItems = page.locator('.canvas > div'); // Sélectionne les div directes dans .canvas
+  
+  // Vérifier le nombre d'éléments
+  await expect(canvasItems).toHaveCount(9);
+
+  // Contenu attendu
+  const expectedContent = [
+    { title: '1. Problème', description: '3 problèmes essentiels à résoudre pour le client' },
+    { title: '2. Segments', description: 'Les segments de clientèle visés' },
+    { title: '3. Valeur', description: 'La proposition de valeur' },
+    { title: '4. Solution', description: 'Les solutions proposées' },
+    { title: '5. Avantage', description: 'Les avantages concurrentiels' },
+    { title: '6. Canaux', description: 'Les canaux de distribution' },
+    { title: '7. Indicateurs', description: 'Les indicateurs clés de performance' },
+    { title: '8. Coûts', description: 'Les coûts associés' },
+    { title: '9. Revenus', description: 'Les sources de revenus' }
+  ];
+
+  // Vérifier chaque élément
+  for (let i = 0; i < expectedContent.length; i++) {
+    const item = canvasItems.nth(i);
+    await expect(item.locator('h3')).toHaveText(expectedContent[i].title);
+    await expect(item.locator('p')).toHaveText(expectedContent[i].description);
+  }
+});
+});
+
+test.describe('Tests de la page Home', () => {
+    
+  test('Vérifier la présence des projets', async ({ page }) => {
+      await page.goto('http://localhost:5173');
+
+      // Vérifier les titres des projets avec getByRole pour éviter les doublons
+      await expect(page.getByRole('heading', { name: 'Projet Alpha' })).toBeVisible();
+      await expect(page.getByRole('heading', { name: 'Projet Beta' })).toBeVisible();
+  });
+
+  test('Vérifier les membres des projets', async ({ page }) => {
+      await page.goto('http://localhost:5173');
+
+      const membresAlpha = ['Alice', 'Bob', 'Charlie'];
+      const membresBeta = ['David', 'Eve', 'Frank'];
+
+      for (const membre of membresAlpha) {
+          await expect(page.getByText(membre)).toBeVisible();
+      }
+      for (const membre of membresBeta) {
+          await expect(page.getByText(membre)).toBeVisible();
+      }
+  });
+
+  test('Vérifier les boutons Contact', async ({ page }) => {
+      await page.goto('http://localhost:5173');
+
+      // Vérifier que les boutons "Contact" existent et sont visibles
+      const contactButtons = await page.locator('button:has-text("Contact")').count();
+      expect(contactButtons).toBe(2); // Vérifie qu'il y a bien 2 boutons Contact
+  });
+
+  test('Vérifier la table des rendez-vous', async ({ page }) => {
+      await page.goto('http://localhost:5173');
+
+      await expect(page.getByRole('heading', { name: 'Rendez-vous' })).toBeVisible();
+
+      // Vérifier la première ligne du tableau
+      await expect(page.locator('table').getByRole('cell', { name: 'Projet Alpha' })).toBeVisible();
+      await expect(page.getByText('2025-03-10')).toBeVisible();
+      await expect(page.getByText('P106')).toBeVisible();
+
+      // Vérifier la deuxième ligne du tableau
+      await expect(page.locator('table').getByRole('cell', { name: 'Projet Beta' })).toBeVisible();
+      await expect(page.getByText('2025-04-15')).toBeVisible();
+      await expect(page.getByText('Td10')).toBeVisible();
+  });
+});