1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
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");
});
});
|
