updated tests

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>