scroll buttons fixed

TODO

@@ -5,9 +5,9 @@
 //TODO about page
 //TODO contact page needs working mailer
 //TODO font size on mobile screen
-//TODO scroll to top button positioning
-//TODO add test for return to top button
 //TODO SEO - next headers etc
+//TODO data fetching tests
+//TODO redo layer groups tests
 ----------------------------------------------------------------
 //TODO logo for navbar and favicon
 //TODO mobile map needs improving

components/ScrollToTopButton.tsx

@@ -2,12 +2,17 @@
 
 import { FaArrowUp } from "react-icons/fa";
 import { handleScrollToTop } from "@/handlers/scrollHandlers";
+import { useEffect, useRef } from "react";
 
 const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
+  const scrollToTopElementRef = useRef<HTMLElement | null>(null);
   // determine scrollable element based on screen size - window or div
-  const scrollToTopElement = isLgScreen
+  useEffect(() => {
-    ? document.getElementById("tournament-table")
+    if (isLgScreen) {
-    : window;
+      scrollToTopElementRef.current =
+        document.getElementById("tournament-table");
+    }
+  }, [isLgScreen]);
 
   const scrollToTopButtonClass = isLgScreen
     ? "absolute bottom-0 right-3 p-10"
@@ -16,8 +21,13 @@ const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
   return (
     <button
       className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+      data-cy="scroll-to-top-button"
     >
-      <FaArrowUp onClick={() => handleScrollToTop(scrollToTopElement)} />
+      <FaArrowUp
+        onClick={() =>
+          handleScrollToTop(scrollToTopElementRef.current || window)
+        }
+      />
     </button>
   );
 };

components/TournamentTable.tsx

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

cypress/component/scroll.cy.tsx

@@ -0,0 +1,15 @@
+import ScrollToTopButton from "@/components/ScrollToTopButton";
+
+describe("Scroll to top button", () => {
+  it("desktop scroll button clickable", () => {
+    cy.viewport("macbook-15");
+    cy.mount(<ScrollToTopButton isLgScreen={true} />);
+    cy.get("[data-cy='scroll-to-top-button']").should("exist").click();
+  });
+
+  it("mobile scroll button clickable", () => {
+    cy.viewport(600, 600);
+    cy.mount(<ScrollToTopButton isLgScreen={false} />);
+    cy.get("[data-cy='scroll-to-top-button']").should("exist").click();
+  });
+});

cypress/component/themeToggle.cy.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
-import Home from "@/app/page";
 import "@/css/theme-toggle.css";
 
 describe("ThemeSwitcher component", () => {
   it("should toggle between light and dark mode", () => {
-    cy.mount(<Home />);
     cy.mount(<ThemeSwitcher />);
-    cy.wait(100);
 
     // checking that the toggle is there and light mode is active
     cy.get("[data-cy='toggle']").should("exist");

cypress/e2e/scroll.cy.tsx

@@ -0,0 +1,26 @@
+describe("Scroll to top button", () => {
+  beforeEach(() => {
+    cy.visit("/tournois");
+  });
+
+  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.get("[data-cy='tournament-table-div']")
+    //   .invoke("scrollTop")
+    //   .should("equal", 0);
+    //   cy.get("[data-cy='tournament-table-div']")
+    //     .its("scrollY")
+    //     .should("not.equal", 0);
+    // TODO need to test element scrolls back to 0
+  });
+
+  it("mobile scroll to top", () => {
+    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.window().its("scrollY").should("equal", 0);
+  });
+});