Mercurial
view mrjunejune/test/theme_and_webp_test.js @ 244:b8aa08503378
[tools] Add sandboxed online LaTeX editor
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 03 Aug 2026 16:56:25 -0700 |
| parents | 543df0fe7168 |
| children | 30c2196d03d4 |
line wrap: on
line source
const assert = require('node:assert/strict'); const fs = require('node:fs'); const net = require('node:net'); const path = require('node:path'); const { spawn } = require('node:child_process'); const RUNFILES = process.env.JS_BINARY__RUNFILES; const WORKSPACE = process.env.JS_BINARY__WORKSPACE; let port; let baseUrl; const playwrightPath = path.join( RUNFILES, WORKSPACE, 'hg-web/e2e/node_modules/playwright-core', ); const { chromium } = require(playwrightPath); function stopProcess(child) { if (!child || child.exitCode !== null) return Promise.resolve(); child.kill('SIGTERM'); return new Promise(resolve => { const timer = setTimeout(() => { if (child.exitCode === null) child.kill('SIGKILL'); }, 3000); child.once('exit', () => { clearTimeout(timer); resolve(); }); }); } async function waitForServer(child, logs) { const deadline = Date.now() + 15000; while (Date.now() < deadline) { if (child.exitCode !== null) { throw new Error(`Server exited with ${child.exitCode}\n${logs.join('')}`); } try { const response = await fetch(baseUrl); if (response.ok) return; } catch { // Keep waiting for startup. } await new Promise(resolve => setTimeout(resolve, 100)); } throw new Error(`Server startup timed out\n${logs.join('')}`); } function listFiles(root) { const files = []; for (const entry of fs.readdirSync(root, { withFileTypes: true })) { const absolute = path.join(root, entry.name); if (entry.isDirectory()) files.push(...listFiles(absolute)); else files.push(absolute); } return files; } async function sampleTheme(browser, theme) { const context = await browser.newContext({ colorScheme: 'dark' }); await context.addInitScript(value => { localStorage.setItem('theme-preference', value); }, theme); const page = await context.newPage(); const errors = []; page.on('pageerror', error => errors.push(`pageerror: ${error.message}`)); page.on('console', message => { if (message.type() === 'error') errors.push(`console: ${message.text()}`); }); page.on('requestfailed', request => { errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText || ''}`); }); page.on('response', response => { if (response.status() >= 400) { errors.push(`response: ${response.status()} ${response.url()}`); } }); await page.goto(baseUrl, { waitUntil: 'networkidle' }); await page.waitForFunction(() => { const canvas = document.querySelector('#background'); if (!canvas) return false; const data = canvas.getContext('2d').getImageData( 0, 0, canvas.width, canvas.height, ).data; for (let index = 3; index < data.length; index += 4) { if (data[index] >= 20) return true; } return false; }); const sample = await page.evaluate(() => { const canvas = document.querySelector('#background'); const data = canvas.getContext('2d').getImageData( 0, 0, canvas.width, canvas.height, ).data; let count = 0; let luminance = 0; for (let index = 0; index < data.length; index += 4) { if (data[index + 3] < 20) continue; count++; luminance += data[index] * 0.2126 + data[index + 1] * 0.7152 + data[index + 2] * 0.0722; } return { count, luminance: count ? luminance / count : 0, rootClass: document.documentElement.className, }; }); if (errors.length) throw new Error(`${theme}\n${errors.join('\n')}`); await context.close(); return sample; } async function testHlsPlayer(browser, siteRoot) { const page = await browser.newPage(); const errors = []; const mediaRequests = []; let testingExpectedFailure = false; let testingExpectedReload = false; page.on('pageerror', error => errors.push(`pageerror: ${error.message}`)); page.on('console', message => { if (message.type() !== 'error') return; if (testingExpectedFailure && message.text().startsWith('Failed to load resource:')) return; errors.push(`console: ${message.text()}`); }); page.on('requestfailed', request => { if (testingExpectedReload && request.failure()?.errorText === 'net::ERR_ABORTED') return; errors.push(`requestfailed: ${request.url()} ${request.failure()?.errorText || ''}`); }); page.on('request', request => { if (/\.(?:m3u8|m4s|mp4)(?:\?|$)/.test(request.url())) { mediaRequests.push(request.url()); } }); const playlistResponse = await fetch( `${baseUrl}/public/hls-sample/master.m3u8`, ); assert.equal(playlistResponse.status, 200); assert.match( playlistResponse.headers.get('content-type') || '', /^application\/vnd\.apple\.mpegurl/, ); assert.match( await playlistResponse.text(), /#EXT-X-STREAM-INF:.*CODECS="vp09\.00\.10\.08,opus"/, ); const variantResponse = await fetch( `${baseUrl}/public/hls-sample/vp9-stream.m3u8`, ); assert.equal(variantResponse.status, 200); assert.match( await variantResponse.text(), /#EXT-X-MAP:URI="vp9-init\.mp4"/, ); const segmentResponse = await fetch( `${baseUrl}/public/hls-sample/vp9-segment000.m4s`, ); assert.equal(segmentResponse.status, 200); assert.match( segmentResponse.headers.get('content-type') || '', /^video\/iso\.segment/, ); const transportStreamResponse = await fetch( `${baseUrl}/public/hls-sample/h264-ts-segment000.ts`, ); assert.equal(transportStreamResponse.status, 200); assert.match( transportStreamResponse.headers.get('content-type') || '', /^video\/mp2t/, ); assert.ok((await transportStreamResponse.arrayBuffer()).byteLength > 0); await page.goto( `${baseUrl}/tools/hls_player?url=${encodeURIComponent('/public/hls-sample/master.m3u8')}`, { waitUntil: 'networkidle', }, ); await page.getByRole('button', { name: 'Sample', exact: true }).waitFor(); assert.equal( await page.locator('#hlsUrl').evaluate(input => input.defaultValue), '/public/hls-sample/h264-ts-stream.m3u8', ); await page.waitForFunction(() => { const status = document.querySelector('#hlsStatus'); return status?.dataset.state === 'ready' || status?.dataset.state === 'error'; }, null, { timeout: 15000 }); const terminalState = await page.locator('#hlsStatus').getAttribute('data-state'); if (terminalState !== 'ready') { throw new Error( `HLS player failed: ${await page.locator('#hlsStatus').textContent()}\n${errors.join('\n')}`, ); } assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/); assert.equal( await page.locator('[data-detail="mode"]').textContent(), 'hls.js', ); assert.match( await page.locator('[data-detail="segments"]').textContent(), /Managed by hls\.js|adaptive levels/, ); await page.waitForFunction(() => { const video = document.querySelector('#hlsVideo'); return video.readyState >= HTMLMediaElement.HAVE_METADATA && Number.isFinite(video.duration) && video.duration >= 14; }); const firstFrame = await page.locator('#hlsVideo').evaluate(video => { const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; const context = canvas.getContext('2d'); context.drawImage(video, 0, 0); const pixels = context.getImageData(0, 0, canvas.width, canvas.height).data; let total = 0; for (let index = 0; index < pixels.length; index += 4) { total += pixels[index] + pixels[index + 1] + pixels[index + 2]; } return total / (canvas.width * canvas.height * 3); }); assert.ok(firstFrame > 10, `Initial HLS frame is black: ${firstFrame}`); await page.locator('#hlsVideo').evaluate(video => video.play()); await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.2); await page.locator('#hlsVideo').evaluate(video => video.pause()); assert.ok(mediaRequests.some(url => url.endsWith('/hls-sample/master.m3u8'))); assert.ok(mediaRequests.some(url => url.endsWith('-stream.m3u8'))); assert.ok(mediaRequests.some(url => url.endsWith('-init.mp4'))); assert.ok(mediaRequests.some(url => /-segment\d+\.m4s$/.test(url))); await page.evaluate(() => { window.hlsPlayer.hls.trigger(window.Hls.Events.ERROR, { fatal: true, type: window.Hls.ErrorTypes.MEDIA_ERROR, details: 'testRuntimeFailure', error: new Error('runtime segment failed'), }); }); await page.locator('#hlsStatus[data-state="error"]').waitFor(); assert.match( await page.locator('#hlsStatus').textContent(), /runtime segment failed/, ); await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8'); await page.getByRole('button', { name: 'Load', exact: true }).click(); await page.locator('#hlsStatus[data-state="ready"]').waitFor(); let delayedSegment = true; await page.route('**/hls-sample/vp9-segment000.m4s', async route => { if (delayedSegment) { delayedSegment = false; await new Promise(resolve => setTimeout(resolve, 250)); } await route.continue(); }); testingExpectedReload = true; await page.locator('#hlsUrl').fill('/public/hls-sample/master.m3u8'); await page.getByRole('button', { name: 'Load', exact: true }).click(); await page.waitForTimeout(25); await page.getByRole('button', { name: 'Load', exact: true }).click(); await page.locator('#hlsStatus[data-state="ready"]').waitFor(); testingExpectedReload = false; assert.match(await page.locator('#hlsStatus').textContent(), /Stream ready/); await page.evaluate(() => { window.__hlsObjectUrls = { created: [], revoked: [] }; const createObjectURL = URL.createObjectURL.bind(URL); const revokeObjectURL = URL.revokeObjectURL.bind(URL); URL.createObjectURL = value => { const url = createObjectURL(value); window.__hlsObjectUrls.created.push(url); return url; }; URL.revokeObjectURL = url => { window.__hlsObjectUrls.revoked.push(url); revokeObjectURL(url); }; }); const localFiles = listFiles(path.join(siteRoot, 'public/hls-sample')); await page.locator('#hlsFiles').setInputFiles(localFiles); await page.waitForFunction(() => document.querySelector('#hlsUrl')?.value.startsWith('Local: ') ); await page.locator('#hlsStatus[data-state="ready"]').waitFor(); assert.match(await page.locator('#hlsUrl').inputValue(), /^Local: /); assert.equal( await page.locator('[data-detail="mode"]').textContent(), 'hls.js', ); await page.locator('#hlsVideo').evaluate(video => video.play()); await page.waitForFunction(() => document.querySelector('#hlsVideo').currentTime > 0.3); await page.locator('#hlsVideo').evaluate(video => video.pause()); const incompleteLocalFiles = localFiles.filter(file => file.endsWith('master.m3u8') || file.endsWith('vp9-stream.m3u8') ); await page.locator('#hlsFiles').setInputFiles(incompleteLocalFiles); await page.locator('#hlsStatus[data-state="error"]').waitFor(); assert.match( await page.locator('#hlsStatus').textContent(), /Local HLS file is missing/, ); const objectUrlCounts = await page.evaluate(() => ({ created: window.__hlsObjectUrls.created.length, revoked: window.__hlsObjectUrls.revoked.length, })); assert.ok(objectUrlCounts.created > 10, JSON.stringify(objectUrlCounts)); assert.ok( objectUrlCounts.revoked >= objectUrlCounts.created, JSON.stringify(objectUrlCounts), ); await page.route('**/invalid.m3u8', route => route.fulfill({ status: 404, body: 'not found', })); testingExpectedFailure = true; await page.locator('#hlsUrl').fill(`${baseUrl}/invalid.m3u8`); await page.getByRole('button', { name: 'Load', exact: true }).click(); await page.locator('#hlsStatus[data-state="error"]').waitFor(); assert.match( await page.locator('#hlsStatus').textContent(), /404|manifestLoadError|Playlist request failed/, ); if (errors.length) throw new Error(errors.join('\n')); await page.close(); } function findFreePort() { return new Promise((resolve, reject) => { const socket = net.createServer(); socket.once('error', reject); socket.listen(0, '127.0.0.1', () => { const address = socket.address(); socket.close(error => { if (error) reject(error); else resolve(String(address.port)); }); }); }); } (async () => { assert.ok(RUNFILES); assert.ok(WORKSPACE); const runfilesWorkspace = path.join(RUNFILES, WORKSPACE); const serverBinary = path.join( runfilesWorkspace, 'mrjunejune/mrjunejune_server', ); const siteRoot = path.join(runfilesWorkspace, 'mrjunejune/src'); const chromiumPath = path.resolve(process.env.CHROMIUM_PATH); const serverLogs = []; let server; let browser; try { port = await findFreePort(); baseUrl = `http://127.0.0.1:${port}`; const pngFiles = listFiles(siteRoot).filter(file => file.endsWith('.png')); assert.deepEqual(pngFiles, [], `PNG files leaked into runfiles: ${pngFiles}`); server = spawn(serverBinary, [], { cwd: runfilesWorkspace, env: { ...process.env, MRJUNEJUNE_PORT: port }, stdio: ['ignore', 'pipe', 'pipe'], }); server.stdout.on('data', chunk => serverLogs.push(chunk.toString())); server.stderr.on('data', chunk => serverLogs.push(chunk.toString())); await waitForServer(server, serverLogs); const home = await (await fetch(baseUrl)).text(); const dogGame = await ( await fetch(`${baseUrl}/public/dog-game.js`) ).text(); const manifest = await ( await fetch(`${baseUrl}/public/manifest.json`) ).text(); const serviceWorker = await ( await fetch(`${baseUrl}/public/sw.js`) ).text(); for (const source of [home, dogGame, manifest]) { assert.doesNotMatch(source, /\.png(?:["')]|$)/i); } assert.match(serviceWorker, /v4-hlsjs/); assert.ok(serviceWorker.includes("startsWith('/tools/hls_player')")); for (const asset of [ 'sprite_shiba0.webp', 'dog-treat.webp', 'start-large.webp', 'icon-192.webp', 'vscode.webp', ]) { const response = await fetch(`${baseUrl}/public/${asset}`); assert.equal(response.status, 200, asset); assert.ok((await response.arrayBuffer()).byteLength > 0, asset); } browser = await chromium.launch({ executablePath: chromiumPath, headless: true, args: ['--no-sandbox'], }); const light = await sampleTheme(browser, 'light'); const dark = await sampleTheme(browser, 'dark'); assert.ok(light.count > 0); assert.ok(dark.count > 0); assert.ok(light.luminance < 175, JSON.stringify(light)); assert.ok(dark.luminance > 200, JSON.stringify(dark)); await testHlsPlayer(browser, siteRoot); } finally { if (browser) await browser.close(); await stopProcess(server); } })().catch(error => { console.error(error.stack || error); process.exitCode = 1; });