contact form tests

cypress/component/utils.cy.ts

@@ -1,55 +0,0 @@
-// import { Tournament } from "@/types";
-// import getTournaments from "@/utils/getTournamentData";
-// import { createLayerGroups } from "@/utils/layerGroups";
-//
-
-// // TODO rewrite this test suite since I no longer use fetch for the map
-// // TODO add tests for the API once it is active
-// describe("Unit tests of utils directory", () => {
-//   describe("Retrieve tournament data from DB", () => {
-//     let response: Tournament[];
-//     let results: Tournament[];
-//
-//     describe("France", () => {
-//       before(async () => {
-//         response = await getTournaments("france");
-//         results = response.splice(0, 5);
-//       });
-//
-//       it("log first 5 results", () => {
-//         results.forEach((result) => cy.log(JSON.stringify(result)));
-//       });
-//
-//       it("check tournament urls are active", () => {
-//         results.forEach((result) => cy.request(result.url));
-//       });
-//     });
-//   });
-//
-//   describe("Create layer groups for map markers", () => {
-//     let response: Tournament[];
-//     let results: Tournament[];
-//     describe("France", () => {
-//       const timeControls = [
-//         { name: "Cadence Lente", colour: "green" },
-//         { name: "Rapide", colour: "blue" },
-//         { name: "Blitz", colour: "yellow" },
-//         { name: "1h KO", colour: "red" },
-//       ];
-//
-//       before(async () => {
-//         response = await getTournaments("france");
-//         results = response.splice(0, 5);
-//       });
-//
-//       it("generate layer groups", () => {
-//         const result = timeControls.map((timeControl) => {
-//           return createLayerGroups(timeControl.name, timeControl.colour, {
-//             tournamentData: results,
-//           });
-//         });
-//         cy.wrap(result.length).should("be.greaterThan", 0);
-//       });
-//     });
-//   });
-// });

cypress/e2e/contactForm.cy.ts

@@ -0,0 +1,50 @@
+describe("Contact form", () => {
+  const email = "test@test.com";
+  const invalidEmail = "test@";
+  const subject = "Test Subject";
+  const message = "Test message";
+
+  describe("Invalid data", () => {
+    beforeEach(() => {
+      cy.visit("/contactez-nous");
+    });
+
+    it("invalid email address", () => {
+      cy.getByData("email-input").type(invalidEmail);
+      cy.getByData("subject-input").type(subject);
+      cy.getByData("message-input").type(message);
+      cy.getByData("submit-button").click();
+      cy.getByData("info-message").should("have.text", "");
+    });
+
+    it("missing subject", () => {
+      cy.getByData("email-input").type(email);
+      cy.getByData("message-input").type(message);
+      cy.getByData("submit-button").click();
+      cy.getByData("info-message").should("have.text", "");
+    });
+
+    it("missing message", () => {
+      cy.getByData("email-input").type(email);
+      cy.getByData("subject-input").type(subject);
+      cy.getByData("submit-button").click();
+      cy.getByData("info-message").should("have.text", "");
+    });
+  });
+
+  describe("Valid data", () => {
+    beforeEach(() => {
+      cy.visit("/contactez-nous");
+    });
+
+    it("valid input", () => {
+      cy.getByData("email-input").type(email);
+      cy.getByData("subject-input").type(subject);
+      cy.getByData("message-input").type(message);
+      cy.getByData("submit-button").click().should("be.disabled");
+      cy.wait(3000);
+      cy.getByData("info-message").contains("Thank you");
+      cy.getByData("submit-button").click().should("be.not.disabled");
+    });
+  });
+});

cypress/e2e/links.cy.ts

@@ -1,11 +1,27 @@
-describe("Test all links", () => {
+describe("Test links", () => {
   const pages = ["tournois", "qui sommes-nous", "contactez-nous"];
 
   const navLinkToSlug = (navLink: string) => {
     return navLink.replace(/\s+/g, "-");
   };
 
-  it("Check navbar links point to correct pathname as a slug", () => {
+  const testLinks = () => {
+    cy.get("a:not([href*='mailto:']):not(nav a):not(footer a)").each((link) => {
+      if (
+        !link
+          .prop("href")
+          .includes("http://www.echecs.asso.fr/FicheTournoi.aspx") // ignore every external FFE tournament link
+      ) {
+        cy.request({
+          url: link.prop("href"),
+          failOnStatusCode: false,
+        });
+        cy.log(link.prop("href"));
+      }
+    });
+  };
+
+  it("navbar links point to correct pathname as a slug", () => {
     cy.viewport(600, 600);
     cy.visit("/");
     pages.forEach((page) => {
@@ -16,22 +32,41 @@ describe("Test all links", () => {
     });
   });
 
-  it("Check dead links", () => {
-    pages.forEach((page) => {
-      cy.visit(`/${navLinkToSlug(page)}`);
-      cy.get("a:not([href*='mailto:']").each((link) => {
-        if (
-          !link
-            .prop("href")
-            .includes("http://www.echecs.asso.fr/FicheTournoi.aspx") // ignore every external FFE tournament link
-        ) {
+  // TODO consider doing .each from pages array once links are on each page
+  // TODO at present, the commented out tests have no links so fail
+  it("homepage dead links", () => {
+    cy.visit("/");
+    testLinks();
+  });
+
+  it("tournois dead links", () => {
+    cy.visit("/tournois");
+    testLinks();
+  });
+
+  // it("qui-sommes-nous dead links", () => {s
+  //   cy.visit("/qui-sommes-nous");
+  //   testLinks();
+  // });
+  //
+  // it("contactez-nous dead links", () => {
+  //   cy.visit("/contactez-nous");
+  //   testLinks();
+  // });
+
+  //TODO consider 5 random links rather than first 5
+  it("first 5 tournament external links", () => {
+    cy.visit("/tournois");
+    cy.get("a:not([href*='mailto:']):not(nav a):not(footer a)").each(
+      (link, index) => {
+        if (index < 5) {
           cy.request({
             url: link.prop("href"),
             failOnStatusCode: false,
           });
           cy.log(link.prop("href"));
         }
-      });
-    });
+      }
+    );
   });
 });

cypress/support/commands.ts

@@ -1,3 +1,13 @@
+declare namespace Cypress {
+  interface Chainable {
+    getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>;
+  }
+}
+
+Cypress.Commands.add("getByData", (selector) => {
+  return cy.get(`[data-cy=${selector}]`);
+});
+
 /// <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to
@@ -34,4 +44,4 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }