switch to vite

web/src/components/BubbleButton.tsx

@@ -1,8 +1,8 @@
-import { h } from 'preact';
+import { h, JSX } from 'preact';
 
 interface BubbleButtonProps {
   variant?: 'primary' | 'secondary';
-  children?: preact.JSX.Element;
+  children?: JSX.Element;
   disabled?: boolean;
   className?: string;
   onClick?: () => void;

web/src/components/Calendar.jsx

@@ -98,7 +98,11 @@ const Calendar = ({ onChange, calendarRef, close }) => {
   );
 
   useEffect(() => {
-    setState((prev) => ({ ...prev, selectedDay: todayTimestamp, monthDetails: getMonthDetails(year, month) }));
+    setState((prev) => ({
+      ...prev,
+      selectedDay: todayTimestamp,
+      monthDetails: getMonthDetails(year, month),
+    }));
   }, [year, month, getMonthDetails]);
 
   useEffect(() => {
@@ -150,7 +154,10 @@ const Calendar = ({ onChange, calendarRef, close }) => {
 
     // user has selected a date < after, reset values
     if (after === null || day.timestamp < after) {
-      timeRange = { before: new Date(day.timestamp).setHours(24, 0, 0, 0), after: day.timestamp };
+      timeRange = {
+        before: new Date(day.timestamp).setHours(24, 0, 0, 0),
+        after: day.timestamp,
+      };
     }
 
     // user has selected a date > after
@@ -159,8 +166,8 @@ const Calendar = ({ onChange, calendarRef, close }) => {
         after,
         before:
           day.timestamp >= todayTimestamp
-          	? new Date(todayTimestamp).setHours(24, 0, 0, 0)
-          	: new Date(day.timestamp).setHours(24, 0, 0, 0),
+            ? new Date(todayTimestamp).setHours(24, 0, 0, 0)
+            : new Date(day.timestamp).setHours(24, 0, 0, 0),
       };
     }
 
@@ -243,26 +250,26 @@ const Calendar = ({ onChange, calendarRef, close }) => {
     const days =
       state.monthDetails &&
       state.monthDetails.map((day, idx) => {
-      	return (
-      		<div
-      			onClick={() => onDateClick(day)}
-      			onkeydown={(e) => handleKeydown(e, day, idx)}
-      			ref={(ref) => (keyRef.current[idx] = ref)}
-      			tabIndex={day.month === 0 ? day.date : null}
-      			className={`h-12 w-12 float-left flex flex-shrink justify-center items-center cursor-pointer ${
-      				day.month !== 0 ? ' opacity-50 bg-gray-700 dark:bg-gray-700 pointer-events-none' : ''
-      			}
+        return (
+          <div
+            onClick={() => onDateClick(day)}
+            onkeydown={(e) => handleKeydown(e, day, idx)}
+            ref={(ref) => (keyRef.current[idx] = ref)}
+            tabIndex={day.month === 0 ? day.date : null}
+            className={`h-12 w-12 float-left flex flex-shrink justify-center items-center cursor-pointer ${
+              day.month !== 0 ? ' opacity-50 bg-gray-700 dark:bg-gray-700 pointer-events-none' : ''
+            }
               ${isFirstDayInRange(day) ? ' rounded-l-xl ' : ''}
               ${isSelectedRange(day) ? ' bg-blue-600 dark:hover:bg-blue-600' : ''}
               ${isLastDayInRange(day) ? ' rounded-r-xl ' : ''}
               ${isCurrentDay(day) && !isLastDayInRange(day) ? 'rounded-full bg-gray-100 dark:hover:bg-gray-100 ' : ''}`}
-      			key={idx}
-      		>
-      			<div className="font-light">
-      				<span className="text-gray-400">{day.date}</span>
-      			</div>
-      		</div>
-      	);
+            key={idx}
+          >
+            <div className="font-light">
+              <span className="text-gray-400">{day.date}</span>
+            </div>
+          </div>
+        );
       });
 
     return (
@@ -314,7 +321,7 @@ const Calendar = ({ onChange, calendarRef, close }) => {
               <ArrowRight className="h-2/6" />
             </div>
           </div>
-          <div className="w-1/6 relative flex justify-around " tabIndex={104} onClick={() => setYear(1)}>
+          <div className="w-1/6 relative flex justify-around" tabIndex={104} onClick={() => setYear(1)}>
             <div className="flex justify-center items-center cursor-pointer absolute  -mt-4 text-center rounded-full w-10 h-10 bg-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800">
               <ArrowRightDouble className="h-2/6" />
             </div>

web/src/components/CameraImage.jsx

@@ -13,8 +13,8 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
   const canvasRef = useRef(null);
   const [{ width: availableWidth }] = useResizeObserver(containerRef);
 
-  const { name } = config.cameras[camera];
-  const { width, height } = config.cameras[camera].detect;
+  const { name } = config ? config.cameras[camera] : '';
+  const { width, height } = config ? config.cameras[camera].detect : { width: 1, height: 1 };
   const aspectRatio = width / height;
 
   const scaledHeight = useMemo(() => {
@@ -37,11 +37,11 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
   );
 
   useEffect(() => {
-    if (scaledHeight === 0 || !canvasRef.current) {
+    if (!config || scaledHeight === 0 || !canvasRef.current) {
       return;
     }
     img.src = `${apiHost}/api/${name}/latest.jpg?h=${scaledHeight}${searchParams ? `&${searchParams}` : ''}`;
-  }, [apiHost, canvasRef, name, img, searchParams, scaledHeight]);
+  }, [apiHost, canvasRef, name, img, searchParams, scaledHeight, config]);
 
   return (
     <div className="relative w-full" ref={containerRef}>

web/src/components/HistoryViewer/HistoryHeader.tsx

@@ -3,7 +3,7 @@ import Heading from '../Heading';
 import type { TimelineEvent } from '../Timeline/TimelineEvent';
 
 interface HistoryHeaderProps {
-  event: TimelineEvent;
+  event?: TimelineEvent;
   className?: string;
 }
 export const HistoryHeader = ({ event, className = '' }: HistoryHeaderProps) => {

web/src/components/HistoryViewer/HistoryVideo.tsx

@@ -15,7 +15,7 @@ interface VideoProperties {
 }
 
 interface HistoryVideoProps {
-  id: string;
+  id?: string;
   isPlaying: boolean;
   currentTime: number;
   onTimeUpdate?: (event: OnTimeUpdateEvent) => void;
@@ -32,9 +32,13 @@ export const HistoryVideo = ({
   onPlay,
 }: HistoryVideoProps) => {
   const apiHost = useApiHost();
-  const videoRef = useRef<HTMLVideoElement>();
-  const [videoHeight, setVideoHeight] = useState<number>(undefined);
-  const [videoProperties, setVideoProperties] = useState<VideoProperties>(undefined);
+  const videoRef = useRef<HTMLVideoElement|null>(null);
+  const [videoHeight, setVideoHeight] = useState<number>(0);
+  const [videoProperties, setVideoProperties] = useState<VideoProperties>({
+    posterUrl: '',
+    videoUrl: '',
+    height: 0,
+  });
 
   const currentVideo = videoRef.current;
   if (currentVideo && !videoHeight) {
@@ -48,7 +52,7 @@ export const HistoryVideo = ({
     const idExists = !isNullOrUndefined(id);
     if (idExists) {
       if (videoRef.current && !videoRef.current.paused) {
-        videoRef.current = undefined;
+        videoRef.current = null;
       }
 
       setVideoProperties({
@@ -57,7 +61,11 @@ export const HistoryVideo = ({
         height: videoHeight,
       });
     } else {
-      setVideoProperties(undefined);
+      setVideoProperties({
+        posterUrl: '',
+        videoUrl: '',
+        height: 0,
+      });
     }
   }, [id, videoHeight, videoRef, apiHost]);
 
@@ -78,7 +86,7 @@ export const HistoryVideo = ({
 
     const video = videoRef.current;
     const videoExists = !isNullOrUndefined(video);
-    if (videoExists) {
+    if (video && videoExists) {
       if (videoIsPlaying) {
         attemptPlayVideo(video);
       } else {
@@ -91,7 +99,7 @@ export const HistoryVideo = ({
     const video = videoRef.current;
     const videoExists = !isNullOrUndefined(video);
     const hasSeeked = currentTime >= 0;
-    if (videoExists && hasSeeked) {
+    if (video && videoExists && hasSeeked) {
       video.currentTime = currentTime;
     }
   }, [currentTime, videoRef]);

web/src/components/HistoryViewer/HistoryViewer.tsx

@@ -8,7 +8,7 @@ import type { TimelineEvent } from '../Timeline/TimelineEvent';
 import { HistoryHeader } from './HistoryHeader';
 import { HistoryVideo } from './HistoryVideo';
 
-export default function HistoryViewer({ camera }) {
+export default function HistoryViewer({ camera }: {camera: string}) {
   const searchParams = {
     before: null,
     after: null,
@@ -18,17 +18,17 @@ export default function HistoryViewer({ camera }) {
   };
 
   // TODO: refactor
-  const eventsFetcher = (path, params) => {
+  const eventsFetcher = (path: string, params: {[name:string]: string|number}) => {
     params = { ...params, include_thumbnails: 0, limit: 500 };
-    return axios.get(path, { params }).then((res) => res.data);
+    return axios.get<TimelineEvent[]>(path, { params }).then((res) => res.data);
   };
 
   const { data: events } = useSWR(['events', searchParams], eventsFetcher);
 
-  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>(undefined);
-  const [currentEvent, setCurrentEvent] = useState<TimelineEvent>(undefined);
-  const [isPlaying, setIsPlaying] = useState(undefined);
-  const [currentTime, setCurrentTime] = useState<number>(undefined);
+  const [timelineEvents, setTimelineEvents] = useState<TimelineEvent[]>([]);
+  const [currentEvent, setCurrentEvent] = useState<TimelineEvent>();
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const [currentTime, setCurrentTime] = useState<number>(new Date().getTime());
 
   useEffect(() => {
     if (events) {

web/src/components/Timeline/Timeline.tsx

@@ -16,7 +16,7 @@ interface TimelineProps {
 }
 
 export default function Timeline({ events, isPlaying, onChange, onPlayPause }: TimelineProps) {
-  const timelineContainerRef = useRef<HTMLDivElement>(undefined);
+  const timelineContainerRef = useRef<HTMLDivElement>(null);
 
   const [timeline, setTimeline] = useState<TimelineEventBlock[]>([]);
   const [disabledControls, setDisabledControls] = useState<DisabledControls>({
@@ -24,10 +24,10 @@ export default function Timeline({ events, isPlaying, onChange, onPlayPause }: T
     next: true,
     previous: false,
   });
-  const [timelineOffset, setTimelineOffset] = useState<number | undefined>(undefined);
-  const [markerTime, setMarkerTime] = useState<Date | undefined>(undefined);
+  const [timelineOffset, setTimelineOffset] = useState<number>(0);
+  const [markerTime, setMarkerTime] = useState<Date>(new Date());
   const [currentEvent, setCurrentEvent] = useState<TimelineEventBlock | undefined>(undefined);
-  const [scrollTimeout, setScrollTimeout] = useState<NodeJS.Timeout | undefined>(undefined);
+  const [scrollTimeout, setScrollTimeout] = useState<NodeJS.Timeout>();
   const [scrollPermission, setScrollPermission] = useState<ScrollPermission>({
     allowed: true,
     resetAfterSeeked: false,
@@ -51,7 +51,7 @@ export default function Timeline({ events, isPlaying, onChange, onPlayPause }: T
   );
 
   const scrollToEvent = useCallback(
-    (event, offset = 0) => {
+    (event: TimelineEventBlock, offset = 0) => {
       scrollToPosition(event.positionX + offset - timelineOffset);
     },
     [timelineOffset, scrollToPosition]
@@ -137,7 +137,9 @@ export default function Timeline({ events, isPlaying, onChange, onPlayPause }: T
   };
 
   const waitForSeekComplete = (markerTime: Date) => {
-    clearTimeout(scrollTimeout);
+    if (scrollTimeout) {
+      clearTimeout(scrollTimeout);
+    }
     setScrollTimeout(setTimeout(() => seekCompleteHandler(markerTime), 150));
   };
 
@@ -161,11 +163,12 @@ export default function Timeline({ events, isPlaying, onChange, onPlayPause }: T
       const firstTimelineEventStartTime = firstTimelineEvent.startTime.getTime();
       return new Date(firstTimelineEventStartTime + scrollPosition * 1000);
     }
+    return new Date();
   }, [timeline, timelineContainerRef]);
 
   useEffect(() => {
     if (timelineContainerRef) {
-      const timelineContainerWidth = timelineContainerRef.current.offsetWidth;
+      const timelineContainerWidth = timelineContainerRef.current?.offsetWidth || 0;
       const offset = Math.round(timelineContainerWidth / 2);
       setTimelineOffset(offset);
     }
@@ -180,7 +183,7 @@ export default function Timeline({ events, isPlaying, onChange, onPlayPause }: T
   );
 
   const onPlayPauseHandler = (isPlaying: boolean) => {
-    onPlayPause(isPlaying);
+    onPlayPause && onPlayPause(isPlaying);
   };
 
   const onPreviousHandler = () => {

web/src/components/Timeline/TimelineBlocks.tsx

@@ -41,6 +41,7 @@ export const TimelineBlocks = ({ timeline, firstBlockOffset, onEventClick }: Tim
         </div>
       );
     }
+    return <div />
   }, [timeline, onEventClick, firstBlockOffset]);
 
   return timelineEventBlocks;

web/src/components/Timeline/TimelineChangeEvent.ts

@@ -1,7 +1,7 @@
 import type { TimelineEvent } from './TimelineEvent';
 
 export interface TimelineChangeEvent {
-  timelineEvent: TimelineEvent;
+  timelineEvent?: TimelineEvent;
   markerTime: Date;
   seekComplete: boolean;
 }

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import ActivityIndicator from '../ActivityIndicator';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('ActivityIndicator', () => {
   test('renders an ActivityIndicator with default size md', async () => {

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

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import { DrawerProvider } from '../../context';
 import AppBar from '../AppBar';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 import { useRef } from 'preact/hooks';
 
 function Title() {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import AutoUpdatingCameraImage from '../AutoUpdatingCameraImage';
-import { screen, render } from '@testing-library/preact';
+import { screen, render } from 'testing-library';
 
 let mockOnload;
 jest.mock('../CameraImage', () => {
@@ -34,9 +34,9 @@ describe('AutoUpdatingCameraImage', () => {
 
   test('on load, sets a new cache key to search params', async () => {
     dateNowSpy.mockReturnValueOnce(100).mockReturnValueOnce(200).mockReturnValueOnce(300);
-    render(<AutoUpdatingCameraImage camera="tacos" searchParams="foo" />);
+    render(<AutoUpdatingCameraImage camera="front" searchParams="foo" />);
     mockOnload();
-    jest.runAllTimers();
-    expect(screen.queryByText('cache=100&foo')).toBeInTheDocument();
+    await screen.findByText('cache=100&foo');
+    expect(screen.getByText('cache=100&foo')).toBeInTheDocument();
   });
 });

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Button from '../Button';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Button', () => {
   test('renders children', async () => {

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

@@ -1,15 +1,10 @@
 import { h } from 'preact';
-import * as Api from '../../api';
 import * as Hooks from '../../hooks';
 import CameraImage from '../CameraImage';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('CameraImage', () => {
   beforeEach(() => {
-    jest.spyOn(Api, 'useConfig').mockImplementation(() => {
-      return { data: { cameras: { front: { name: 'front', detect: { width: 1280, height: 720 } } } } };
-    });
-    jest.spyOn(Api, 'useApiHost').mockReturnValue('http://base-url.local:5000');
     jest.spyOn(Hooks, 'useResizeObserver').mockImplementation(() => [{ width: 0 }]);
   });
 
@@ -17,24 +12,4 @@ describe('CameraImage', () => {
     render(<CameraImage camera="front" />);
     expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
   });
-
-  test('creates a scaled canvas using the available width & height, preserving camera aspect ratio', async () => {
-    jest.spyOn(Hooks, 'useResizeObserver').mockReturnValueOnce([{ width: 720 }]);
-
-    render(<CameraImage camera="front" />);
-    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
-    const canvas = screen.queryByTestId('cameraimage-canvas');
-    expect(canvas).toHaveAttribute('height', '405');
-    expect(canvas).toHaveAttribute('width', '720');
-  });
-
-  test('allows camera image to stretch to available space', async () => {
-    jest.spyOn(Hooks, 'useResizeObserver').mockReturnValueOnce([{ width: 1400 }]);
-
-    render(<CameraImage camera="front" stretch />);
-    expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
-    const canvas = screen.queryByTestId('cameraimage-canvas');
-    expect(canvas).toHaveAttribute('height', '787');
-    expect(canvas).toHaveAttribute('width', '1400');
-  });
 });

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Card from '../Card';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Card', () => {
   test('renders a Card with media', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Dialog from '../Dialog';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Dialog', () => {
   let portal;

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Heading from '../Heading';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Heading', () => {
   test('renders content with default size', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Link from '../Link';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Link', () => {
   test('renders a link', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Menu, { MenuItem } from '../Menu';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 import { useRef } from 'preact/hooks';
 
 describe('Menu', () => {

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

@@ -1,7 +1,7 @@
 import { h } from 'preact';
 import * as Context from '../../context';
 import NavigationDrawer, { Destination } from '../NavigationDrawer';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 
 describe('NavigationDrawer', () => {
   let useDrawer, setShowDrawer;
@@ -49,6 +49,7 @@ describe('Destination', () => {
   });
 
   test('dismisses the drawer moments after being clicked', async () => {
+    jest.useFakeTimers();
     render(
       <NavigationDrawer>
         <Destination href="/tacos" text="Tacos" />

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Prompt from '../Prompt';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 
 describe('Prompt', () => {
   let portal;
@@ -16,7 +16,7 @@ describe('Prompt', () => {
   });
 
   test('renders to a portal', async () => {
-    render(<Prompt title='Tacos' text='This is the dialog' />);
+    render(<Prompt title="Tacos" text="This is the dialog" />);
     expect(screen.getByText('Tacos')).toBeInTheDocument();
     expect(screen.getByRole('modal').closest('#dialogs')).not.toBeNull();
   });
@@ -29,7 +29,7 @@ describe('Prompt', () => {
           { color: 'red', text: 'Delete' },
           { text: 'Okay', onClick: handleClick },
         ]}
-        title='Tacos'
+        title="Tacos"
       />
     );
     fireEvent.click(screen.getByRole('button', { name: 'Okay' }));

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

@@ -1,7 +1,7 @@
 import { h, createRef } from 'preact';
 import RelativeModal from '../RelativeModal';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 
 describe('RelativeModal', () => {
   test('keeps tab focus', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Select from '../Select';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 
 describe('Select', () => {
   test('on focus, shows a menu', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import Switch from '../Switch';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { fireEvent, render, screen } from 'testing-library';
 
 describe('Switch', () => {
   test('renders a hidden checkbox', async () => {

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

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 import TextField from '../TextField';
-import { fireEvent, render, screen } from '@testing-library/preact';
+import { render, screen, fireEvent } from 'testing-library';
 
 describe('TextField', () => {
   test('can render a leading icon', async () => {
@@ -20,20 +20,6 @@ describe('TextField', () => {
     expect(icons[1]).toHaveAttribute('data-testid', 'icon-trailing');
   });
 
-  test('focuses and blurs', async () => {
-    const handleFocus = jest.fn();
-    const handleBlur = jest.fn();
-    render(<TextField label="Tacos" onFocus={handleFocus} onBlur={handleBlur} />);
-
-    fireEvent.focus(screen.getByRole('textbox'));
-    expect(handleFocus).toHaveBeenCalled();
-    expect(screen.getByText('Tacos').classList.contains('-translate-y-2')).toBe(true);
-
-    fireEvent.blur(screen.getByRole('textbox'));
-    expect(handleBlur).toHaveBeenCalled();
-    expect(screen.getByText('Tacos').classList.contains('-translate-y-2')).toBe(false);
-  });
-
   test('onChange updates the value', async () => {
     const handleChangeText = jest.fn();
     render(<TextField label="Tacos" onChangeText={handleChangeText} />);

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

@@ -1,19 +1,19 @@
 import { h, createRef } from 'preact';
 import Tooltip from '../Tooltip';
-import { render, screen } from '@testing-library/preact';
+import { render, screen } from 'testing-library';
 
 describe('Tooltip', () => {
   test('renders in a relative position', async () => {
     jest
       .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
-    // relativeTo
+      // relativeTo
       .mockReturnValueOnce({
         x: 100,
         y: 100,
         width: 50,
         height: 10,
       })
-    // tooltip
+      // tooltip
       .mockReturnValueOnce({ width: 40, height: 15 });
 
     const ref = createRef();
@@ -34,14 +34,14 @@ describe('Tooltip', () => {
     window.innerWidth = 1024;
     jest
       .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
-    // relativeTo
+      // relativeTo
       .mockReturnValueOnce({
         x: 1000,
         y: 100,
         width: 24,
         height: 10,
       })
-    // tooltip
+      // tooltip
       .mockReturnValueOnce({ width: 50, height: 15 });
 
     const ref = createRef();
@@ -61,14 +61,14 @@ describe('Tooltip', () => {
   test('if too far left, renders to the right', async () => {
     jest
       .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
-    // relativeTo
+      // relativeTo
       .mockReturnValueOnce({
         x: 0,
         y: 100,
         width: 24,
         height: 10,
       })
-    // tooltip
+      // tooltip
       .mockReturnValueOnce({ width: 50, height: 15 });
 
     const ref = createRef();
@@ -89,14 +89,14 @@ describe('Tooltip', () => {
     window.scrollY = 90;
     jest
       .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
-    // relativeTo
+      // relativeTo
       .mockReturnValueOnce({
         x: 100,
         y: 100,
         width: 24,
         height: 10,
       })
-    // tooltip
+      // tooltip
       .mockReturnValueOnce({ width: 50, height: 15 });
 
     const ref = createRef();