fix blank screen on load

Dockerfile

@@ -10,6 +10,9 @@ FROM rust:1.88-bookworm AS backend
 WORKDIR /build
 COPY Cargo.toml Cargo.lock* ./
 COPY src ./src
+COPY tests ./tests
+COPY fixtures ./fixtures
+COPY Dockerfile compose.example.yml ./
 COPY --from=frontend /build/frontend/dist ./frontend/dist
 RUN cargo test --release && cargo build --release --bin minecraft-log-viewer
 

frontend/src/main.test.ts

@@ -0,0 +1,22 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+describe("application entry point", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("mounts the Svelte application", async () => {
+    document.body.innerHTML = '<div id="app"></div>';
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => new Promise(() => {})),
+    );
+
+    await import("./main");
+
+    expect(document.querySelector("header strong")?.textContent).toBe(
+      "Connecting",
+    );
+  });
+});

frontend/src/main.ts

@@ -1 +1,11 @@
-import './style.css';import App from './App.svelte';new App({target:document.getElementById('app')!});
+import "./style.css";
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const target = document.getElementById("app");
+
+if (!target) {
+  throw new Error("Missing #app mount target");
+}
+
+mount(App, { target });

frontend/vitest.config.ts

@@ -1,3 +1,7 @@
-import { defineConfig } from 'vitest/config';
+import { defineConfig } from "vitest/config";
-import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { svelte } from "@sveltejs/vite-plugin-svelte";
-export default defineConfig({ plugins: [svelte()], test: { environment: 'jsdom' } });
+export default defineConfig({
+  plugins: [svelte()],
+  resolve: { conditions: ["browser"] },
+  test: { environment: "jsdom" },
+});

tests/http_security.rs

@@ -85,6 +85,32 @@ fn request(peer: &str) -> Request<axum::body::Body> {
     request
 }
 
+#[tokio::test]
+async fn frontend_security_policy_allows_its_external_assets() {
+    let (app, _dir, _tx) = app().await;
+    let mut request = Request::builder()
+        .uri("/")
+        .body(axum::body::Body::empty())
+        .unwrap();
+    request.extensions_mut().insert(ConnectInfo(
+        "203.0.113.4:5000".parse::<SocketAddr>().unwrap(),
+    ));
+
+    let response = app.oneshot(request).await.unwrap();
+
+    assert_eq!(response.status(), StatusCode::OK);
+    assert_eq!(
+        response.headers()[header::CONTENT_SECURITY_POLICY],
+        "default-src 'self'; connect-src 'self' ws: wss:; style-src 'self'; script-src 'self'; frame-ancestors 'none'"
+    );
+    let body = axum::body::to_bytes(response.into_body(), 8192)
+        .await
+        .unwrap();
+    let html = String::from_utf8(body.to_vec()).unwrap();
+    assert!(html.contains("rel=\"stylesheet\""));
+    assert!(!html.contains("<style"));
+}
+
 #[tokio::test]
 async fn authorized_direct_ip_receives_redacted_logs() {
     let (app, _dir, _tx) = app().await;