1 files changed, 113 insertions, 0 deletions
diff --git a/src/components/BackdropUpload.test.tsx b/src/components/BackdropUpload.test.tsx
new file mode 100644
index 0000000..72db03d
--- /dev/null
+++ b/src/components/BackdropUpload.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, beforeEach, afterEach } from "node:test";
+import assert from "node:assert";
+import "../test-setup.ts";
+import { createRoot, type Root } from "react-dom/client";
+import { act } from "@testing-library/react";
+import { BackdropUpload } from "./BackdropUpload.tsx";
+import { useStore } from "../store/store.ts";
+
+describe("BackdropUpload", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    useStore.setState({
+      models: [],
+      selectedModelId: null,
+      cameraView: "perspective",
+      backdropUrl: null,
+      availableModels: [],
+    });
+  });
+
+  afterEach(() => {
+    act(() => {
+      root.unmount();
+    });
+    container.remove();
+  });
+
+  it("should render an upload button", async () => {
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    const uploadWrapper = container.querySelector(".backdrop-upload");
+    assert.ok(uploadWrapper, "Should render backdrop upload component");
+
+    const input = container.querySelector('input[type="file"]');
+    assert.ok(input, "Should have a file input");
+  });
+
+  it("should accept image files", async () => {
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    const input = container.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    assert.ok(input.accept.includes("image/"), "Should accept image files");
+  });
+
+  it("should have a clear button when backdrop is set", async () => {
+    useStore.getState().setBackdrop("blob:http://localhost/12345");
+
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    const clearButton = container.querySelector("button.clear-backdrop");
+    assert.ok(clearButton, "Should have clear backdrop button");
+  });
+
+  it("should not show clear button when no backdrop", async () => {
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    const clearButton = container.querySelector("button.clear-backdrop");
+    assert.ok(!clearButton, "Should not show clear button when no backdrop");
+  });
+
+  it("should clear backdrop when clear button clicked", async () => {
+    useStore.getState().setBackdrop("blob:http://localhost/12345");
+
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    const clearButton = container.querySelector(
+      "button.clear-backdrop",
+    ) as HTMLButtonElement;
+
+    await act(async () => {
+      clearButton.click();
+    });
+
+    assert.strictEqual(useStore.getState().backdropUrl, null);
+  });
+
+  it("should update UI when backdrop state changes", async () => {
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    let clearButton = container.querySelector("button.clear-backdrop");
+    assert.ok(!clearButton, "Clear button should not exist initially");
+
+    await act(async () => {
+      useStore.getState().setBackdrop("blob:http://localhost/12345");
+    });
+
+    await act(async () => {
+      root.render(<BackdropUpload />);
+    });
+
+    clearButton = container.querySelector("button.clear-backdrop");
+    assert.ok(clearButton, "Clear button should appear after backdrop is set");
+  });
+});