Spaces:
Running
Running
| /** | |
| * Browser checks for the restored viewer CSS, the ten-ring limit, and pill | |
| * clearance. | |
| * | |
| * The CSS regression this file exists for was silent: opening a photograph | |
| * produced an unstyled <dialog> that still worked, still showed the image, and | |
| * just looked nothing like the design. Nothing throws, so only a computed-style | |
| * assertion catches it. | |
| */ | |
| import { chromium } from 'playwright'; | |
| const BASE = process.env.BASE_URL || 'http://127.0.0.1:4173/'; | |
| let passed = 0, failed = 0; | |
| const test = async (name, fn) => { | |
| try { await fn(); console.log(' ok ' + name); passed++; } | |
| catch (error) { console.log(' FAIL ' + name + '\n ' + error.message.split('\n')[0]); failed++; } | |
| }; | |
| const assert = (cond, message) => { if (!cond) throw new Error(message); }; | |
| const browser = await chromium.launch(); | |
| const page = await browser.newPage({ viewport: { width: 1600, height: 950 } }); | |
| const errors = []; | |
| page.on('pageerror', error => errors.push(error.message)); | |
| await page.goto(BASE, { waitUntil: 'domcontentloaded' }); | |
| await page.waitForSelector('.image-tile', { timeout: 120000 }); | |
| await page.waitForTimeout(6000); | |
| console.log('\nrestored viewer CSS'); | |
| // ────────────────────────────────────────────────────────────────────────── | |
| await test('the viewer opens full-screen with its own background', async () => { | |
| // force: true because the field is deliberately alive -- every tile drifts a | |
| // few px per frame, so a click aimed at a position sampled a moment ago can | |
| // land beside the tile. That is the field working, not a bug, and it is why | |
| // the shot here is dispatched at the element rather than at coordinates. | |
| await page.locator('.image-tile').first().click({ force: true, timeout: 15000 }); | |
| await page.waitForSelector('.photo-viewer[open]', { timeout: 30000 }); | |
| const box = await page.locator('.photo-viewer').boundingBox(); | |
| const style = await page.evaluate(() => { | |
| const v = document.querySelector('.photo-viewer'); | |
| const s = getComputedStyle(v); | |
| return { position: s.position, bg: s.backgroundColor, w: s.width, h: s.height }; | |
| }); | |
| assert(style.position === 'fixed', 'viewer is ' + style.position + ', not fixed'); | |
| assert(box.width >= 1500 && box.height >= 900, 'viewer is ' + Math.round(box.width) + 'x' + Math.round(box.height)); | |
| assert(style.bg !== 'rgba(0, 0, 0, 0)', 'viewer has no background'); | |
| }); | |
| await test('the toolbar is a bar, not stacked plain text', async () => { | |
| // The regression rendered this as inline-flow divs at full width. A real | |
| // toolbar is absolutely positioned over the image, which is what stops the | |
| // share button sitting on top of the photograph. | |
| const style = await page.evaluate(() => { | |
| const t = document.querySelector('.photo-toolbar'); | |
| return t ? { position: getComputedStyle(t).position, display: getComputedStyle(t).display } : null; | |
| }); | |
| assert(style, 'no .photo-toolbar found'); | |
| assert(style.position === 'absolute', 'toolbar is ' + style.position); | |
| }); | |
| await test('the close button is sized and round, not a bare glyph', async () => { | |
| const box = await page.locator('.photo-toolbar button').first().boundingBox(); | |
| assert(box && box.width >= 28 && box.height >= 28, | |
| 'close button is ' + (box ? Math.round(box.width) + 'x' + Math.round(box.height) : 'missing')); | |
| }); | |
| await test('the frame sits inside the viewport, not flush to an edge', async () => { | |
| const box = await page.locator('.photo-frame').boundingBox(); | |
| assert(box && box.width > 100 && box.height > 100, 'frame is ' + JSON.stringify(box)); | |
| assert(box.x >= 0 && box.y >= 0 && box.x + box.width <= 1601 && box.y + box.height <= 951, | |
| 'frame escapes the viewport'); | |
| }); | |
| await test('the detail panel is styled when the photograph has metadata', async () => { | |
| const n = await page.locator('.photo-detail').count(); | |
| if (!n) { console.log(' (skipped: this photograph has no metadata panel)'); return; } | |
| const style = await page.evaluate(() => { | |
| const d = document.querySelector('.photo-detail'); | |
| const s = getComputedStyle(d); | |
| return { position: s.position, z: s.zIndex }; | |
| }); | |
| assert(['absolute', 'fixed'].includes(style.position), 'panel is ' + style.position); | |
| }); | |
| console.log('\nten rings, not sixty'); | |
| // ────────────────────────────────────────────────────────────────────────── | |
| await test('at most ten tiles carry the neon', async () => { | |
| await page.keyboard.press('Escape'); | |
| await page.waitForTimeout(1500); | |
| const ringed = await page.locator('.image-tile.featured').count(); | |
| assert(ringed <= 10, ringed + ' tiles are ringed, expected at most 10'); | |
| }); | |
| await test('more photographs are shown than before', async () => { | |
| const total = await page.locator('.image-tile').count(); | |
| assert(total > 96, 'only ' + total + ' tiles; the field should now hold 150 on desktop'); | |
| }); | |
| await test('un-ringed new photographs are still visible', async () => { | |
| // "còn lại hiển thị bình thường" -- the rest must render as ordinary tiles. | |
| const plain = await page.evaluate(() => { | |
| const tiles = [...document.querySelectorAll('.image-tile')]; | |
| return tiles.filter(t => !t.classList.contains('featured')).length; | |
| }); | |
| assert(plain > 10, 'no un-ringed tiles found'); | |
| }); | |
| console.log('\npill clearance'); | |
| // ────────────────────────────────────────────────────────────────────────── | |
| await test('no ringed tile overlaps the search pill', async () => { | |
| // The brief is explicit: big, near the search box, but NOT covering it. | |
| // Measured against every ringed tile's real box, not its centre point. | |
| const worst = await page.evaluate(() => { | |
| const pill = document.querySelector('.search-pill').getBoundingClientRect(); | |
| let overlap = 0, who = null; | |
| for (const tile of document.querySelectorAll('.image-tile.featured')) { | |
| const r = tile.getBoundingClientRect(); | |
| const w = Math.max(0, Math.min(r.right, pill.right) - Math.max(r.left, pill.left)); | |
| const h = Math.max(0, Math.min(r.bottom, pill.bottom) - Math.max(r.top, pill.top)); | |
| const area = w * h; | |
| if (area > overlap) { overlap = area; who = tile.dataset.imageId; } | |
| } | |
| return { overlap, who, pill: pill.width * pill.height }; | |
| }); | |
| assert(worst.overlap === 0, | |
| `tile ${worst.who} covers ${Math.round(worst.overlap)}px² of the pill (${Math.round(worst.pill)}px² total)`); | |
| }); | |
| await test('a ringed tile is still larger than an ordinary one', async () => { | |
| const r = await page.evaluate(() => { | |
| const area = el => { const b = el.getBoundingClientRect(); return b.width * b.height; }; | |
| const f = document.querySelector('.image-tile.featured'); | |
| const o = [...document.querySelectorAll('.image-tile')].find(t => !t.classList.contains('featured')); | |
| return { f: area(f), o: area(o) }; | |
| }); | |
| assert(r.f > r.o * 1.15, `ringed ${Math.round(r.f)}px² vs ordinary ${Math.round(r.o)}px²`); | |
| }); | |
| console.log('\nno regressions'); | |
| // ────────────────────────────────────────────────────────────────────────── | |
| await test('no uncaught page errors', async () => { | |
| assert(errors.length === 0, errors.slice(0, 3).join(' | ')); | |
| }); | |
| await browser.close(); | |
| console.log(`\n${passed} passed, ${failed} failed`); | |
| process.exit(failed ? 1 : 0); |