mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-08 00:19:42 +02:00
fix: make localEchoEnabled per-platform so desktop/mobile settings don't overwrite each other
Strip localEchoEnabled from server PUT payload (stays in device-specific localStorage only). Add to displayKeys as safety net for stale server values. chore: bump version to 0.1588
This commit is contained in:
arkon
@@ -0,0 +1,712 @@
|
||||
/**
|
||||
* Local Echo Overlay — Mobile-focused integration test.
|
||||
*
|
||||
* Tests:
|
||||
* 1. Type text → verify overlay renders with correct font/position
|
||||
* 2. Switch tabs → verify text is flushed and overlay clears
|
||||
* 3. Switch back → type more → verify overlay still works
|
||||
* 4. Backspace (delete chars) from old and new input
|
||||
* 5. Font matching — overlay font vs terminal font comparison
|
||||
* 6. Long text wrapping across lines
|
||||
*
|
||||
* Takes screenshots at every step for visual verification.
|
||||
*
|
||||
* Usage: node test/local-echo-mobile-test.mjs
|
||||
*/
|
||||
import { chromium } from 'playwright';
|
||||
|
||||
const PORT = 3000;
|
||||
const BASE = `http://localhost:${PORT}`;
|
||||
const SCREENSHOT_DIR = '/tmp/local-echo-mobile';
|
||||
|
||||
async function createSession(name) {
|
||||
const resp = await fetch(`${BASE}/api/sessions`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mode: 'shell', name })
|
||||
});
|
||||
if (!resp.ok) throw new Error(`Failed to create session '${name}': ${resp.status}`);
|
||||
const data = await resp.json();
|
||||
return data.session?.id || data.id;
|
||||
}
|
||||
|
||||
async function deleteSession(id) {
|
||||
await fetch(`${BASE}/api/sessions/${id}`, { method: 'DELETE' }).catch(() => {});
|
||||
}
|
||||
|
||||
async function waitForReady(sessionId, timeoutMs = 10000) {
|
||||
const start = Date.now();
|
||||
while (Date.now() - start < timeoutMs) {
|
||||
const resp = await fetch(`${BASE}/api/sessions/${sessionId}`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
if (data.status === 'idle' || data.status === 'busy') return true;
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Get overlay and terminal font/position info from the page */
|
||||
async function getOverlayState(page) {
|
||||
return page.evaluate(() => {
|
||||
const app = window.app;
|
||||
if (!app) return null;
|
||||
|
||||
// Find overlay container
|
||||
const overlay = app._localEchoOverlay?.overlay;
|
||||
const overlayVisible = overlay && overlay.style.display !== 'none';
|
||||
const overlayText = app._localEchoOverlay?.pendingText || '';
|
||||
|
||||
// Get overlay font styles from first span child
|
||||
let overlayFont = null;
|
||||
if (overlay) {
|
||||
const span = overlay.querySelector('span');
|
||||
if (span) {
|
||||
const cs = getComputedStyle(span);
|
||||
overlayFont = {
|
||||
fontFamily: cs.fontFamily,
|
||||
fontSize: cs.fontSize,
|
||||
fontWeight: cs.fontWeight,
|
||||
color: cs.color,
|
||||
letterSpacing: cs.letterSpacing,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Get terminal font styles from .xterm-rows
|
||||
let terminalFont = null;
|
||||
const rows = document.querySelector('.xterm-rows');
|
||||
if (rows) {
|
||||
// Find an actual character span in the rendered rows
|
||||
const charSpan = rows.querySelector('span[style]') || rows.querySelector('span');
|
||||
const cs = getComputedStyle(rows);
|
||||
terminalFont = {
|
||||
fontFamily: cs.fontFamily,
|
||||
fontSize: cs.fontSize,
|
||||
fontWeight: cs.fontWeight,
|
||||
color: cs.color,
|
||||
letterSpacing: cs.letterSpacing,
|
||||
};
|
||||
// Also get char-level font if available
|
||||
if (charSpan) {
|
||||
const charCs = getComputedStyle(charSpan);
|
||||
terminalFont.charFontFamily = charCs.fontFamily;
|
||||
terminalFont.charFontSize = charCs.fontSize;
|
||||
}
|
||||
}
|
||||
|
||||
// Get overlay DOM children info
|
||||
const overlayChildren = [];
|
||||
if (overlay) {
|
||||
for (const child of overlay.children) {
|
||||
const spans = child.querySelectorAll('span');
|
||||
const text = Array.from(spans).map(s => s.textContent).join('');
|
||||
overlayChildren.push({
|
||||
text,
|
||||
left: child.style.left,
|
||||
top: child.style.top,
|
||||
width: child.style.width,
|
||||
spanCount: spans.length,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Get overlay position
|
||||
const overlayRect = overlay?.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
overlayVisible,
|
||||
overlayText,
|
||||
overlayFont,
|
||||
terminalFont,
|
||||
overlayChildren,
|
||||
overlayRect: overlayRect ? {
|
||||
x: Math.round(overlayRect.x),
|
||||
y: Math.round(overlayRect.y),
|
||||
width: Math.round(overlayRect.width),
|
||||
height: Math.round(overlayRect.height),
|
||||
} : null,
|
||||
localEchoEnabled: app._localEchoEnabled,
|
||||
activeSessionId: app.activeSessionId,
|
||||
flushedOffset: app._localEchoOverlay?._flushedOffset || 0,
|
||||
flushedOffsets: app._flushedOffsets ? Object.fromEntries(app._flushedOffsets) : {},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** Get list of session tab IDs */
|
||||
async function getSessionTabs(page) {
|
||||
return page.evaluate(() => {
|
||||
const tabs = document.querySelectorAll('.session-tab');
|
||||
return Array.from(tabs).map(t => ({
|
||||
id: t.dataset.id,
|
||||
name: t.querySelector('.tab-name')?.textContent || t.textContent?.trim(),
|
||||
active: t.classList.contains('active'),
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
||||
/** Click a session tab by ID */
|
||||
async function clickTab(page, sessionId) {
|
||||
await page.evaluate((id) => {
|
||||
const tab = document.querySelector(`.session-tab[data-id="${id}"]`);
|
||||
if (tab) tab.click();
|
||||
}, sessionId);
|
||||
await page.waitForTimeout(1500); // Wait for buffer load
|
||||
}
|
||||
|
||||
async function screenshot(page, name) {
|
||||
const path = `${SCREENSHOT_DIR}/${name}.png`;
|
||||
await page.screenshot({ path, fullPage: false });
|
||||
console.log(` 📸 ${path}`);
|
||||
return path;
|
||||
}
|
||||
|
||||
function compareFonts(overlayFont, terminalFont) {
|
||||
if (!overlayFont || !terminalFont) return { match: false, reason: 'missing font data' };
|
||||
const issues = [];
|
||||
if (overlayFont.fontFamily !== terminalFont.fontFamily) {
|
||||
issues.push(`fontFamily: overlay="${overlayFont.fontFamily}" vs terminal="${terminalFont.fontFamily}"`);
|
||||
}
|
||||
if (overlayFont.fontSize !== terminalFont.fontSize) {
|
||||
issues.push(`fontSize: overlay="${overlayFont.fontSize}" vs terminal="${terminalFont.fontSize}"`);
|
||||
}
|
||||
if (overlayFont.fontWeight !== terminalFont.fontWeight) {
|
||||
issues.push(`fontWeight: overlay="${overlayFont.fontWeight}" vs terminal="${terminalFont.fontWeight}"`);
|
||||
}
|
||||
if (overlayFont.letterSpacing !== terminalFont.letterSpacing) {
|
||||
issues.push(`letterSpacing: overlay="${overlayFont.letterSpacing}" vs terminal="${terminalFont.letterSpacing}"`);
|
||||
}
|
||||
return { match: issues.length === 0, issues };
|
||||
}
|
||||
|
||||
async function main() {
|
||||
// Create screenshot directory
|
||||
const { mkdirSync } = await import('fs');
|
||||
try { mkdirSync(SCREENSHOT_DIR, { recursive: true }); } catch {}
|
||||
|
||||
console.log('=== Local Echo Overlay — Mobile Test ===\n');
|
||||
|
||||
// Create two shell sessions for tab-switching tests
|
||||
console.log('Creating test sessions...');
|
||||
const sessionA = await createSession('echo-test-A');
|
||||
const sessionB = await createSession('echo-test-B');
|
||||
console.log(` Session A: ${sessionA}`);
|
||||
console.log(` Session B: ${sessionB}`);
|
||||
|
||||
const readyA = await waitForReady(sessionA);
|
||||
const readyB = await waitForReady(sessionB);
|
||||
if (!readyA || !readyB) {
|
||||
console.error('Sessions failed to become ready');
|
||||
await deleteSession(sessionA);
|
||||
await deleteSession(sessionB);
|
||||
process.exit(1);
|
||||
}
|
||||
console.log(' Both sessions ready\n');
|
||||
|
||||
// Launch browser with mobile-like viewport
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
args: ['--window-size=390,844']
|
||||
});
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: 390, height: 844 },
|
||||
userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
|
||||
isMobile: true,
|
||||
hasTouch: true,
|
||||
});
|
||||
const page = await context.newPage();
|
||||
const errors = [];
|
||||
page.on('console', msg => { if (msg.type() === 'error') errors.push(msg.text()); });
|
||||
|
||||
const results = [];
|
||||
function pass(name) { results.push({ name, status: 'PASS' }); console.log(` ✅ PASS: ${name}`); }
|
||||
function fail(name, detail) { results.push({ name, status: 'FAIL', detail }); console.log(` ❌ FAIL: ${name} — ${detail}`); }
|
||||
function info(name, detail) { results.push({ name, status: 'INFO', detail }); console.log(` ℹ️ INFO: ${name} — ${detail}`); }
|
||||
|
||||
try {
|
||||
// ── SETUP ──
|
||||
console.log('Opening Claudeman...');
|
||||
await page.goto(BASE, { waitUntil: 'domcontentloaded' });
|
||||
await page.waitForSelector('.xterm-screen', { timeout: 10000 });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
// Enable local echo via settings
|
||||
console.log('Enabling local echo...');
|
||||
await page.evaluate(() => {
|
||||
const settings = JSON.parse(localStorage.getItem('claudeman-app-settings') || '{}');
|
||||
settings.localEchoEnabled = true;
|
||||
localStorage.setItem('claudeman-app-settings', JSON.stringify(settings));
|
||||
window.app?._updateLocalEchoState?.();
|
||||
});
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
// Switch to session A
|
||||
console.log('Switching to Session A...');
|
||||
await clickTab(page, sessionA);
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
// Focus terminal — use the hidden textarea (xterm-viewport intercepts pointer events)
|
||||
await page.evaluate(() => {
|
||||
const ta = document.querySelector('.xterm-helper-textarea');
|
||||
if (ta) ta.focus();
|
||||
});
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
let state = await getOverlayState(page);
|
||||
if (state?.localEchoEnabled) {
|
||||
pass('Local echo enabled');
|
||||
} else {
|
||||
fail('Local echo enabled', `localEchoEnabled=${state?.localEchoEnabled}`);
|
||||
}
|
||||
await screenshot(page, '01-initial-session-a');
|
||||
|
||||
// ── TEST 1: Type text on Session A ──
|
||||
console.log('\n--- Test 1: Type text on Session A ---');
|
||||
const textA = 'hello-from-session-a';
|
||||
await page.keyboard.type(textA, { delay: 50 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '02-typed-text-session-a');
|
||||
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
console.log(` Overlay children: ${state?.overlayChildren?.length}`);
|
||||
|
||||
if (state?.overlayVisible && state?.overlayText === textA) {
|
||||
pass('Overlay shows typed text');
|
||||
} else if (state?.overlayText === textA) {
|
||||
info('Overlay has text but not visible', `visible=${state?.overlayVisible}`);
|
||||
} else {
|
||||
fail('Overlay shows typed text', `expected="${textA}" got="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 2: Font matching ──
|
||||
// Compare overlay's cached font values against xterm.js options (always available,
|
||||
// unlike .xterm-rows DOM spans which don't exist with WebGL/canvas renderer).
|
||||
console.log('\n--- Test 2: Font matching ---');
|
||||
const xtermFont = await page.evaluate(() => {
|
||||
const t = window.app?.terminal;
|
||||
if (!t) return null;
|
||||
const overlay = window.app?._localEchoOverlay;
|
||||
return {
|
||||
xtermOpts: {
|
||||
fontFamily: t.options.fontFamily,
|
||||
fontSize: t.options.fontSize + 'px',
|
||||
fontWeight: String(t.options.fontWeight || 'normal'),
|
||||
},
|
||||
overlayCached: {
|
||||
fontFamily: overlay?._fontFamily,
|
||||
fontSize: overlay?._fontSize,
|
||||
fontWeight: String(overlay?._fontWeight || 'normal'),
|
||||
},
|
||||
};
|
||||
});
|
||||
console.log(` xterm opts: ${JSON.stringify(xtermFont?.xtermOpts)}`);
|
||||
console.log(` overlay cached: ${JSON.stringify(xtermFont?.overlayCached)}`);
|
||||
if (xtermFont) {
|
||||
const fontIssues = [];
|
||||
if (xtermFont.overlayCached.fontFamily !== xtermFont.xtermOpts.fontFamily)
|
||||
fontIssues.push(`fontFamily: "${xtermFont.overlayCached.fontFamily}" vs "${xtermFont.xtermOpts.fontFamily}"`);
|
||||
if (xtermFont.overlayCached.fontSize !== xtermFont.xtermOpts.fontSize)
|
||||
fontIssues.push(`fontSize: "${xtermFont.overlayCached.fontSize}" vs "${xtermFont.xtermOpts.fontSize}"`);
|
||||
if (xtermFont.overlayCached.fontWeight !== xtermFont.xtermOpts.fontWeight)
|
||||
fontIssues.push(`fontWeight: "${xtermFont.overlayCached.fontWeight}" vs "${xtermFont.xtermOpts.fontWeight}"`);
|
||||
if (fontIssues.length === 0) {
|
||||
pass('Overlay font matches xterm.js options');
|
||||
} else {
|
||||
fail('Font mismatch vs xterm options', fontIssues.join('; '));
|
||||
}
|
||||
} else {
|
||||
fail('Font comparison', 'Could not read xterm options');
|
||||
}
|
||||
|
||||
// ── TEST 3: Backspace — delete some chars ──
|
||||
console.log('\n--- Test 3: Backspace on Session A ---');
|
||||
// Delete last 5 chars
|
||||
for (let i = 0; i < 5; i++) {
|
||||
await page.keyboard.press('Backspace');
|
||||
await page.waitForTimeout(50);
|
||||
}
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '03-after-backspace-session-a');
|
||||
|
||||
const expectedAfterBackspace = textA.slice(0, -5); // "hello-from-sess"
|
||||
console.log(` Expected: "${expectedAfterBackspace}"`);
|
||||
console.log(` Got: "${state?.overlayText}"`);
|
||||
|
||||
if (state?.overlayText === expectedAfterBackspace) {
|
||||
pass('Backspace deletes from overlay correctly');
|
||||
} else {
|
||||
fail('Backspace result', `expected="${expectedAfterBackspace}" got="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 4: Switch to Session B (text should flush) ──
|
||||
console.log('\n--- Test 4: Switch to Session B ---');
|
||||
const textBeforeSwitch = state?.overlayText || '';
|
||||
await clickTab(page, sessionB);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '04-switched-to-session-b');
|
||||
|
||||
console.log(` Active session: ${state?.activeSessionId}`);
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
console.log(` Flushed offsets: ${JSON.stringify(state?.flushedOffsets)}`);
|
||||
|
||||
if (state?.activeSessionId === sessionB) {
|
||||
pass('Switched to Session B');
|
||||
} else {
|
||||
fail('Tab switch', `active=${state?.activeSessionId}, expected=${sessionB}`);
|
||||
}
|
||||
|
||||
if (!state?.overlayVisible && !state?.overlayText) {
|
||||
pass('Overlay cleared on tab switch');
|
||||
} else {
|
||||
fail('Overlay not cleared', `visible=${state?.overlayVisible}, text="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// Check if text was flushed to Session A
|
||||
if (state?.flushedOffsets?.[sessionA] > 0) {
|
||||
pass(`Text flushed to Session A (${state.flushedOffsets[sessionA]} chars)`);
|
||||
} else {
|
||||
info('Flushed offsets', JSON.stringify(state?.flushedOffsets));
|
||||
}
|
||||
|
||||
// ── TEST 5: Type on Session B ──
|
||||
console.log('\n--- Test 5: Type on Session B ---');
|
||||
await page.evaluate(() => { document.querySelector('.xterm-helper-textarea')?.focus(); });
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
const textB = 'hello-from-session-b';
|
||||
await page.keyboard.type(textB, { delay: 50 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '05-typed-on-session-b');
|
||||
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
|
||||
if (state?.overlayVisible && state?.overlayText === textB) {
|
||||
pass('Overlay works on Session B');
|
||||
} else {
|
||||
fail('Session B overlay', `expected="${textB}" got="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 6: Switch back to Session A ──
|
||||
console.log('\n--- Test 6: Switch back to Session A ---');
|
||||
await clickTab(page, sessionA);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '06-back-to-session-a');
|
||||
|
||||
console.log(` Active session: ${state?.activeSessionId}`);
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
console.log(` Flushed offset on overlay: ${state?.flushedOffset}`);
|
||||
console.log(` Flushed offsets map: ${JSON.stringify(state?.flushedOffsets)}`);
|
||||
|
||||
// Session A's text was flushed before we left — it should have been sent to PTY.
|
||||
// The overlay should be clear (text was flushed, not pending anymore).
|
||||
if (!state?.overlayText) {
|
||||
pass('Session A overlay clear after return (text was flushed)');
|
||||
} else {
|
||||
info('Session A has overlay text after return', `"${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 7: Type NEW text on Session A after returning ──
|
||||
console.log('\n--- Test 7: Type new text after returning to Session A ---');
|
||||
await page.evaluate(() => { document.querySelector('.xterm-helper-textarea')?.focus(); });
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
const textA2 = 'new-text-after-return';
|
||||
await page.keyboard.type(textA2, { delay: 50 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '07-new-text-session-a');
|
||||
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
console.log(` Flushed offset: ${state?.flushedOffset}`);
|
||||
console.log(` Overlay children: ${JSON.stringify(state?.overlayChildren)}`);
|
||||
|
||||
if (state?.overlayText === textA2) {
|
||||
pass('Can type new text after tab switch return');
|
||||
} else {
|
||||
fail('New text after return', `expected="${textA2}" got="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 8: Delete ALL chars with backspace ──
|
||||
console.log('\n--- Test 8: Delete all chars with backspace ---');
|
||||
const deleteCount = (state?.overlayText || '').length;
|
||||
for (let i = 0; i < deleteCount + 3; i++) { // +3 extra to test over-delete
|
||||
await page.keyboard.press('Backspace');
|
||||
await page.waitForTimeout(30);
|
||||
}
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '08-all-deleted');
|
||||
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
|
||||
if (!state?.overlayVisible && !state?.overlayText) {
|
||||
pass('Overlay hidden after deleting all chars');
|
||||
} else {
|
||||
fail('Overlay still visible after full delete', `visible=${state?.overlayVisible}, text="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// Verify backspace-into-flushed-text: the 3 extra backspaces should have
|
||||
// decremented flushedOffset from 15 to 12 and sent \x7f to PTY.
|
||||
const expectedFlushedAfterDelete = 15 - 3; // original 15, minus 3 extras
|
||||
console.log(` Flushed offset after delete: ${state?.flushedOffset} (expected ${expectedFlushedAfterDelete})`);
|
||||
if (state?.flushedOffset === expectedFlushedAfterDelete) {
|
||||
pass('Backspace into flushed text decrements offset correctly');
|
||||
} else {
|
||||
fail('Flushed offset after backspace', `expected ${expectedFlushedAfterDelete}, got ${state?.flushedOffset}`);
|
||||
}
|
||||
|
||||
// ── TEST 9: Type, submit with Enter, verify overlay clears ──
|
||||
console.log('\n--- Test 9: Enter submits and clears overlay ---');
|
||||
const enterText = 'echo submit-test';
|
||||
await page.keyboard.type(enterText, { delay: 50 });
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '09-before-enter');
|
||||
|
||||
if (state?.overlayText === enterText) {
|
||||
pass('Text buffered before Enter');
|
||||
} else {
|
||||
info('Pre-enter text', `"${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '10-after-enter');
|
||||
|
||||
console.log(` Overlay visible: ${state?.overlayVisible}`);
|
||||
console.log(` Overlay text: "${state?.overlayText}"`);
|
||||
|
||||
if (!state?.overlayVisible && !state?.overlayText) {
|
||||
pass('Overlay cleared after Enter');
|
||||
} else {
|
||||
fail('Overlay not cleared after Enter', `visible=${state?.overlayVisible}, text="${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 10: Rapid tab switching with pending text ──
|
||||
console.log('\n--- Test 10: Rapid tab switching ---');
|
||||
await page.keyboard.type('rapid-switch-text', { delay: 30 });
|
||||
await page.waitForTimeout(200);
|
||||
await screenshot(page, '11-before-rapid-switch');
|
||||
|
||||
// Rapid switch: A → B → A
|
||||
await clickTab(page, sessionB);
|
||||
await page.waitForTimeout(300);
|
||||
await screenshot(page, '12-rapid-switch-to-b');
|
||||
|
||||
await clickTab(page, sessionA);
|
||||
await page.waitForTimeout(300);
|
||||
await screenshot(page, '13-rapid-switch-back-to-a');
|
||||
|
||||
state = await getOverlayState(page);
|
||||
console.log(` After rapid switch — overlay text: "${state?.overlayText}"`);
|
||||
console.log(` Flushed offsets: ${JSON.stringify(state?.flushedOffsets)}`);
|
||||
|
||||
// Text should have been flushed to PTY, overlay should be clear
|
||||
if (!state?.overlayText || state?.overlayText === '') {
|
||||
pass('Rapid switch: overlay clear after return');
|
||||
} else {
|
||||
fail('Rapid switch: overlay has stale text', `"${state?.overlayText}"`);
|
||||
}
|
||||
|
||||
// ── TEST 11: Font detail check — pixel-level ──
|
||||
console.log('\n--- Test 11: Detailed font comparison ---');
|
||||
await page.keyboard.type('font-check', { delay: 50 });
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
const fontDetail = await page.evaluate(() => {
|
||||
const app = window.app;
|
||||
const overlay = app?._localEchoOverlay;
|
||||
if (!overlay) return null;
|
||||
|
||||
// Overlay span
|
||||
const oSpan = overlay.overlay.querySelector('span');
|
||||
// Terminal character
|
||||
const tRows = document.querySelector('.xterm-rows');
|
||||
// Find a row with actual text
|
||||
let tSpan = null;
|
||||
if (tRows) {
|
||||
const allSpans = tRows.querySelectorAll('span');
|
||||
for (const s of allSpans) {
|
||||
if (s.textContent?.trim()) { tSpan = s; break; }
|
||||
}
|
||||
}
|
||||
|
||||
const getDetailedFont = (el) => {
|
||||
if (!el) return null;
|
||||
const cs = getComputedStyle(el);
|
||||
return {
|
||||
fontFamily: cs.fontFamily,
|
||||
fontSize: cs.fontSize,
|
||||
fontWeight: cs.fontWeight,
|
||||
fontStyle: cs.fontStyle,
|
||||
letterSpacing: cs.letterSpacing,
|
||||
lineHeight: cs.lineHeight,
|
||||
color: cs.color,
|
||||
textRendering: cs.textRendering,
|
||||
webkitFontSmoothing: cs.webkitFontSmoothing || cs['-webkit-font-smoothing'],
|
||||
fontKerning: cs.fontKerning,
|
||||
fontVariantLigatures: cs.fontVariantLigatures,
|
||||
};
|
||||
};
|
||||
|
||||
// Also check xterm.js options
|
||||
const xtermOpts = {
|
||||
fontFamily: app.terminal?.options?.fontFamily,
|
||||
fontSize: app.terminal?.options?.fontSize,
|
||||
fontWeight: app.terminal?.options?.fontWeight,
|
||||
letterSpacing: app.terminal?.options?.letterSpacing,
|
||||
};
|
||||
|
||||
// Cell dimensions
|
||||
let cellDims = null;
|
||||
try {
|
||||
const dims = app.terminal._core._renderService.dimensions;
|
||||
cellDims = {
|
||||
cellWidth: dims.css.cell.width,
|
||||
cellHeight: dims.css.cell.height,
|
||||
};
|
||||
} catch {}
|
||||
|
||||
return {
|
||||
overlaySpan: getDetailedFont(oSpan),
|
||||
terminalSpan: getDetailedFont(tSpan),
|
||||
terminalRows: getDetailedFont(tRows),
|
||||
xtermOptions: xtermOpts,
|
||||
cellDims,
|
||||
// Check overlay cached values vs actual
|
||||
overlayCached: {
|
||||
fontFamily: overlay._fontFamily,
|
||||
fontSize: overlay._fontSize,
|
||||
fontWeight: overlay._fontWeight,
|
||||
color: overlay._color,
|
||||
letterSpacing: overlay._letterSpacing,
|
||||
bg: overlay._bg,
|
||||
},
|
||||
};
|
||||
});
|
||||
await screenshot(page, '14-font-detail-check');
|
||||
|
||||
console.log(' xterm.js options:', JSON.stringify(fontDetail?.xtermOptions, null, 4));
|
||||
console.log(' Cell dims:', JSON.stringify(fontDetail?.cellDims, null, 4));
|
||||
console.log(' Overlay cached:', JSON.stringify(fontDetail?.overlayCached, null, 4));
|
||||
console.log(' Overlay span computed:', JSON.stringify(fontDetail?.overlaySpan, null, 4));
|
||||
console.log(' Terminal span computed:', JSON.stringify(fontDetail?.terminalSpan, null, 4));
|
||||
console.log(' Terminal rows computed:', JSON.stringify(fontDetail?.terminalRows, null, 4));
|
||||
|
||||
// Check specific mismatches
|
||||
if (fontDetail?.overlaySpan && fontDetail?.terminalSpan) {
|
||||
const o = fontDetail.overlaySpan;
|
||||
const t = fontDetail.terminalSpan;
|
||||
const mismatches = [];
|
||||
for (const key of ['fontFamily', 'fontSize', 'fontWeight', 'letterSpacing', 'fontKerning']) {
|
||||
if (o[key] !== t[key]) {
|
||||
mismatches.push(`${key}: overlay="${o[key]}" vs terminal="${t[key]}"`);
|
||||
}
|
||||
}
|
||||
if (mismatches.length === 0) {
|
||||
pass('Detailed font comparison matches');
|
||||
} else {
|
||||
fail('Font mismatches found', mismatches.join('; '));
|
||||
}
|
||||
} else {
|
||||
info('Font detail check', 'Could not get computed styles for comparison');
|
||||
}
|
||||
|
||||
// Clean up the typed text
|
||||
await page.keyboard.press('Backspace');
|
||||
await page.waitForTimeout(50);
|
||||
for (let i = 0; i < 'font-check'.length; i++) {
|
||||
await page.keyboard.press('Backspace');
|
||||
await page.waitForTimeout(20);
|
||||
}
|
||||
|
||||
// ── TEST 12: Long text that wraps ──
|
||||
console.log('\n--- Test 12: Long text wrapping ---');
|
||||
// Type enough to wrap past terminal width
|
||||
const longText = 'A'.repeat(80) + 'B'.repeat(40); // 120 chars — likely wraps on mobile
|
||||
await page.keyboard.type(longText, { delay: 5 });
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
state = await getOverlayState(page);
|
||||
await screenshot(page, '15-long-text-wrap');
|
||||
|
||||
console.log(` Overlay text length: ${state?.overlayText?.length}`);
|
||||
console.log(` Overlay children (lines): ${state?.overlayChildren?.length}`);
|
||||
if (state?.overlayChildren) {
|
||||
for (const [i, child] of state.overlayChildren.entries()) {
|
||||
console.log(` Line ${i}: "${child.text}" (${child.spanCount} spans, left=${child.left}, top=${child.top})`);
|
||||
}
|
||||
}
|
||||
|
||||
if (state?.overlayText === longText) {
|
||||
pass('Long text stored correctly');
|
||||
} else {
|
||||
fail('Long text storage', `expected ${longText.length} chars, got ${state?.overlayText?.length}`);
|
||||
}
|
||||
|
||||
if (state?.overlayChildren && state.overlayChildren.length > 1) {
|
||||
pass(`Long text wraps into ${state.overlayChildren.length} lines`);
|
||||
} else {
|
||||
fail('Long text wrapping', `only ${state?.overlayChildren?.length} line(s)`);
|
||||
}
|
||||
|
||||
// Delete the long text
|
||||
await page.keyboard.press('Enter');
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Final screenshot
|
||||
await screenshot(page, '16-final-state');
|
||||
|
||||
// ── SUMMARY ──
|
||||
console.log('\n=== SUMMARY ===');
|
||||
const passes = results.filter(r => r.status === 'PASS').length;
|
||||
const fails = results.filter(r => r.status === 'FAIL').length;
|
||||
const infos = results.filter(r => r.status === 'INFO').length;
|
||||
console.log(` ${passes} passed, ${fails} failed, ${infos} info`);
|
||||
console.log(` Screenshots saved to ${SCREENSHOT_DIR}/`);
|
||||
|
||||
if (fails > 0) {
|
||||
console.log('\n FAILURES:');
|
||||
for (const r of results.filter(r => r.status === 'FAIL')) {
|
||||
console.log(` ❌ ${r.name}: ${r.detail}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
console.log(`\n Console errors (${errors.length}):`);
|
||||
for (const e of errors.slice(0, 10)) console.log(` ${e}`);
|
||||
}
|
||||
|
||||
} finally {
|
||||
await browser.close();
|
||||
console.log('\nCleaning up sessions...');
|
||||
await deleteSession(sessionA);
|
||||
await deleteSession(sessionB);
|
||||
}
|
||||
}
|
||||
|
||||
main().catch(err => {
|
||||
console.error('Test failed:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
Reference in New Issue
Block a user