i18n 적용
This commit is contained in:
@@ -54,7 +54,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
|
||||
it("Hero 템플릿 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
const button = screen.getByRole("button", { name: "Hero 템플릿" });
|
||||
|
||||
const button = screen.getByRole("button", { name: "Hero template" });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(templateActions.addHeroTemplateSection).toHaveBeenCalledTimes(1);
|
||||
@@ -62,7 +63,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
|
||||
it("Features 템플릿 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
const button = screen.getByRole("button", { name: "기능 템플릿" });
|
||||
|
||||
const button = screen.getByRole("button", { name: "Features template" });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(templateActions.addFeaturesTemplateSection).toHaveBeenCalledTimes(1);
|
||||
@@ -70,7 +72,8 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
|
||||
it("CTA 템플릿 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
const button = screen.getByRole("button", { name: "CTA 템플릿" });
|
||||
|
||||
const button = screen.getByRole("button", { name: "CTA template" });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(templateActions.addCtaTemplateSection).toHaveBeenCalledTimes(1);
|
||||
@@ -78,12 +81,13 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
|
||||
it("FAQ/Pricing/Testimonials/Blog/Team/Footer 템플릿 버튼도 각각의 액션을 호출해야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
fireEvent.click(screen.getByRole("button", { name: "FAQ 템플릿" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "상품 템플릿" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "후기 템플릿" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "블로그 템플릿" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Team 템플릿" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Footer 템플릿" }));
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "FAQ template" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Pricing template" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Testimonials template" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Blog template" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Team template" }));
|
||||
fireEvent.click(screen.getByRole("button", { name: "Footer template" }));
|
||||
|
||||
expect(templateActions.addFaqTemplateSection).toHaveBeenCalledTimes(1);
|
||||
expect(templateActions.addPricingTemplateSection).toHaveBeenCalledTimes(1);
|
||||
@@ -96,20 +100,21 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
it("템플릿 섹션에는 각 템플릿의 용도를 설명하는 텍스트가 함께 표시되어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
expect(screen.getByText("페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)"));
|
||||
expect(screen.getByText("3컬럼 기능 소개 섹션"));
|
||||
expect(screen.getByText("콜투액션(CTA) 섹션"));
|
||||
expect(screen.getByText("자주 묻는 질문(FAQ) 섹션"));
|
||||
expect(screen.getByText("요금제/플랜 소개 섹션"));
|
||||
expect(screen.getByText("고객 후기(Testimonials) 섹션"));
|
||||
expect(screen.getByText("블로그 포스트 목록 섹션"));
|
||||
expect(screen.getByText("팀 소개 섹션"));
|
||||
expect(screen.getByText("페이지 푸터 섹션"));
|
||||
expect(screen.getByText("Top-of-page hero section (headline + subtext + button)"));
|
||||
expect(screen.getByText("Three-column features section"));
|
||||
expect(screen.getByText("Call-to-action (CTA) section"));
|
||||
expect(screen.getByText("Frequently asked questions (FAQ) section"));
|
||||
expect(screen.getByText("Pricing plans section"));
|
||||
expect(screen.getByText("Customer testimonials section"));
|
||||
expect(screen.getByText("Blog post listing section"));
|
||||
expect(screen.getByText("Team members section"));
|
||||
expect(screen.getByText("Page footer section"));
|
||||
});
|
||||
|
||||
it("비디오 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
const button = screen.getByRole("button", { name: "비디오" });
|
||||
|
||||
const button = screen.getByRole("button", { name: "Video" });
|
||||
fireEvent.click(button);
|
||||
|
||||
expect(otherActions.addVideoBlock).toHaveBeenCalledTimes(1);
|
||||
@@ -118,10 +123,10 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
it("템플릿들은 카테고리별로 그룹 헤더를 가져야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
expect(screen.getByText("히어로 · CTA")).toBeDefined();
|
||||
expect(screen.getByText("콘텐츠 섹션")).toBeDefined();
|
||||
expect(screen.getByText("신뢰/소개")).toBeDefined();
|
||||
expect(screen.getByText("푸터/기타")).toBeDefined();
|
||||
expect(screen.getByText("Hero · CTA")).toBeDefined();
|
||||
expect(screen.getByText("Content sections")).toBeDefined();
|
||||
expect(screen.getByText("Trust & about")).toBeDefined();
|
||||
expect(screen.getByText("Footer & misc")).toBeDefined();
|
||||
});
|
||||
|
||||
it("각 템플릿 카드에는 미니 썸네일(레이아웃 힌트)가 렌더링되어야 한다", () => {
|
||||
@@ -165,57 +170,57 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
// 초기에는 텍스트 버튼이 보여야 한다.
|
||||
expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
|
||||
|
||||
const blockToggle = screen.getByRole("button", { name: "블록" });
|
||||
const blockToggle = screen.getByRole("button", { name: "Blocks" });
|
||||
fireEvent.click(blockToggle);
|
||||
|
||||
// 접힌 상태에서는 텍스트 버튼이 보이지 않아야 한다.
|
||||
expect(screen.queryByRole("button", { name: "텍스트" })).toBeNull();
|
||||
expect(screen.queryByRole("button", { name: "Text" })).toBeNull();
|
||||
|
||||
// 다시 클릭하면 펼쳐져야 한다.
|
||||
fireEvent.click(blockToggle);
|
||||
expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Text" })).toBeDefined();
|
||||
});
|
||||
|
||||
it("폼 요소 섹션 타이틀을 클릭하면 폼 관련 버튼들을 접고 펼 수 있어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
// 초기에는 폼 입력 버튼이 보여야 한다.
|
||||
expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
|
||||
|
||||
const formToggle = screen.getByRole("button", { name: "폼 요소" });
|
||||
const formToggle = screen.getByRole("button", { name: "Form elements" });
|
||||
fireEvent.click(formToggle);
|
||||
|
||||
// 접힌 상태에서는 폼 입력 버튼이 보이지 않아야 한다.
|
||||
expect(screen.queryByRole("button", { name: "입력(Input)" })).toBeNull();
|
||||
expect(screen.queryByRole("button", { name: "Input field" })).toBeNull();
|
||||
|
||||
// 다시 클릭하면 펼쳐져야 한다.
|
||||
fireEvent.click(formToggle);
|
||||
expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Input field" })).toBeDefined();
|
||||
});
|
||||
|
||||
it("템플릿 섹션 타이틀을 클릭하면 템플릿 카드들을 접고 펼 수 있어야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
// 초기에는 Hero 템플릿 버튼이 보여야 한다.
|
||||
expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
|
||||
|
||||
const templateToggle = screen.getByRole("button", { name: "템플릿" });
|
||||
const templateToggle = screen.getByRole("button", { name: "Templates" });
|
||||
fireEvent.click(templateToggle);
|
||||
|
||||
// 접힌 상태에서는 Hero 템플릿 버튼이 보이지 않아야 한다.
|
||||
expect(screen.queryByRole("button", { name: "Hero 템플릿" })).toBeNull();
|
||||
expect(screen.queryByRole("button", { name: "Hero template" })).toBeNull();
|
||||
|
||||
// 다시 클릭하면 펼쳐져야 한다.
|
||||
fireEvent.click(templateToggle);
|
||||
expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
|
||||
expect(screen.getByRole("button", { name: "Hero template" })).toBeDefined();
|
||||
});
|
||||
|
||||
it("블록 추가 버튼들은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
const textButton = screen.getByRole("button", { name: "텍스트" });
|
||||
const textButton = screen.getByRole("button", { name: "Text" });
|
||||
const className = textButton.getAttribute("class") ?? "";
|
||||
|
||||
// 라이트 모드: 밝은 배경 + 어두운 텍스트
|
||||
@@ -231,7 +236,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
const heroDescription = screen.getByText(
|
||||
"페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)",
|
||||
"Top-of-page hero section (headline + subtext + button)",
|
||||
);
|
||||
const card = heroDescription.closest("div");
|
||||
expect(card).not.toBeNull();
|
||||
@@ -246,7 +251,7 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
|
||||
it("히어로 템플릿 추가 버튼은 라이트/다크 테마에 맞는 배경/텍스트 클래스를 사용해야 한다", () => {
|
||||
render(<BlocksSidebar />);
|
||||
|
||||
const heroButton = screen.getByRole("button", { name: "Hero 템플릿" });
|
||||
const heroButton = screen.getByRole("button", { name: "Hero template" });
|
||||
const className = heroButton.getAttribute("class") ?? "";
|
||||
|
||||
// 라이트 모드: 밝은 배경 + 어두운 텍스트
|
||||
|
||||
Reference in New Issue
Block a user