182 lines
8.9 KiB
TypeScript
182 lines
8.9 KiB
TypeScript
import type { Locator, Page } from 'playwright'
|
|
import { expect } from 'vitest'
|
|
|
|
/**
|
|
* Scroll and select an overflowing command in its rendered terminal card.
|
|
* @param page - Browser page that owns the card.
|
|
* @param card - Terminal card rendered by the application.
|
|
* @param expected - Complete single-line command.
|
|
* @param width - Narrow card width that leaves part of the command offscreen.
|
|
* @param label - Localized accessible name for the command line.
|
|
* @returns Resolves when the tail is reachable and native copying retains the full command.
|
|
*/
|
|
export async function expectSelectableTerminalCommand(page: Page, card: Locator, expected: string, width: number, label = 'Command line 1'): Promise<void> {
|
|
const originalWidth = await card.evaluate(element => element.style.width)
|
|
const command = card.locator('[data-command-text]').first()
|
|
try {
|
|
for (const colorScheme of ['light', 'dark'] as const) {
|
|
await page.emulateMedia({ colorScheme })
|
|
await expect.poll(() => page.locator('body').evaluate(element => element.hasAttribute('data-ds-dark-theme'))).toBe(colorScheme === 'dark')
|
|
expect(await command.textContent()).toBe(expected)
|
|
expect(await card.evaluate(element => element.scrollWidth <= element.clientWidth)).toBe(true)
|
|
expect(await command.evaluate((element) => {
|
|
const range = document.createRange()
|
|
range.selectNodeContents(element)
|
|
return range.getClientRects().length
|
|
})).toBe(1)
|
|
await card.evaluate((element, value) => { element.style.width = `${value}px` }, width)
|
|
await command.scrollIntoViewIfNeeded()
|
|
const controls = card.locator('[class*="_cwd"], [class*="_runState"]:not([class*="Label"]), [class*="_status"], [class*="_copyButton"]')
|
|
expect(await controls.count()).toBeGreaterThanOrEqual(3)
|
|
const before = await controls.evaluateAll(elements => elements.map((element) => {
|
|
const { x, y, width: w, height } = element.getBoundingClientRect()
|
|
return { x, y, width: w, height }
|
|
}))
|
|
await expectSelectableCommandText(page, command, expected, label)
|
|
expect(await controls.evaluateAll(elements => elements.map((element) => {
|
|
const { x, y, width: w, height } = element.getBoundingClientRect()
|
|
return { x, y, width: w, height }
|
|
}))).toEqual(before)
|
|
const originalWhitespace = await card.evaluate((element) => {
|
|
const property = '--dsl-terminal-command-whitespace'
|
|
const previous = { value: element.style.getPropertyValue(property), priority: element.style.getPropertyPriority(property) }
|
|
element.style.setProperty(property, 'pre-wrap')
|
|
return previous
|
|
})
|
|
try {
|
|
await expectNoCommandTabStop(command)
|
|
expect(await command.evaluate((element) => {
|
|
const range = document.createRange()
|
|
range.selectNodeContents(element)
|
|
return range.getClientRects().length
|
|
})).toBeGreaterThan(1)
|
|
} finally {
|
|
await card.evaluate((element, previous) => {
|
|
element.style.setProperty('--dsl-terminal-command-whitespace', previous.value, previous.priority)
|
|
}, originalWhitespace)
|
|
}
|
|
await expectCommandFocusAfterResize(card, command)
|
|
await card.evaluate((element, value) => { element.style.width = value }, originalWidth)
|
|
}
|
|
} finally {
|
|
await card.evaluate((element, value) => { element.style.width = value }, originalWidth)
|
|
await page.emulateMedia({ colorScheme: null })
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Verify a resized command drops its explicit keyboard stop when all text fits.
|
|
* @param container - Width owner of the command.
|
|
* @param command - Mounted command text.
|
|
* @returns Resolves after widening removes the overflow-only accessibility attributes.
|
|
*/
|
|
export async function expectCommandFocusAfterResize(container: Locator, command: Locator): Promise<void> {
|
|
const originalWidth = await container.evaluate(element => element.style.width)
|
|
const extra = await command.evaluate(element => element.scrollWidth - element.clientWidth)
|
|
const width = await container.evaluate(element => element.getBoundingClientRect().width)
|
|
try {
|
|
await container.evaluate((element, value) => { element.style.width = `${value}px` }, width + Math.max(extra, 0) + 20)
|
|
await expectNoCommandTabStop(command)
|
|
} finally {
|
|
await container.evaluate((element, value) => { element.style.width = value }, originalWidth)
|
|
}
|
|
}
|
|
|
|
async function expectNoCommandTabStop(command: Locator): Promise<void> {
|
|
await expect.poll(() => command.evaluate(element => ({
|
|
overflow: element.scrollWidth > element.clientWidth + 1,
|
|
tabIndex: element.getAttribute('tabindex'),
|
|
role: element.getAttribute('role'),
|
|
label: element.getAttribute('aria-label'),
|
|
}))).toEqual({ overflow: false, tabIndex: null, role: null, label: null })
|
|
}
|
|
|
|
/**
|
|
* Verify native command selection within a text scrollport.
|
|
* @param page - Browser page that owns the text.
|
|
* @param command - Text scrollport containing the command, optionally within argument JSON.
|
|
* @param expected - Complete command, including its offscreen suffix.
|
|
* @param label - Localized accessible name for the overflowing text.
|
|
* @returns Resolves after horizontal navigation and native selection/copy succeed.
|
|
*/
|
|
export async function expectSelectableCommandText(page: Page, command: Locator, expected: string, label: string): Promise<void> {
|
|
const geometry = async () => command.evaluate((element, value) => {
|
|
const text = element.firstChild
|
|
if (!(text instanceof Text) || text.length === 0) throw new Error('Command has no text node')
|
|
const offset = text.data.indexOf(value)
|
|
if (offset < 0) throw new Error('Command text does not contain the expected command')
|
|
const first = document.createRange()
|
|
first.setStart(text, offset)
|
|
first.setEnd(text, offset + 1)
|
|
const last = document.createRange()
|
|
last.setStart(text, offset + value.length - 1)
|
|
last.setEnd(text, offset + value.length)
|
|
const head = first.getBoundingClientRect()
|
|
const tail = last.getBoundingClientRect()
|
|
const viewport = element.getBoundingClientRect()
|
|
return {
|
|
head: { x: head.left, y: head.top, height: head.height },
|
|
tail: { x: tail.right, y: tail.top },
|
|
left: viewport.left,
|
|
right: viewport.right,
|
|
scrollWidth: element.scrollWidth,
|
|
clientWidth: element.clientWidth,
|
|
scrollLeft: element.scrollLeft,
|
|
}
|
|
}, expected)
|
|
expect(await command.textContent()).toContain(expected)
|
|
const start = await geometry()
|
|
expect(start.scrollWidth).toBeGreaterThan(start.clientWidth)
|
|
expect(start.tail.y).toBeCloseTo(start.head.y, 1)
|
|
expect(start.tail.x).toBeGreaterThan(start.right)
|
|
try {
|
|
await expect.poll(() => command.evaluate(element => ({
|
|
tabIndex: element.getAttribute('tabindex'),
|
|
role: element.getAttribute('role'),
|
|
label: element.getAttribute('aria-label'),
|
|
}))).toEqual({ tabIndex: '0', role: 'group', label })
|
|
await command.focus()
|
|
await page.keyboard.press('Shift+Tab')
|
|
expect(await command.evaluate(element => document.activeElement === element)).toBe(false)
|
|
await page.keyboard.press('Tab')
|
|
expect(await command.evaluate(element => document.activeElement === element)).toBe(true)
|
|
await page.keyboard.press('ArrowRight')
|
|
await expect.poll(() => command.evaluate(element => element.scrollLeft)).toBeGreaterThan(0)
|
|
await page.keyboard.press('ArrowLeft')
|
|
await expect.poll(() => command.evaluate(element => element.scrollLeft)).toBe(0)
|
|
await command.hover()
|
|
await page.mouse.wheel(start.scrollWidth, 0)
|
|
await expect.poll(async () => {
|
|
const end = await geometry()
|
|
return end.tail.x <= end.right + 1 && end.tail.x >= end.left && end.scrollLeft > 0
|
|
}).toBe(true)
|
|
await page.mouse.wheel(-start.scrollWidth, 0)
|
|
await expect.poll(() => command.evaluate(element => element.scrollLeft)).toBe(0)
|
|
const head = await geometry()
|
|
await page.mouse.move(head.head.x + 0.1, head.head.y + head.head.height / 2)
|
|
await page.mouse.down()
|
|
try {
|
|
await page.mouse.move(head.right - 1, head.head.y + head.head.height / 2, { steps: 5 })
|
|
await page.mouse.wheel(start.scrollWidth, 0)
|
|
await expect.poll(async () => {
|
|
const value = await geometry()
|
|
return value.tail.x <= head.right + 1 ? 'visible' : JSON.stringify({ before: head, after: value })
|
|
}).toBe('visible')
|
|
const end = await geometry()
|
|
await page.mouse.move(end.tail.x - 0.1, head.head.y + head.head.height / 2)
|
|
} finally {
|
|
await page.mouse.up()
|
|
}
|
|
await expect.poll(() => page.evaluate(() => document.getSelection()?.toString())).toBe(expected)
|
|
await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], { origin: new URL(page.url()).origin })
|
|
await page.keyboard.press('ControlOrMeta+C')
|
|
await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(expected)
|
|
} finally {
|
|
await command.evaluate((element) => {
|
|
element.scrollLeft = 0
|
|
element.blur()
|
|
document.getSelection()?.removeAllRanges()
|
|
})
|
|
}
|
|
}
|