switch to vite

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();