270 lines
11 KiB
JavaScript
270 lines
11 KiB
JavaScript
import { test, expect } from '@playwright/test'
|
|
|
|
// open loads the page and collects console errors.
|
|
async function open (page, hash = '') {
|
|
const errors = []
|
|
page.on('console', m => { if (m.type() === 'error') errors.push(m.text()) })
|
|
page.on('pageerror', e => errors.push(e.message))
|
|
await page.goto('/' + hash)
|
|
await page.waitForFunction(() => window.__8bit?.ready)
|
|
return errors
|
|
}
|
|
|
|
const texts = page => page.evaluate(() => window.__8bit.texts())
|
|
const where = page => page.evaluate(() => window.__8bit.page())
|
|
|
|
// searched reports whether the page shows results for q.
|
|
const searched = async (page, q) => (await texts(page)).some(t => t.endsWith(`results for "${q}"`))
|
|
|
|
// pixels hashes the canvas, to see that it changed.
|
|
const pixels = page => page.evaluate(() => {
|
|
const c = document.getElementById('screen')
|
|
const d = c.getContext('2d').getImageData(0, 0, c.width, c.height).data
|
|
let h = 0
|
|
for (let i = 0; i < d.length; i += 4) h = (h * 31 + d[i] + d[i + 1] * 7 + d[i + 2] * 13) | 0
|
|
return h
|
|
})
|
|
|
|
async function box (page, label) {
|
|
const r = await page.evaluate(l => window.__8bit.find(l), label)
|
|
expect(r, `no element "${label}"`).toBeTruthy()
|
|
return r
|
|
}
|
|
|
|
async function click (page, label) {
|
|
const r = await box(page, label)
|
|
await page.mouse.click(r[0] + r[2] / 2, r[1] + r[3] / 2)
|
|
}
|
|
|
|
// touch drags a finger, holding first when hold > 0.
|
|
async function touch (page, from, to, hold = 0) {
|
|
const cdp = await page.context().newCDPSession(page)
|
|
await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [{ x: from[0], y: from[1] }] })
|
|
if (hold) await page.waitForTimeout(hold)
|
|
for (let i = 1; i <= 4; i++) {
|
|
const p = { x: from[0] + (to[0] - from[0]) * i / 4, y: from[1] + (to[1] - from[1]) * i / 4 }
|
|
await cdp.send('Input.dispatchTouchEvent', { type: 'touchMove', touchPoints: [p] })
|
|
}
|
|
await cdp.send('Input.dispatchTouchEvent', { type: 'touchEnd', touchPoints: [] })
|
|
}
|
|
|
|
test('boots, starts on Enter, shows home', async ({ page }) => {
|
|
const errors = await open(page)
|
|
expect(await texts(page)).toContain('Press start')
|
|
await page.keyboard.press('Enter')
|
|
expect(await texts(page)).toContain('Foundations')
|
|
expect(errors).toEqual([])
|
|
})
|
|
|
|
test('deep links open pages; unknown paths end the game', async ({ page }) => {
|
|
const errors = await open(page, '#/f/icons')
|
|
expect(await where(page)).toBe('/f/icons')
|
|
expect(await texts(page)).toContain('COPY CODE')
|
|
await page.goto('/#/nowhere')
|
|
await page.waitForFunction(() => window.__8bit?.page() === '/nowhere')
|
|
expect(await texts(page)).toContain('No page at /nowhere')
|
|
expect(errors).toEqual([])
|
|
})
|
|
|
|
test('slash focuses search without typing a slash', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await page.keyboard.press('/')
|
|
await page.keyboard.type('dith')
|
|
expect(await searched(page, 'dith')).toBe(true)
|
|
await page.keyboard.press('Enter')
|
|
expect(await where(page)).toBe('/f/dither')
|
|
expect(page.url()).toContain('#/f/dither')
|
|
})
|
|
|
|
test('Chinese text reaches search', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await page.keyboard.press('/')
|
|
await page.keyboard.insertText('像素')
|
|
expect(await searched(page, '像素')).toBe(true)
|
|
})
|
|
|
|
test('clicks navigate, Back returns, P repaints', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await click(page, 'Foundations')
|
|
expect(await where(page)).toBe('/cat/foundations')
|
|
await click(page, 'Palettes')
|
|
expect(await where(page)).toBe('/f/palettes')
|
|
await page.goBack()
|
|
await page.waitForFunction(() => window.__8bit.page() === '/cat/foundations')
|
|
const before = await pixels(page)
|
|
await page.keyboard.press('p')
|
|
expect(await pixels(page)).not.toBe(before)
|
|
})
|
|
|
|
test('typing in a field stays in the field', async ({ page }) => {
|
|
await open(page, '#/f/editor')
|
|
await click(page, 'Name')
|
|
await page.keyboard.type('p]')
|
|
expect(await where(page)).toBe('/f/editor')
|
|
expect((await texts(page)).filter(t => t === '> Name changed')).toHaveLength(2)
|
|
})
|
|
|
|
test('keyboard copy and paste use the system clipboard', async ({ page, context }) => {
|
|
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
|
|
await open(page, '#/f/editor')
|
|
await click(page, 'Name')
|
|
await page.keyboard.type('pixel')
|
|
await page.keyboard.press('ControlOrMeta+A')
|
|
await page.keyboard.press('ControlOrMeta+C')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('pixel')
|
|
await page.evaluate(() => navigator.clipboard.writeText('dith'))
|
|
await click(page, 'Search components')
|
|
await page.keyboard.press('ControlOrMeta+V')
|
|
expect(await searched(page, 'dith')).toBe(true)
|
|
})
|
|
|
|
test('an input method composes, then commits', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await page.keyboard.press('/')
|
|
const cdp = await page.context().newCDPSession(page)
|
|
await cdp.send('Input.imeSetComposition', { text: 'xiang', selectionStart: 5, selectionEnd: 5 })
|
|
expect(await searched(page, 'xiang')).toBe(false)
|
|
await cdp.send('Input.insertText', { text: '像' })
|
|
expect(await searched(page, '像')).toBe(true)
|
|
})
|
|
|
|
test('Command or Super with Backspace erases the line', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await page.keyboard.press('/')
|
|
await page.keyboard.type('zz dith')
|
|
await page.keyboard.press('Meta+Backspace')
|
|
await page.keyboard.type('dith')
|
|
expect(await searched(page, 'dith')).toBe(true)
|
|
})
|
|
|
|
test('wheel scrolls the sidebar', async ({ page }) => {
|
|
await open(page, '#/')
|
|
const y = (await box(page, 'Display'))[1]
|
|
await page.mouse.move(100, 500)
|
|
await page.mouse.wheel(0, 100)
|
|
expect((await box(page, 'Display'))[1]).toBeLessThan(y)
|
|
})
|
|
|
|
test('an unmapped key keeps animations running', async ({ page }) => {
|
|
await open(page)
|
|
await page.keyboard.press('Shift')
|
|
const frames = (await page.evaluate(() => window.__8bit.stats())).frames
|
|
await page.waitForTimeout(600)
|
|
expect((await page.evaluate(() => window.__8bit.stats())).frames).toBeGreaterThan(frames)
|
|
})
|
|
|
|
test('copying the same text again reaches the clipboard', async ({ page, context }) => {
|
|
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
|
|
await open(page, '#/f/icons')
|
|
await click(page, 'COPY CODE')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toContain('icon.')
|
|
await page.evaluate(() => navigator.clipboard.writeText('external'))
|
|
await click(page, 'COPY CODE')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toContain('icon.')
|
|
})
|
|
|
|
test('zoom must be a whole number', async ({ page }) => {
|
|
await open(page, '?zoom=1.5#/')
|
|
const s = await page.evaluate(() => window.__8bit.stats())
|
|
expect(Number.isInteger(s.zoom)).toBe(true)
|
|
expect(await page.evaluate(() => window.__8bit.log.some(l => l.includes('zoom=1.5')))).toBe(true)
|
|
})
|
|
|
|
test.describe('touch', () => {
|
|
test.use({ hasTouch: true })
|
|
|
|
test('a tap clicks', async ({ page }) => {
|
|
await open(page, '#/')
|
|
const r = await box(page, 'Foundations')
|
|
await page.touchscreen.tap(r[0] + r[2] / 2, r[1] + r[3] / 2)
|
|
expect(await where(page)).toBe('/cat/foundations')
|
|
})
|
|
|
|
test('a swipe scrolls', async ({ page }) => {
|
|
await open(page, '#/')
|
|
const y = (await box(page, 'Display'))[1]
|
|
await touch(page, [100, 600], [100, 400])
|
|
expect((await box(page, 'Display'))[1]).toBeLessThan(y)
|
|
})
|
|
|
|
test('a canceled hold does not click', async ({ page }) => {
|
|
await open(page, '#/')
|
|
const r = await box(page, 'Foundations')
|
|
const cdp = await page.context().newCDPSession(page)
|
|
await cdp.send('Input.dispatchTouchEvent', { type: 'touchStart', touchPoints: [{ x: r[0] + 20, y: r[1] + 10 }] })
|
|
await page.waitForTimeout(500)
|
|
await cdp.send('Input.dispatchTouchEvent', { type: 'touchCancel', touchPoints: [] })
|
|
expect(await where(page)).toBe('/')
|
|
})
|
|
|
|
test('hold, then drag, selects text', async ({ page, context }) => {
|
|
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
|
|
await open(page, '#/f/editor')
|
|
await click(page, 'Name')
|
|
await page.keyboard.type('abcdef')
|
|
const r = await box(page, 'Name')
|
|
await touch(page, [r[0] + 4, r[1] + r[3] / 2], [r[0] + 300, r[1] + r[3] / 2], 500)
|
|
await page.keyboard.press('ControlOrMeta+C')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe('abcdef')
|
|
})
|
|
})
|
|
|
|
test('COPY CODE fills the clipboard', async ({ page, context }) => {
|
|
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
|
|
await open(page, '#/f/icons')
|
|
await click(page, 'COPY CODE')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toContain('icon.')
|
|
})
|
|
|
|
test('resize keeps whole pixels per dot', async ({ page }) => {
|
|
await open(page, '#/')
|
|
await page.setViewportSize({ width: 800, height: 600 })
|
|
await page.waitForFunction(() => window.__8bit.stats().w === Math.floor(innerWidth * devicePixelRatio / window.__8bit.stats().zoom))
|
|
const s = await page.evaluate(() => window.__8bit.stats())
|
|
expect(Number.isInteger(s.zoom)).toBe(true)
|
|
})
|
|
|
|
test('a Go panic shows GAME OVER in pixels; RETRY reloads', async ({ page }) => {
|
|
await open(page, '#/f/icons')
|
|
await page.evaluate(() => window.__8bitGo.pointer('bogus', 0, 0))
|
|
expect(await texts(page)).toContain('web: unknown pointer kind bogus')
|
|
await expect(page.locator('#over')).toBeHidden()
|
|
await click(page, 'RETRY')
|
|
await page.waitForFunction(() => window.__8bit?.ready && window.__8bit.page() === '/f/icons')
|
|
expect(await texts(page)).toContain('COPY CODE')
|
|
})
|
|
|
|
test('resizing while wasm loads is safe', async ({ page }) => {
|
|
const errors = []
|
|
page.on('pageerror', e => errors.push(e.message))
|
|
await page.route('**/a/app.*.wasm', async route => {
|
|
await new Promise(resolve => setTimeout(resolve, 800))
|
|
await route.continue()
|
|
})
|
|
await page.goto('/')
|
|
await page.setViewportSize({ width: 900, height: 700 })
|
|
await page.waitForFunction(() => window.__8bit?.ready)
|
|
expect(errors).toEqual([])
|
|
})
|
|
|
|
test('scripts and wasm have content-addressed, immutable URLs', async ({ page, request }) => {
|
|
await open(page, '#/')
|
|
const urls = await page.evaluate(() => performance.getEntriesByType('resource').map(r => r.name).filter(u => u.includes('/a/')))
|
|
expect(urls.map(u => new URL(u).pathname).sort()).toEqual([
|
|
expect.stringMatching(/^\/a\/app\.[0-9a-f]{12}\.wasm$/),
|
|
expect.stringMatching(/^\/a\/main\.[0-9a-f]{12}\.js$/),
|
|
expect.stringMatching(/^\/a\/wasm_exec\.[0-9a-f]{12}\.js$/)
|
|
])
|
|
// Cache headers come from Cloudflare, not the local server.
|
|
if (!process.env.BASE_URL) return
|
|
for (const u of urls) expect((await request.head(u)).headers()['cache-control']).toContain('immutable')
|
|
expect((await request.head('/')).headers()['cache-control']).toContain('must-revalidate')
|
|
})
|
|
|
|
test('a load failure shows the page GAME OVER', async ({ page }) => {
|
|
await page.route('**/a/app.*.wasm', route => route.fulfill({ status: 404 }))
|
|
await page.goto('/')
|
|
await expect(page.locator('#over')).toBeVisible()
|
|
await expect(page.locator('#why')).toContainText(/a\/app\.[0-9a-f]{12}\.wasm: HTTP 404/)
|
|
})
|