245 lines
10 KiB
JavaScript
245 lines
10 KiB
JavaScript
/**
|
|
* WorktableSection popup regression against the actual client bundle.
|
|
* Usage: node 04_test/sidebar-popup.test.mjs [lib/client.js]
|
|
* The small React hook/JSX harness runs the exported component and its event handlers;
|
|
* it does not claim browser layout or desktop GUI coverage.
|
|
*/
|
|
import { readFileSync } from 'node:fs'
|
|
import { createContext, runInNewContext } from 'node:vm'
|
|
import { fileURLToPath } from 'node:url'
|
|
import { dirname, join, resolve } from 'node:path'
|
|
|
|
const BUNDLE = resolve(process.argv[2] ?? join(dirname(fileURLToPath(import.meta.url)), '..', '01_content', 'lib', 'client.js'))
|
|
const source = readFileSync(BUNDLE, 'utf8')
|
|
const assert = (condition, message) => {
|
|
if (!condition) throw new Error(message)
|
|
}
|
|
|
|
const Fragment = Symbol('test.fragment')
|
|
const jsx = (type, props, key) => ({ type, props: props ?? {}, key: key ?? props?.key ?? null })
|
|
|
|
function makeHooks() {
|
|
const slots = []
|
|
const effects = []
|
|
let cursor = 0
|
|
let mounted = false
|
|
|
|
const useState = (initial) => {
|
|
const i = cursor++
|
|
if (!(i in slots)) slots[i] = typeof initial === 'function' ? initial() : initial
|
|
return [slots[i], (next) => { slots[i] = typeof next === 'function' ? next(slots[i]) : next }]
|
|
}
|
|
const useRef = (initial) => {
|
|
const i = cursor++
|
|
if (!(i in slots)) slots[i] = { current: initial }
|
|
return slots[i]
|
|
}
|
|
const useMemo = (make) => { cursor++; return make() }
|
|
const useCallback = (callback) => { cursor++; return callback }
|
|
const useEffect = (effect) => { cursor++; if (!mounted) effects.push(effect) }
|
|
|
|
return {
|
|
React: { Fragment, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect: useEffect },
|
|
render(component, props) {
|
|
cursor = 0
|
|
const tree = component(props)
|
|
if (!mounted) {
|
|
mounted = true
|
|
for (const effect of effects.splice(0)) {
|
|
try { effect() } catch (error) { throw new Error('mount effect failed: ' + error.message) }
|
|
}
|
|
}
|
|
return tree
|
|
},
|
|
}
|
|
}
|
|
|
|
function fakeElement(tagName = 'div') {
|
|
return {
|
|
tagName: tagName.toUpperCase(),
|
|
className: '',
|
|
style: {},
|
|
children: [],
|
|
setAttribute(name, value) { this[name] = value },
|
|
appendChild(child) { child.parentElement = this; this.children.push(child); return child },
|
|
remove() {},
|
|
addEventListener() {},
|
|
removeEventListener() {},
|
|
getBoundingClientRect() { return { left: 24, top: 100, right: 64, bottom: 140, width: 40, height: 40 } },
|
|
getContext() {
|
|
return {
|
|
globalCompositeOperation: '',
|
|
createLinearGradient() { return { addColorStop() {} } },
|
|
fillRect() {},
|
|
getImageData() { return { data: [0, 0, 0, 255] } },
|
|
}
|
|
},
|
|
}
|
|
}
|
|
|
|
function loadComponent() {
|
|
const values = new Map([
|
|
['dsh.worktable.updateCheck.v1', '0'],
|
|
['dsh.worktable.projects.v1', JSON.stringify({
|
|
order: [], lastUsed: {}, hidden: [], nameOverrides: {}, iconOverrides: {}, removed: [],
|
|
views: {}, shortcuts: [], bindings: {}, folders: {},
|
|
layouts: [{
|
|
id: 'popup-test-layout', title: 'Popup Test', icon: '🧱', top: null,
|
|
main: [{ id: 'popup-test-pane', title: 'Pane', min: 200, content: null }],
|
|
chatWidth: { default: 320, min: 240, max: 600 },
|
|
}],
|
|
})],
|
|
])
|
|
const localStorage = {
|
|
getItem: (key) => values.has(key) ? values.get(key) : null,
|
|
setItem: (key, value) => values.set(key, String(value)),
|
|
removeItem: (key) => values.delete(key),
|
|
}
|
|
const body = fakeElement('body')
|
|
const head = fakeElement('head')
|
|
const document = {
|
|
body, head,
|
|
documentElement: fakeElement('html'),
|
|
querySelector: () => null,
|
|
querySelectorAll: () => [],
|
|
createElement: (tag) => fakeElement(tag),
|
|
addEventListener() {},
|
|
removeEventListener() {},
|
|
}
|
|
const window = {
|
|
innerWidth: 1280,
|
|
innerHeight: 900,
|
|
localStorage,
|
|
document,
|
|
__ModuleLoader__: { load: (definition) => { window.captured = definition } },
|
|
addEventListener() {},
|
|
removeEventListener() {},
|
|
dispatchEvent() {},
|
|
matchMedia: () => ({ matches: false, addEventListener() {}, removeEventListener() {} }),
|
|
setTimeout: () => 1,
|
|
clearTimeout() {},
|
|
setInterval: () => 1,
|
|
clearInterval() {},
|
|
open() {},
|
|
}
|
|
const hooks = makeHooks()
|
|
const jsxRuntime = { Fragment, jsx, jsxs: jsx }
|
|
const sandbox = {
|
|
window, document, localStorage,
|
|
self: window,
|
|
location: { href: 'http://localhost/', protocol: 'http:' },
|
|
navigator: { userAgent: 'node popup regression', platform: 'Win32', language: 'en-US' },
|
|
console,
|
|
atob,
|
|
btoa,
|
|
fetch: async () => ({ ok: false, status: 404, json: async () => ({}) }),
|
|
setTimeout: window.setTimeout,
|
|
clearTimeout: window.clearTimeout,
|
|
setInterval: window.setInterval,
|
|
clearInterval: window.clearInterval,
|
|
requestAnimationFrame: () => 1,
|
|
cancelAnimationFrame() {},
|
|
MutationObserver: class { observe() {} disconnect() {} },
|
|
ResizeObserver: class { observe() {} unobserve() {} disconnect() {} },
|
|
IntersectionObserver: class { observe() {} unobserve() {} disconnect() {} },
|
|
CustomEvent: class { constructor(type, init) { this.type = type; this.detail = init?.detail } },
|
|
URL, Blob, AbortController,
|
|
indexedDB: undefined,
|
|
}
|
|
createContext(sandbox)
|
|
runInNewContext(source, sandbox, { filename: BUNDLE, timeout: 20000 })
|
|
assert(typeof window.captured?.factory === 'function', 'client bundle did not register a factory')
|
|
const requireExternal = (id) => {
|
|
if (id === 'react') return hooks.React
|
|
if (id === 'react/jsx-runtime') return jsxRuntime
|
|
if (id === 'react-dom') return { createPortal: (child) => child }
|
|
if (id === 'scheduler') return {}
|
|
throw new Error('unexpected external module: ' + id)
|
|
}
|
|
const exports = window.captured.factory(requireExternal)
|
|
assert(typeof exports.WorktableSection === 'function', 'bundle did not export WorktableSection')
|
|
return { component: exports.WorktableSection, hooks, window, values }
|
|
}
|
|
|
|
function walk(node, predicate, out = []) {
|
|
if (Array.isArray(node)) { for (const child of node) walk(child, predicate, out); return out }
|
|
if (!node || typeof node !== 'object') return out
|
|
if (typeof node.type !== 'undefined' && predicate(node)) out.push(node)
|
|
walk(node.props?.children, predicate, out)
|
|
return out
|
|
}
|
|
|
|
const classHas = (node, name) => String(node.props?.className ?? '').split(/\s+/).includes(name)
|
|
const byClass = (tree, name) => walk(tree, (node) => classHas(node, name))
|
|
const click = (node, rect = fakeElement()) => {
|
|
assert(typeof node?.props?.onClick === 'function', 'target has no onClick handler')
|
|
node.props.onClick({ currentTarget: rect, target: rect, stopPropagation() {}, preventDefault() {} })
|
|
}
|
|
|
|
async function main() {
|
|
const { component, hooks, window, values } = loadComponent()
|
|
const render = (wide) => hooks.render(component, { wide, t: (key) => key })
|
|
let tree = render(false)
|
|
assert(byClass(tree, 'dsh-wt_rail').length === 1, 'collapsed rail was not rendered')
|
|
assert(byClass(tree, 'dsh-wt_add').length === 0, 'add popup unexpectedly started open')
|
|
|
|
const addFromConsole = window.__dshCustomEnv?.console?.onAdd
|
|
assert(typeof addFromConsole === 'function', 'control-room onAdd action was not exposed')
|
|
addFromConsole()
|
|
tree = render(false)
|
|
assert(byClass(tree, 'dsh-wt_add').length === 1, 'control-room add action did not render once in collapsed rail')
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_add').length === 1, 'switching wide retained duplicate or lost add popup')
|
|
click(byClass(tree, 'dsh-wt_popBackdrop')[0])
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_add').length === 0, 'add popup backdrop did not close')
|
|
|
|
const viewOptionsButton = walk(tree, (node) => node.type === 'button' && node.props?.['aria-label'] === 'menu.viewOptions')[0]
|
|
assert(viewOptionsButton, 'view-options control missing in wide mode')
|
|
click(viewOptionsButton)
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_manage').length === 1, 'manage popup did not open')
|
|
tree = render(false)
|
|
assert(byClass(tree, 'dsh-wt_manage').length === 1, 'switching collapsed while popup open lost or duplicated the popup')
|
|
tree = render(true)
|
|
|
|
const layoutIcon = byClass(tree, 'dsh-wt_manageIcon').at(-1)
|
|
assert(layoutIcon, 'layout icon control missing')
|
|
click(layoutIcon)
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_iconPop').length === 1, 'icon popup did not open once')
|
|
const iconCell = byClass(tree, 'dsh-wt_iconCell')[1]
|
|
assert(iconCell, 'icon choices missing')
|
|
const chosenIcon = iconCell.props.children
|
|
click(iconCell)
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_iconPop').length === 0, 'choosing an icon did not close its popup')
|
|
const savedProjects = JSON.parse(values.get('dsh.worktable.projects.v1'))
|
|
assert(savedProjects.layouts[0].icon === chosenIcon, 'chosen layout icon was not persisted')
|
|
|
|
const layoutCard = byClass(tree, 'dsh-wt_layout').at(-1)
|
|
const bindButton = layoutCard && walk(layoutCard, (node) => classHas(node, 'dsh-wt_bindBtn'))[0]
|
|
assert(bindButton, 'layout binding control missing')
|
|
click(bindButton)
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_bindPop').length === 1, 'binding popup did not open once')
|
|
click(byClass(tree, 'dsh-wt_popBackdrop').at(-1))
|
|
tree = render(true)
|
|
assert(byClass(tree, 'dsh-wt_bindPop').length === 0, 'binding popup backdrop did not close')
|
|
|
|
const deleteButton = walk(tree, (node) => node.type === 'button' && node.props?.title === 'manage.deleteLayout')[0]
|
|
assert(deleteButton, 'layout delete control missing')
|
|
click(deleteButton)
|
|
tree = render(true)
|
|
assert(walk(tree, (node) => node.props?.role === 'alertdialog').length === 1, 'delete confirmation did not open')
|
|
const cancelButton = walk(tree, (node) => node.type === 'button' && node.props?.children === 'confirm.cancel')[0]
|
|
assert(cancelButton, 'delete confirmation cancel control missing')
|
|
click(cancelButton)
|
|
tree = render(true)
|
|
assert(walk(tree, (node) => node.props?.role === 'alertdialog').length === 0, 'delete confirmation did not close')
|
|
|
|
console.log('all sidebar-popup tests passed: add, icon, binding, delete confirmation, wide/collapsed switching')
|
|
}
|
|
|
|
await main()
|