diff --git a/src/components/ResourceManagerDrawer.tsx b/src/components/ResourceManagerDrawer.tsx index f9aedd80..ea65142b 100644 --- a/src/components/ResourceManagerDrawer.tsx +++ b/src/components/ResourceManagerDrawer.tsx @@ -17,7 +17,7 @@ type ResourceManagerTab = "canvas" | "assets"; export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerProps) { const { t } = useI18n(); - const [activeTab, setActiveTab] = useState("canvas"); + const [activeTab, setActiveTab] = useState("assets"); const tabButtonClass = (tab: ResourceManagerTab) => [ "flex h-8 items-center gap-1.5 rounded-lg px-3 text-sm font-semibold transition-colors", @@ -66,14 +66,6 @@ export function ResourceManagerDrawer({ open, onClose }: ResourceManagerDrawerPr
- +
diff --git a/src/components/__tests__/ResourceManagerDrawer.test.tsx b/src/components/__tests__/ResourceManagerDrawer.test.tsx new file mode 100644 index 00000000..cc168ba0 --- /dev/null +++ b/src/components/__tests__/ResourceManagerDrawer.test.tsx @@ -0,0 +1,51 @@ +import { describe, expect, it, vi } from "vitest"; +import { fireEvent, render, screen, within } from "@testing-library/react"; + +import { ResourceManagerDrawer } from "@/components/ResourceManagerDrawer"; + +const translations: Record = { + "common.close": "Close", + "resourceManager.title": "Resource Manager", + "resourceManager.tabCanvas": "Canvas", + "resourceManager.tabAssets": "Assets", +}; + +vi.mock("@/i18n", () => ({ + useI18n: () => ({ + t: (key: string) => translations[key] ?? key, + }), +})); + +vi.mock("@/components/AssetLibraryDrawer", () => ({ + AssetLibraryPanel: ({ active }: { active?: boolean }) => ( +
+ Asset Library Panel +
+ ), +})); + +vi.mock("@/components/CanvasOutlineDrawer", () => ({ + CanvasOutlinePanel: () =>
Canvas Outline Panel
, +})); + +describe("ResourceManagerDrawer", () => { + it("shows assets first and selects assets by default", () => { + render(); + + const buttons = screen.getAllByRole("button"); + const tabButtons = buttons.filter((button) => ["Assets", "Canvas"].includes(button.textContent ?? "")); + + expect(tabButtons.map((button) => button.textContent)).toEqual(["Assets", "Canvas"]); + expect(screen.getByTestId("asset-library-panel")).toHaveAttribute("data-active", "true"); + expect(screen.queryByTestId("canvas-outline-panel")).not.toBeInTheDocument(); + }); + + it("switches to the canvas panel when the canvas tab is clicked", () => { + render(); + + fireEvent.click(within(screen.getByText("Canvas").closest("button")!).getByText("Canvas")); + + expect(screen.getByTestId("canvas-outline-panel")).toBeInTheDocument(); + expect(screen.queryByTestId("asset-library-panel")).not.toBeInTheDocument(); + }); +});