첫 커밋: 로컬 프로젝트 업로드

baron-sso/devfront/src/components/common/LanguageSelector.test.tsx

@@ -0,0 +1,77 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("../../lib/i18n", () => ({
+  t: (_key: string, fallback?: string) => fallback ?? _key,
+}));
+
+import LanguageSelector from "./LanguageSelector";
+
+const roots: Root[] = [];
+
+beforeEach(() => {
+  window.localStorage.clear();
+  window.history.replaceState({}, "", "/");
+  document.body.innerHTML = "";
+});
+
+afterEach(() => {
+  for (const root of roots.splice(0)) {
+    act(() => {
+      root.unmount();
+    });
+  }
+  vi.restoreAllMocks();
+});
+
+function renderSelector() {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  roots.push(root);
+
+  act(() => {
+    root.render(<LanguageSelector />);
+  });
+
+  return container;
+}
+
+describe("LanguageSelector", () => {
+  it("prefers the locale stored in localStorage", () => {
+    window.localStorage.setItem("locale", "en");
+
+    const container = renderSelector();
+    const select = container.querySelector("select") as HTMLSelectElement;
+
+    expect(select.value).toBe("en");
+  });
+
+  it("falls back to the path locale when storage is empty", () => {
+    window.history.replaceState({}, "", "/ko");
+
+    const container = renderSelector();
+    const select = container.querySelector("select") as HTMLSelectElement;
+
+    expect(select.value).toBe("ko");
+  });
+
+  it("saves the selected locale and dispatches a development event", () => {
+    vi.stubEnv("MODE", "development");
+    const dispatchEvent = vi.spyOn(window, "dispatchEvent");
+    window.history.replaceState({}, "", "/ko");
+
+    const container = renderSelector();
+    const select = container.querySelector("select") as HTMLSelectElement;
+
+    act(() => {
+      select.value = "en";
+      select.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    expect(window.localStorage.getItem("locale")).toBe("en");
+    expect(dispatchEvent).toHaveBeenCalled();
+    expect(select.value).toBe("en");
+  });
+});