updated tests

app/contactez-nous/page.tsx

@@ -9,7 +9,7 @@ export default function Contact() {
         <div className="pt-8 pb-32 lg:pt-16 px-4 mx-auto max-w-screen-md">
           <h2
             className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
-            data-cy="header2"
+            data-test="header2"
           >
             Contactez-Nous
           </h2>

app/page.tsx

@@ -16,7 +16,7 @@ export default function Home() {
           />
         </div>
         <div className="absolute text-center text-white">
-          <h1 className="text-5xl p-5" data-cy="header1">
+          <h1 className="text-5xl p-5" data-test="header1">
             Echecs France
           </h1>
           <h2 className="text-3xl p-5">

app/qui-sommes-nous/page.tsx

@@ -8,7 +8,7 @@ export default function About() {
         <div className="absolute">
           <h2
             className="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
-            data-cy="header2"
+            data-test="header2"
           >
             Qui Sommes-Nous?
           </h2>

components/ContactForm.tsx

@@ -17,7 +17,7 @@ const ContactForm = () => {
       className={`${
         responseMessage.isSuccessful ? "text-green-600" : "text-red-600"
       } italic`}
-      data-cy="info-message"
+      data-test="info-message"
     >
       {responseMessage.message}
     </p>
@@ -52,7 +52,7 @@ const ContactForm = () => {
             className="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
             placeholder="nom@exemple.com"
             required
-            data-cy="email-input"
+            data-test="email-input"
           />
         </div>
         <div>
@@ -70,7 +70,7 @@ const ContactForm = () => {
             className="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
             placeholder="Le motif de ma demande"
             required
-            data-cy="subject-input"
+            data-test="subject-input"
           />
         </div>
         <div className="sm:col-span-2">
@@ -87,7 +87,7 @@ const ContactForm = () => {
             rows={6}
             className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
             placeholder="Détaillez ici votre demande..."
-            data-cy="message-input"
+            data-test="message-input"
             required
           ></textarea>
         </div>
@@ -95,7 +95,7 @@ const ContactForm = () => {
           disabled={isSending}
           type="submit"
           className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-teal-600 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800 dark:text-white disabled:opacity-25"
-          data-cy="submit-button"
+          data-test="submit-button"
         >
           {isSending ? "Sending..." : "Send Message"}
         </button>

components/Footer.tsx

@@ -5,7 +5,7 @@ export default function Footer() {
   return (
     <footer
       className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700 z-30"
-      data-cy="footer"
+      data-test="footer"
     >
       <div className="p-2">
         <p>&copy; {new Date().getFullYear()} - Owen Rees</p>

components/Hamburger.tsx

@@ -11,7 +11,7 @@ const Hamburger = () => {
       <div
         ref={hamburgerButtonRef}
         className="hamburger-button space-y-2 relative z-[99999]"
-        data-cy="hamburger-button"
+        data-test="hamburger-button"
         onClick={() => setMenuVisible(!menuVisible)}
       >
         <div

components/Navbar.tsx

@@ -6,7 +6,7 @@ export default function Navbar() {
   return (
     <nav
       className="w-full relative border-b-[1px] pt-5 mt-0 px-5 md:pt-2 bg-white dark:bg-gray-800 dark:border-gray-700 overflow-x-clip"
-      data-cy="navbar"
+      data-test="navbar"
     >
       <div className="container mx-auto flex items-center">
         <div className="pb-3 justify-center flex w-full md:w-1/2 md:pb-0 md:justify-start font-extrabold">
@@ -17,13 +17,13 @@ export default function Navbar() {
             <span className="text-2xl">Echecs France</span>
           </Link>
         </div>
-        <div className="pb-2 md:hidden" data-cy="mobile-menu">
+        <div className="pb-2 md:hidden" data-test="mobile-menu">
           <Hamburger />
         </div>
 
         <div
           className="hidden pt-2 justify-center md:flex md:w-1/2 md:justify-end"
-          data-cy="desktop-menu"
+          data-test="desktop-menu"
         >
           <ul className="list-reset text-gray-900 dark:text-white no-underline flex flex-1 justify-around md:flex-none items-center">
             <li className="mr-10">

components/ScrollToTopButton.tsx

@@ -36,7 +36,7 @@ const ScrollToTopButton = () => {
   return (
     <button
       className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
-      data-cy="scroll-to-top-button"
+      data-test="scroll-to-top-button"
     >
       <FaArrowUp
         onClick={() => handleScrollToTop(scrollToTopElementRef.current)}

components/ThemeSwitcher.tsx

@@ -22,7 +22,7 @@ const ThemeSwitcher = () => {
       {colorTheme === "light" ? (
         <div
           className="toggle-dark"
-          data-cy="toggle-dark"
+          data-test="toggle-dark"
           onClick={() => setTheme("light")}
         >
           <MdBrightness2 className="theme-icon-dark" />
@@ -30,7 +30,7 @@ const ThemeSwitcher = () => {
       ) : (
         <div
           className="toggle"
-          data-cy="toggle"
+          data-test="toggle"
           onClick={() => setTheme("dark")}
         >
           <MdCircle className="theme-icon" />

components/TournamentTable.tsx

@@ -62,7 +62,7 @@ export default function TournamentTable({
     <section
       className="tournament-table w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-173px)] lg:col-start-2 lg:col-end-3 lg:overflow-y-scroll"
       id="tournament-table"
-      data-cy="tournament-table-div"
+      data-test="tournament-table-div"
     >
       <div className="flex z-10">
         <SearchBar
@@ -75,7 +75,7 @@ export default function TournamentTable({
       </div>
       <table
         className="relative table-fixed w-full text-center text-xs"
-        data-cy="tournament-table"
+        data-test="tournament-table"
       >
         <thead>
           <tr>

cypress/component/mounting.cy.tsx

@@ -4,11 +4,11 @@ import Contact from "@/app/contactez-nous/page";
 
 const navbarFooterCheck = () => {
   it("includes navbar", () => {
-    cy.get("[data-cy='navbar']");
+    cy.getByData("navbar");
   });
 
   it("includes footer", () => {
-    cy.get("[data-cy='footer']");
+    cy.getByData("footer");
   });
 };
 
@@ -19,7 +19,7 @@ describe("Verify component mount", () => {
     });
 
     it("correct h1 tags with website name included", () => {
-      cy.get("[data-cy='header1']").contains("echecs france", {
+      cy.getByData("header1").contains("echecs france", {
         matchCase: false,
       });
     });
@@ -33,7 +33,7 @@ describe("Verify component mount", () => {
     });
 
     it("correct h1 tags with page title included", () => {
-      cy.get("[data-cy='header2']").contains("qui sommes-nous", {
+      cy.getByData("header2").contains("qui sommes-nous", {
         matchCase: false,
       });
     });
@@ -47,7 +47,7 @@ describe("Verify component mount", () => {
     });
 
     it("correct h1 tags with page title included", () => {
-      cy.get("[data-cy='header2']").contains("contactez-nous", {
+      cy.getByData("header2").contains("contactez-nous", {
         matchCase: false,
       });
     });

cypress/component/scroll.cy.tsx

@@ -4,12 +4,12 @@ describe("Scroll to top button", () => {
   it("desktop scroll button clickable", () => {
     cy.viewport("macbook-15");
     cy.mount(<ScrollToTopButton />);
-    cy.get("[data-cy='scroll-to-top-button']").should("exist").click();
+    cy.getByData("scroll-to-top-button").should("exist").click();
   });
 
   it("mobile scroll button clickable", () => {
     cy.viewport(600, 600);
     cy.mount(<ScrollToTopButton />);
-    cy.get("[data-cy='scroll-to-top-button']").should("exist").click();
+    cy.getByData("scroll-to-top-button").should("exist").click();
   });
 });

cypress/component/themeToggle.cy.tsx

@@ -7,17 +7,17 @@ describe("ThemeSwitcher component", () => {
     cy.mount(<ThemeSwitcher />);
 
     // checking that the toggle is there and light mode is active
-    cy.get("[data-cy='toggle']").should("exist");
-    cy.get("[data-cy='toggle']").should(($toggle) => {
+    cy.getByData("toggle").should("exist");
+    cy.getByData("toggle").should(($toggle) => {
       const backgroundImage = $toggle.css("background-image");
       expect(backgroundImage).to.include(
         "linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)"
       );
     });
     // checking that the toggle is clickable and dark mode is active
-    cy.get("[data-cy='toggle']").click();
-    cy.get("[data-cy='toggle-dark']").should("exist");
-    cy.get("[data-cy='toggle-dark']").should(($toggle) => {
+    cy.getByData("toggle").click();
+    cy.getByData("toggle-dark").should("exist");
+    cy.getByData("toggle-dark").should(($toggle) => {
       const backgroundImage = $toggle.css("background-image");
       expect(backgroundImage).to.include(
         "linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)"

cypress/e2e/data.cy.ts

@@ -2,7 +2,7 @@ let tableRows: number;
 describe("Data fetching for map", () => {
   it("map markers is equal to table rows", () => {
     cy.visit("/tournois");
-    cy.get('[data-cy="tournament-table"]')
+    cy.getByData("tournament-table")
       .find("tr")
       .then((rows) => {
         tableRows = rows.length - 1;

cypress/e2e/links.cy.ts

@@ -25,7 +25,7 @@ describe("Test links", () => {
     cy.viewport(600, 600);
     cy.visit("/");
     pages.forEach((page) => {
-      cy.get("[data-cy='hamburger-button']").click();
+      cy.getByData("hamburger-button").click();
       cy.contains(page, { matchCase: false }).click();
       cy.location("pathname").should("eq", `/${navLinkToSlug(page)}`); // url path matches link name, replacing whitespace with hyphens
       cy.go("back");

cypress/e2e/navbar.cy.ts

@@ -5,12 +5,12 @@ describe("Mobile Navbar", () => {
   });
 
   it("hamburger menu on mobile screens", () => {
-    cy.get("[data-cy='mobile-menu']").should("be.visible");
-    cy.get("[data-cy='desktop-menu']").should("be.not.visible");
+    cy.getByData("mobile-menu").should("be.visible");
+    cy.getByData("desktop-menu").should("be.not.visible");
   });
 
   it("hamburger button available", () => {
-    cy.get("[data-cy='hamburger-button']").should("be.visible");
+    cy.getByData("hamburger-button").should("be.visible");
   });
 });
 
@@ -21,11 +21,11 @@ describe("Desktop Navbar", () => {
   });
 
   it("desktop menu on larger screens", () => {
-    cy.get("[data-cy='mobile-menu']").should("be.hidden");
-    cy.get("[data-cy='desktop-menu']").should("be.not.hidden");
+    cy.getByData("mobile-menu").should("be.hidden");
+    cy.getByData("desktop-menu").should("be.not.hidden");
   });
 
   it("hamburger button hidden", () => {
-    cy.get("[data-cy='hamburger-button']").should("be.not.visible");
+    cy.getByData("hamburger-button").should("be.not.visible");
   });
 });

cypress/e2e/scroll.cy.ts

@@ -5,8 +5,8 @@ describe("Scroll to top button", () => {
 
   it("desktop scroll to top", () => {
     cy.viewport(1024, 800);
-    cy.get("[data-cy='tournament-table-div']").scrollTo("bottom");
-    cy.get("[data-cy='scroll-to-top-button']").click();
+    cy.getByData("tournament-table-div").scrollTo("bottom");
+    cy.getByData("scroll-to-top-button").click();
     // cy.get("[data-cy='tournament-table-div']")
     //   .invoke("scrollTop")
     //   .should("equal", 0);
@@ -20,7 +20,7 @@ describe("Scroll to top button", () => {
     cy.viewport(600, 600);
     cy.scrollTo("bottom");
     cy.window().its("scrollY").should("not.equal", 0);
-    cy.get("[data-cy='scroll-to-top-button']").click();
+    cy.getByData("scroll-to-top-button").click();
     cy.window().its("scrollY").should("equal", 0);
   });
 });

cypress/support/commands.ts

@@ -5,7 +5,7 @@ declare namespace Cypress {
 }
 
 Cypress.Commands.add("getByData", (selector) => {
-  return cy.get(`[data-cy=${selector}]`);
+  return cy.get(`[data-test=${selector}]`);
 });
 
 /// <reference types="cypress" />