Update docs and screenshots

frontend/tests/App.test.tsx

@@ -0,0 +1,123 @@
+import { render, screen } from "@testing-library/react";
+import { test, vi } from "vitest";
+
+import App from "../src/App";
+
+vi.stubGlobal(
+  "fetch",
+  vi.fn((url: string) => {
+    let payload: Record<string, unknown> = { items: [] };
+    if (url.includes("/system/status")) {
+      payload = {
+        app: "TuxDMX",
+        setup_required: false,
+        engine: {
+          backend: "simulator",
+          connected: true,
+          degraded: false,
+          last_error: null,
+          blackout: false,
+          fps: 30,
+          master: 255,
+          frame: Array.from({ length: 512 }, () => 0),
+          source_map: Array.from({ length: 512 }, () => "idle")
+        },
+        telemetry: {
+          uptime_seconds: 10,
+          cpu_percent: 20,
+          ram_percent: 30,
+          temperature_c: null,
+          queue_depth: 0,
+          reconnect_count: 0,
+          last_error: null,
+          events: []
+        },
+        bpm: {
+          mode: "manual",
+          bpm: 120,
+          confidence: 1,
+          devices: [],
+          device_details: [],
+          current_device: "alsa:auto",
+          selected_device: "alsa:auto",
+          recommended_device: "alsa:auto",
+          audio_connected: false,
+          last_error: null,
+          input_level: 0,
+          peak_level: 0,
+          clipping: false,
+          sample_rate: 44100,
+          channels: 1,
+          format: "S16_LE"
+        }
+      };
+    } else if (url.includes("/dmx/config")) {
+      payload = {
+        backend: "simulator",
+        universe: 1,
+        output_port: "simulator",
+        target_host: "",
+        artnet_nodes: []
+      };
+    } else if (url.includes("/dmx/devices")) {
+      payload = {
+        devices: [
+          {
+            name: "Simulator universe 1",
+            backend: "simulator",
+            connected: true,
+            output_port: "simulator",
+            universe: 1
+          }
+        ]
+      };
+    } else if (url.includes("/integrations/home-assistant/config")) {
+      payload = {
+        enabled: false,
+        base_url: "",
+        default_universe: 10,
+        has_token: false,
+        token_mask: "",
+        mapping_count: 0,
+        dispatch_count: 0,
+        error_count: 0,
+        last_error: null,
+        last_successful_call_at: null,
+        last_connection_success_at: null,
+        last_connection_error: null,
+        ha_version: null,
+        auth_ok: false,
+        reachable: false
+      };
+    } else if (url.includes("/integrations/home-assistant/mappings")) {
+      payload = { items: [] };
+    } else if (url.includes("/integrations/midi/bridges")) {
+      payload = { items: [] };
+    } else if (url.includes("/integrations/midi/mappings")) {
+      payload = { items: [] };
+    } else if (url.includes("/integrations/midi/tokens")) {
+      payload = { items: [] };
+    } else if (url.includes("/integrations/midi/learn")) {
+      payload = { active: false, allow_passthrough: false, expires_at: null, captured_event: null };
+    } else if (url.includes("/bpm/devices")) {
+      payload = { devices: [] };
+    }
+    return Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve(payload)
+    });
+  })
+);
+
+class MockWebSocket {
+  onmessage: ((event: { data: string }) => void) | null = null;
+  close() {}
+}
+
+vi.stubGlobal("WebSocket", MockWebSocket);
+
+test("viser dashboard shell", async () => {
+  render(<App />);
+  expect(await screen.findByText("TuxDMX")).toBeInTheDocument();
+  expect(await screen.findByText("Operations-dashboard")).toBeInTheDocument();
+});

frontend/tests/MidiPage.test.tsx

