Add e2e tests

.eslintrc.json

@@ -7,7 +7,8 @@
     "plugin:import/errors",
     "airbnb",
     "plugin:prettier/recommended",
-    "prettier/react"
+    "prettier/react",
+    "plugin:cypress/recommended"
   ],
   "env": {
     "browser": true

README.md

@@ -19,6 +19,12 @@ Run the following to get started locally:
 
 **Note:** Reach out to your team lead for directions on how to receive the `CHECK_ACCESS_TOKEN`
 
+#### Run tests
+
+```sh
+  yarn test-dev
+```
+
 ## Attribution
 
 Promise Tracker is modelled on [Rouhani Meter](https://rouhanimeter.com) and made possible thank you to the generous support of DW Akademie and Meedan. Built by the Code for Africa Tech team and content courtesy of PesaCheck and ANCIR's iLab teams.

cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "viewportWidth": 1536,
+  "viewportHeight": 960
+}

cypress/integration/actNowPage.spec.js

@@ -0,0 +1,23 @@
+describe("Act Now page", () => {
+  it("renders Act Now page", () => {
+    cy.visit("/");
+    cy.get("[data-cy=navigation-buttons]").contains("Act Now").click();
+    cy.location("pathname", { timeout: 10000 }).should("include", "/act-now");
+    cy.get("[data-cy=actnow-desc]").contains(
+      "Act now and create the change you want in your area."
+    );
+  });
+  it("select promise to petition", () => {
+    cy.get("[data-cy=promise-select]").click();
+    cy.get("[data-cy=promise-item").first().click();
+  });
+  it("displays petiton form", () => {
+    cy.get("[data-cy=start-petition]").click();
+    cy.get("[data-cy=petition-form]").contains("Petition Title");
+    cy.get("[data-cy=petition-form]").contains("Category & Promise");
+    cy.get("[data-cy=petition-form]").contains("Recipient");
+    cy.get("[data-cy=petition-form]").contains("What is the Issue");
+    cy.get("[data-cy=petition-form]").contains("Featured Image");
+    cy.get("[data-cy=close-form]").click();
+  });
+});

cypress/integration/homePage.spec.js

@@ -0,0 +1,48 @@
+describe("Home page", () => {
+  it("renders Key Promises", () => {
+    cy.visit("/");
+    cy.get("[data-cy=key-promises]").contains("Key Promises");
+  });
+
+  it("renders Latest Promises", () => {
+    cy.get("[data-cy=latest-promises]").contains("Latest Promises");
+    cy.get("[data-cy=latest-promises]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+  });
+
+  it("renders Latest Articles", () => {
+    cy.get("[data-cy=latest-articles]").contains("Latest Articles");
+    cy.get("[data-cy=latest-articles]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(2);
+      });
+  });
+
+  it("renders Partners", () => {
+    cy.get("[data-cy=partners]").contains("Partners");
+    cy.get("[data-cy=partners]")
+      .find("a")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(6);
+      });
+  });
+
+  it("has Neswletter section", () => {
+    cy.get("[data-cy=subscribe]").contains("Subscribe");
+  });
+
+  it("has Act Now section", () => {
+    cy.get("[data-cy=act-now]").contains("Act Now");
+  });
+
+  it("renders Latest Promises", () => {
+    cy.get("[data-cy=latest-promises]").contains("Latest Promises");
+  });
+});

cypress/integration/promisesPage.spec.js

@@ -0,0 +1,105 @@
+describe("Promises page", () => {
+  it("renders Promises page", () => {
+    cy.visit("/");
+    cy.get("[data-cy=navigation-buttons]").contains("Promises").click();
+    cy.location("pathname", { timeout: 10000 }).should("include", "/promises");
+    cy.get("[data-cy=promises-section]").contains("Promises");
+  });
+  it("renders Promises categories", () => {
+    cy.get("[data-cy=promises-section]").contains("Promises by status");
+    cy.get("[data-cy=promises-section]").contains("Promises by category");
+  });
+  it("filter in-progress promises", () => {
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("In Progress").click();
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(3);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("In Progress").click();
+  });
+
+  it("filter unrated promises", () => {
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Unrated").click();
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(1);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Unrated").click();
+  });
+
+  it("filter stalled promises", () => {
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Stalled").click();
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(1);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Stalled").click();
+  });
+
+  it("filter governance category promises", () => {
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+
+    cy.get("[data-cy=filter-buttons]").contains("Governance").click();
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(1);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Governance").click();
+  });
+
+  it("filter health category promises", () => {
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(5);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Health").click();
+    cy.get("[data-cy=promises-section]")
+      .find("img")
+      .its("length")
+      .then((length) => {
+        expect(length).to.equal(2);
+      });
+    cy.get("[data-cy=filter-buttons]").contains("Health").click();
+  });
+
+  it("share promise to social platforms", () => {
+    cy.get("[data-cy=share-button").first().click();
+    cy.get("[data-cy=twitter]").should("be.visible");
+    cy.get("[data-cy=facebook]").should("be.visible");
+    cy.get("[data-cy=linkedin]").should("be.visible");
+    cy.get("[data-cy=share-button").first().click();
+  });
+});

cypress/integration/singlePromisePage.spec.js

@@ -0,0 +1,17 @@
+describe("Single Promise page", () => {
+  it("renders promise radar", () => {
+    cy.visit("/promises");
+    cy.get("[data-cy=promises-section]").contains("Promises");
+    /* eslint-disable cypress/no-unnecessary-waiting */
+    cy.get("[data-cy=promises-section").find("a").first().click().wait(20000);
+    cy.get("[data-cy=promise-radar]").should("be.visible");
+  });
+  it("renders promise chart, dataset and datasource", () => {
+    cy.get("[data-cy=datasource]").scrollIntoView();
+    cy.get("[data-cy=datasource").should("be.visible");
+    cy.get("[data-cy=dataset]").scrollIntoView();
+    cy.get("[data-cy=dataset]").should("be.visible");
+    cy.get("[data-cy=promise-chart]").scrollIntoView();
+    cy.get("[data-cy=promise-chart]").should("be.visible");
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = () => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -45,10 +45,13 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
+    "cypress": "^6.1.0",
+    "cypress-graphql-mock": "^0.5.0-alpha.4",
     "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.15.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
+    "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-json": "^2.1.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
@@ -65,6 +68,8 @@
     "build": "next build",
     "dev": "yarn dev:next",
     "dev:next": "next dev",
+    "cy-open": "cypress open",
+    "test-dev": "yarn dev & yarn cy-open",
     "export": "yarn run build && next export",
     "format": "yarn prettier --write --ignore-path './.gitignore' \"**/*.+(json|md|yml)\" './'",
     "format-staged": "prettier --write",

src/components/ActNow/index.js

@@ -85,7 +85,11 @@ function ActNow({ actionLabel, description, title, ...props }) {
         <Grid container className={classes.content}>
           <Grid item xs={12} lg={6} container alignItems="center">
             <div className={classes.textContainer}>
-              <Typography variant="h1" className={classes.title}>
+              <Typography
+                data-cy="act-now"
+                variant="h1"
+                className={classes.title}
+              >
                 {title}
               </Typography>
               <Typography

src/components/DataSource/index.js

@@ -16,7 +16,7 @@ function DataSource({ classes: classesProp, documents, label, promise }) {
     return null;
   }
   return (
-    <div className={classes.root}>
+    <div className={classes.root} data-cy="datasource">
       <div className={classes.titleShareContainer}>
         <Typography className={classes.title} variant="h4">
           {label}

src/components/Dataset/index.js

@@ -98,7 +98,12 @@ function Dataset({ dataset, ...props }) {
   const hasHxlTags =
     tags && tags.find((tag) => tag.name.toLowerCase() === "hxl");
   return (
-    <Grid container direction="column" className={classes.root}>
+    <Grid
+      container
+      direction="column"
+      className={classes.root}
+      data-cy="dataset"
+    >
       <A
         href={`${config.CKAN_BACKEND_URL}/dataset/${name}`}
         underline="none"

src/components/FormDialog/Form.js

@@ -104,7 +104,7 @@ function Form({ ...props }) {
     : "body2";
 
   return (
-    <form>
+    <form data-cy="petition-form">
       <FormTextField
         labelText={petitionLabel}
         helperDescription={petitionHelper}

src/components/FormDialog/index.js

@@ -41,6 +41,7 @@ function FormDialog({ open, handleFormClose, ...props }) {
       >
         <Typography variant="h2">{petitionTitle}</Typography>
         <IconButton
+          data-cy="close-form"
           disableRipple
           disableFocusRipple
           aria-label="close"

src/components/KeyPromises/index.js

@@ -40,6 +40,7 @@ function KeyPromises({ actionLabel, items, title, titleProps, ...props }) {
   return (
     <div className={classes.root}>
       <Section
+        data-cy="key-promises"
         title={title}
         titleProps={{ ...DEFAULT_TITLE_PROPS, ...titleProps }}
         classes={{ root: classes.section, title: classes.sectionTitle }}

src/components/LatestArticles/index.js

@@ -22,6 +22,7 @@ function LatestArticles({ actionLabel, items, title, ...props }) {
   }
   return (
     <Section
+      data-cy="latest-articles"
       title={title}
       classes={{ root: classes.section, title: classes.sectionTitle }}
     >

src/components/LatestPromises/index.js

@@ -25,6 +25,7 @@ function LatestPromises({ actionLabel, items, title, ...props }) {
   }
   return (
     <Section
+      data-cy="latest-promises"
       title={title}
       classes={{ root: classes.section, title: classes.sectionTitle }}
     >