i18n 적용

tests/unit/LocaleSwitcher.spec.tsx

@@ -0,0 +1,54 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { LocaleProvider, useAppLocale } from "@/features/i18n/LocaleProvider";
+import { LocaleSwitcher } from "@/features/i18n/LocaleSwitcher";
+
+// LocaleSwitcher TDD
+// - 현재 로케일에 따라 EN/KO 버튼 텍스트가 표시되어야 한다.
+// - 버튼을 클릭하면 로케일이 토글되고, 하위 컴포넌트의 useAppLocale 결과도 함께 변경되어야 한다.
+
+describe("LocaleSwitcher", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  function LocaleConsumer() {
+    const locale = useAppLocale();
+    return <div data-testid="current-locale">{locale}</div>;
+  }
+
+  it("초기 로케일이 en 이면 버튼 텍스트는 EN 이어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleSwitcher />
+        <LocaleConsumer />
+      </LocaleProvider>,
+    );
+
+    const button = screen.getByRole("button", { name: "Toggle locale" });
+    const current = screen.getByTestId("current-locale");
+
+		expect(button.textContent).toContain("EN");
+		expect(current.textContent).toBe("en");
+  });
+
+  it("버튼을 클릭하면 로케일이 en/ko 사이에서 토글되어야 한다", () => {
+    render(
+      <LocaleProvider initialLocale="en">
+        <LocaleSwitcher />
+        <LocaleConsumer />
+      </LocaleProvider>,
+    );
+
+    const button = screen.getByRole("button", { name: "Toggle locale" });
+    const current = screen.getByTestId("current-locale");
+
+		expect(current.textContent).toBe("en");
+		expect(button.textContent).toContain("EN");
+
+    fireEvent.click(button);
+
+		expect(current.textContent).toBe("ko");
+		expect(button.textContent).toContain("KO");
+  });
+});