@@ -0,0 +1,120 @@
+import type { ComponentProps } from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { expect, test, vi } from "vitest";
+
+import { MidiPage } from "../src/pages/MidiPage";
+
+const noopString = vi.fn(async () => "");
+const noopVoid = vi.fn(async () => {});
+const noopCreateToken = vi.fn(async () => ({
+  id: 1,
+  label: "Test",
+  bridge_id: null,
+  scopes: ["midi:events"],
+  created_at: new Date().toISOString(),
+  revoked_at: null,
+  last_used_at: null,
+  token_preview: "********test",
+  token: "secret"
+}));
+
+function buildProps(overrides?: Partial<ComponentProps<typeof MidiPage>>): ComponentProps<typeof MidiPage> {
+  return {
+    bridges: [
+      {
+        bridge_id: "bar-laptop",
+        device_name: "USB MIDI Controller",
+        ip_address: "192.168.2.44",
+        protocol_version: 1,
+        online: true,
+        last_heartbeat_at: "2026-07-24T20:30:10+02:00",
+        last_event_at: "2026-07-24T20:30:12+02:00",
+        last_error: null,
+        last_event: { type: "note_on", channel: 0, number: 36, value: 127 },
+        updated_at: "2026-07-24T20:30:12+02:00",
+        created_at: "2026-07-24T20:20:00+02:00"
+      }
+    ],
+    mappings: [
+      {
+        id: 1,
+        name: "Scene A",
+        enabled: true,
+        bridge_id: "bar-laptop",
+        device_name: "USB*",
+        message_type: "note_on",
+        channel: 0,
+        number: 36,
+        action: "activate_scene",
+        target_type: "scene",
+        target_id: "stream-base",
+        mode: "trigger",
+        minimum_value: 1,
+        maximum_value: 127,
+        created_at: "2026-07-24T20:20:00+02:00",
+        updated_at: "2026-07-24T20:20:00+02:00",
+        active: true
+      }
+    ],
+    tokens: [
+      {
+        id: 1,
+        label: "Bar laptop",
+        bridge_id: "bar-laptop",
+        scopes: ["midi:connect", "midi:events", "midi:heartbeat"],
+        created_at: "2026-07-24T20:10:00+02:00",
+        revoked_at: null,
+        last_used_at: null,
+        token_preview: "********9f2a"
+      }
+    ],
+    learnState: {
+      active: false,
+      allow_passthrough: false,
+      expires_at: null,
+      captured_event: {
+        bridge_id: "bar-laptop",
+        device: "USB MIDI Controller",
+        timestamp: "2026-07-24T20:28:00+02:00",
+        message: { type: "control_change", channel: 0, number: 14, value: 64 }
+      }
+    },
+    scenes: [
+      {
+        id: 1,
+        name: "Stream base",
+        slug: "stream-base",
+        color: "#00e5ff",
+        icon: null,
+        priority: 10,
+        fade_in_ms: 500,
+        fade_out_ms: 500,
+        hold_ms: 0,
+        master_limit: 255,
+        values: [],
+        targets: [],
+        tags: [],
+        is_active: false
+      }
+    ],
+    effects: [{ name: "Raid flash", slug: "raid-flash", effect_type: "beat-flash" }],
+    onSaveMapping: noopString,
+    onDeleteMapping: noopVoid,
+    onTestMapping: noopString,
+    onCreateToken: noopCreateToken,
+    onRevokeToken: noopVoid,
+    onStartLearn: noopString,
+    onCancelLearn: noopString,
+    ...overrides
+  };
+}
+
+test("viser learn-state, bridge og mappingoversigt", () => {
+  render(<MidiPage {...buildProps()} />);
+  expect(screen.getByText("MIDI bridge og mappings")).toBeInTheDocument();
+  expect(screen.getByText("USB MIDI Controller")).toBeInTheDocument();
+  expect(screen.getByText("Scene A")).toBeInTheDocument();
+  expect(screen.getByText("Bar laptop")).toBeInTheDocument();
+  expect(screen.getByText(/nummer 14 · værdi 64/i)).toBeInTheDocument();
+});

frontend/tests/SettingsPage.test.tsx

