feat: Ajoute des tests end-to-end sur la page institutions

cypress/e2e/institutions.cy.js

@@ -0,0 +1,70 @@
+import { interceptAidesJeunesStatistics } from "../support/utils.js"
+
+describe("Institution Page Functionalities", () => {
+  beforeEach(() => {
+    const interceptIdentifier = interceptAidesJeunesStatistics()
+    cy.visitFromHome("/institutions")
+    cy.wait(interceptIdentifier)
+  })
+
+  it("displays the navigation menu and page title", () => {
+    cy.checkMenu()
+    cy.checkTitle()
+  })
+
+  it("presents a chart with funnel results", () => {
+    cy.checkTable("institutions-table", 0, "CC du Quercy Caussadais")
+    cy.checkTable("institutions-table", 0, "248200057")
+    cy.checkTable("institutions-table", 0, "CC")
+    cy.checkTable("institutions-table", 0, "20937")
+    cy.checkTable("institutions-table", 0, "0")
+  })
+
+  describe("Filtering Table By Institution Name", () => {
+    beforeEach(() => {
+      cy.get('[data-testid="filter-name"]').type("Tarn-et-Garonnaise")
+    })
+
+    it("shows entries matching the input name", () => {
+      cy.checkTable(
+        "institutions-table",
+        0,
+        "CC de la Lomagne Tarn-et-Garonnaise",
+      )
+    })
+  })
+
+  describe("Filtering Table By Institution Code", () => {
+    beforeEach(() => {
+      cy.get('[data-testid="filter-code"]').type("248200107")
+    })
+
+    it("displays entries corresponding to the input code", () => {
+      cy.checkTable(
+        "institutions-table",
+        0,
+        "CC du Quercy Rouergue et des Gorges de l'Aveyron",
+      )
+    })
+  })
+
+  describe("Filtering Table By Institution Type", () => {
+    beforeEach(() => {
+      cy.get('[data-testid="filter-type"]').select("CA")
+    })
+
+    it("reveals entries of the selected institution type", () => {
+      cy.checkTable("institutions-table", 0, "CA Grand Montauban")
+    })
+  })
+
+  describe("Sorting Table By Population", () => {
+    beforeEach(() => {
+      cy.get('[data-testid="column-population"]').click()
+    })
+
+    it("orders entries based on population", () => {
+      cy.checkTable("institutions-table", 0, "CA Grand Montauban")
+    })
+  })
+})

cypress/fixtures/aidesJeunesStatistics.json

@@ -118,5 +118,39 @@
       "showAccompanimentCount": 66,
       "clickAccompanimentCount": 37
     }
-  }
+  },
+  "institutions": [
+    {
+      "name": "CC du Quercy Caussadais",
+      "code": "248200057",
+      "type": "CC",
+      "population": 20937,
+      "simulationCount": 0,
+      "benefitCount": 0
+    },
+    {
+      "name": "CC de la Lomagne Tarn-et-Garonnaise",
+      "code": "248200065",
+      "type": "CC",
+      "population": 10361,
+      "simulationCount": 0,
+      "benefitCount": 0
+    },
+    {
+      "name": "CA Grand Montauban",
+      "code": "248200099",
+      "type": "CA",
+      "population": 80896,
+      "simulationCount": 0,
+      "benefitCount": 1
+    },
+    {
+      "name": "CC du Quercy Rouergue et des Gorges de l'Aveyron",
+      "code": "248200107",
+      "type": "CC",
+      "population": 7864,
+      "simulationCount": 0,
+      "benefitCount": 0
+    }
+  ]
 }

pages/institutions.js

@@ -92,6 +92,7 @@ const InstitutionsStats = () => {
             type="text"
             value={queryName}
             onChange={(e) => setQueryName(e.target.value)}
+            data-testid="filter-name"
           />
         </div>
         <div>
@@ -100,13 +101,15 @@ const InstitutionsStats = () => {
             type="text"
             value={queryCode}
             onChange={(e) => setQueryCode(e.target.value)}
+            data-testid="filter-code"
           />
         </div>
         <div>
           <p>Filtrer par type</p>
           <select
             onChange={(e) => setSelectedType(e.target.value)}
             value={selectedType}
+            data-testid="filter-type"
           >
             <option value={allType}>{allType}</option>
             {dataService.getUniqueValuesForKey("type").map((k) => {
@@ -137,6 +140,7 @@ const InstitutionsStats = () => {
                 <div
                   className={"sortable"}
                   onClick={() => handleHeaderClick("population")}
+                  data-testid="column-population"
                 >
                   Population
                 </div>