TDD,E2E 개선, 미적용 스타일 개선

tests/e2e/form-submission-flow.spec.ts

@@ -60,16 +60,35 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
     },
   ]);
 
-  // 2) 에디터에서 프로젝트 제목/slug 를 설정하고 폼 컨트롤러 블록을 추가한다.
+  // 2) 에디터에서 프로젝트 제목/slug 를 설정하고 폼 관련 블록들을 추가한다.
   await page.goto("/editor");
 
   const propertiesSidebar = page.getByTestId("properties-sidebar");
   await propertiesSidebar.getByLabel("프로젝트 제목").fill("E2E 폼 프로젝트");
   await propertiesSidebar.getByLabel("프로젝트 주소 (slug)").fill(projectSlug);
 
-  // 좌측 블록 사이드바에서 "폼 컨트롤러" 버튼을 눌러 기본 contact 폼을 추가한다.
+  // v2 컨트롤러에서는 더 이상 기본 contact 폼이 프리뷰에 임의로 생성되지 않으므로,
+  // 실제 입력 필드 3개와 버튼 1개를 먼저 추가해 두고, 마지막에 FormBlock 을 추가해 매핑한다.
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "입력(Input)" }).click();
+  await page.getByRole("button", { name: "버튼" }).click();
+
+  // 마지막으로 "폼 컨트롤러" 블록을 추가하면 해당 블록이 자동으로 선택되어
+  // 우측 속성 패널에 FormControllerPanel 이 표시된다.
   await page.getByRole("button", { name: "폼 컨트롤러" }).click();
 
+  const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
+  const fieldCount = await fieldCheckboxes.count();
+  for (let i = 0; i < fieldCount; i += 1) {
+    await fieldCheckboxes.nth(i).check();
+  }
+
+  const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 첫 번째 옵션은 "(선택 안 함)" 이므로, 이후 옵션 중 첫 번째 버튼을 선택한다.
+  await submitSelect.selectOption({ index: 1 });
+
   // 3) "저장 (로컬 + 서버)" 액션으로 프로젝트를 서버에 실제 저장한다.
   await page.getByRole("button", { name: "메뉴 ▼" }).click();
   await page.getByRole("button", { name: "프로젝트 저장/불러오기" }).click();
@@ -92,16 +111,18 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
 
   await expect(page).toHaveURL(/\/preview/);
 
-  // 4) 프리뷰 화면의 폼에 값을 입력하고 제출 버튼("폼 전송")을 클릭한다.
+  // 4) 프리뷰 화면의 폼에 값을 입력하고 매핑된 버튼을 클릭한다.
   const nameValue = "홍길동";
   const emailValue = `submitted-${now}@example.com`;
   const messageValue = "E2E 테스트 메시지";
 
-  await page.getByLabel("이름").fill(nameValue);
-  await page.getByLabel("이메일").fill(emailValue);
-  await page.getByLabel("메시지").fill(messageValue);
+  const textboxes = page.getByRole("textbox");
+  await textboxes.nth(0).fill(nameValue);
+  await textboxes.nth(1).fill(emailValue);
+  await textboxes.nth(2).fill(messageValue);
 
-  await page.getByRole("button", { name: "폼 전송" }).click();
+  // 프리뷰에는 기본 submit 버튼이 없고, 사용자 버튼 블록이 submit 으로 동작해야 한다.
+  await page.getByRole("link", { name: "버튼" }).click();
 
   // 폼 제출 성공 메시지가 표시되어야 한다.
   await expect(page.getByText("성공적으로 전송되었습니다.")).toBeVisible();
@@ -124,5 +145,5 @@ test("프리뷰 폼 제출 후 제출 내역 페이지에서 데이터가 보여
   // 테이블에 방금 제출한 값들이 포함되어 있어야 한다.
   await expect(page.getByText(nameValue)).toBeVisible();
   await expect(page.getByText(emailValue)).toBeVisible();
-  await expect(page.getByText(`message: ${messageValue}`)).toBeVisible();
+  await expect(page.getByText(messageValue)).toBeVisible();
 });