e2e and component testing started

app/about/page.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/components/Layout";
 
-export default function Home() {
+export default function About() {
   return (
     <Layout>
       <header className="grid h-[calc(100%-144px)] md:h-[calc(100%-112px)] place-items-center">

app/contact/page.tsx

@@ -1,6 +1,6 @@
 import Layout from "@/components/Layout";
 
-export default function Home() {
+export default function Contact() {
   return (
     <Layout>
       <header className="grid h-[calc(100%-144px)] md:h-[calc(100%-112px)] place-items-center">

cypress.config.ts

@@ -7,4 +7,11 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
+
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
 });

cypress/component/mounting.cy.tsx

@@ -0,0 +1,49 @@
+import Home from "@/app/page";
+import About from "@/app/about/page";
+import Contact from "@/app/contact/page";
+
+const navbarFooterCheck = () => {
+  it("includes navbar", () => {
+    cy.get("nav");
+  });
+
+  it("includes footer", () => {
+    cy.get("footer");
+  });
+};
+
+describe("Verify home page", () => {
+  beforeEach(() => {
+    cy.mount(<Home />);
+  });
+
+  it("should have the correct h1 tags with website name included", () => {
+    cy.get("h1").contains("echecs france", { matchCase: false });
+  });
+
+  navbarFooterCheck();
+});
+
+describe("Verify about page", () => {
+  beforeEach(() => {
+    cy.mount(<About />);
+  });
+
+  it("should have the correct h1 tags with page title included", () => {
+    cy.get("h1").contains("about", { matchCase: false });
+  });
+
+  navbarFooterCheck();
+});
+
+describe("Verify contact page", () => {
+  beforeEach(() => {
+    cy.mount(<Contact />);
+  });
+
+  it("should have the correct h1 tags with page title included", () => {
+    cy.get("h1").contains("contact", { matchCase: false });
+  });
+
+  navbarFooterCheck();
+});

cypress/e2e/links.cy.ts

@@ -0,0 +1,31 @@
+describe("Test all links", () => {
+  const pages = ["tournois", "about", "contact"];
+
+  it("Check navbar links point to correct pathname", () => {
+    cy.visit("/");
+    pages.forEach((page) => {
+      cy.contains(page, { matchCase: false }).click();
+      cy.location("pathname").should("eq", `/${page}`); // url path matches link name
+      cy.go("back");
+    });
+  });
+
+  it("Check dead links", () => {
+    pages.forEach((page) => {
+      cy.visit(`/${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
+        ) {
+          cy.request({
+            url: link.prop("href"),
+            failOnStatusCode: false,
+          });
+          cy.log(link.prop("href"));
+        }
+      });
+    });
+  });
+});

cypress/e2e/spec.cy.ts

@@ -1,21 +0,0 @@
-describe("Test all links", () => {
-  // TODO traverse entire site
-  it("Test all links on homepage return 200 status", () => {
-    cy.visit("/");
-    cy.get("a").each((page) => {
-      cy.request(page.prop("href"));
-    });
-  });
-
-  it("Check navbar links point to correct pathname", () => {
-    const pages = ["tournois", "about", "contact"];
-
-    cy.visit("/");
-
-    pages.forEach((page) => {
-      cy.contains(page, { matchCase: false }).click();
-      cy.location("pathname").should("eq", `/${page}`); // url path matches link name
-      cy.go("back");
-    });
-  });
-});

cypress/fixtures/tournamentData.json

@@ -0,0 +1,32 @@
+[
+  {
+    "_id": "1",
+    "town": "Testville",
+    "department": "55",
+    "tournament": "Test Tournament 1",
+    "url": "https://www.google.com",
+    "time_control": "Cadence Lente",
+    "date": "01/01/29",
+    "coordinates": [55, 1]
+  },
+  {
+    "_id": "2",
+    "town": "Testville 2",
+    "department": "55",
+    "tournament": "Test Tournament 2",
+    "url": "https://www.google.com",
+    "time_control": "Rapide",
+    "date": "01/01/29",
+    "coordinates": [55, 0.5]
+  },
+  {
+    "_id": "3",
+    "town": "Testville 3",
+    "department": "55",
+    "tournament": "Test Tournament 3",
+    "url": "https://www.google.com",
+    "time_control": "BLitz",
+    "date": "01/01/28",
+    "coordinates": [55.5, 0.5]
+  }
+]

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.ts 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')
+
+import { mount } from 'cypress/react18'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

package.json

@@ -7,12 +7,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "jest": "jest",
+    "test": "jest",
-    "jest:watch": "jest --watch",
     "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
+    "cypress:run": "cypress run"
-    "test": "npm run cypress:run && npm run jest",
-    "test:watch": "npm run cypress:open && npm run jest:watch"
   },
   "dependencies": {
     "@types/node": "20.2.3",