forked from Github/frigate
refactor(web): Split AppBar and add tests
This commit is contained in:
Paul Armstrong
committed by
Blake Blackshear
Blake Blackshear
parent
ddb6127519
commit
e729bd52aa
@@ -1,48 +1,28 @@
|
||||
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 LightModeIcon from '../icons/LightMode';
|
||||
import DarkModeIcon from '../icons/DarkMode';
|
||||
import { useDarkMode, useDrawer } from '../context';
|
||||
import { useLayoutEffect, useCallback, useRef, useState } from 'preact/hooks';
|
||||
import { useDrawer } from '../context';
|
||||
import { useLayoutEffect, useCallback, 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(
|
||||
(value, label) => {
|
||||
setDarkMode(value);
|
||||
setShowMoreMenu(false);
|
||||
},
|
||||
[setDarkMode, setShowMoreMenu]
|
||||
);
|
||||
const scrollListener = useCallback(() => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
const moreRef = useRef(null);
|
||||
|
||||
const scrollListener = useCallback(
|
||||
(event) => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
window.requestAnimationFrame(() => {
|
||||
setShow(scrollY <= 0 || lastScrollY > scrollY);
|
||||
setAtZero(scrollY === 0);
|
||||
lastScrollY = scrollY;
|
||||
});
|
||||
},
|
||||
[setShow]
|
||||
);
|
||||
window.requestAnimationFrame(() => {
|
||||
setShow(scrollY <= 0 || lastScrollY > scrollY);
|
||||
setAtZero(scrollY === 0);
|
||||
lastScrollY = scrollY;
|
||||
});
|
||||
}, [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 ${
|
||||
!show ? '-translate-y-full' : ''
|
||||
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' : '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}>
|
||||
<Button color="black" className="rounded-full w-12 h-12" onClick={handleShowMenu} type="text">
|
||||
<MoreIcon className="w-10 h-10" />
|
||||
</Button>
|
||||
</div>
|
||||
{overflowRef && onOverflowClick ? (
|
||||
<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>
|
||||
) : null}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
132
web/src/components/__tests__/AppBar.test.jsx
Normal file
132
web/src/components/__tests__/AppBar.test.jsx
Normal file
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user