From e2d99d8f5a7aa86a025ed53605155949e6d86490 Mon Sep 17 00:00:00 2001 From: Owen Rees Date: Fri, 16 Jun 2023 15:15:17 +0200 Subject: [PATCH] navbar tests --- TODO | 37 ++++++-------- components/Hamburger.tsx | 2 +- components/HamburgerMenu.tsx | 72 +++++++++------------------ components/Navbar.tsx | 4 +- components/ThemeSwitcher.tsx | 15 ++---- css/theme-toggle.css | 30 +++++++++++ cypress/component/themeToggle.cy.tsx | 33 ++++++------ cypress/e2e/links.cy.ts | 2 + cypress/e2e/navbar.cy.tsx | 31 ++++++++++++ cypress/videos/links.cy.ts.mp4 | Bin 407593 -> 437287 bytes cypress/videos/navbar.cy.tsx.mp4 | Bin 0 -> 130903 bytes hooks/useHamburgerClose.ts | 55 ++++++++++++++++++++ 12 files changed, 184 insertions(+), 97 deletions(-) create mode 100644 css/theme-toggle.css create mode 100644 cypress/e2e/navbar.cy.tsx create mode 100644 cypress/videos/navbar.cy.tsx.mp4 create mode 100644 hooks/useHamburgerClose.ts diff --git a/TODO b/TODO index 79f3cdb..7afb942 100644 --- a/TODO +++ b/TODO @@ -1,38 +1,33 @@ -hamburger menu timeout / close when clicking elsewhere - -hamburger tests - does it appear on smaller screens, does the menu appear on click - -readme - +//TODO readme ---------------------------------------------------------------- -hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue? +//TODO hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue? -font size on mobile screen +//TODO font size on mobile screen -need a 'return to top' arrow button on smaller screens +//TODO need a 'return to top' arrow button on smaller screens -mobile map needs improving +//TODO mobile map needs improving -multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization +//TODO multi-language i18n support - https://nextjs.org/docs/app/building-your-application/routing/internationalization -tests for tournois, testing the loading of map and table, then counting the markers +//TODO tests for tournois, testing the loading of map and table, then counting the markers -logo for navbar and favicon +//TODO logo for navbar and favicon -document my new hook <- consider removing as I believe this is the reason hover is broken +//TODO document my new hook <- consider removing as I believe this is the reason hover is broken -error handling +//TODO error handling -e2e tests for tournament page: +//TODO e2e tests for tournament page: - make sure number of markers = tournamentData.length -about page +//TODO about page -contact page needs working mailer +//TODO contact page needs working mailer -SEO +//TODO SEO -consider offering GraphQL support +//TODO consider offering GraphQL support -move smaller ui components into a new folder, and make them reusable - such as using generic prop names +//TODO move smaller ui components into a new folder, and make them reusable - such as using generic prop names diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx index 7af1d84..abbace3 100644 --- a/components/Hamburger.tsx +++ b/components/Hamburger.tsx @@ -10,7 +10,7 @@ const Hamburger = () => { <>
setMenuVisible(!menuVisible)} >
>; hamburgerButtonRef: RefObject; -}; +} + +import Link from "next/link"; +import ThemeSwitcher from "@/components/ThemeSwitcher"; +import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react"; +import useHamburgerClose from "@/hooks/useHamburgerClose"; const HamburgerMenu = ({ menuVisible, setMenuVisible, hamburgerButtonRef, -}: hamburgerMenuState) => { +}: HamburgerMenuState) => { const [mouseOverMenu, setMouseOverMenu] = useState(false); const timeoutRef = useRef(); const menuRef = useRef(null); - useEffect(() => { - const handleMouseDownOutsideMenu = (event: MouseEvent) => { - if ( - menuVisible && - menuRef.current && - !menuRef.current.contains(event.target as Node) && - hamburgerButtonRef.current && - !hamburgerButtonRef.current.contains(event.target as Node) - ) { - setMenuVisible(false); - setMouseOverMenu(false); - } - }; - - document.addEventListener("mousedown", handleMouseDownOutsideMenu); - - return () => { - document.removeEventListener("mousedown", handleMouseDownOutsideMenu); - }; - }, [menuVisible]); - - useEffect(() => { - if (menuVisible && !mouseOverMenu) { - menuTimeout(); - } else { - clearTimeout(timeoutRef.current); - } - }, [mouseOverMenu, menuVisible]); + const menuTimeout = () => { + timeoutRef.current = setTimeout(() => { + setMenuVisible(false); + setMouseOverMenu(false); + }, 2000); + }; const handleMouseEnterMenu = () => { setMouseOverMenu(true); @@ -63,12 +35,16 @@ const HamburgerMenu = ({ clearTimeout(timeoutRef.current); }; - const menuTimeout = () => { - timeoutRef.current = setTimeout(() => { - setMenuVisible(false); - setMouseOverMenu(false); - }, 2000); - }; + useHamburgerClose({ + menuVisible, + setMenuVisible, + menuRef, + hamburgerButtonRef, + mouseOverMenu, + setMouseOverMenu, + timeoutRef, + menuTimeout, + }); return (
Echecs France
-
+
-
+