리스트/에디터 스타일 정리 및 버그 수정

tests/unit/BlocksSidebar.spec.tsx

@@ -52,28 +52,25 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
     Object.values(templateActions).forEach((fn) => fn.mockReset());
   });
 
-  it("Hero 템플릿 추가 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => {
+  it("Hero 템플릿 버튼 클릭 시 addHeroTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-
-    const button = screen.getByRole("button", { name: "Hero 템플릿 추가" });
+    const button = screen.getByRole("button", { name: "Hero 템플릿" });
     fireEvent.click(button);
 
     expect(templateActions.addHeroTemplateSection).toHaveBeenCalledTimes(1);
   });
 
-  it("Features 템플릿 추가 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => {
+  it("Features 템플릿 버튼 클릭 시 addFeaturesTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-
-    const button = screen.getByRole("button", { name: "Features 템플릿 추가" });
+    const button = screen.getByRole("button", { name: "기능 템플릿" });
     fireEvent.click(button);
 
     expect(templateActions.addFeaturesTemplateSection).toHaveBeenCalledTimes(1);
   });
 
-  it("CTA 템플릿 추가 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => {
+  it("CTA 템플릿 버튼 클릭 시 addCtaTemplateSection 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-
-    const button = screen.getByRole("button", { name: "CTA 템플릿 추가" });
+    const button = screen.getByRole("button", { name: "CTA 템플릿" });
     fireEvent.click(button);
 
     expect(templateActions.addCtaTemplateSection).toHaveBeenCalledTimes(1);
@@ -81,13 +78,12 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
 
   it("FAQ/Pricing/Testimonials/Blog/Team/Footer 템플릿 버튼도 각각의 액션을 호출해야 한다", () => {
     render(<BlocksSidebar />);
-
-    fireEvent.click(screen.getByRole("button", { name: "FAQ 템플릿 추가" }));
-    fireEvent.click(screen.getByRole("button", { name: "Pricing 템플릿 추가" }));
-    fireEvent.click(screen.getByRole("button", { name: "Testimonials 템플릿 추가" }));
-    fireEvent.click(screen.getByRole("button", { name: "Blog 템플릿 추가" }));
-    fireEvent.click(screen.getByRole("button", { name: "Team 템플릿 추가" }));
-    fireEvent.click(screen.getByRole("button", { name: "Footer 템플릿 추가" }));
+    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 템플릿" }));
 
     expect(templateActions.addFaqTemplateSection).toHaveBeenCalledTimes(1);
     expect(templateActions.addPricingTemplateSection).toHaveBeenCalledTimes(1);
@@ -111,10 +107,9 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
     expect(screen.getByText("페이지 푸터 섹션"));
   });
 
-  it("비디오 블록 추가 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => {
+  it("비디오 버튼 클릭 시 addVideoBlock 이 호출되어야 한다", () => {
     render(<BlocksSidebar />);
-
-    const button = screen.getByRole("button", { name: "비디오 블록 추가" });
+    const button = screen.getByRole("button", { name: "비디오" });
     fireEvent.click(button);
 
     expect(otherActions.addVideoBlock).toHaveBeenCalledTimes(1);
@@ -165,4 +160,55 @@ describe("BlocksSidebar - 템플릿 버튼", () => {
     expect(pricingThumb.children.length).toBe(3);
     expect(teamThumb.children.length).toBe(3);
   });
+
+  it("블록 섹션 타이틀을 클릭하면 블록 버튼들을 접고 펼 수 있어야 한다", () => {
+    render(<BlocksSidebar />);
+
+    // 초기에는 텍스트 버튼이 보여야 한다.
+    expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
+
+    const blockToggle = screen.getByRole("button", { name: "블록" });
+    fireEvent.click(blockToggle);
+
+    // 접힌 상태에서는 텍스트 버튼이 보이지 않아야 한다.
+    expect(screen.queryByRole("button", { name: "텍스트" })).toBeNull();
+
+    // 다시 클릭하면 펼쳐져야 한다.
+    fireEvent.click(blockToggle);
+    expect(screen.getByRole("button", { name: "텍스트" })).toBeDefined();
+  });
+
+  it("폼 요소 섹션 타이틀을 클릭하면 폼 관련 버튼들을 접고 펼 수 있어야 한다", () => {
+    render(<BlocksSidebar />);
+
+    // 초기에는 폼 입력 버튼이 보여야 한다.
+    expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
+
+    const formToggle = screen.getByRole("button", { name: "폼 요소" });
+    fireEvent.click(formToggle);
+
+    // 접힌 상태에서는 폼 입력 버튼이 보이지 않아야 한다.
+    expect(screen.queryByRole("button", { name: "입력(Input)" })).toBeNull();
+
+    // 다시 클릭하면 펼쳐져야 한다.
+    fireEvent.click(formToggle);
+    expect(screen.getByRole("button", { name: "입력(Input)" })).toBeDefined();
+  });
+
+  it("템플릿 섹션 타이틀을 클릭하면 템플릿 카드들을 접고 펼 수 있어야 한다", () => {
+    render(<BlocksSidebar />);
+
+    // 초기에는 Hero 템플릿 버튼이 보여야 한다.
+    expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
+
+    const templateToggle = screen.getByRole("button", { name: "템플릿" });
+    fireEvent.click(templateToggle);
+
+    // 접힌 상태에서는 Hero 템플릿 버튼이 보이지 않아야 한다.
+    expect(screen.queryByRole("button", { name: "Hero 템플릿" })).toBeNull();
+
+    // 다시 클릭하면 펼쳐져야 한다.
+    fireEvent.click(templateToggle);
+    expect(screen.getByRole("button", { name: "Hero 템플릿" })).toBeDefined();
+  });
 });