refactor(web): Split AppBar and add tests

web/src/App.jsx

@@ -2,7 +2,7 @@ import * as Routes from './routes';
 import { h } from 'preact';
 import ActivityIndicator from './components/ActivityIndicator';
 import AsyncRoute from 'preact-async-route';
-import AppBar from './components/AppBar';
+import AppBar from './AppBar';
 import Cameras from './routes/Cameras';
 import { Router } from 'preact-router';
 import Sidebar from './Sidebar';
@@ -15,7 +15,7 @@ export default function App() {
     <DarkModeProvider>
       <DrawerProvider>
         <div className="w-full">
-          <AppBar title="Frigate" />
+          <AppBar />
           {status !== FetchStatus.LOADED ? (
             <div className="flex flex-grow-1 min-h-screen justify-center items-center">
               <ActivityIndicator />

web/src/AppBar.jsx

@@ -0,0 +1,46 @@
+import { h, Fragment } from 'preact';
+import BaseAppBar from './components/AppBar';
+import LinkedLogo from './components/LinkedLogo';
+import Menu, { MenuItem, MenuSeparator } from './components/Menu';
+import AutoAwesomeIcon from './icons/AutoAwesome';
+import LightModeIcon from './icons/LightMode';
+import DarkModeIcon from './icons/DarkMode';
+import { useDarkMode } from './context';
+import { useCallback, useRef, useState } from 'preact/hooks';
+
+export default function AppBar() {
+  const [showMoreMenu, setShowMoreMenu] = useState(false);
+  const { setDarkMode } = useDarkMode();
+
+  const handleSelectDarkMode = useCallback(
+    (value, label) => {
+      setDarkMode(value);
+      setShowMoreMenu(false);
+    },
+    [setDarkMode, setShowMoreMenu]
+  );
+
+  const moreRef = useRef(null);
+
+  const handleShowMenu = useCallback(() => {
+    setShowMoreMenu(true);
+  }, [setShowMoreMenu]);
+
+  const handleDismissMoreMenu = useCallback(() => {
+    setShowMoreMenu(false);
+  }, [setShowMoreMenu]);
+
+  return (
+    <Fragment>
+      <BaseAppBar title={LinkedLogo} overflowRef={moreRef} onOverflowClick={handleShowMenu} />
+      {showMoreMenu ? (
+        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
+          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
+          <MenuSeparator />
+          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
+          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
+        </Menu>
+      ) : null}
+    </Fragment>
+  );
+}

web/src/__tests__/AppBar.test.jsx

@@ -0,0 +1,53 @@
+import { h } from 'preact';
+import * as Context from '../context';
+import AppBar from '../AppBar';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('AppBar', () => {
+  beforeEach(() => {
+    jest.spyOn(Context, 'useDarkMode').mockImplementation(() => ({
+      setDarkMode: jest.fn(),
+    }));
+    jest.spyOn(Context, 'DarkModeProvider').mockImplementation(({ children }) => {
+      return <div>{children}</div>;
+    });
+  });
+
+  test('shows a menu on overflow click', async () => {
+    render(
+      <Context.DarkModeProvider>
+        <Context.DrawerProvider>
+          <AppBar />
+        </Context.DrawerProvider>
+      </Context.DarkModeProvider>
+    );
+
+    const overflowButton = await screen.findByLabelText('More options');
+    fireEvent.click(overflowButton);
+
+    const menu = await screen.findByRole('listbox');
+    expect(menu).toBeInTheDocument();
+  });
+
+  test('sets dark mode on MenuItem select', async () => {
+    const setDarkModeSpy = jest.fn();
+    jest.spyOn(Context, 'useDarkMode').mockImplementation(() => ({
+      setDarkMode: setDarkModeSpy,
+    }));
+    render(
+      <Context.DarkModeProvider>
+        <Context.DrawerProvider>
+          <AppBar />
+        </Context.DrawerProvider>
+      </Context.DarkModeProvider>
+    );
+
+    const overflowButton = await screen.findByLabelText('More options');
+    fireEvent.click(overflowButton);
+
+    await screen.findByRole('listbox');
+
+    fireEvent.click(screen.getByText('Light'));
+    expect(setDarkModeSpy).toHaveBeenCalledWith('light');
+  });
+});

web/src/components/AppBar.jsx

@@ -1,38 +1,20 @@
 import { h } from 'preact';
 import Button from './Button';
-import LinkedLogo from './LinkedLogo';
-import Menu, { MenuItem, MenuSeparator } from './Menu';
 import MenuIcon from '../icons/Menu';
 import MoreIcon from '../icons/More';
-import AutoAwesomeIcon from '../icons/AutoAwesome';
+import { useDrawer } from '../context';
-import LightModeIcon from '../icons/LightMode';
+import { useLayoutEffect, useCallback, useState } from 'preact/hooks';
-import DarkModeIcon from '../icons/DarkMode';
-import { useDarkMode, useDrawer } from '../context';
-import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
 
 // We would typically preserve these in component state
 // But need to avoid too many re-renders
 let lastScrollY = window.scrollY;
 
-export default function AppBar({ title }) {
+export default function AppBar({ title: Title, overflowRef, onOverflowClick }) {
   const [show, setShow] = useState(true);
   const [atZero, setAtZero] = useState(window.scrollY === 0);
-  const [showMoreMenu, setShowMoreMenu] = useState(false);
-  const { setDarkMode } = useDarkMode();
   const { setShowDrawer } = useDrawer();
 
-  const handleSelectDarkMode = useCallback(
+  const scrollListener = useCallback(() => {
-    (value, label) => {
-      setDarkMode(value);
-      setShowMoreMenu(false);
-    },
-    [setDarkMode, setShowMoreMenu]
-  );
-
-  const moreRef = useRef(null);
-
-  const scrollListener = useCallback(
-    (event) => {
     const scrollY = window.scrollY;
 
     window.requestAnimationFrame(() => {
@@ -40,9 +22,7 @@ export default function AppBar({ title }) {
       setAtZero(scrollY === 0);
       lastScrollY = scrollY;
     });
-    },
+  }, [setShow]);
-    [setShow]
-  );
 
   useLayoutEffect(() => {
     document.addEventListener('scroll', scrollListener);
@@ -51,45 +31,38 @@ export default function AppBar({ title }) {
     };
   }, [scrollListener]);
 
-  const handleShowMenu = useCallback(() => {
-    setShowMoreMenu(true);
-  }, [setShowMoreMenu]);
-
-  const handleDismissMoreMenu = useCallback(() => {
-    setShowMoreMenu(false);
-  }, [setShowMoreMenu]);
-
   const handleShowDrawer = useCallback(() => {
     setShowDrawer(true);
   }, [setShowDrawer]);
 
   return (
     <div
-      className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 translate-y-0 ${
+      className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-4 space-x-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 ${
-        !show ? '-translate-y-full' : ''
+        !show ? '-translate-y-full' : 'translate-y-0'
       } ${!atZero ? 'shadow-sm' : ''}`}
+      data-testid="appbar"
     >
       <div className="lg:hidden">
         <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowDrawer} type="text">
           <MenuIcon className="w-10 h-10" />
         </Button>
       </div>
-      <LinkedLogo />
+      <Title />
       <div className="flex-grow-1 flex justify-end w-full">
-        <div className="w-auto" ref={moreRef}>
+        {overflowRef && onOverflowClick ? (
-          <Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
+          <div className="w-auto" ref={overflowRef}>
+            <Button
+              aria-label="More options"
+              color="black"
+              className="rounded-full w-12 h-12"
+              onClick={onOverflowClick}
+              type="text"
+            >
               <MoreIcon className="w-10 h-10" />
             </Button>
           </div>
-      </div>
-      {showMoreMenu ? (
-        <Menu onDismiss={handleDismissMoreMenu} relativeTo={moreRef}>
-          <MenuItem icon={AutoAwesomeIcon} label="Auto dark mode" value="media" onSelect={handleSelectDarkMode} />
-          <MenuSeparator />
-          <MenuItem icon={LightModeIcon} label="Light" value="light" onSelect={handleSelectDarkMode} />
-          <MenuItem icon={DarkModeIcon} label="Dark" value="dark" onSelect={handleSelectDarkMode} />
-        </Menu>
         ) : null}
       </div>
+    </div>
   );
 }

web/src/components/__tests__/AppBar.test.jsx

@@ -0,0 +1,132 @@
+import { h } from 'preact';
+import { DrawerProvider } from '../../context';
+import AppBar from '../AppBar';
+import { fireEvent, render, screen } from '@testing-library/preact';
+import { useRef } from 'preact/hooks';
+
+function Title() {
+  return <div>I am the title</div>;
+}
+
+describe('AppBar', () => {
+  test('renders the title', async () => {
+    render(
+      <DrawerProvider>
+        <AppBar title={Title} />
+      </DrawerProvider>
+    );
+    expect(screen.getByText('I am the title')).toBeInTheDocument();
+  });
+
+  describe('overflow menu', () => {
+    test('is not rendered if a ref is not provided', async () => {
+      const handleOverflow = jest.fn();
+      render(
+        <DrawerProvider>
+          <AppBar title={Title} onOverflowClick={handleOverflow} />
+        </DrawerProvider>
+      );
+      expect(screen.queryByLabelText('More options')).not.toBeInTheDocument();
+    });
+
+    test('is not rendered if a click handler is not provided', async () => {
+      function Wrapper() {
+        const ref = useRef(null);
+        return <AppBar title={Title} overflowRef={ref} />;
+      }
+
+      render(
+        <DrawerProvider>
+          <Wrapper />
+        </DrawerProvider>
+      );
+      expect(screen.queryByLabelText('More options')).not.toBeInTheDocument();
+    });
+
+    test('is rendered with click handler and ref', async () => {
+      const handleOverflow = jest.fn();
+
+      function Wrapper() {
+        const ref = useRef(null);
+        return <AppBar title={Title} overflowRef={ref} onOverflowClick={handleOverflow} />;
+      }
+
+      render(
+        <DrawerProvider>
+          <Wrapper />
+        </DrawerProvider>
+      );
+      expect(screen.queryByLabelText('More options')).toBeInTheDocument();
+    });
+
+    test('calls the handler when clicked', async () => {
+      const handleOverflow = jest.fn();
+
+      function Wrapper() {
+        const ref = useRef(null);
+        return <AppBar title={Title} overflowRef={ref} onOverflowClick={handleOverflow} />;
+      }
+
+      render(
+        <DrawerProvider>
+          <Wrapper />
+        </DrawerProvider>
+      );
+
+      fireEvent.click(screen.queryByLabelText('More options'));
+
+      expect(handleOverflow).toHaveBeenCalled();
+    });
+  });
+
+  describe('scrolling', () => {
+    test('is visible initially', async () => {
+      render(
+        <DrawerProvider>
+          <AppBar title={Title} />
+        </DrawerProvider>
+      );
+
+      const classes = screen.getByTestId('appbar').classList;
+
+      expect(classes.contains('translate-y-0')).toBe(true);
+      expect(classes.contains('-translate-y-full')).toBe(false);
+    });
+
+    test('hides when scrolled downward', async () => {
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
+      render(
+        <DrawerProvider>
+          <AppBar title={Title} />
+        </DrawerProvider>
+      );
+
+      window.scrollY = 300;
+      await fireEvent.scroll(document, { target: { scrollY: 300 } });
+
+      const classes = screen.getByTestId('appbar').classList;
+
+      expect(classes.contains('translate-y-0')).toBe(false);
+      expect(classes.contains('-translate-y-full')).toBe(true);
+    });
+
+    test('reappears when scrolled upward', async () => {
+      jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
+      render(
+        <DrawerProvider>
+          <AppBar title={Title} />
+        </DrawerProvider>
+      );
+
+      window.scrollY = 300;
+      await fireEvent.scroll(document, { target: { scrollY: 300 } });
+      window.scrollY = 280;
+      await fireEvent.scroll(document, { target: { scrollY: 280 } });
+
+      const classes = screen.getByTestId('appbar').classList;
+
+      expect(classes.contains('translate-y-0')).toBe(true);
+      expect(classes.contains('-translate-y-full')).toBe(false);
+    });
+  });
+});