55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
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");
|
|
});
|
|
});
|