텍스트 스타일 및 프리뷰 렌더링 정리

tests/e2e/preview.spec.ts

@@ -107,3 +107,121 @@ test("모바일 뷰에서도 프리뷰 페이지가 깨지지 않고 주요 템
   // Testimonials 본문 일부
   await expect(page.getByText("이 서비스 덕분에 랜딩 페이지 제작 시간이 크게 줄었습니다.")).toBeVisible();
 });
+
+test("폼 컨트롤러에 매핑한 폼 요소와 버튼이 프리뷰에서 함께 동작해야 한다", async ({ page }) => {
+  // 1) 에디터에서 폼 요소, 버튼, 폼 블록을 추가한다.
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  // 폼 입력 요소와 버튼, 폼 블록을 순서대로 추가한다.
+  await page.getByRole("button", { name: "폼 입력 추가" }).click();
+  await page.getByRole("button", { name: "버튼 블록 추가" }).click();
+  await page.getByRole("button", { name: "폼 블록 추가" }).click();
+
+  // 방금 추가된 폼 블록을 선택한다.
+  const blocks = canvas.getByTestId("editor-block");
+  const formBlock = blocks.nth((await blocks.count()) - 1);
+  await formBlock.click({ force: true });
+
+  // 2) 우측 속성 패널에서 폼 컨트롤러 매핑을 설정한다.
+  const fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  const fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
+
+  // 첫 번째 폼 요소를 이 폼의 fieldIds 에 매핑한다.
+  await fieldCheckboxes.nth(0).check();
+
+  // Submit 버튼 셀렉트 박스에서 방금 추가한 버튼 블록을 선택한다.
+  const submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 첫 번째 옵션은 "(선택 안 함)" 이므로, 그 이후 옵션 중 하나를 선택한다.
+  await submitSelect.selectOption({ index: 1 });
+
+  // 3) 프리뷰 페이지로 이동한다.
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  // 기대: 폼 컨트롤러에 매핑한 폼 입력 요소가 프리뷰에서 필드로 렌더링되어야 한다.
+  // (구체적인 라벨 텍스트는 구현에 따라 달라질 수 있어 우선 textbox 중 하나가 보이는지만 확인한다.)
+  const input = page.getByRole("textbox").first();
+  await expect(input).toBeVisible();
+
+  // 값을 입력한 뒤, 매핑된 버튼(기본 라벨 "버튼")을 클릭하면 폼이 전송되고 성공 메시지가 보여야 한다.
+  await input.fill("테스트 값");
+
+  await page.getByRole("button", { name: "버튼" }).click();
+
+  await expect(page.getByText("성공적으로 전송되었습니다.")).toBeVisible();
+});
+
+test("여러 폼 블록과 여러 버튼이 있을 때 각 폼이 독립적으로 제출되어야 한다", async ({ page }) => {
+  await page.goto("/editor");
+
+  const canvas = page.getByTestId("editor-canvas");
+
+  const blocks = canvas.getByTestId("editor-block");
+
+  // Form A: 입력 필드 + 버튼 + 폼 블록을 추가한 뒤, 즉시 컨트롤러를 매핑한다.
+  await page.getByRole("button", { name: "폼 입력 추가" }).click();
+  await page.getByRole("button", { name: "버튼 블록 추가" }).click();
+  await page.getByRole("button", { name: "폼 블록 추가" }).click();
+
+  let count = await blocks.count();
+  const formBlockA = blocks.nth(count - 1);
+  await formBlockA.click({ force: true });
+
+  let fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  let fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
+  // 현재 존재하는 폼 요소 중 첫 번째를 A 폼에 매핑한다.
+  await fieldCheckboxes.nth(0).check();
+
+  let submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 첫 번째 버튼을 A 폼의 submit 버튼으로 매핑 (index 1: 첫 번째 실제 버튼)
+  await submitSelect.selectOption({ index: 1 });
+
+  // Form B: 입력 필드 + 버튼 + 폼 블록을 다시 추가한 뒤, 즉시 컨트롤러를 매핑한다.
+  await page.getByRole("button", { name: "폼 입력 추가" }).click();
+  await page.getByRole("button", { name: "버튼 블록 추가" }).click();
+  await page.getByRole("button", { name: "폼 블록 추가" }).click();
+
+  count = await blocks.count();
+  const formBlockB = blocks.nth(count - 1);
+  await formBlockB.click({ force: true });
+
+  fieldMappingGroup = page.getByRole("group", { name: "폼 필드 매핑" });
+  fieldCheckboxes = fieldMappingGroup.getByRole("checkbox");
+  // 현재 폼 요소 중 마지막 것을 B 폼에 매핑 (두 번째 입력 필드라고 가정)
+  const lastCheckboxIndex = (await fieldCheckboxes.count()) - 1;
+  await fieldCheckboxes.nth(lastCheckboxIndex).check();
+
+  submitSelect = page.getByRole("combobox", { name: "Submit 버튼" });
+  // 두 번째 버튼을 B 폼의 submit 버튼으로 매핑 (index 2: 두 번째 실제 버튼)
+  await submitSelect.selectOption({ index: 2 });
+
+  // 프리뷰로 이동한다.
+  await page.getByRole("link", { name: "프리뷰 열기" }).click();
+
+  await expect(page.getByRole("heading", { name: "Page Preview" })).toBeVisible();
+
+  const textboxes = page.getByRole("textbox");
+  const textboxCount = await textboxes.count();
+
+  // 최소 2개의 텍스트 입력이 있어야 한다.
+  expect(textboxCount).toBeGreaterThanOrEqual(2);
+
+  const firstInput = textboxes.nth(0);
+  const secondInput = textboxes.nth(1);
+
+  // Form A 입력값을 채우고 첫 번째 버튼 클릭 → 성공 메시지 기대
+  await firstInput.fill("A 폼 값");
+  await page.getByRole("button", { name: "버튼" }).first().click();
+  // 첫 번째 폼에 대한 성공 메시지가 최소 하나는 보여야 한다.
+  await expect(page.getByText("성공적으로 전송되었습니다.").first()).toBeVisible();
+
+  // Form B 입력값을 채우고 두 번째 버튼 클릭 → 다시 성공 메시지 기대
+  await secondInput.fill("B 폼 값");
+  await page.getByRole("button", { name: "버튼" }).nth(1).click();
+  // 두 번째 폼에 대한 성공 메시지도 두 번째 요소로 표시되었는지 확인한다.
+  const successMessages = page.getByText("성공적으로 전송되었습니다.");
+  await expect(successMessages.nth(1)).toBeVisible();
+});