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
|
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 { Sidebar } from "./Sidebar.tsx";
import { useStore } from "../store/store.ts";
describe("Sidebar", () => {
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: [
{ id: "servbot", name: "Servbot", url: "/models/servbot.gltf" },
{ id: "megaman", name: "Megaman", url: "/models/megaman_volnutt.gltf" },
{ id: "tron", name: "Tron Bonne", url: "/models/tron_bonne.gltf" },
],
});
});
afterEach(() => {
act(() => {
root.unmount();
});
container.remove();
});
it("should render available models list", async () => {
await act(async () => {
root.render(<Sidebar />);
});
const sidebar = container.querySelector(".sidebar");
assert.ok(sidebar, "Sidebar should be rendered");
const modelItems = container.querySelectorAll(".model-item");
assert.strictEqual(modelItems.length, 3, "Should render 3 model items");
});
it("should display model names", async () => {
await act(async () => {
root.render(<Sidebar />);
});
const modelNames = container.querySelectorAll(".model-name");
const names = Array.from(modelNames).map((item) => item.textContent);
assert.ok(names.includes("Servbot"), "Should display Servbot");
assert.ok(names.includes("Megaman"), "Should display Megaman");
assert.ok(names.includes("Tron Bonne"), "Should display Tron Bonne");
});
it("should have Add buttons for each model", async () => {
await act(async () => {
root.render(<Sidebar />);
});
const addButtons = container.querySelectorAll(".add-model-btn");
assert.strictEqual(addButtons.length, 3, "Should have 3 Add buttons");
addButtons.forEach((btn) => {
assert.strictEqual(btn.textContent, "Add", 'Button should say "Add"');
});
});
it("should add model to scene when Add button is clicked", async () => {
await act(async () => {
root.render(<Sidebar />);
});
const addButtons = container.querySelectorAll(".add-model-btn");
const firstAddButton = addButtons[0] as HTMLButtonElement;
await act(async () => {
firstAddButton.click();
});
const models = useStore.getState().models;
assert.strictEqual(models.length, 1, "Should have 1 model in scene");
assert.strictEqual(models[0].sourceId, "servbot", "Should be a servbot");
});
it("should have a title", async () => {
await act(async () => {
root.render(<Sidebar />);
});
const title = container.querySelector(".sidebar-title");
assert.ok(title, "Should have a title");
assert.ok(
title?.textContent?.includes("Models"),
'Title should contain "Models"',
);
});
});
|
