jongryangje/e2e/workspace.spec.js

const { test, expect } = require('@playwright/test');
const { login } = require('./helpers/auth');

/**
 * 워크스페이스(탭) — 메뉴를 탭(iframe)으로 열고 전환해도 작업 상태 유지
 */
test.describe('워크스페이스 탭', () => {
  test('탭 열기·전환·상태 유지·닫기', async ({ page }) => {
    await login(page, 'admin');
    await page.goto('/admin/select-local-government');
    await page.evaluate(() => {
      const r = document.querySelector('input[name="lg_idx"][value="1"]');
      if (r) { r.checked = true; r.form.submit(); }
    });
    await page.waitForTimeout(700);

    await page.goto('/workspace');
    await page.waitForTimeout(2500);

    // 대시보드 탭이 자동으로 열림
    await expect(page.locator('.ws-tab')).toHaveCount(1);
    await expect(page.locator('.ws-frame.active')).toBeVisible();

    // 대시보드 탭에 입력
    await page.frameLocator('.ws-frame.active').locator('#mainMenuSearch').fill('WS_STATE', { timeout: 8000 });

    // 사이드바 메뉴 클릭 → 새 탭
    await page.locator('.sidebar .my-menu-list a').first().click();
    await page.waitForTimeout(1500);
    await expect(page.locator('.ws-tab')).toHaveCount(2);

    // 첫 탭으로 복귀 → 입력값 유지 확인
    await page.locator('.ws-tab').first().click();
    await page.waitForTimeout(400);
    await expect(page.frameLocator('.ws-frame.active').locator('#mainMenuSearch')).toHaveValue('WS_STATE');

    // 탭 닫기
    await page.locator('.ws-tab').nth(1).locator('.t-close').click();
    await page.waitForTimeout(300);
    await expect(page.locator('.ws-tab')).toHaveCount(1);
  });

  test('관리자 페이지로 이동 후 복귀해도 열어둔 탭 유지', async ({ page }) => {
    await login(page, 'admin');
    await page.goto('/admin/select-local-government');
    await page.evaluate(() => {
      const r = document.querySelector('input[name="lg_idx"][value="1"]');
      if (r) { r.checked = true; r.form.submit(); }
    });
    await page.waitForTimeout(700);

    await page.goto('/workspace');
    await page.waitForTimeout(2500);

    // 소메뉴를 탭으로 추가 → 탭 2개
    await page.locator('.sidebar .my-menu-list a').first().click();
    await page.waitForTimeout(1500);
    await expect(page.locator('.ws-tab')).toHaveCount(2);

    // 관리자 페이지로 전체 이동(워크스페이스를 떠남)
    await page.goto('/admin');
    await page.waitForTimeout(800);

    // 다시 워크스페이스로 복귀 → 세션에서 탭 복원
    await page.goto('/workspace');
    await page.waitForTimeout(2500);
    await expect(page.locator('.ws-tab')).toHaveCount(2);
  });

  test('다른 아이디로 로그인하면 이전 탭이 복원되지 않음', async ({ page }) => {
    // admin 으로 워크스페이스에서 소메뉴 탭을 추가
    await login(page, 'admin');
    await page.goto('/admin/select-local-government');
    await page.evaluate(() => {
      const r = document.querySelector('input[name="lg_idx"][value="1"]');
      if (r) { r.checked = true; r.form.submit(); }
    });
    await page.waitForTimeout(700);
    await page.goto('/workspace');
    await page.waitForTimeout(2500);
    await page.locator('.sidebar .my-menu-list a').first().click();
    await page.waitForTimeout(1500);
    await expect(page.locator('.ws-tab')).toHaveCount(2);

    // 같은 브라우저 탭에서 로그아웃 → 다른 아이디(local)로 로그인
    await page.goto('/logout');
    await page.waitForTimeout(500);
    await login(page, 'local');
    await page.goto('/workspace');
    await page.waitForTimeout(2500);

    // 이전 사용자의 탭들은 사라지고 기본 대시보드 탭만 남아야 함
    await expect(page.locator('.ws-tab')).toHaveCount(1);
  });

  test('분할 보기: 2분할(좌우)·4분할에서 여러 화면 동시 표시', async ({ page }) => {
    await login(page, 'admin');
    await page.goto('/admin/select-local-government');
    await page.evaluate(() => {
      const r = document.querySelector('input[name="lg_idx"][value="1"]');
      if (r) { r.checked = true; r.form.submit(); }
    });
    await page.waitForTimeout(700);
    await page.goto('/workspace');
    await page.waitForTimeout(2500);

    // 분할 컨트롤 버튼 4개 존재
    await expect(page.locator('#wsLayout button')).toHaveCount(4);

    // 소메뉴 2개를 탭으로 열기
    await page.locator('.sidebar .my-menu-list a').nth(0).click();
    await page.waitForTimeout(1200);
    await page.locator('.sidebar .my-menu-list a').nth(1).click();
    await page.waitForTimeout(1200);
    // 단일 모드: 화면에 보이는 프레임은 1개
    await expect(page.locator('.ws-frame:visible')).toHaveCount(1);

    // 2분할(좌우) → 보이는 프레임 2개 + 칸 헤더 2개
    await page.locator('#wsLayout button[data-mode="lr"]').click();
    await page.waitForTimeout(600);
    await expect(page.locator('.ws-frame:visible')).toHaveCount(2);
    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(2);

    // 4분할 → 칸 헤더 4개
    await page.locator('#wsLayout button[data-mode="quad"]').click();
    await page.waitForTimeout(600);
    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(4);

    // 다시 1분할 → 보이는 프레임 1개
    await page.locator('#wsLayout button[data-mode="single"]').click();
    await page.waitForTimeout(600);
    await expect(page.locator('.ws-frame:visible')).toHaveCount(1);
    await expect(page.locator('.ws-slot-head:visible')).toHaveCount(0);
  });

  test('편의: 가운데클릭 닫기·사이드바 동기화', async ({ page }) => {
    await login(page, 'admin');
    await page.goto('/admin/select-local-government');
    await page.evaluate(() => {
      const r = document.querySelector('input[name="lg_idx"][value="1"]');
      if (r) { r.checked = true; r.form.submit(); }
    });
    await page.waitForTimeout(700);

    await page.goto('/workspace');
    await page.waitForTimeout(2500);

    await expect(page.locator('.ws-tab')).toHaveCount(1);

    // 대시보드(업무 현황) 탭은 메뉴에 없으므로 사이드바에 active(▸) 가 없어야 함
    await expect(page.locator('.sidebar .my-menu-list a.active')).toHaveCount(0);

    // 소메뉴를 탭으로 열기 → 그 메뉴가 사이드바에서 active(▸) 로 강조됨
    const firstMenu = page.locator('.sidebar .my-menu-list a').first();
    const menuText = (await firstMenu.textContent() || '').trim();
    await firstMenu.click();
    await page.waitForTimeout(1500);
    await expect(page.locator('.ws-tab')).toHaveCount(2);
    const activeLink = page.locator('.sidebar .my-menu-list a.active');
    await expect(activeLink).toHaveCount(1);
    await expect(activeLink).toContainText(menuText.replace(/^[▸·]\s*/, ''));

    // 대시보드 탭으로 전환 → active(▸) 강조가 해제되어야 함 (탭↔사이드바 동기화)
    await page.locator('.ws-tab').nth(0).click();
    await page.waitForTimeout(500);
    await expect(page.locator('.sidebar .my-menu-list a.active')).toHaveCount(0);

    // 메뉴 탭으로 다시 전환 → active(▸) 가 그 메뉴로 복귀
    await page.locator('.ws-tab').nth(1).click();
    await page.waitForTimeout(500);
    await expect(page.locator('.sidebar .my-menu-list a.active')).toHaveCount(1);

    // 두 번째 탭 가운데(휠) 클릭으로 닫기
    await page.locator('.ws-tab').nth(1).click({ button: 'middle' });
    await page.waitForTimeout(400);
    await expect(page.locator('.ws-tab')).toHaveCount(1);
  });
});