Merge pull request #78 from globalfund/develop

Release

README.md

@@ -30,8 +30,8 @@ In order to be able to successfully run or build the app you need to create an e
 REACT_APP_API=<data middleware api url>
 REACT_APP_MAPBOX_TOKEN=<mapbox account token>
 REACT_APP_GOOGLE_ANALYTICS_ID=<google analytics app id>
-REACT_APP_CMS_API=<cockpit cms api url>
-REACT_APP_CMS_TOKEN=<cockpit cms api token>
+REACT_APP_CMS_API=<strapi cms api url>
+REACT_APP_CMS_TOKEN=<strapi cms api token>
 ```
 
 `REACT_APP_API`: is the url where the data middleware API runs on. If running [Data API Middleware](https://github.com/globalfund/data-explorer-server/) locally then you can use `http://localhost:4200`.
@@ -40,9 +40,9 @@ REACT_APP_CMS_TOKEN=<cockpit cms api token>
 
 `REACT_APP_GOOGLE_ANALYTICS_ID`(optional): Google Analytics ID in order to be able to make use of Google Analytics services.
 
-`REACT_APP_CMS_API`: is the url where the [Cockpit CMS API](https://github.com/zimmerman-team/the-data-explorer-cms/) runs on.
+`REACT_APP_CMS_API`: is the url where the [Strapi CMS API](https://github.com/zimmerman-team/CMS/) runs on. The project/de branch.
 
-`REACT_APP_CMS_TOKEN`: is the API token retrieved from the Cockpit CMS interface.
+`REACT_APP_CMS_TOKEN`: is the API token retrieved from the Strapi CMS interface.
 
 ---
 
@@ -70,6 +70,42 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+## Tests - Cypress
+
+Cypress is used for end-to-end testing to ensure that the application functions as expected in the browser. To run the Cypress tests, follow these steps:
+
+In addition to the env variables above the following is also needed for cypress tests to run successfully:
+
+```
+REACT_APP_BASE_URL
+```
+
+`REACT_APP_BASE_URL`: This is the url your application runs on locally it's usually `http://localhost:3000`
+
+### Install Cypress dependencies
+
+If you haven't already installed Cypress, ensure all dependencies are installed by running:
+
+#### `yarn install`
+
+### Start the Application
+
+Ensure your application is running before starting the Cypress tests. You can do this by running:
+
+#### `yarn start`
+
+### Open Cypress Test Runner
+
+Open the Cypress Test Runner by running:
+
+#### `yarn cypress open`
+
+### Run Cypress Tests in Headless Mode
+
+Alternatively, you can run all Cypress tests in headless mode (without the GUI) directly from the command line using:
+
+#### `yarn cypress run`
+
 ## Learn More
 
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "cypress";
+
+require("dotenv").config();
+
+export default defineConfig({
+  projectId: 'ioki3q',
+  viewportHeight: 820,
+  viewportWidth: 1440,
+  e2e: {
+    env: {
+      api_url: process.env.REACT_APP_API,
+    },
+    baseUrl: process.env.REACT_APP_BASE_URL,
+  },
+});

cypress/e2e/datasets/access-to-funding.page.cy.ts

@@ -0,0 +1,150 @@
+/// <reference types="cypress" />
+
+// @ts-ignore
+const interceptAllRequests = () => {
+  const apiUrl = Cypress.env("api_url");
+  cy.intercept(`${apiUrl}/**`).as("apiData");
+};
+
+// @ts-ignore
+const waitData = (requestCount: number) => {
+  for (let i = 0; i < requestCount; i++) {
+    cy.wait("@apiData");
+  }
+};
+
+describe(
+  "Testing The Datasets/Access to Funding Page",
+  { scrollBehavior: false },
+  () => {
+    beforeEach(() => {
+      interceptAllRequests();
+
+      cy.visit("/");
+      waitData(22);
+      cy.contains("[data-cy=header-menu-button]", "Datasets").click();
+      cy.contains("[data-cy=header-menu-button]", "Access to Funding").click();
+      waitData(8);
+    });
+
+    it("displays the header", { scrollBehavior: "nearest" }, () => {
+      cy.get("h1").should("have.text", "Access to Funding");
+      cy.contains("Eligible Countries by Numbers").should("be.visible");
+      cy.contains("Segmented by Components.").should("be.visible");
+      cy.contains("Countries Eligible for HIV/AIDS").should("be.visible");
+      cy.contains("Countries Eligible for Malaria").should("be.visible");
+      cy.contains("Countries Eligible for Tuberculosis").should("be.visible");
+    });
+
+    it("Can switch eligibility year", { scrollBehavior: "nearest" }, () => {
+      cy.contains('[data-cy="category-dropdown-button"]', "2023").click();
+
+      cy.get('[data-cy="category-dropdown-menu"]')
+        .filter((_index, parent) => {
+          return Cypress.$(parent).css("visibility") !== "hidden";
+        })
+        .within(() => {
+          cy.contains('[data-cy="category-dropdown-item"]', "2022").click();
+        });
+
+      waitData(1);
+
+      cy.contains('[data-cy="category-dropdown-button"]', "2022").should(
+        "be.visible"
+      );
+    });
+
+    it("shows the eligibility block", { scrollBehavior: "nearest" }, () => {
+      cy.contains('[data-cy="dataset-chart-block"]', "Eligibility")
+        .first()
+        .within(() => {
+          cy.contains("Country eligibility for funding over time.").should(
+            "be.visible"
+          );
+          cy.get('[data-cy="table"]').should("be.visible");
+        });
+    });
+
+    it(
+      "Shows the allocation block and can switch chart type",
+      { scrollBehavior: "nearest" },
+      () => {
+        cy.contains('[data-cy="dataset-chart-block"]', "Allocation")
+          .first()
+          .within(() => {
+            cy.contains("Allocations amounts for countries.").should(
+              "be.visible"
+            );
+            cy.get('[data-cy="sunburst-chart"]').should("be.visible");
+
+            cy.contains(
+              '[data-cy="category-dropdown-button"]',
+              "Sunburst Chart"
+            ).click();
+          });
+
+        cy.get('[data-cy="category-dropdown-menu"]')
+          .filter((_index, parent) => {
+            return Cypress.$(parent).css("visibility") !== "hidden";
+          })
+          .within(() => {
+            cy.contains(
+              '[data-cy="category-dropdown-item"]',
+              "Treemap"
+            ).click();
+          });
+
+        cy.contains("[data-cy=dataset-chart-block]", "Allocation").within(
+          () => {
+            cy.get('[data-cy="treemap-chart"]').should("be.visible");
+            cy.contains(
+              '[data-cy="category-dropdown-button"]',
+              "Treemap"
+            ).click();
+          }
+        );
+
+        cy.get('[data-cy="category-dropdown-menu"]')
+          .filter((_index, parent) => {
+            return Cypress.$(parent).css("visibility") !== "hidden";
+          })
+          .within(() => {
+            cy.contains(
+              '[data-cy="category-dropdown-item"]',
+              "Table View"
+            ).click();
+          });
+
+        cy.contains("[data-cy=dataset-chart-block]", "Allocation").within(
+          () => {
+            cy.get('[data-cy="table"]').should("be.visible");
+          }
+        );
+
+        cy.get('[data-cy="allocation-block-2"]').within(() => {
+          cy.contains("Cumulative Allocation by Cycles").should("be.visible");
+          cy.contains("Accompanied by the Component Breakdown.").should(
+            "be.visible"
+          );
+
+          cy.get('[data-cy="bar-series-chart"]').should("be.visible");
+        });
+      }
+    );
+
+    it(
+      "shows the funding requests block",
+      { scrollBehavior: "nearest" },
+      () => {
+        cy.contains('[data-cy="dataset-chart-block"]', "Funding Requests")
+          .first()
+          .within(() => {
+            cy.contains("Funding request applications by countries.").should(
+              "be.visible"
+            );
+            cy.get('[data-cy="table"]').should("be.visible");
+          });
+      }
+    );
+  }
+);

cypress/e2e/datasets/annual-results.cy.ts

@@ -0,0 +1,132 @@
+/// <reference types="cypress" />
+
+// @ts-ignore
+const interceptAllRequests = () => {
+  const apiUrl = Cypress.env("api_url");
+  cy.intercept(`${apiUrl}/**`).as("apiData");
+};
+
+// @ts-ignore
+const waitData = (requestCount: number) => {
+  for (let i = 0; i < requestCount; i++) {
+    cy.wait("@apiData");
+  }
+};
+
+describe("Testing The Location page", () => {
+  describe("Testing The Datasets/Annual Results Page", () => {
+    beforeEach(() => {
+      interceptAllRequests();
+
+      cy.visit("/");
+      waitData(22);
+      cy.contains("[data-cy=header-menu-button]", "Datasets").click();
+      cy.contains("[data-cy=header-menu-button]", "Annual Results").click();
+      waitData(4);
+    });
+
+    it("displays the header", () => {
+      cy.get("h1").should("have.text", "Annual Results");
+      cy.contains(
+        "Indicator results reported as part of annual Results Report."
+      ).should("be.visible");
+      cy.contains("People on antiretroviral therapy for HIV in 2022").should(
+        "be.visible"
+      );
+      cy.contains("People with TB treated in 2022").should("be.visible");
+      cy.contains("Mosquito nets distributed in 2022").should("be.visible");
+    });
+
+    it("Can filter page data", { scrollBehavior: false }, () => {
+      cy.get('[data-cy="datasets-filter-btn"]').click();
+      cy.get('[data-cy="filter-panel"]').should("be.visible");
+
+      cy.contains('[data-cy="filter-list-accordion"]', "Geography").within(
+        () => {
+          cy.get('[data-cy="filter-list-accordion-summary"]').click();
+          cy.get('[data-cy="filter-panel-search-input"]')
+            .first()
+            .type("Europe");
+          cy.contains(
+            '[data-cy="filter-list-content-accordion-summary"]',
+            "Europe"
+          ).within(() => {
+            cy.get('[data-cy="filter-list-content-checkbox"]').click();
+            waitData(4);
+          });
+        }
+      );
+
+      cy.get('[data-cy="filter-panel"]').within(() => {
+        cy.contains('[data-cy="applied-filter"]', "Europe").should(
+          "be.visible"
+        );
+      });
+    });
+
+    it("Can switch the data view", { scrollBehavior: false }, () => {
+      cy.get('[data-cy="toolbar-right-content"]').within(() => {
+        cy.contains('[data-cy="category-dropdown-button"]', "2022").click();
+      });
+
+      cy.get('[data-cy="category-dropdown-menu"]')
+        .filter((_index, parent) => {
+          return Cypress.$(parent).css("visibility") !== "hidden";
+        })
+        .within(() => {
+          cy.contains('[data-cy="category-dropdown-item"]', "2021").click();
+        });
+
+      waitData(4);
+
+      cy.contains('[data-cy="category-dropdown-button"]', "2021").should(
+        "be.visible"
+      );
+
+      cy.contains("People on antiretroviral therapy for HIV in 2021").should(
+        "be.visible"
+      );
+    });
+
+    it(
+      "Shows the Annual Results block and can switch chart type",
+      { scrollBehavior: "nearest" },
+      () => {
+        cy.contains('[data-cy="dataset-chart-block"]', "Annual Results")
+          .first()
+          .within(() => {
+            cy.get('[data-cy="polyline-tree"]').should("be.visible");
+
+            cy.contains(
+              '[data-cy="category-dropdown-button"]',
+              "Polyline Tree"
+            ).click();
+          });
+
+        cy.get('[data-cy="category-dropdown-menu"]')
+          .filter((_index, parent) => {
+            return Cypress.$(parent).css("visibility") !== "hidden";
+          })
+          .within(() => {
+            cy.contains(
+              '[data-cy="category-dropdown-item"]',
+              "Table View"
+            ).click();
+          });
+
+        cy.contains("[data-cy=dataset-chart-block]", "Annual Results").within(
+          () => {
+            cy.get('[data-cy="table"]').should("be.visible");
+          }
+        );
+      }
+    );
+
+    it("Shows the Documents block ", { scrollBehavior: "nearest" }, () => {
+      cy.get('[data-cy="documents-block"]').within(() => {
+        cy.contains("Documents").should("be.visible");
+        cy.get('[data-cy="table"]').should("be.visible");
+      });
+    });
+  });
+});