Use new UI (#8983)

* fixup build

* swap frontends

web-old/src/__tests__/App.test.jsx

@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import App from '../app';
+import { render, screen } from 'testing-library';
+
+describe('App', () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('loads the camera dashboard', async () => {
+    render(<App />);
+    await screen.findByText('Cameras');
+    expect(screen.queryByText('front')).toBeInTheDocument();
+  });
+});

web-old/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(() => {
+    vi.spyOn(Context, 'useDarkMode').mockImplementation(() => ({
+      setDarkMode: vi.fn(),
+    }));
+    vi.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 = vi.fn();
+    vi.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-old/src/__tests__/Sidebar.test.jsx

@@ -0,0 +1,14 @@
+import { h } from 'preact';
+import { DrawerProvider }  from '../context';
+import Sidebar from '../Sidebar';
+import { render, screen } from 'testing-library';
+
+describe('Sidebar', () => {
+  // eslint-disable-next-line jest/no-disabled-tests
+  test.skip('does not render cameras by default', async () => {
+    const { findByText } = render(<DrawerProvider><Sidebar /></DrawerProvider>);
+    await findByText('Cameras');
+    expect(screen.queryByRole('link', { name: 'front' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'side' })).not.toBeInTheDocument();
+  });
+});