@@ -0,0 +1,143 @@
+import type { ComponentProps } from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom/vitest";
+import { expect, test, vi } from "vitest";
+
+import { SettingsPage } from "../src/pages/SettingsPage";
+
+const noopString = vi.fn(async () => "");
+const noopVoid = vi.fn(async () => {});
+
+function buildProps(overrides?: Partial<ComponentProps<typeof SettingsPage>>): ComponentProps<typeof SettingsPage> {
+  return {
+    bpmStatus: {
+      mode: "manual",
+      bpm: 120,
+      confidence: 1,
+      devices: [],
+      current_device: "alsa:plughw:1,0",
+      selected_device: "alsa:auto",
+      recommended_device: "alsa:plughw:1,0",
+      audio_connected: true,
+      last_error: null,
+      input_level: 0.12,
+      peak_level: 0.25,
+      clipping: false,
+      sample_rate: 44100,
+      channels: 1,
+      format: "S16_LE"
+    },
+    bpmDevices: [
+      { id: "alsa:auto", name: "Auto", backend: "alsa", is_default: true },
+      { id: "alsa:plughw:1,0", name: "plughw:1,0", backend: "alsa", is_default: false }
+    ],
+    dmxConfig: {
+      backend: "artnet",
+      universe: 1,
+      output_port: "WLED Matrix Loft",
+      target_host: "",
+      artnet_nodes: []
+    },
+    dmxDevices: [],
+    haConfig: {
+      enabled: true,
+      base_url: "",
+      default_universe: 10,
+      has_token: true,
+      token_mask: "********",
+      mapping_count: 0,
+      dispatch_count: 0,
+      error_count: 0,
+      last_error: null,
+      last_successful_call_at: null,
+      last_connection_success_at: null,
+      last_connection_error: null,
+      ha_version: null,
+      auth_ok: false,
+      reachable: false
+    },
+    haEntities: [],
+    haMappings: [],
+    onSaveDmxConfig: noopString,
+    onDiscoverArtNet: noopString,
+    onSaveHomeAssistantConfig: noopString,
+    onTestHomeAssistantConnection: noopString,
+    onRefreshHomeAssistantEntities: noopString,
+    onSaveHomeAssistantMapping: noopString,
+    onDeleteHomeAssistantMapping: noopVoid,
+    onTestHomeAssistantMapping: noopString,
+    onSaveBpmDevice: noopString,
+    onRefreshAudioDevices: noopVoid,
+    onRestartService: noopString,
+    onRebootHost: noopString,
+    ...overrides
+  };
+}
+
+test("bevarer HA base url mens live refresh opdaterer props", () => {
+  const view = render(<SettingsPage {...buildProps()} />);
+  const input = screen.getByPlaceholderText("fx http://homeassistant.local:8123") as HTMLInputElement;
+
+  fireEvent.change(input, { target: { value: "http://192.168.2.50:8123" } });
+  expect(input.value).toBe("http://192.168.2.50:8123");
+
+  view.rerender(
+    <SettingsPage
+      {...buildProps({
+        haConfig: {
+          ...buildProps().haConfig,
+          base_url: ""
+        }
+      })}
+    />
+  );
+
+  expect(screen.getByPlaceholderText("fx http://homeassistant.local:8123")).toHaveValue(
+    "http://192.168.2.50:8123"
+  );
+});
+
+test("bevarer Art-Net target host mens live refresh opdaterer props", () => {
+  const view = render(<SettingsPage {...buildProps()} />);
+  const input = screen.getByPlaceholderText("fx 192.168.2.60") as HTMLInputElement;
+
+  fireEvent.change(input, { target: { value: "192.168.2.77" } });
+  expect(input.value).toBe("192.168.2.77");
+
+  view.rerender(
+    <SettingsPage
+      {...buildProps({
+        dmxConfig: {
+          backend: "artnet",
+          universe: 1,
+          output_port: "WLED Matrix Loft",
+          target_host: "",
+          artnet_nodes: []
+        }
+      })}
+    />
+  );
+
+  expect(screen.getByPlaceholderText("fx 192.168.2.60")).toHaveValue("192.168.2.77");
+});
+
+test("bevarer valgt audio-input mens live refresh opdaterer props", () => {
+  const view = render(<SettingsPage {...buildProps()} />);
+  const select = screen.getByLabelText("ALSA-input") as HTMLSelectElement;
+
+  fireEvent.change(select, { target: { value: "alsa:plughw:1,0" } });
+  expect(select.value).toBe("alsa:plughw:1,0");
+
+  view.rerender(
+    <SettingsPage
+      {...buildProps({
+        bpmStatus: {
+          ...buildProps().bpmStatus!,
+          selected_device: "alsa:auto"
+        }
+      })}
+    />
+  );
+
+  expect(screen.getByLabelText("ALSA-input")).toHaveValue("alsa:plughw:1,0");
+});

frontend/tests/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";