ERP-node/scripts/test-responsive-split-panel.ts

/**
 * ResponsiveSplitPanel 반응형 동작 테스트
 * - Desktop (>= 1280px): 좌우 분할 + 리사이저
 * - Tablet (768-1279px): 좌측 패널 자동 접힘, 아이콘 버튼만 표시
 * - Mobile (< 768px): 세로 스택 + 접기/펼치기 헤더
 *
 * 실행: npx tsx scripts/test-responsive-split-panel.ts
 */
import { chromium } from "playwright";
import * as path from "path";
import * as fs from "fs";

const BASE_URL = "http://localhost:9771";
const API_URL = "http://localhost:8080/api";
const TABLE_MNG_PATH = "/admin/systemMng/tableMngList";
const USER_ID = "wace";
const PASSWORD = "qlalfqjsgh11";

const OUTPUT_DIR = path.join(__dirname, "../test-output/responsive-split-panel");

async function loginViaApi(): Promise<string> {
  const res = await fetch(`${API_URL}/auth/login`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ userId: USER_ID, password: PASSWORD }),
  });
  const data = await res.json();
  if (!data.success || !data.data?.token) throw new Error("Login failed: " + (data.message || "no token"));
  return data.data.token;
}

async function main() {
  fs.mkdirSync(OUTPUT_DIR, { recursive: true });

  const token = await loginViaApi();
  console.log("1. Logged in via API");

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: 1400, height: 900 },
  });
  const page = await context.newPage();

  try {
    // 공개 페이지에서 토큰 주입 후 테이블 페이지로 이동
    console.log("2. Loading login page to inject token...");
    await page.goto(`${BASE_URL}/login`, { waitUntil: "domcontentloaded", timeout: 15000 });
    await page.evaluate((t: string) => {
      localStorage.setItem("authToken", t);
      document.cookie = `authToken=${t}; path=/; max-age=86400; SameSite=Lax`;
    }, token);

    console.log("3. Navigating to table management page...");
    await page.goto(`${BASE_URL}${TABLE_MNG_PATH}`, { waitUntil: "domcontentloaded", timeout: 15000 });

    await page.waitForTimeout(3000);

    const report: string[] = [];

    // --- 3. Desktop 1400px (default wide) ---
    console.log("\n3. Desktop 1400px - taking screenshot...");
    await page.setViewportSize({ width: 1400, height: 900 });
    await page.waitForTimeout(1000);
    const desktopPath = path.join(OUTPUT_DIR, "1-desktop-1400px.png");
    await page.screenshot({ path: desktopPath, fullPage: false });
    console.log(`   Saved: ${desktopPath}`);

    const at1400 = {
      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
      leftPanelVisible: (await page.locator('text=테이블 검색').count()) > 0 || (await page.locator('input[placeholder*="검색"]').count()) > 0,
      iconButtonOnly: (await page.locator('button[title*="열기"]').count()) > 0 && !(await page.locator('input[placeholder*="검색"]').isVisible()),
    };
    report.push(`[1400px] Resizer: ${at1400.resizer}, Left panel visible: ${at1400.leftPanelVisible}, Icon-only: ${at1400.iconButtonOnly}`);

    // --- 4. Tablet 1000px ---
    console.log("\n4. Tablet 1000px - resizing and taking screenshot...");
    await page.setViewportSize({ width: 1000, height: 900 });
    await page.waitForTimeout(1500);
    const tabletPath = path.join(OUTPUT_DIR, "2-tablet-1000px.png");
    await page.screenshot({ path: tabletPath, fullPage: false });
    console.log(`   Saved: ${tabletPath}`);

    const at1000 = {
      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
      iconButtonOnly: (await page.locator('button[title*="열기"]').count()) > 0,
      verticalStack: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
    };
    report.push(`[1000px] Resizer: ${at1000.resizer}, Left panel visible: ${at1000.leftPanelVisible}, Icon-only: ${at1000.iconButtonOnly}, Vertical stack: ${at1000.verticalStack}`);

    // --- 5. Mobile 600px ---
    console.log("\n5. Mobile 600px - resizing and taking screenshot...");
    await page.setViewportSize({ width: 600, height: 812 });
    await page.waitForTimeout(1500);
    const mobilePath = path.join(OUTPUT_DIR, "3-mobile-600px.png");
    await page.screenshot({ path: mobilePath, fullPage: false });
    console.log(`   Saved: ${mobilePath}`);

    const at600 = {
      collapsibleHeader: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
      verticalStack: (await page.locator('button:has-text("테이블 목록")').count()) > 0,
      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
    };
    report.push(`[600px] Collapsible header: ${at600.collapsibleHeader}, Vertical stack: ${at600.verticalStack}, Left panel visible: ${at600.leftPanelVisible}`);

    // --- 6. Back to Desktop 1400px ---
    console.log("\n6. Back to Desktop 1400px - resizing and taking screenshot...");
    await page.setViewportSize({ width: 1400, height: 900 });
    await page.waitForTimeout(1500);
    const desktopAgainPath = path.join(OUTPUT_DIR, "4-desktop-1400px-again.png");
    await page.screenshot({ path: desktopAgainPath, fullPage: false });
    console.log(`   Saved: ${desktopAgainPath}`);

    const at1400Again = {
      resizer: (await page.locator('[class*="cursor-col-resize"]').count()) > 0,
      leftPanelVisible: (await page.locator('input[placeholder*="검색"]').isVisible()),
    };
    report.push(`[1400px again] Resizer: ${at1400Again.resizer}, Left panel visible: ${at1400Again.leftPanelVisible}`);

    // --- Report ---
    console.log("\n" + "=".repeat(60));
    console.log("RESPONSIVE LAYOUT TEST REPORT");
    console.log("=".repeat(60));
    report.forEach((r) => console.log(r));
    console.log("\nScreenshots saved to:", OUTPUT_DIR);
  } catch (e) {
    console.error("Error:", e);
    throw e;
  } finally {
    await browser.close();
  }
}

main();