Something went wrong. Try again.
Monorepo for Aesthetic.Computer aesthetic.computer
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import test from 'node:test';import assert from 'node:assert/strict';import { readFile, mkdir } from 'node:fs/promises';import { chromium } from 'playwright';
test('packed Whistlegraphs retain attribution, aspect, isolated interaction and exact HTML downloads', async () => { const browser = await chromium.launch({ channel: process.env.PLAYWRIGHT_CHANNEL, headless: true }); const context = await browser.newContext({ viewport: { width: 390, height: 844 }, acceptDownloads: true }); const page = await context.newPage(); const html = await readFile(new URL('../public/mime/index.html', import.meta.url), 'utf8'); const artifact = `<!doctype html><style>body{margin:0;background:#234;color:white;display:grid;place-items:center;height:100vh}button{padding:24px}</style><button onclick="this.textContent='Spinning'">Spin tree</button><script>try { parent.document.body.dataset.escaped='yes'; } catch {} try { localStorage.setItem('escape','yes'); } catch {} document.body.dataset.running='yes';</script>`; const post = { code: 'pack', parent: null, name: '@artist', when: '2026-10-05T22:00:00Z', replies: 0, origin: { name: 'Whistlegraph', url: 'https://whistlegraph.app/' }, file: { name: 'wgDefen-v7.html', type: 'text/html', url: '/artifact.html' }, media: { kind: 'whistlegraph', code: 'wgDefen', title: 'Spinning tree', version: 7, aspect: '2:3', packed: true, url: 'https://ipfs.aesthetic.computer/ipfs/fixture', tokenUrl: 'https://teia.art/objkt/885469' } }; await context.route('**/*', route => { const u = new URL(route.request().url()); if (u.hostname === 'mime.ac' && u.pathname === '/') return route.fulfill({ contentType: 'text/html', body: html }); if (u.pathname === '/api/mime') return route.fulfill({ contentType: 'application/json', body: JSON.stringify({ recent: [post, { ...post, code: 'pack2' }], hasMore: false }) }); if (u.pathname === '/ipfs/fixture' || u.pathname === '/artifact.html') return route.fulfill({ contentType: 'text/html', body: artifact }); return route.fulfill({ status: 200, body: '' }); }); try { await page.goto('https://mime.ac/?ac-automation=1'); await page.locator('#pack iframe[data-ready]').waitFor(); assert.equal(await page.locator('#pack .name').textContent(), '@artist'); assert.equal(await page.locator('#pack .media-label').textContent(), 'Spinning tree'); assert.equal(await page.locator('#pack .media-origin').textContent(), 'Whistlegraph'); assert.equal(await page.locator('#pack .mime-type').textContent(), 'text/html'); assert.equal(await page.locator('#pack time').getAttribute('datetime'), post.when); assert.equal(await page.locator('#pack iframe').getAttribute('sandbox'), 'allow-scripts'); assert.equal(await page.locator('#pack .token-link').getAttribute('href'), post.media.tokenUrl); assert.equal(await page.locator('#pack .piece-preview').evaluate(el => el.inert), true); const framed = page.frames().find(frame => frame.url() === post.media.url); assert.equal(await framed.evaluate(() => document.body.dataset.running), 'yes', 'pack scripts run'); assert.equal(await page.evaluate(() => document.body.dataset.escaped || localStorage.getItem('escape')), null); for (const viewport of [{ width: 390, height: 844 }, { width: 900, height: 900 }]) { await page.setViewportSize(viewport); const box = await page.locator('#pack .media-pack').boundingBox(); assert.ok(Math.abs(box.width / box.height - 2 / 3) < .01, JSON.stringify(box)); assert.ok(box.height <= viewport.height * .56, 'preview leaves room for feed metadata'); assert.equal(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth), true); } await page.locator('#pack .media-toggle').click(); await page.frameLocator('#pack iframe').getByRole('button', { name: 'Spin tree' }).click(); await page.frameLocator('#pack iframe').getByRole('button', { name: 'Spinning', exact: true }).waitFor(); await page.locator('#pack .media-toggle').click(); const downloaded = page.waitForEvent('download'); await page.locator('#pack .download-pack').click(); const download = await downloaded; assert.equal(download.suggestedFilename(), 'wgDefen-v7.html'); assert.equal(await readFile(await download.path(), 'utf8'), artifact); await page.locator('#pack2 .media-pack').evaluate(el => el.scrollIntoView({ block: 'center' })); await page.locator('#pack2 iframe[data-ready]').waitFor(); assert.equal(await page.locator('.piece-preview iframe').count(), 1, 'only the visible pack runs'); if (process.env.MIME_SCREENSHOT_DIR) { await mkdir(process.env.MIME_SCREENSHOT_DIR, { recursive: true }); await page.setViewportSize({ width: 390, height: 844 }); await page.evaluate(() => scrollTo(0, 0)); await page.screenshot({ path: `${process.env.MIME_SCREENSHOT_DIR}/mime-pack-mobile.png` }); } } finally { await context.close(); await browser.close(); }});