ute2e/tools/virtual-preparation-live.mjs

import fs from 'node:fs';
import assert from 'node:assert/strict';
import { chromium, expect } from '@playwright/test';
import { login, call } from './role-permissions-live.mjs';

const output = 'reports/virtual-floating-preparation-20260913';
fs.mkdirSync(output, { recursive: true });
const session = await login('root');
const task = await call('tran/v1/teaching/assignments/81', session.accessToken);
assert.equal(task.status, 200);
const browser = await chromium.launch({ channel: 'msedge', headless: true, args: ['--enable-unsafe-swiftshader'] });
const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
await context.addInitScript(s => {
  sessionStorage.setItem('unreal-tran:web:access-token:v1', s.accessToken);
  sessionStorage.setItem('unreal-tran:web:refresh-token:v1', s.refreshToken);
  localStorage.setItem('unreal-tran:web:preferences:v1', JSON.stringify({ themeMode: 'military' }));
}, session);
const page = await context.newPage(), checks = [], pageErrors = [];
page.on('pageerror', error => pageErrors.push(error.message));
const checked = name => { checks.push({ name, pass: true }); console.log('PASS', name); };
const diagnostic = () => page.evaluate(() => globalThis.__trainingSceneDiagnostics?.());
try {
  await page.goto('http://127.0.0.1:6180/teaching/virtual-training/preview/81');
  await expect.poll(async () => Boolean((await diagnostic())?.publishedContentMounted), { timeout: 90000 }).toBe(true);
  const panel = page.locator('.training-server-preparation');
  await expect(panel).not.toBeVisible();
  await expect(page.locator('[data-role="instruction"]')).toContainText('操作准备');
  await expect(page.locator('[data-role="instruction"]')).toContainText('数字压力表');
  await expect(page.locator('[data-open-preparation]')).toBeVisible();
  await page.locator('[data-open-preparation]').click();
  await expect(panel).toHaveAttribute('open', '');
  assert.equal(await page.locator('.training-steps-panel .training-server-preparation').count(), 0);
  for (const size of [{width:1920,height:1080},{width:1440,height:900},{width:1366,height:768}]) {
    await page.setViewportSize(size);
    await page.waitForTimeout(300);
    const bounds = await page.evaluate(() => {
      const rect = selector => { const r=document.querySelector(selector).getBoundingClientRect(); return {x:r.x,y:r.y,width:r.width,height:r.height,right:r.right,bottom:r.bottom}; };
      return {panel:rect('.training-server-preparation'), canvas:rect('.training-viewport'), left:rect('.training-steps-panel'), header:rect('.training-header'), dock:rect('.training-operation-dock'), footer:rect('.training-bottom-bar')};
    });
    assert.ok(bounds.left.width <= 220);
    assert.ok(bounds.header.height <= 46);
    assert.ok(bounds.footer.height <= 36);
    assert.ok(bounds.panel.x >= bounds.canvas.x && bounds.panel.right <= bounds.canvas.right);
    assert.ok(bounds.panel.y >= bounds.canvas.y && bounds.panel.bottom < bounds.dock.y);
    assert.ok(bounds.canvas.bottom <= size.height, '3D viewport stays within screen');
    assert.ok(bounds.footer.bottom <= size.height, 'Bottom actions stay within screen');
    await panel.locator('[data-measurement]').fill('浮窗收起与尺寸切换保留输入');
    await panel.locator('[data-close-preparation]').click();
    await expect(panel).not.toBeVisible();
    await page.screenshot({path:`${output}/workspace-${size.width}.png`,fullPage:true});
    await page.locator('[data-open-preparation]').click();
    await expect(panel.locator('[data-measurement]')).toHaveValue('浮窗收起与尺寸切换保留输入');
    const summary = await panel.locator('summary').boundingBox(), floating = await panel.boundingBox();
    assert.ok(summary.y >= floating.y && summary.y + summary.height <= floating.y + floating.height, 'Floating header stays visible after textarea scroll');
    await page.screenshot({path:`${output}/floating-${size.width}.png`,fullPage:true});
    checked(`${size.width}×${size.height}: compact layout, floating window stays inside viewport, input survives closing`);
  }
  await panel.locator('[data-measurement]').fill('');
  await panel.locator('[data-measurement]').press('Escape');
  await expect(panel).not.toBeVisible();
  await expect(page.locator('[data-open-preparation]')).toBeFocused();
  await page.locator('[data-open-preparation]').click();
  checked('Preparation starts collapsed, opens inside 3D area, and Escape returns focus');
  const clickTarget = async () => {
    await page.locator('[data-action="toggle-issue-highlight"]').click();
    await page.waitForTimeout(700);
    const d = await diagnostic(), box = await page.locator('canvas.training-canvas').boundingBox();
    assert.ok(d.framing.targetOnScreen?.insideCanvas);
    await page.mouse.click(box.x + d.framing.targetOnScreen.localX, box.y + d.framing.targetOnScreen.localY + 38);
  };
  await panel.locator('summary').click();
  await page.waitForTimeout(4500);
  await clickTarget();
  await expect(page.locator('.el-message--warning')).toBeVisible({ timeout: 10000 });
  await expect(panel).toHaveAttribute('open', '');
  await expect(page.locator('.el-message')).toHaveCount(1);
  await expect(page.locator('.training-feedback.is-visible.is-error')).toHaveCount(0);
  await expect(page.locator('.el-message')).not.toContainText('尚未执行实际三维操作');
  assert.equal((await diagnostic()).server.completed.length, 0);
  await page.screenshot({ path: `${output}/preparation-required.png`, fullPage: true });
  checked('Missing preparation opens controls, emits one accurate warning, and does not advance');
  const raw = task.data.definitionSnapshot.steps[0];
  await panel.locator(`[data-tool="${raw.toolId}"]`).check();
  for (const checkbox of await panel.locator('[data-safety]').all()) await checkbox.check();
  await panel.locator('[data-measurement]').fill('测试观察记录：液压压力归零，个人防护齐全，危险区域无人员。');
  await panel.locator('[data-save-preparation]').click();
  await expect(panel.locator('[data-save-status]')).toContainText('本次预览');
  await panel.locator('summary').click();
  const validated = page.waitForResponse(response => response.url().includes('/preview/validate') && response.request().method() === 'POST');
  await clickTarget();
  const response = await validated;
  assert.equal(response.status(), 200);
  await expect.poll(async () => (await diagnostic()).server.completed.length).toBe(1);
  await expect(page.locator('[data-action="next"]')).toBeEnabled();
  await page.screenshot({ path: `${output}/step-completed.png`, fullPage: true });
  checked('Prepared truck target click passes real preview validation and enables next step');
  await page.locator('[data-action="next"]').click();
  await expect(panel).not.toBeVisible();
  await page.locator('[data-open-preparation]').click();
  await expect(panel).toHaveAttribute('open', '');
  await expect(panel.locator('b').first()).toContainText(task.data.definitionSnapshot.steps[1].title);
  await expect(panel.locator('[data-tool]').first()).not.toBeChecked();
  checked('Next step keeps viewport clear and provides fresh preparation without previous confirmations');
  await page.evaluate(() => {
    document.documentElement.classList.add('dark');
    document.documentElement.dataset.theme = 'dark';
    document.documentElement.dataset.colorTheme = 'dark';
    document.documentElement.style.colorScheme = 'dark';
  });
  const colors = await panel.locator('[data-save-preparation]').evaluate(button => {
    const style = getComputedStyle(button); return {color:style.color,background:style.backgroundColor};
  });
  assert.notEqual(colors.color, colors.background);
  assert.equal(colors.color, 'rgb(5, 34, 30)', 'Dark theme uses dark text on mint action buttons');
  await expect(panel.locator('summary')).toBeVisible();
  await page.screenshot({path:`${output}/floating-dark.png`,fullPage:true});
  checked('Dark theme floating controls use readable surface and button colors');
  assert.deepEqual(pageErrors, []);
} catch (error) {
  await page.screenshot({ path: `${output}/failure.png`, fullPage: true });
  throw error;
} finally {
  fs.writeFileSync(`${output}/checks.json`, JSON.stringify({ checks, pageErrors }, null, 2));
  const escape = value => String(value).replace(/[&<>"']/g, ch => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#39;' }[ch]));
  fs.writeFileSync(`${output}/index.html`, `<!doctype html><html lang="zh-CN"><meta charset="utf-8"><title>虚拟仿真浮窗与空间布局验证</title><style>body{max-width:1100px;margin:32px auto;padding:0 20px;font:15px/1.7 system-ui;color:#163d37}img{width:100%;border:1px solid #cadcd7}h2{margin-top:32px}li{margin:8px 0}</style><h1>虚拟仿真浮窗与空间布局验证</h1><p>2026-09-13 · 本地 6180 前端与真实教学接口 · 内部维护账号 · 任务 81 教员预览。未创建教学任务或学员成绩。</p><p>共 ${checks.length} 项通过；页面运行错误 ${pageErrors.length} 项。本报告记录本轮实际完成的浏览器检查，未写入学员成绩。</p><ul>${checks.map(check=>`<li>通过：${escape(check.name)}</li>`).join('')}</ul><h2>操作顺序</h2><p>打开操作准备 → 选择数字压力表 → 确认本步安全条件 → 填写测量观察记录 → 保存准备记录 → 点击高亮卡车模型 → 下一步。测量记录应按实际观察填写。</p>${['workspace-1920','floating-1920','workspace-1440','floating-1440','workspace-1366','floating-1366','preparation-required','step-completed'].map(name=>`<h2>${name}</h2><img src="${name}.png" alt="${name}">`).join('')}</html>`);
  await browser.close();
}