test.js

// Tests for the parts of this extension that can run outside a browser.
//
//   node test.js
//
// Chrome loads dt.js, dt-helpers.js and panel.js as *classic* scripts sharing
// one scope. Node normally loads files as modules, which hides the mistakes
// that actually break this extension, so everything here is compiled with
// vm.Script against a stub window instead. That is deliberate: `import.meta`
// is legal in a module, so checking dt.js as one would pass a file Chrome
// refuses to run.
//
// Three things are worth guarding: the transformations dt.js needs after every
// diamond-types rebuild, which have broken silently before; the history view's
// layout, which computes row geometry in plain arrays and must give the same
// answer whether it built it all at once or a version at a time; and reading a
// history that did not come from dt, which has to arrive at the same text dt
// itself would.

const fs = require('fs')
const vm = require('vm')
const path = require('path')

const DIR = __dirname
let passed = 0, failed = 0

function check(name, fn) {
    try {
        fn()
        console.log(`  ok    ${name}`)
        passed++
    } catch (e) {
        console.log(`  FAIL  ${name}\n          ${e.message}`)
        failed++
    }
}

function eq(actual, expected, what) {
    const a = JSON.stringify(actual), b = JSON.stringify(expected)
    if (a !== b) throw new Error(`${what}: got ${a}, wanted ${b}`)
}

function ok(cond, what) {
    if (!cond) throw new Error(what)
}

// ---------------------------------------------------------------- the stub

// Enough of a window for these scripts to load and for the history view to
// lay itself out. It records nothing about styling, only structure, so it
// cannot check what the page looks like, only what it builds.
function make_window() {
    const by_id = {}
    const told = []
    const listening = {}
    const said = []
    const tag_count = s => (String(s).match(/<[a-zA-Z]/g) || []).length

    function el(tag) {
        const e = {
            tagName: tag, children: [], dataset: {}, textContent: '', firstChild: null,
            style: new Proxy({}, { get: (t, k) => t[k] ?? '', set: (t, k, v) => (t[k] = v, true) }),
            _html: '',
            get innerHTML() { return this._html },
            set innerHTML(v) {
                this._html = v
                if (tag_count(v)) this.firstChild = el('div')
                for (const m of String(v).matchAll(/id="([^"]+)"/g))
                    by_id[m[1]] = by_id[m[1]] || el('div')
            },
            append(...c) { this.children.push(...c) },
            appendChild(c) { this.children.push(c); return c },
            remove() {},
            closest: () => null,
            getBoundingClientRect: () => ({ x: 0, y: 0, top: 0, left: 0,
                                            bottom: 600, right: 900, width: 900, height: 600 }),
            // Text is measured as a fixed width per character, which is all
            // the column arithmetic needs and is stable across machines.
            get offsetWidth() { return 8 * this.textContent.length },
            scrollTop: 0, scrollHeight: 600, clientHeight: 600, clientWidth: 900,
            addEventListener() {}, checked: false, value: '',
        }
        return e
    }

    const document = {
        createElement: el,
        body: el('body'),
        // Only elements the markup has actually declared, so that code which
        // builds its own containers is exercised rather than handed one.
        getElementById: id => by_id[id] || null,
        // Kept, so a test can drive a whole press, move and release: the
        // move and release listeners go on the document, not the window
        addEventListener: (type, fn) => (listening[type] ??= []).push(fn),
    }
    const win = {
        document, console,
        requestAnimationFrame: f => f(),
        // Kept, so a test can raise one the way the browser would
        addEventListener: (type, fn) => (listening[type] ??= []).push(fn),
        onload: null,
        setTimeout, clearTimeout, setInterval, clearInterval, atob, btoa,
        TextEncoder, TextDecoder, performance, AbortController, Blob,
        crypto: require('crypto').webcrypto,
        backgroundConnection: { postMessage() {} },
        navigator: { userAgent: 'test' },
        location: { href: 'about:blank' },
        // Present, and without the Firefox marking that makes content-script.js
        // put its own in place of it.
        ReadableStream: class {},
        chrome: {
            runtime: {
                getURL: f => path.join(DIR, f),
                connect: () => ({ postMessage() {}, onMessage: { addListener() {} } }),
                // Kept, so a test can deliver what the background would say
                onMessage: { addListener: fn => told.push(fn) },
                sendMessage: m => said.push(m),
            },
            devtools: { inspectedWindow: { tabId: 1 } },
        },
    }
    win.getSelection = () => ({ toString: () => '' })
    // Only inline styles exist here, so that is all this can report
    win.getComputedStyle = e => e.style
    win.window = win
    win.self = win
    win.globalThis = win

    // The ids panel.js expects the markup to have provided
    for (const id of ['id_messages', 'id_raw_messages', 'subscribe_response',
        'encoding_response', 'version_response', 'parents_response',
        'merge_type_response', 'content_type_response', 'error_d', 'error_d_label',
        'edit_source_d', 'encoding_request', 'merge_type_select',
        'content_type_select', 'subscribe_request', 'version_request',
        'parents_request', 'edit_source', 'resubmit_button', 'show_resubmit',
        'id_time_travel', 'id_time_travel_label',
        'id_show_deletions', 'id_show_deletions_label'])
        win[id] = by_id[id] = el('div')

    return { win, by_id, told, listening, said, ctx: vm.createContext(win) }
}

function load(ctx, file) {
    const src = fs.readFileSync(path.join(DIR, file), 'utf8')
    new vm.Script(src, { filename: file }).runInContext(ctx)
}

// ------------------------------------------- dt.js, and its transformations

console.log('\ndt.js is a usable classic script')

const dt_src = fs.readFileSync(path.join(DIR, 'dt.js'), 'utf8')

check('compiles as a classic script, not only as a module', () => {
    new vm.Script(dt_src, { filename: 'dt.js' })
})

check('no export statements survive', () => {
    const left = dt_src.split('\n').filter(l => /^\s*export\b/.test(l))
    ok(left.length === 0, `${left.length} export line(s) remain, first: ${left[0]}`)
})

check('no import.meta, which a classic script cannot parse', () => {
    const code = dt_src.split('\n').filter(l => !/^\s*\/\//.test(l)).join('\n')
    ok(!code.includes('import.meta'), 'import.meta is still present')
})

check('the wasm url goes through chrome.runtime.getURL', () => {
    ok(dt_src.includes("chrome.runtime.getURL('dt_bg.wasm')"),
       "expected chrome.runtime.getURL('dt_bg.wasm')")
})

check('dt_bg.wasm is present and is wasm', () => {
    const b = fs.readFileSync(path.join(DIR, 'dt_bg.wasm'))
    eq([...b.subarray(0, 4)], [0x00, 0x61, 0x73, 0x6d], 'wasm magic number')
})

// -------------------------------------------------- the engine, once loaded

console.log('\nthe engine loads and answers')

const engine = make_window()
let engine_ready = false
check('dt.js and dt-helpers.js load together', () => {
    load(engine.ctx, 'dt.js')
    load(engine.ctx, 'dt-helpers.js')
    for (const name of ['initSync', 'Doc', 'dt_diff_from', 'encode_version', 'decode_version'])
        ok(vm.runInContext(`typeof ${name}`, engine.ctx) !== 'undefined',
           `${name} is not defined`)
})

check('the wasm initializes', () => {
    const w = fs.readFileSync(path.join(DIR, 'dt_bg.wasm'))
    engine.ctx.__wasm = w.buffer.slice(w.byteOffset, w.byteOffset + w.byteLength)
    vm.runInContext('initSync({ module: __wasm })', engine.ctx)
    engine_ready = true
})

const run = js => vm.runInContext(js, engine.ctx)

check('a document edits and reads back', () => {
    ok(engine_ready, 'the wasm did not initialize')
    eq(run(`(() => { let d = new Doc('a'); d.ins(0, 'hello'); d.ins(5, ' world');
                     d.del(0, 1); d.ins(0, 'H'); return d.get() })()`),
       'Hello world', 'document text')
})

check('getUpdates returns braid updates', () => {
    const u = run(`(() => { let d = new Doc('alice'); d.ins(0, 'hello');
                            return d.getUpdates(null) })()`)
    eq(u.length, 1, 'one run summarized into one update')
    eq(u[0].version, ['alice-4'], 'version names the run\'s last event')
    eq(u[0].first_event, 'alice-0', 'first_event names the run\'s first')
    eq(u[0].parents, [], 'no parents')
    eq(u[0].patches, [{ unit: 'text', range: '[0:0]', content: 'hello' }], 'one range patch')
})

check('a forward delete emits one update per character', () => {
    // Each event deletes whatever now sits at the same position, so the runs
    // cannot be summarized and every one addresses the same one-character span.
    const u = run(`(() => { let d = new Doc('a'); d.ins(0, 'abcdef'); d.del(1, 3);
                            return d.getUpdates(['a-5']) })()`)
    eq(u.length, 3, 'one update per deleted character')
    eq(u.map(x => x.patches[0].range), ['[1:2]', '[1:2]', '[1:2]'], 'delete ranges')
    eq(u.map(x => x.patches[0].content), ['', '', ''], 'a delete carries no content')
})

check('numLocalVersions counts events, not updates', () => {
    eq(run(`(() => { let d = new Doc('a'); d.ins(0, 'hello');
                     return [d.numLocalVersions(), d.getUpdates(null).length] })()`),
       [5, 1], '[events, updates]')
})

check('getUpdatesInSpan covers a window of history', () => {
    const r = run(`(() => {
        let d = new Doc('a')
        for (let i = 0; i < 10; i++) d.ins(0, 'x')
        let n = d.numLocalVersions()
        let half = Math.floor(n / 2)
        let a = d.getUpdatesInSpan(0, half), b = d.getUpdatesInSpan(half, n)
        let count = us => us.reduce((t, u) => t + [...u.patches[0].content].length, 0)
        return [n, count(a) + count(b), d.getUpdatesInSpan(0, 0).length]
    })()`)
    eq(r[0], r[1], 'adjacent spans cover every event exactly once')
    eq(r[2], 0, 'an empty span is empty')
})

check('a document round-trips through bytes', () => {
    const r = run(`(() => {
        let a = new Doc('a'); a.ins(0, 'hello there')
        let b = new Doc('b'); b.mergeBytes(a.toBytes())
        return [a.get() === b.get(), b.getUpdates(null).length === a.getUpdates(null).length]
    })()`)
    eq(r, [true, true], '[same text, same updates]')
})

check('concurrent edits merge the same way on both sides', () => {
    const r = run(`(() => {
        let a = new Doc('a'); a.ins(0, 'hello')
        let b = new Doc('b'); b.mergeBytes(a.toBytes())
        a.ins(5, ' from a'); b.ins(0, 'B says: ')
        let a2 = a.toBytes(), b2 = b.toBytes()
        a.mergeBytes(b2); b.mergeBytes(a2)
        return [a.get(), b.get()]
    })()`)
    eq(r[0], r[1], 'both peers converge on the same text')
})

check('encode_version and decode_version are inverses', () => {
    eq(run(`decode_version(encode_version('agent', 7))`), ['agent', 7], 'round trip')
    // An agent name may contain a hyphen, so only the last one separates
    eq(run(`decode_version(encode_version('a-weird-name', 12))`),
       ['a-weird-name', 12], 'hyphenated agent name')
})


// ------------------------------- the windowed diff against the simple one

console.log('\nmarking up a window says what marking up everything says')

// diff_from_ops used to take the whole document apart, a heap object per
// character, to mark up the line a version touched. It now works on just the
// stretch the operations reach. The version it replaced is kept here as the
// spec -- frozen, because reading it out of dt-helpers.js would make the
// oracle track the very file under test, and then breaking one would break
// both and nothing would ever be reported.
run(`function reference_diff_from_ops(text, ops) {
    let a = [...text].map(c => ({ c, ins: null, gone: null }))
    let far_left = []
    for (let xf of ops) {
        if (xf.kind == "Ins") {
            let tail = a.splice(xf.start, a.length - xf.start)
            for (let c of xf.content) a.push({ c, ins: xf.agent, gone: null })
            for (let cell of tail) a.push(cell)
        } else if (xf.kind == "Del") {
            let removed = a.splice(xf.start, xf.end - xf.start)
            let text = removed.map(x => x.c + (x.gone || []).map(g => g[0]).join('')).join('')
            if (!text) continue
            if (xf.start == 0) far_left.push([text, xf.agent])
            else {
                let prev = a[xf.start - 1]
                if (!prev.gone) prev.gone = []
                prev.gone.push([text, xf.agent])
            }
        }
    }
    let diff = []
    let push = (what, text, agent) => {
        if (!text) return
        let last = diff[diff.length - 1]
        if (last && last[0] === what && last[2] === agent) last[1] += text
        else diff.push([what, text, agent])
    }
    for (let [text, agent] of far_left) push(-1, text, agent)
    for (let cell of a) {
        push(cell.ins ? 1 : 0, cell.c, cell.ins)
        for (let [text, agent] of cell.gone || []) push(-1, text, agent)
    }
    return diff
}`)

// Deterministic, so a failure can be replayed from its seed
run(`
    var __seed = 20260809
    function __rnd() { __seed = (__seed * 1103515245 + 12345) & 0x7fffffff
                       return __seed / 0x7fffffff }
    // Astral characters on purpose: dt counts code points, JS strings index
    // utf-16 units, and the gap between them is where a window goes wrong
    var __AL = ['a','b',' ','\\n','x','.','\u00e9','\ud83d\ude42','\u4e2d','\\t']
    function __blob(n) { var s = ''
        for (var i = 0; i < n; i++) s += __AL[Math.floor(__rnd() * __AL.length)]
        return s }

    // Concurrency comes from separate documents merging, which is the only way
    // to get histories shaped like the ones a real session produces
    function __history(agents, edits) {
        var docs = []
        for (var i = 0; i < agents; i++) docs.push(new Doc('agent' + i))
        var marks = []
        for (var e = 0; e < edits; e++) {
            var who = Math.floor(__rnd() * agents), what = __rnd(), r = __rnd()
            var d = docs[who], L = [...d.get()].length
            if (what < 0.62) d.ins(Math.floor(r * (L + 1)), __blob(1 + Math.floor(r * 12)))
            else if (what < 0.85 && L > 0) {
                var p = Math.floor(r * L)
                d.del(p, Math.min(1 + Math.floor(r * 6), L - p))
            } else {
                var o = docs[(who + 1) % agents]
                d.mergeBytes(o.toBytes()); o.mergeBytes(d.toBytes())
            }
            if (e % 3 === 0) marks.push(docs[0].getRemoteVersion().map(x => x.join('-')).sort())
        }
        for (var i = 1; i < agents; i++) docs[0].mergeBytes(docs[i].toBytes())
        marks.push(docs[0].getRemoteVersion().map(x => x.join('-')).sort())
        return { doc: docs[0], marks }
    }

    // Every span of a history, both the wide ones and the narrow ones a
    // time-travel scroll actually asks for
    function __disagreements(agents, edits) {
        var h = __history(agents, edits), bad = []
        for (var i = 0; i < h.marks.length; i++) {
            for (var j = i; j < h.marks.length; j += Math.max(1, (h.marks.length / 9) | 0))
                bad.push(__compare(h, i, j))
            for (var j = i; j < Math.min(h.marks.length, i + 3); j++)
                bad.push(__compare(h, i, j))
        }
        return bad.filter(Boolean)
    }
    function __compare(h, i, j) {
        var lv = h.doc.remoteToLocalVersion(h.marks[i])
        var text = h.doc.getStringAt(lv)
        var ops = i === j ? h.doc.xfSince(lv)
                          : h.doc.xfBetween(lv, h.doc.remoteToLocalVersion(h.marks[j]))
        var want = JSON.stringify(reference_diff_from_ops(text, ops))
        var got = JSON.stringify(diff_from_ops(text, ops))
        return want === got ? null : { i, j, ops: ops.length, want: want.slice(0, 200),
                                       got: got.slice(0, 200) }
    }
`)

for (const [agents, edits] of [[1, 60], [2, 90], [3, 120], [5, 180]]) {
    check(`${agents} writer(s), ${edits} edits: every span agrees`, () => {
        const bad = run(`__disagreements(${agents}, ${edits})`)
        eq(bad.length, 0, `disagreed on ${bad.length} span(s), first: ${JSON.stringify(bad[0])}`)
    })
}

// dt's own histories never produced some of these -- across four generated
// histories, not one deletion ever landed at position 0, which is its own
// branch and exactly the sort a window gets wrong.
const BY_HAND = [
    ['a deletion at the very start',   'hello world', [{ kind: 'Del', agent: 'a', start: 0, end: 5 }]],
    ['deleting everything there is',   'hello',       [{ kind: 'Del', agent: 'a', start: 0, end: 5 }]],
    ['delete at the start, then fill', 'hello',       [{ kind: 'Del', agent: 'a', start: 0, end: 2 },
                                                       { kind: 'Ins', agent: 'b', start: 0, content: 'XY' }]],
    ['deleting what this span wrote',  'abc',         [{ kind: 'Ins', agent: 'a', start: 1, content: 'ZZ' },
                                                       { kind: 'Del', agent: 'b', start: 1, end: 3 }]],
    ['a delete straddling both',       'abcde',       [{ kind: 'Ins', agent: 'a', start: 1, content: 'X' },
                                                       { kind: 'Del', agent: 'b', start: 1, end: 3 }]],
    ['two deletions meeting',          'abcdef',      [{ kind: 'Del', agent: 'a', start: 2, end: 4 },
                                                       { kind: 'Del', agent: 'a', start: 1, end: 2 }]],
    ['deletions by different hands',   'abcdef',      [{ kind: 'Del', agent: 'a', start: 1, end: 3 },
                                                       { kind: 'Del', agent: 'b', start: 1, end: 2 }]],
    ['ops at both ends at once',       'abcdefghij',  [{ kind: 'Del', agent: 'a', start: 0, end: 1 },
                                                       { kind: 'Ins', agent: 'b', start: 8, content: 'Z' }]],
    ['an insert at the very end',      'abc',         [{ kind: 'Ins', agent: 'a', start: 3, content: 'd' }]],
    ['an insert into nothing',         '',            [{ kind: 'Ins', agent: 'a', start: 0, content: 'new' }]],
    ['no operations at all',           'abc',         []],
    ['an insert of nothing',           'abc',         [{ kind: 'Ins', agent: 'a', start: 1, content: '' }]],
    ['a pair deleted whole',           'a\u{1F642}b', [{ kind: 'Del', agent: 'a', start: 1, end: 2 }]],
    ['a pair inserted mid-string',     'ab',          [{ kind: 'Ins', agent: 'a', start: 1, content: '\u{1F642}\u{4E2D}' }]],
    ['a pair at position zero',        '\u{1F642}ab', [{ kind: 'Del', agent: 'a', start: 0, end: 1 }]],
    ['a family of joined code points', 'x\u{1F469}\u{200D}\u{1F469}\u{200D}\u{1F466}y',
                                                      [{ kind: 'Del', agent: 'a', start: 1, end: 2 }]],
]
for (const [name, text, ops] of BY_HAND) {
    check(`by hand: ${name}`, () => {
        engine.ctx.__t = text, engine.ctx.__o = ops
        eq(run('diff_from_ops(__t, __o)'), run('reference_diff_from_ops(__t, __o)'), 'the runs')
    })
}

check('one span shown this way is the span shown the old way', () => {
    // dt_diff_spans has to be a strict generalisation, or every single-span
    // view in the panel quietly changes meaning
    const bad = run(`(() => {
        var h = __history(3, 120), bad = []
        for (var i = 0; i < h.marks.length - 1; i++) {
            var to = h.marks[Math.min(h.marks.length - 1, i + 1 + (i % 5))]
            var one = JSON.stringify(dt_diff_spans(h.doc,
                [{ from_version: h.marks[i], to_version: to }]))
            var old = JSON.stringify(dt_diff_from(h.doc, h.marks[i], to))
            if (one !== old) bad.push(i)
        }
        return bad
    })()`)
    eq(bad.length, 0, `disagreed on ${bad.length} span(s), first at mark ${bad[0]}`)
})

check('two spans that meet say what the one span covering both says', () => {
    const bad = run(`(() => {
        var h = __history(3, 120), bad = []
        for (var i = 0; i + 8 < h.marks.length; i += 3) {
            var a = h.marks[i], mid = h.marks[i + 3], b = h.marks[i + 6]
            var split = JSON.stringify(dt_diff_spans(h.doc,
                [{ from_version: a, to_version: mid },
                 { from_version: mid, to_version: b }]))
            var whole = JSON.stringify(dt_diff_spans(h.doc,
                [{ from_version: a, to_version: b }]))
            if (split !== whole) bad.push(i)
        }
        return bad
    })()`)
    eq(bad.length, 0, `disagreed at ${bad.length} place(s), first at mark ${bad[0]}`)
})

check('what is left after the strikings is the document itself', () => {
    // The strong one. Spans with gaps between them only line up if the changes
    // in the gaps are applied too -- drop those and everything after them sits
    // at the wrong place, and this text stops matching.
    const bad = run(`(() => {
        var h = __history(3, 150), bad = []
        for (var i = 0; i + 12 < h.marks.length; i += 4) {
            var spans = [{ from_version: h.marks[i],     to_version: h.marks[i + 2] },
                         { from_version: h.marks[i + 6], to_version: h.marks[i + 8] },
                         { from_version: h.marks[i + 10], to_version: h.marks[i + 12] }]
            var shown = dt_diff_spans(h.doc, spans)
                .filter(r => r[0] !== -1).map(r => r[1]).join('')
            var real = h.doc.getStringAt(h.doc.remoteToLocalVersion(h.marks[i + 12]))
            if (shown !== real) bad.push({ i, shown: shown.slice(0, 60), real: real.slice(0, 60) })
        }
        return bad
    })()`)
    eq(bad.length, 0, `wrong text at ${bad.length} place(s): ${JSON.stringify(bad[0])}`)
})

check('a gap is applied but never called out', () => {
    // alice writes, bob writes in the gap, alice writes again
    const marks = run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'one ')
        var v0 = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(4, 'ALICE ')
        var v1 = d.getRemoteVersion().map(x => x.join('-')).sort()
        var b = new Doc('bob'); b.mergeBytes(d.toBytes()); b.ins(10, 'BOB ')
        d.mergeBytes(b.toBytes())
        var v2 = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(d.get().length, 'END')
        var v3 = d.getRemoteVersion().map(x => x.join('-')).sort()
        __d = d
        return [v0, v1, v2, v3]
    })()`)
    engine.ctx.__spans = [{ from_version: marks[0], to_version: marks[1] },
                          { from_version: marks[2], to_version: marks[3] }]
    const diff = run('dt_diff_spans(__d, __spans)')
    const by = w => diff.filter(r => r[0] === w).map(r => r[1]).join('')
    eq(by(1), 'ALICE END', "what the selected spans wrote")
    ok(by(0).includes('BOB '), `the gap's text is missing entirely: ${JSON.stringify(by(0))}`)
    eq(diff.filter(r => r[0] === 1 && r[2] === 'bob').length, 0,
       'the gap was called out as though it had been selected')
})

check('a gap that deletes still leaves the writing it took away on screen', () => {
    // Otherwise selecting the span that wrote something, but not the one that
    // removed it, shows no sign the writing ever happened
    const marks = run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'keep ')
        var v0 = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(5, 'ALICEWROTE ')                      // selected
        var v1 = d.getRemoteVersion().map(x => x.join('-')).sort()
        var b = new Doc('bob'); b.mergeBytes(d.toBytes())
        b.del(5, 11)                                  // the gap takes it away
        d.mergeBytes(b.toBytes())
        var v2 = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(d.get().length, 'END')                  // selected
        var v3 = d.getRemoteVersion().map(x => x.join('-')).sort()
        __d2 = d
        return [v0, v1, v2, v3]
    })()`)
    engine.ctx.__s2 = [{ from_version: marks[0], to_version: marks[1] },
                       { from_version: marks[2], to_version: marks[3] }]
    const diff = run('dt_diff_spans(__d2, __s2)')
    const struck = diff.filter(r => r[0] === -1)
    eq(struck.map(r => r[1]).join(''), 'ALICEWROTE ', 'what is shown struck through')
    eq(struck.map(r => r[2]), ['alice'],
       'struck in the wrong hand: it should be whoever wrote it, not who removed it')
    eq(diff.filter(r => r[0] !== -1).map(r => r[1]).join(''), 'keep END',
       'the document itself')
})

check('spans on branches that never met still line up', () => {
    // Asking across two concurrent frontiers lands on their merge, so the
    // running point has to take that in. Replacing it instead re-applies what
    // has already been applied, and the text comes out doubled.
    const out = run(`(() => {
        var a = new Doc('alice'); a.ins(0, 'base ')
        var forked = a.getRemoteVersion().map(x => x.join('-')).sort()
        var b = new Doc('bob'); b.mergeBytes(a.toBytes())
        a.ins(5, 'ALICE ')
        var a_tip = a.getRemoteVersion().map(x => x.join('-')).sort()
        b.ins(5, 'BOB ')
        var b_tip = b.getRemoteVersion().map(x => x.join('-')).sort()
        a.mergeBytes(b.toBytes())
        var merged = a.getRemoteVersion().map(x => x.join('-')).sort()
        var diff = dt_diff_spans(a, [{ from_version: forked, to_version: a_tip },
                                     { from_version: forked, to_version: b_tip }])
        return { shown: diff.filter(r => r[0] !== -1).map(r => r[1]).join(''),
                 real: a.getStringAt(a.remoteToLocalVersion(merged)),
                 marked: diff.filter(r => r[0] === 1).map(r => [r[1], r[2]]) }
    })()`)
    eq(out.shown, out.real, 'the text shown is not the document the two branches make')
    eq(out.marked.map(m => m[1]).sort(), ['alice', 'bob'], 'both branches called out')
})

check('a span after a concurrent one is placed against both branches', () => {
    // The running point has to take in every branch selected so far. Replacing
    // it with the last span's end drops the others, and the stretch after it
    // hands back work already applied -- which shows up as doubled text.
    const out = run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'base ')
        var v0 = d.getRemoteVersion().map(x => x.join('-')).sort()
        var b = new Doc('bob'); b.mergeBytes(d.toBytes())
        d.ins(5, 'A1 ')
        var v1 = d.getRemoteVersion().map(x => x.join('-')).sort()
        b.ins(5, 'B1 ')
        var vb = b.getRemoteVersion().map(x => x.join('-')).sort()
        d.mergeBytes(b.toBytes())
        var vm = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(d.get().length, 'A2')
        var v2 = d.getRemoteVersion().map(x => x.join('-')).sort()
        var diff = dt_diff_spans(d, [{ from_version: v0, to_version: v1 },
                                     { from_version: v0, to_version: vb },
                                     { from_version: vm, to_version: v2 }])
        return { shown: diff.filter(r => r[0] !== -1).map(r => r[1]).join(''),
                 real: d.getStringAt(d.remoteToLocalVersion(v2)) }
    })()`)
    eq(out.shown, out.real, 'the text shown is not the document those spans make')
    eq((out.shown.match(/A1/g) || []).length, 1, 'a branch was applied twice over')
})

// ------------------------------------- keeping the reader's place across views

console.log('\nkeeping the place the reader was looking at')

check('a place in unchanged text means the same place in the document', () => {
    // runs: "keep " kept, "NEW" added, " rest" kept
    const runs = [[0, 'keep ', null], [1, 'NEW', 'alice'], [0, ' rest', null]]
    engine.ctx.__r = runs
    eq(run('shown_to_document(__r, 0, true)'), 0, 'the very start')
    eq(run('shown_to_document(__r, 3, true)'), 3, 'inside the kept text')
    eq(run('shown_to_document(__r, 7, true)'), 7, 'inside the added text')
    eq(run('shown_to_document(__r, 10, true)'), 10, 'after it')
})

check('struck text is on the screen but not in the document', () => {
    // "keep " kept, "GONE" struck out, " rest" kept
    engine.ctx.__r = [[0, 'keep ', null], [-1, 'GONE', 'bob'], [0, ' rest', null]]
    eq(run('shown_to_document(__r, 5, true)'), 5, 'where the struck text begins')
    // Reading inside text that is gone: the place it was taken from
    eq(run('shown_to_document(__r, 7, true)'), 5, 'inside the struck text')
    eq(run('shown_to_document(__r, 9, true)'), 5, 'just past it')
    eq(run('shown_to_document(__r, 11, true)'), 7, 'two into the text after it')
})

check('and it is not on the screen at all with deletions turned off', () => {
    engine.ctx.__r = [[0, 'keep ', null], [-1, 'GONE', 'bob'], [0, ' rest', null]]
    // The struck run is never drawn, so it takes up none of what is shown
    eq(run('shown_to_document(__r, 6, false)'), 6, 'one into the text after it')
})

check('astral characters count as one place, not two', () => {
    // The documents count code points; a JS string counts utf-16 units
    engine.ctx.__r = [[0, 'a\u{1F642}b', null], [1, 'X', 'alice']]
    eq(run('shown_to_document(__r, 3, true)'), 3, 'past the pair')
    eq(run('cp_to_units("a\u{1F642}b", 2)'), 3, 'a code-point offset, in utf-16 units')
    eq(run('cp_to_units("abc", 2)'), 2, 'nothing to do without a pair')
})

check('a place moves along as the document is written into', () => {
    const out = run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'one two three')
        var v = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.ins(0, 'START ')                 // 6 written before the place
        d.ins(d.get().length, ' END')      // and some after it, which moves nothing
        return { at: xf_position(d, v, 4), text: d.get() }
    })()`)
    eq(out.at, 10, 'the place was not carried along by the writing before it')
    eq(out.text.slice(10, 13), 'two', 'and it is not on the same word')
})

check('and back again as text before it is taken away', () => {
    eq(run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'one two three')
        var v = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.del(0, 4)                        // "one " goes
        return xf_position(d, v, 4)
    })()`), 0, 'the place did not come back with the text')
})

check('a place swallowed by a deletion lands at the near edge of the hole', () => {
    eq(run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'one two three')
        var v = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.del(2, 8)                        // the place at 4 is inside this
        return xf_position(d, v, 4)
    })()`), 2, 'the place did not fall back to the edge')
})

check('nothing written since leaves the place where it was', () => {
    eq(run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'one two three')
        var v = d.getRemoteVersion().map(x => x.join('-')).sort()
        return xf_position(d, v, 7)
    })()`), 7, 'a place moved for no reason')
})

check('the two halves carry a place from the diff to the document now', () => {
    // The whole journey: halfway down a diff, out through what it is showing,
    // and on into the document the editor is about to put back on screen
    const out = run(`(() => {
        var d = new Doc('alice'); d.ins(0, 'alpha bravo charlie delta')
        var from = d.getRemoteVersion().map(x => x.join('-')).sort()
        d.del(6, 6)                           // "bravo " goes -- del takes a length
        var to = d.getRemoteVersion().map(x => x.join('-')).sort()
        var runs = dt_diff_from(d, from, to)
        d.ins(0, 'ZERO ')                     // and the world moves on
        // reading at "charlie" in the diff, which still shows "bravo " struck
        var shown = d.getStringAt(d.remoteToLocalVersion(from))
        var at_charlie_on_screen = shown.indexOf('charlie')
        var at = shown_to_document(runs, at_charlie_on_screen, true)
        return { doc_at_to: at, now: xf_position(d, to, at), text: d.get() }
    })()`)
    eq(out.doc_at_to, 6, 'in the document the span ends at')
    eq(out.text.slice(out.now, out.now + 7), 'charlie', 'the reader lost the word')
})

check('a window is only opened as far as the operations reach', () => {
    // The whole point: one edit in a long document should not take the
    // document apart to mark it up
    // An insert sits between two characters and takes none of them apart:
    // what it adds comes from the operation, not from the text
    eq(run(`touched_range(1000, [{kind:'Ins', agent:'a', start:400, content:'hi'}])`),
       [400, 400], 'an insert in the middle')
    // The ten characters going away have to be inside the window to be taken
    // out of it, and the one before them is written on with what they held
    eq(run(`touched_range(1000, [{kind:'Del', agent:'a', start:400, end:410}])`),
       [399, 410], 'a delete in the middle, plus the cell it writes on')
    eq(run(`touched_range(1000, [{kind:'Ins', agent:'a', start:1000, content:'x'}])`),
       [1000, 1000], 'an append reaches nothing at all')
    eq(run(`touched_range(1000, [])`), [0, 0], 'no operations')
})

check('but operations at both ends open it all the way', () => {
    // A single window has to span them, which is the shape that gains least
    // 989, not 990: the second insert is addressed against the text the first
    // one left, which is a character longer
    eq(run(`touched_range(1000, [{kind:'Ins', agent:'a', start:5, content:'x'},
                                 {kind:'Ins', agent:'b', start:990, content:'y'}])`),
       [5, 989], 'a window reaching both')
})

// -------------------------------------------------- the history view layout

console.log('\nthe history view lays out and virtualizes')

const panel = make_window()
check('panel.js loads', () => {
    load(panel.ctx, 'dt.js')
    load(panel.ctx, 'dt-helpers.js')
    load(panel.ctx, 'panel.js')
    ok(typeof panel.ctx.layout_history === 'function', 'layout_history is not defined')
    ok(typeof panel.ctx.render_history_window === 'function',
       'render_history_window is not defined')
})

// A long single-author run, with one fork partway through, plus one version
// whose content wraps over several lines.
const versions = []
for (let i = 0; i < 4000; i++) {
    let parents = i === 0 ? [] : [`alice-${i - 1}`]
    if (i === 2000) parents = ['alice-1998', 'bob-0']
    versions.push({ method: 'GET', version: [`alice-${i}`], parents,
                    patches: [{ unit: 'text', range: `${i}:${i}`, content: 'x' }] })
}
versions[3].patches = [{ unit: 'text', range: '3:3',
                         content: 'first line\nsecond line\n' + 'z'.repeat(400) }]
versions.splice(1999, 0, { method: 'GET', version: ['bob-0'], parents: ['alice-1997'],
                           patches: [{ unit: 'text', range: '5:9', content: '' }] })

panel.ctx.__vs = versions
const prun = js => vm.runInContext(js, panel.ctx)
prun(`function fill(n) { versions.length = 0; for (let i = 0; i < n; i++) versions.push(__vs[i]) }
      function append(a, b) { for (let i = a; i < b; i++) versions.push(__vs[i]) }
      function snapshot() {
          return JSON.stringify({ rows: layout.rows.length, height: layout.height,
              tops: layout.row_tops, circles: layout.circles, edges: layout.edges })
      }`)

const N = versions.length

check('it renders only the rows in the viewport', () => {
    prun(`fill(${N}); layout = null; layout_history(); render_history_window()`)
    const rows = panel.by_id['history_rows'].innerHTML
    const drawn = (rows.match(/data-vi=/g) || []).length
    ok(drawn > 0, 'nothing was drawn')
    ok(drawn < 150, `${drawn} rows drawn for ${N} versions, so it is not virtualizing`)
})

check('scrolling draws a different set of rows', () => {
    const first = panel.by_id['history_rows'].innerHTML
    panel.win.id_messages.scrollTop = 20000
    prun('render_history_window()')
    const later = panel.by_id['history_rows'].innerHTML
    ok(first !== later, 'the same rows were drawn after scrolling')
    panel.win.id_messages.scrollTop = 0
})

check('appending gives the same layout as building it all at once', () => {
    prun(`fill(${N}); layout = null; layout_history()`)
    const all_at_once = prun('snapshot()')

    prun(`fill(${N - 500}); layout = null; layout_history()`)
    prun(`append(${N - 500}, ${N}); layout_history()`)
    ok(prun('snapshot()') === all_at_once, 'a batch of 500 diverged from a full rebuild')

    prun(`fill(${N - 20}); layout = null; layout_history()`)
    for (let i = N - 20; i < N; i++) prun(`append(${i}, ${i + 1}); layout_history()`)
    ok(prun('snapshot()') === all_at_once, 'one at a time diverged from a full rebuild')
})

check('content wrapping makes a row taller, and moves the rows below it', () => {
    prun(`fill(${N}); layout = null; layout_history(); render_history_window()`)
    const rows = panel.by_id['history_rows'].innerHTML.split('<div data-vi=').slice(1)
    const tall = rows.find(r => r.includes('second line'))
    ok(tall, 'the multi-line version was not drawn')
    const height = +tall.match(/height:(\d+)px/)[1]
    const tops = rows.map(r => +(r.match(/top:(\d+)px/) || [0, 0])[1])
    ok(height > 100, `the wrapping row is only ${height}px tall`)
    ok(tall.includes('pre-wrap') && tall.includes('break-all'),
       'content is not set to wrap at the column edge')
    ok(tall.includes('first line\nsecond line'), 'newlines were not kept')
    for (let i = 1; i < tops.length; i++)
        ok(tops[i] > tops[i - 1], 'rows are not in increasing order down the page')
})

// ------------------------------------------------ selecting a span of time

console.log('\nselecting a span of time')

check('a span of one version is the degenerate case of a drag', () => {
    prun('span = null; select_span(7, 7)')
    eq(prun('[layout.vs[Math.min(span.a, span.b)].version[0], span.a === span.b]'),
       ['alice-7', true], '[version, single]')
})

check('rows carry no click handler, so their text can be selected', () => {
    prun(`fill(${N}); layout = null; layout_history(); render_history_window()`)
    const rows = panel.by_id['history_rows'].innerHTML
    ok(!rows.includes('cursor:pointer'), 'rows still look clickable')
    ok(!rows.includes('onclick'), 'rows still carry a click handler')
})

check('the band covers the version DAG and the identifiers beside it', () => {
    prun(`fill(${N}); layout = null; layout_history(); select_span(2, 6, true)`)
    const g = panel.by_id['history_gutter']
    ok(panel.by_id['history_band'].innerHTML.includes('background:rgba'),
       'no highlighter drawn')
    ok(g.innerHTML.includes('data-grip="body"'), 'no grips drawn')
    ok(g.innerHTML.includes('data-grip="top"') && g.innerHTML.includes('data-grip="bottom"'),
       'the two edge handles are missing')
    // The band fills the gutter, and the gutter reaches past the DAG to cover
    // the identifiers, which is also the region you can drag a span out of.
    const w = parseInt(g.style.width)
    ok(w === prun('layout.band_w'), `gutter is ${w}px, layout says ${prun('layout.band_w')}`)
    ok(w > prun('DAG_W'), `the gutter stops at the DAG (${w}px)`)
    ok(w <= prun('DAG_W + layout.cols.version'),
       'the gutter reaches past the identifiers into blank space')
})

check('the band spans exactly the selected versions', () => {
    prun('select_span(2, 6, true)')
    const band = panel.by_id['history_band'].innerHTML.match(/top:(\d+)px;\s*height:(\d+)px/)
    ok(band, 'could not read the band geometry')
    const [top, height] = [+band[1], +band[2]]
    eq([top, top + height],
       [prun('version_top(2)'), prun('version_bottom(6)')], '[band top, band bottom]')
})

check('a span selected backwards covers the same versions', () => {
    prun('select_span(6, 2)')
    const a = panel.by_id['history_band'].innerHTML.match(/top:(\d+)px;\s*height:(\d+)px/)
    prun('select_span(2, 6)')
    const b = panel.by_id['history_band'].innerHTML.match(/top:(\d+)px;\s*height:(\d+)px/)
    eq([a[1], a[2]], [b[1], b[2]], 'dragging up and dragging down')
})

check('a point on the page maps back to the version drawn there', () => {
    for (const vi of [0, 3, 50, 1999, 2500]) {
        const top = prun(`version_top(${vi})`), bot = prun(`version_bottom(${vi})`)
        eq(prun(`version_at(${(top + bot) / 2})`), vi, `middle of version ${vi}`)
        eq(prun(`version_at(${top})`), vi, `top edge of version ${vi}`)
    }
})

check('the cursor keeps its meaning while a span is being drawn', () => {
    prun('select_span(2, 6)')
    prun(`drag = { mode: 'edge', cursor: 'ns-resize', anchor: 2, y: 0 }`)
    prun('render_history_window()')
    const g = panel.by_id['history_gutter']
    eq(g.style.cursor, 'ns-resize', 'gutter cursor while drawing a span')
    ok(!/cursor:(grab|ns-resize)"/.test(g.innerHTML),
       'a grip talks over the cursor of the drag in progress')
    prun('drag = null; render_history_window()')
})

check('pressing on a span closes the hand before any movement', () => {
    prun('select_span(2, 6)')
    const g = panel.by_id['history_gutter']
    eq(g.style.cursor, 'ns-resize', 'before the press')
    ok(g.innerHTML.includes('cursor:grab'), 'the span should offer a hand to take')
    // press on the body, with no mousemove following
    const top = prun('version_top(2)')
    panel.by_id['history_gutter'].onmousedown({
        clientY: top + 4, preventDefault() {}, target: { dataset: { grip: 'body' } },
    })
    eq(g.style.cursor, 'grabbing', 'the hand did not close on mousedown')
    ok(!g.innerHTML.includes('cursor:grab'), 'a grip still offers the open hand')
    prun('drag = null; document.body.style.cursor = ""; render_history_window()')
})

check('the cursor of a finished drag does not stay on screen', () => {
    prun('select_span(2, 6)')
    // slide the whole span, which is the one gesture that closes the hand
    prun(`drag = { mode: 'move', cursor: 'grabbing', from: 4, y: 0, a: 2, b: 6 }`)
    prun('render_history_window()')
    eq(panel.by_id['history_gutter'].style.cursor, 'grabbing', 'mid-drag')
    prun('drag = null; render_history_window()')
    const g = panel.by_id['history_gutter']
    eq(g.style.cursor, 'ns-resize', 'after the drag ends')
    ok(g.innerHTML.includes('cursor:grab'), 'the span offers no hand once released')
    ok(!g.innerHTML.includes('cursor:inherit'), 'grips still deferring to a dead drag')
})

check('the cursors say what each part of the band does', () => {
    prun('select_span(2, 6, true)')
    const g = panel.by_id['history_gutter']
    // Drawing a span, and moving either edge, is the window-border gesture.
    // The hand is kept for sliding a whole span, which really is picking
    // something up.
    prun('select_span(null, null); render_history_window()')
    eq(panel.by_id['history_gutter'].style.cursor, 'ns-resize', 'empty gutter cursor')
    prun('select_span(2, 6); render_history_window()')
    ok(panel.by_id['history_gutter'].innerHTML.includes('cursor:grab'),
       'a selected span offers no hand to move it')
    ok(g.innerHTML.includes('cursor:grab'), 'the band body is not grabbable')
    ok((g.innerHTML.match(/cursor:ns-resize/g) || []).length === 2,
       'both edges should resize')
})

// --------------------------------------------------------- time travel line

console.log('\ntime travelling with the scroll')

// A stand-in for the panel's own copy of the document, which the real panel
// builds from the history the page sends it.
prun(`dt_doc = { getStringAt: lv => 'text@' + lv, remoteToLocalVersion: v => v[0] }`)
prun('__doc = dt_doc')

check('the line stays hidden until it is switched on', () => {
    prun('select_span(null, null)')
    panel.win.id_time_travel.checked = false
    prun('update_time_travel()')
    eq(panel.by_id['history_line'].style.display, 'none', 'line display')
})

check('switching it on puts the line across the middle of the view', () => {
    panel.win.id_time_travel.checked = true
    prun('update_history_controls()')
    panel.win.id_messages.scrollTop = 4000
    prun('update_time_travel()')
    eq(panel.by_id['history_line'].style.display, 'block', 'line display')
    eq(panel.by_id['history_line'].style.top,
       (4000 + panel.win.id_messages.clientHeight / 2) + 'px', 'line position')
})

check('the version under the line is the one being shown', () => {
    panel.win.id_messages.scrollTop = 4000
    prun('update_time_travel()')
    const mid = 4000 + panel.win.id_messages.clientHeight / 2
    const vi = prun(`version_at(${mid})`)
    eq(prun('travelling_vi'), vi, 'version under the line')
    eq(prun('[Math.min(span.a, span.b), Math.max(span.a, span.b)]'), [vi, vi],
       'the span should be the single version under the line')
})

check('scrolling moves to a different version', () => {
    panel.win.id_messages.scrollTop = 4000
    prun('update_time_travel()')
    const before = prun('travelling_vi')
    panel.win.id_messages.scrollTop = 30000
    prun('update_time_travel()')
    ok(prun('travelling_vi') !== before, 'the same version after scrolling 26,000px')
})

check('raw messages turns time travel off', () => {
    panel.win.id_raw_messages.checked = true
    prun('update_time_travel()')
    eq(panel.by_id['history_line'].style.display, 'none', 'line display')
    eq(prun('travelling_vi'), null, 'the line is still following a version')
    panel.win.id_raw_messages.checked = false
    panel.win.id_time_travel.checked = false
})

check('raw messages lets go of the span and greys what acts on one', () => {
    prun('select_span(10, 20)')
    panel.win.id_raw_messages.checked = true
    prun('update_history_controls()')
    eq(prun('span'), null, 'a span nobody can see or adjust')
    for (const box of ['id_time_travel', 'id_show_deletions'])
        ok(panel.win[box].disabled, `${box} is still live`)
    eq(panel.win.id_show_deletions_label.style.opacity, 0.4, 'the label still reads as live')

    panel.win.id_raw_messages.checked = false
    prun('update_history_controls()')
    for (const box of ['id_time_travel', 'id_show_deletions'])
        ok(!panel.win[box].disabled, `${box} stayed grey`)
})

check('placing a span by hand takes the job off the line', () => {
    panel.win.id_time_travel.checked = true
    prun('travelling_vi = null; update_time_travel()')
    ok(prun('span') !== null, 'the line should have placed a span')
    prun('select_span(10, 20)')
    eq([panel.win.id_time_travel.checked, panel.win.id_time_travel.disabled],
       [false, false], '[checked, disabled]')
    eq(prun('[span.a, span.b]'), [10, 20], 'the hand-placed span')
})

check('switching the line on takes the span back', () => {
    prun('select_span(10, 20)')
    panel.win.id_time_travel.checked = true
    prun('toggle_time_travel()')
    eq(prun('span.a === span.b'), true, 'the line should hold a single version')
    eq(prun('span.a'), prun('travelling_vi'), 'and it should be the one it crosses')
    panel.win.id_time_travel.checked = false
    prun('update_time_travel()')
})

check('switching the line off lets go of the span it held', () => {
    panel.win.id_time_travel.checked = true
    prun('travelling_vi = null; update_time_travel()')
    ok(prun('span') !== null, 'the line should have placed a span')
    panel.win.id_time_travel.checked = false
    prun('toggle_time_travel()')
    eq(prun('span'), null, 'the span outlived the line')
})

check('a span placed by hand outlives the line being redrawn', () => {
    prun('select_span(10, 20)')
    prun('update_time_travel()')
    eq(prun('[span.a, span.b]'), [10, 20], 'the hand-placed span')
})

// ------------------------------------------------ more than one span at once

console.log('\nseveral spans can be held at once')

check('adding a span keeps the ones already selected', () => {
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    prun('drag = null; select_span(4, 6); add_span(20, 22)')
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 6], [20, 22]], 'what is selected')
})

check('a drag moves the one it holds and leaves the rest alone', () => {
    prun('drag_span(20, 30)')
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 6], [20, 30]], 'the others moved too')
})

check('a plain selection replaces all of them', () => {
    prun('select_span(1, 2)')
    eq(prun('spans.map(s => [s.a, s.b])'), [[1, 2]], 'the old spans survived')
})

check('and selecting nothing drops them all', () => {
    prun('select_span(4, 6); add_span(20, 22); select_span(null)')
    eq(prun('spans.length'), 0, 'something stayed selected')
    eq(prun('span'), null, 'the active span outlived the selection')
})

check('spans that overlap are one span', () => {
    eq(prun('coalesce([{a:4,b:8},{a:6,b:12}]).map(s => [s.a, s.b])'), [[4, 12]], 'overlapping')
})

check('and so are spans that merely touch', () => {
    // [4,6] and [7,9] leave no version standing between them, so they cover
    // exactly the stretch [4,9] does
    eq(prun('coalesce([{a:4,b:6},{a:7,b:9}]).map(s => [s.a, s.b])'), [[4, 9]], 'touching')
})

check('but a span with one left between them is still two', () => {
    eq(prun('coalesce([{a:4,b:6},{a:8,b:9}]).map(s => [s.a, s.b])'), [[4, 6], [8, 9]], 'apart')
})

check('running them together does not care what order they were picked in', () => {
    eq(prun('coalesce([{a:20,b:22},{a:4,b:6},{a:21,b:30}]).map(s => [s.a, s.b])'),
       [[4, 6], [20, 30]], 'out of order')
    eq(prun('coalesce([{a:9,b:4}]).map(s => [s.a, s.b])'), [[4, 9]], 'dragged upwards')
})

check('letting go of a drag runs the ones that met into one', () => {
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    prun('drag = null; select_span(4, 6); add_span(20, 22)')
    // Grabbing its top grip anchors the far end at 22 and takes the near one
    // up over the first span
    prun('drag_span(22, 5)')
    eq(prun('spans.length'), 2, 'they should not merge until the drag ends')
    eq(prun('bloop_spans()'), true, 'nothing was run together')
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 22]], 'what is left')
})

check('and the one being held stays the one being held', () => {
    // A second drag has to carry on with the span that swallowed the first,
    // rather than with one of the others
    eq(prun('[span.a, span.b]'), [4, 22], 'the active span')
    eq(prun('spans[spans.length - 1] === span'), true, 'the active span is not last')
})

check('two bands that have met are drawn as one', () => {
    prun('drag = null; select_span(4, 6); add_span(7, 9); render_history_window()')
    eq(prun(`document.getElementById('history_band').innerHTML`).split('<div').length - 1, 1,
       'a border was ruled through the middle of one selection')
})

check('but two that have not are drawn apart', () => {
    prun('drag = null; select_span(4, 6); add_span(20, 22); render_history_window()')
    eq(prun(`document.getElementById('history_band').innerHTML`).split('<div').length - 1, 2,
       'two separate selections were drawn as one')
    prun('select_span(null); render_history_window()')
})

check('the page is asked about the union, never the overlap', () => {
    // Overlapping spans would ask it to step backwards between them, which is
    // not a stretch of history at all
    const heard = []
    panel.ctx.__rec2 = { postMessage: m => heard.push(m) }
    prun('backgroundConnection = __rec2')
    prun('drag = null; select_span(4, 10); add_span(8, 14); last_diff = null; send_span_diff()')
    const m = heard.filter(m => m.cmd === 'show_diff').pop()
    eq(m.spans.length, 1, 'the page was asked about two overlapping stretches')
    eq('' + m.spans[0].to_version, 'alice-14', 'the far end of the union')
    prun('select_span(null)')
})

check('a selection that outlives its layout says nothing, rather than throwing', () => {
    // A frame passes between asking for a diff and working it out, and a
    // resize or an empty sync throws the layout away in between
    const heard = []
    panel.ctx.__rec3 = { postMessage: m => heard.push(m) }
    prun('backgroundConnection = __rec3')
    prun('drag = null; select_span(4, 6)')
    heard.length = 0
    prun('layout = null; last_diff = null; send_span_diff()')
    eq(heard.length, 0, 'it described rows that were not there')
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
})

check('a span hanging off the end of a shorter history is brought back in', () => {
    prun('drag = null; select_span(1990, 2500)')
    const heard = []
    panel.ctx.__rec4 = { postMessage: m => heard.push(m) }
    prun('backgroundConnection = __rec4; last_diff = null; send_span_diff()')
    const m = heard.filter(m => m.cmd === 'show_diff').pop()
    ok(m, 'the page was told nothing at all')
    // The last row is the imaginary tip the layout draws, so the far end lands
    // on the leaves it gathers -- which is where the document actually stands
    const tip = prun(`(() => { let v = layout.vs[layout.vs.length - 1]
        return '' + (v.version === 'final merge' ? v.parents : v.version) })()`)
    eq('' + m.spans[0].to_version, tip, 'the far end was not brought back in')
    prun('select_span(null)')
})

check('losing the port lets go of it, so nothing posts to a dead one', () => {
    // `?.postMessage` asks whether there is a port, not whether it still
    // works, and the background is an event page that disconnects when it dozes
    const was = panel.win.chrome.runtime.connect
    let disconnect = null, alive = true
    panel.win.chrome.runtime.connect = () => ({
        postMessage() { if (!alive) throw new Error('Attempt to postMessage on disconnected port') },
        onMessage: { addListener() { } },
        onDisconnect: { addListener: fn => (disconnect = fn) },
    })
    prun('connect()')
    ok(disconnect, 'nothing was listening for the port going away')

    alive = false
    disconnect()
    eq(prun('backgroundConnection'), null, 'the dead port was held on to')
    prun('drag = null; select_span(4, 6); last_diff = null; send_span_diff()')

    panel.win.chrome.runtime.connect = was
    panel.ctx.__rec5 = { postMessage() { } }
    prun('select_span(null); backgroundConnection = __rec5')
})

// Driving the mouse over the gutter, press to release
const press = (y, o = {}) => panel.by_id.history_gutter.onmousedown({
    clientY: y, preventDefault() { },
    target: { dataset: o.grip ? { grip: o.grip, span: '' + o.span } : {} },
    ctrlKey: !!o.mod, metaKey: !!o.mod,
})
const move = y => (panel.listening.mousemove ?? []).forEach(fn => fn({ clientY: y }))
const release = () => (panel.listening.mouseup ?? []).forEach(fn => fn())
const mid = vi => (prun(`version_top(${vi})`) + prun(`version_bottom(${vi})`)) / 2

check('the modifier is ctrl here, and cmd alone is not mistaken for it', () => {
    // `ctrlKey || metaKey` would read every mac ctrl-click -- which is a
    // synthetic right-click -- as an add, and open the context menu with it
    eq(prun('MAC'), false, 'the platform these tests run as')
    eq(prun('adding_to_selection({ ctrlKey: true, metaKey: false })'), true, 'ctrl')
    eq(prun('adding_to_selection({ ctrlKey: false, metaKey: true })'), false, 'cmd alone')
})

check('the modifier clicked on a span takes that one out, on release', () => {
    // Not on the press: moving from there carves instead, and the two have to
    // be told apart before anything is taken away
    prun('drag = null; select_span(4, 6); add_span(20, 22); add_span(30, 31)')
    press(mid(21), { mod: true, grip: 'body', span: 1 })
    eq(prun('spans.length'), 3, 'it went before the mouse came up')
    release()
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 6], [30, 31]], 'the wrong span went')
})

check('and it finds the span by what is under the mouse, with no grip hit', () => {
    // The rows have gaps between them, and a press in one still means the span
    prun('drag = null; select_span(4, 6); add_span(20, 22)')
    press(prun('version_top(21)') + 1, { mod: true })
    release()
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 6]], 'the span under the mouse stayed')
})

check('taking one out leaves no drag running', () => {
    eq(prun('drag'), null, 'a drag was left running')
})

check('taking the last one out leaves nothing selected', () => {
    prun('drag = null; select_span(4, 6)')
    press(mid(5), { mod: true, grip: 'body', span: 0 })
    release()
    eq(prun('spans.length'), 0, 'something stayed selected')
    eq(prun('span'), null, 'the active span outlived the selection')
})

check('dragging from inside a span carves a hole through it', () => {
    // The only way to ask for a run of history with a piece left out
    prun('drag = null; select_span(4, 20)')
    press(mid(8), { mod: true, grip: 'body', span: 0 })
    move(mid(12))
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 7], [13, 20]], 'the hole')
    release()
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 7], [13, 20]], 'letting go changed it')
})

check('and the two ends it leaves do not run back together', () => {
    // They have a version standing between them, so they are really two
    eq(prun('coalesce(spans).length'), 2, 'the hole closed up again')
})

check('a carve follows the mouse back, rather than eating as it goes', () => {
    // Worked out afresh from the spans as they stood when the press began. Had
    // each move taken another bite, dragging back would leave the whole stretch
    // gone instead of just the version it was pressed on.
    prun('drag = null; select_span(4, 20)')
    press(mid(8), { mod: true, grip: 'body', span: 0 })
    move(mid(12))
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 7], [13, 20]], 'dragged down')
    move(mid(8))
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 7], [9, 20]], 'dragged back again')
    release()
})

check('a carve crosses whatever is in its way, gaps and all', () => {
    prun('drag = null; select_span(4, 8); add_span(12, 16); add_span(20, 24)')
    press(mid(6), { mod: true, grip: 'body', span: 0 })
    move(mid(22))
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 5], [23, 24]],
       'it stopped at the first span instead of crossing them all')
    release()
})

check('carving everything selected leaves nothing', () => {
    prun('drag = null; select_span(4, 8); add_span(12, 16)')
    press(mid(4), { mod: true, grip: 'body', span: 0 })
    move(mid(16))
    release()
    eq(prun('spans.length'), 0, 'something survived')
    eq(prun('span'), null, 'the active span outlived the selection')
})

check('a carve draws no band chasing the mouse', () => {
    // There is no span following it -- what the mouse is doing is taking
    // versions away, and the bands show that by getting shorter
    prun('drag = null; select_span(4, 20); render_history_window()')
    press(mid(8), { mod: true, grip: 'body', span: 0 })
    move(mid(12))
    prun('render_history_window()')
    const tops = [...prun(`document.getElementById('history_band').innerHTML`)
        .matchAll(/[;"]top:(-?[\d.]+)px/g)].map(m => Number(m[1]))
    eq(tops, [prun('version_top(4)'), prun('version_top(13)')],
       'the bands are not sitting on the versions that survived the carve')
    release()
    prun('select_span(null); render_history_window()')
})

check('the modifier on empty gutter still adds one, ready to be dragged out', () => {
    prun('drag = null; select_span(4, 6)')
    press(prun('version_top(40)') + 1, { mod: true })
    eq(prun('spans.map(s => [s.a, s.b])'), [[4, 6], [40, 40]], 'what is selected')
    ok(prun('drag && drag.mode') === 'edge', 'the new span cannot be dragged out')
    prun('drag = null; select_span(null)')
})

check('the page is told about every span, in the order history has them', () => {
    // Picked out of order on purpose: the stack should still read downwards
    const heard = []
    panel.ctx.__rec = { postMessage: m => heard.push(m) }
    prun('backgroundConnection = __rec')
    prun('select_span(20, 22); add_span(4, 6)')
    prun('last_diff = null; send_span_diff()')
    const m = heard.filter(m => m.cmd === 'show_diff').pop()
    ok(m, 'the page was told nothing')
    eq(m.spans.length, 2, 'how many spans were sent')
    eq(m.spans.map(s => '' + s.to_version), ['alice-6', 'alice-22'], 'the order they were sent in')
})

check('every version in every span is labelled', () => {
    panel.win.id_messages.scrollTop = 0
    prun('select_span(4, 6); add_span(9, 10); render_history_window()')
    const html = prun(`document.getElementById('history_rows').innerHTML`)
    const badged = v => html.includes(`>alice-${v}</span>`)
    eq([4, 5, 6, 9, 10].map(badged), [true, true, true, true, true], 'a span went unlabelled')
    eq([3, 7, 8, 11].map(badged), [false, false, false, false], 'labelling escaped the spans')
})

check('each span gets its own band and its own grips', () => {
    const bands = prun(`document.getElementById('history_band').innerHTML`)
    eq(bands.split('<div').length - 1, 2, 'one band per span')
    const grips = prun(`document.getElementById('history_gutter').innerHTML`)
    eq(grips.split('data-span="0"').length - 1, 3, 'the first span has three grips')
    eq(grips.split('data-span="1"').length - 1, 3, 'the second span has three grips')
    prun('select_span(null); render_history_window()')
})

// ------------------------------------------------- what a drag looks like

console.log('\nthe drag bar answers to the mouse')

const band_style = () => prun(`document.getElementById('history_band').innerHTML`)
const px = (style, prop) => Number(style.match(new RegExp(prop + ':(-?[\\d.]+)px'))[1])

check('at rest the bar sits on the selection, snapped to whole versions', () => {
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    prun('drag = null; select_span(5, 7)')
    prun('render_history_window()')
    const s = band_style()
    eq(px(s, 'top'), prun('version_top(5)'), 'the top of the band')
    eq(px(s, 'height'), prun('version_bottom(7)') - prun('version_top(5)'), 'its height')
})

check('dragging an edge downwards takes the bottom of the bar to the mouse', () => {
    // Snapping it to the version under the mouse is what made it lag behind
    prun('select_span(5, 5)')
    prun(`drag = { mode: 'edge', cursor: 'ns-resize', anchor: 5,
                   y: version_top(5) + 400 }`)
    prun('render_history_window()')
    const s = band_style()
    eq(px(s, 'top'), prun('version_top(5)'), 'the anchored end moved')
    eq(px(s, 'height'), 400, 'the dragged end is not under the mouse')
})

check('a drag that has not left its version still holds all of it', () => {
    // Otherwise pressing down mid-version draws a sliver, and the bar says
    // less is selected than really is
    prun('select_span(5, 5)')
    prun(`drag = { mode: 'edge', cursor: 'ns-resize', anchor: 5,
                   y: (version_top(5) + version_bottom(5)) / 2 }`)
    prun('render_history_window()')
    const s = band_style()
    eq(px(s, 'top'), prun('version_top(5)'), 'the bar started below the version')
    eq(px(s, 'height'), prun('version_bottom(5)') - prun('version_top(5)'),
       'the bar covered only part of the version it holds')
})

check('and dragging it upwards takes the top there instead', () => {
    prun(`drag = { mode: 'edge', cursor: 'ns-resize', anchor: 5,
                   y: version_top(5) - 300 }`)
    prun('render_history_window()')
    const s = band_style()
    eq(px(s, 'top'), prun('version_top(5)') - 300, 'the dragged end')
    eq(px(s, 'height'), prun('version_bottom(5)') - prun('version_top(5)') + 300, 'its height')
})

check('sliding the whole span moves the bar by what the mouse moved', () => {
    prun('select_span(5, 7)')
    prun(`drag = { mode: 'move', cursor: 'grabbing', from: 5, a: 5, b: 7,
                   y0: version_top(5), y: version_top(5) + 37 }`)
    prun('render_history_window()')
    eq(px(band_style(), 'top'), prun('version_top(5)') + 37, 'the bar lagged the mouse')
    prun('drag = null; select_span(null); render_history_window()')
})

// ------------------------------------------- keeping the rows lined up

console.log('\nthe inverse-video label leaves the row where it was')

check('every bit of padding it takes, it gives back', () => {
    // The label would otherwise sit further right, and lower, than the plain
    // ones on the rows around it
    panel.win.id_messages.scrollTop = 0
    prun(`fill(2000); layout = null; layout_history()
          travelling_vi = 5; render_history_window(); travelling_vi = null`)
    const html = prun(`document.getElementById('history_rows').innerHTML`)
    const badge = html.match(/<span style="background:oklch[^"]*"/)?.[0]
    ok(badge, 'no inverse-video label was drawn')

    const pad = badge.match(/padding:(\d+)px (\d+)px/)
    const mar = badge.match(/margin:0 -(\d+)px/)
    ok(pad && mar, `label declares no padding/margin pair: ${badge}`)
    eq(mar[1], pad[2], 'the horizontal padding is not given back')
})

check('and the column around it makes room without moving either', () => {
    // The column clips what leaves it, so the label needs the room to exist
    // before it can paint into it
    const html = prun(`document.getElementById('history_rows').innerHTML`)
    const col = html.match(/<div style="width:\d+px;flex:none;color:oklch[^"]*"/)?.[0]
    ok(col, 'no version column was drawn')
    const pad = col.match(/padding:(\d+)px (\d+)px/)
    const mar = col.match(/margin:-(\d+)px -(\d+)px/)
    ok(pad && mar, `column declares no padding/margin pair: ${col}`)
    eq([mar[1], mar[2]], [pad[1], pad[2]], 'the column padding is not given back')
})

check('every version the span settled on is labelled that way', () => {
    // The blue bar is off answering the mouse, so this is what says which
    // versions were actually caught
    panel.win.id_messages.scrollTop = 0
    prun(`fill(2000); layout = null; layout_history()
          drag = null; select_span(4, 6); render_history_window()`)
    const html = prun(`document.getElementById('history_rows').innerHTML`)
    const badged = v => html.includes(`>alice-${v}</span>`)
    eq([4, 5, 6].map(badged), [true, true, true], 'the span is not all labelled')
    eq([3, 7].map(badged), [false, false], 'labelling reached outside the span')
    prun('select_span(null); render_history_window()')
})

check('the label is thickened by stroke, not by a heavier weight', () => {
    // A bold weight is wider, and every wrapped line count was measured
    // against the weight the text is drawn in
    panel.win.id_messages.scrollTop = 0
    prun(`fill(2000); layout = null; layout_history()
          drag = null; select_span(5, 5); render_history_window()`)
    const html = prun(`document.getElementById('history_rows').innerHTML`)
    const badge = html.match(/<span style="background:oklch[^"]*"/)?.[0]
    ok(/-webkit-text-stroke/.test(badge), `label is not stroked: ${badge}`)
    ok(!/font-weight/.test(badge), `label sets a font-weight: ${badge}`)
})

// A page arriving: the panel is told a history from scratch. These leave it
// holding an empty one, so each puts the long history back first.
const a_page_loads = () => prun(`fill(2000); layout = null; layout_history()
    render_history_window()
    add_message({ action: 'init', fresh: true, versions: [], raw_messages: [], get_failed: '' })`)

// The same page describing itself again, which is what a panel reconnecting
// asks it to do. Same words, no `fresh`.
const the_page_says_it_again = () => prun(`add_message({ action: 'init',
    versions: __vs.slice(0, 2000), raw_messages: [], get_failed: '' })`)

check('a new page is not shown the span selected on the last one', () => {
    // The span names versions by their place in the history, and a reload or
    // a new url replaces that history wholesale
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    prun('select_span(10, 20)')
    a_page_loads()
    eq(prun('span'), null, 'the span survived the page it was chosen on')
})

check('but the panel reconnecting is not a new page, and keeps it', () => {
    // A devtools port comes and goes on its own schedule. Treating each return
    // as a page load dropped the span and drew it again, which the page saw as
    // a flicker every time -- roughly every thirty seconds, for days.
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    prun('select_span(10, 20)')
    the_page_says_it_again()
    eq(prun('[span.a, span.b]'), [10, 20], 'the span was dropped')
})

check('but the time-travel line is a setting, and stays on across one', () => {
    prun(`fill(2000); layout = null; layout_history(); render_history_window()`)
    panel.win.id_time_travel.checked = true
    prun('travelling_vi = null; update_time_travel()')
    ok(prun('span') !== null, 'the line should have placed a span to be cleared')

    a_page_loads()
    ok(panel.win.id_time_travel.checked, 'the line switched itself off')
    panel.win.id_time_travel.checked = false
    prun('update_time_travel()')
})

// Put the long history back for the tests that come after
prun(`fill(2000); layout = null; layout_history(); render_history_window()`)

check('dropping the deleted runs leaves the text at the end of the span', () => {
    const r = run(`(() => {
        let a = new Doc('alice'); a.ins(0, 'hello')
        let at = a.getRemoteVersion().map(x => x.join('-')).sort()
        let b = new Doc('bob'); b.mergeBytes(a.toBytes())
        b.ins(5, ' world'); a.mergeBytes(b.toBytes())
        a.del(0, 5)
        return [dt_diff_from(a, at).filter(x => x[0] !== -1).map(x => x[1]).join(''),
                a.get()]
    })()`)
    eq(r[0], r[1], 'the diff without deletions should equal the document itself')
})

check('a diff says who made each change', () => {
    const d = run(`(() => {
        let a = new Doc('alice'); a.ins(0, 'hello')
        let at = a.getRemoteVersion().map(x => x.join('-')).sort()
        let b = new Doc('bob'); b.mergeBytes(a.toBytes())
        b.ins(5, ' world'); a.mergeBytes(b.toBytes())
        a.del(0, 5)                      // alice removes "hello"
        return dt_diff_from(a, at)
    })()`)
    const added = d.filter(x => x[0] === 1)
    const gone = d.filter(x => x[0] === -1)
    eq(added.map(x => [x[1], x[2]]), [[' world', 'bob']], 'bob added " world"')
    // A deletion is attributed to whoever removed it, not whoever wrote it
    eq(gone.map(x => [x[1], x[2]]), [['hello', 'alice']], 'alice removed "hello"')
})

check('runs by the same author collapse into one entry', () => {
    const d = run(`(() => {
        let d = new Doc('a'); d.ins(0, 'x')
        let at = d.getRemoteVersion().map(v => v.join('-')).sort()
        d.ins(1, 'abcdef')
        return dt_diff_from(d, at)
    })()`)
    eq(d.filter(x => x[0] === 1).length, 1, 'six characters by one author should be one run')
})

check('a diff marks insertions and deletions the right way round', () => {
    // -1 removed, 0 untouched, 1 added
    const d = run(`(() => {
        let doc = new Doc('a')
        doc.ins(0, 'hello world')
        let at = doc.getRemoteVersion().map(x => x.join('-')).sort()
        doc.del(5, 6)              // drop " world"
        doc.ins(5, '!')            // add "!"
        return dt_diff_from(doc, at)
    })()`)
    const by = st => d.filter(x => x[0] === st).map(x => x[1]).join('')
    eq(by(1), '!', 'added text')
    eq(by(-1), ' world', 'removed text')
    eq(by(0), 'hello', 'untouched text')
})

// ------------------------------------ reading a history that is not dt's

console.log('\na straight-line history replays into the same kind of diff')

// content-script.js reads these histories itself, since the merge types that
// send them do not have a document to ask.
const page = make_window()
check('content-script.js loads', () => {
    load(page.ctx, 'content-script.js')
    load(page.ctx, 'dt-helpers.js')
    load(page.ctx, 'myers-diff1.js')
    ok(typeof page.ctx.replay_diff === 'function', 'replay_diff is not defined')
})

const crun = js => vm.runInContext(js, page.ctx)
const body = (v, text) => ({ version: [v], patches: [{ unit: 'body', range: '', content: text }] })
const edit = (v, parents, patches) =>
    ({ version: [v], parents, patches: patches.map(p => ({ unit: 'text', ...p })) })

// What a simpleton client is sent: a snapshot to start on, then patches.
page.ctx.__simpleton = [
    body('server-0', 'hello'),
    edit('alice-3', ['server-0'], [{ range: '[5:5]', content: ' world' }]),
    edit('bob-9', ['alice-3'], [{ range: '[0:1]', content: 'H' }]),
]

check('one update says what that one edit did', () => {
    eq(crun(`replay_diff(__simpleton, ['server-0'], ['alice-3'])`),
       [[0, 'hello', null], [1, ' world', 'alice']], 'alice appended " world"')
})

check('a span says what all of its updates did', () => {
    const d = crun(`replay_diff(__simpleton, ['server-0'], ['bob-9'])`)
    const by = st => d.filter(x => x[0] === st).map(x => [x[1], x[2]])
    eq(by(1), [['H', 'bob'], [' world', 'alice']], 'added text and who added it')
    eq(by(-1), [['h', 'bob']], 'bob lowered the h by replacing it')
    eq(by(0), [['ello', null]], 'untouched text')
})

check('a span starts from the text as it stood before it', () => {
    eq(crun(`replay_diff(__simpleton, ['alice-3'], ['bob-9']).map(x => x[1]).join('')`),
       'hHello world', 'the deleted h, then the text bob left behind')
})

check('several patches in one update shift each other along', () => {
    page.ctx.__multi = [
        body('server-0', 'abcdef'),
        edit('alice-1', ['server-0'], [{ range: '[1:2]', content: '' },
                                       { range: '[4:4]', content: 'XY' }]),
    ]
    eq(crun(`replay_diff(__multi, ['server-0'], ['alice-1'])
                 .filter(x => x[0] !== -1).map(x => x[1]).join('')`),
       'acdXYef', 'both patches read against the text before the update')
})

check('a snapshot feed is diffed against the snapshot before it', () => {
    page.ctx.__snapshots = [body('a-0', 'cat'), body('b-1', 'cart'), body('c-2', 'cars')]
    eq(crun(`replay_diff(__snapshots, ['a-0'], ['b-1'])`),
       [[0, 'ca', null], [1, 'r', 'b'], [0, 't', null]], 'b inserted the r')
    const d = crun(`replay_diff(__snapshots, ['a-0'], ['c-2'])`)
    eq(d.filter(x => x[0] === -1).map(x => [x[1], x[2]]), [['t', 'c']], 'c removed the t')
})

// The patches a simpleton client is sent are dt's own, transformed into that
// client's line of time. Replaying them has to land on the text dt itself
// holds, or this view is reading a history differently from the document that
// wrote it.
check("replaying dt's transformed patches lands on dt's own text", () => {
    ok(engine_ready, 'the wasm did not initialize')
    // A server merging two peers who keep colliding, telling one client about
    // everything it has not seen since the last time it was told.
    const out = run(`(() => {
        let server = new Doc('server'), a = new Doc('alice'), b = new Doc('bob')
        let updates = [], n = 0
        let words = ['the ', 'quick ', 'brown ', 'fox ', 'jumps ', 'over ', 'a ', 'log ']
        for (let i = 0; i < words.length; i++) {
            a.mergeBytes(server.toBytes())
            b.mergeBytes(server.toBytes())
            a.ins(Math.min(i * 3, a.len()), words[i])
            b.ins(0, String(i))
            if (b.len() > 6) b.del(3, 2)
            let seen = server.getLocalVersion()
            server.mergeBytes(a.toBytes())
            server.mergeBytes(b.toBytes())
            let patches = server.getXFPatches(seen)
            if (patches.length) updates.push({ version: ['peer-' + (n++)], patches })
        }
        return { updates, final: server.get() }
    })()`)
    ok(out.updates.length > 4, 'the run should have produced several updates')
    ok(out.updates.some(u => u.patches.length > 1), 'a merge should have sent several patches')

    page.ctx.__xf = JSON.parse(JSON.stringify(out.updates))
    eq(crun(`replay_to(__xf, __xf.length - 1).join('')`), out.final, 'the replayed text')
})

check('a history it cannot read as text says so', () => {
    page.ctx.__structural = [
        body('a-0', '{"x":1}'),
        { version: ['b-1'], parents: ['a-0'],
          patches: [{ unit: 'json', range: '.x', content: '2' }] },
    ]
    eq(crun(`replay_diff(__structural, ['a-0'], ['b-1'])`), null, 'a json path patch')
    eq(crun(`replay_diff(__simpleton, ['nobody-0'], ['bob-9'])`), null, 'an unknown version')
    eq(crun(`replay_diff(__simpleton, ['bob-9'], ['alice-3'])`), null, 'a span running backwards')
})

// Replaying is remembered every REPLAY_STEP updates so that dragging does not
// walk the history from the top on every frame. What it remembers has to give
// the same answers as replaying it cold, whichever order it is asked in.
check('a history longer than one memory gives the same answers', () => {
    // Each update writes a different letter, so a text replayed from the wrong
    // place reads differently rather than only being a different length.
    page.ctx.__long = [body('server-0', '')].concat(
        Array.from({ length: 900 }, (_, i) =>
            edit(`alice-${i}`, [i ? `alice-${i - 1}` : 'server-0'],
                 [{ range: `[${i}:${i}]`, content: 'abcdefg'[i % 7] }])))

    const ask = at => JSON.stringify(
        crun(`replay_diff(__long, ['alice-${at - 1}'], ['alice-${at}'])`))
    const cold = at => { crun('forget_replayed_history()'); return ask(at) }
    const expected = [700, 300, 899].map(cold)

    crun('forget_replayed_history()')
    eq([700, 300, 899].map(ask), expected,
       'asked forwards, then backwards, then forwards again')
    ok(crun('replay_memory.texts.length') > 1, 'nothing was remembered')
})

// A history only ever grows, except when a write is refused and the updates it
// was built on are taken back out. Those places say so, and a history that has
// got shorter is caught anyway.
check('a rolled back history is not answered from memory', () => {
    const ask = () => JSON.stringify(
        crun(`replay_diff(__long, ['alice-897'], ['alice-899'])`))

    crun('forget_replayed_history()')
    const whole = ask()
    ok(crun('replay_memory.texts.length') > 1, 'nothing was remembered to go stale')

    // Taking an update back out of the middle moves every one after it along
    crun(`__long.splice(600, 1)`)
    const warm = ask()
    crun('forget_replayed_history()')
    eq(warm, ask(), 'the shortened history should have been replayed afresh')
    ok(warm !== whole, 'removing an update should have changed what the span shows')

    crun('forget_replayed_history()')
    eq(crun('replay_memory.texts.length'), 1, 'saying so directly should clear them')
})

// ------------------------------------------------------ telling actors apart

console.log('\nactors get colors that stay apart')

// The panel says an actor's identity in hue alone, so these check the hues it
// hands out. Perceived difference is not measured here -- that needs a color
// space these tests have no reason to carry -- but the spacing that produces
// it is, and the failure that prompted this is a spacing failure: colors
// arriving in rainbow order, so anyone who turned up next to you looked
// like you.
const hue_of = css => Number(css.match(/oklch\(50% [\d.]+ (\d+)\)/)[1])
const wheel_len = prun('HUE_WHEEL.length')

// Angles are fractions of a turn, so a difference is measured the short way.
const turn_apart = (a, b) => { const d = Math.abs(a - b) % 1; return Math.min(d, 1 - d) }

function angles_handed_out(n) {
    const out = []
    let last = 0
    for (let i = 0; i < n; i++) {
        const a = prun(`get_new_angle(${JSON.stringify(out)}, ${last})`)
        out.push(a)
        last = a
    }
    return out
}

check('an angle lands in the middle of the widest gap left', () => {
    // Half the wheel is free between 0.4 and 0.9, and nothing else comes close
    eq(prun('get_new_angle([0, 0.1, 0.2, 0.4, 0.9], 0)'), 0.65, 'the wide gap')
})

check('the caller keeps the array it passed, in the order it had it', () => {
    prun('__angles = [0.5, 0.125, 0]')
    prun('get_new_angle(__angles, 0)')
    eq(prun('__angles'), [0.5, 0.125, 0], 'the array handed in')
})

check('consecutive actors never land in the same neighbourhood', () => {
    // Before the fix each round of actors marched across the wheel in order
    // and this fell to a sixteenth of a turn
    const angles = angles_handed_out(20)
    let worst = 1
    for (let i = 1; i < angles.length; i++)
        worst = Math.min(worst, turn_apart(angles[i - 1], angles[i]))
    ok(worst >= 0.2, `closest consecutive pair was ${worst.toFixed(3)} of a turn`)
})

check('no two actors are given the same angle', () => {
    const angles = angles_handed_out(32)
    eq(new Set(angles).size, 32, 'distinct angles')
})

check('however many actors there are, they cover the wheel', () => {
    for (const n of [2, 3, 5, 8, 13]) {
        const sorted = angles_handed_out(n).sort((a, b) => a - b)
        let widest = 1 - sorted[sorted.length - 1] + sorted[0]
        for (let i = 1; i < sorted.length; i++)
            widest = Math.max(widest, sorted[i] - sorted[i - 1])
        // An even spread leaves gaps of 1/n; allow the subdivision twice that
        ok(widest <= 2 / n + 1e-9,
           `${n} actors left a ${widest.toFixed(3)} gap, wanted <= ${(2 / n).toFixed(3)}`)
    }
})

check('the hue wheel is a wheel: it goes around once, never back', () => {
    const wheel = prun('HUE_WHEEL')
    let total = 0
    for (let i = 0; i < wheel.length; i++) {
        let step = wheel[(i + 1) % wheel.length] - wheel[i]
        if (step < 0) step += 360
        ok(step > 0 && step < 180, `step ${i} of ${step} degrees doubles back`)
        total += step
    }
    eq(total, 360, 'degrees travelled')
})

check('an angle names one hue, and the whole turn names them all', () => {
    eq(hue_of(prun('angle_to_color(0)')), prun('HUE_WHEEL[0]'), 'angle 0')
    eq(prun('angle_to_color(1)'), prun('angle_to_color(0)'), 'a full turn comes home')
    eq(prun(`angle_to_color(${1 / wheel_len})`),
       prun('angle_to_color(0)').replace(/ \d+\)/, ` ${prun('HUE_WHEEL[1]')})`),
       'one wheel step')
})

check('chroma is past what sRGB holds, so the browser picks the vivid one', () => {
    // Naming a reachable chroma would make each hue as dull as the dullest
    const css = prun('angle_to_color(0.3)')
    ok(/oklch\(50% 0\.4 \d+\)/.test(css), `unexpected color: ${css}`)
})

// ------------------------------------------- what the page is told, and when

console.log('\nthe page is told things in a usable order')

// panel.js declares these at script scope, so they are not properties of the
// context and have to be assigned from inside it.
const sent = []
panel.ctx.__bc = { postMessage: m => sent.push(m) }
prun('backgroundConnection = __bc')

check('dragging within one version says nothing to the page', () => {
    prun('select_span(40, 50)')
    sent.length = 0
    prun('select_span(40, 50); select_span(40, 50)')
    eq(sent.filter(m => m.cmd === 'show_diff').length, 0, 'redundant diffs sent')
})

check('the panel says what it is asking for when it connects, not only when it changes', () => {
    const said = []
    panel.win.chrome.runtime.connect = () => ({
        postMessage: m => said.push(m),
        onMessage: { addListener() {} },
        onDisconnect: { addListener() {} },
    })
    prun('merge_type_select.value = "simpleton"; version_request.value = "\\"a\\"-3"')
    prun('connect()')

    const init = said.find(m => m.cmd === 'init')
    ok(init, 'no init message was sent')
    eq(init.merge_type, 'simpleton', 'merge-type carried by init')
    eq(init.version, '"a"-3', 'version carried by init')

    // Opening the panel says what it would ask for, without asking for it --
    // connecting a page that never advertised Braid can rotate a csrf token
    // or spend a single-use url, so it takes an actual ask
    eq(init.asked_for, false, 'opening the panel counted as asking')
    said.length = 0
    prun('content_type_select.onchange()')
    eq(said.pop().asked_for, true, 'changing a control did not count as asking')

    prun('merge_type_select.value = ""; version_request.value = ""')
    prun('backgroundConnection = __bc')
})

// --------------------------------------------------- heartbeats on the wire

console.log('\nheartbeats keep out of the raw messages view')

const wire = s => new Uint8Array([...s].map(c => c.charCodeAt(0)))

check('a bare CRLF is a heartbeat, and says nothing worth recording', () => {
    // Every 22.5s forever, so recording them buries the view in blank lines
    crun('raw_messages = []; dt_blob_left = 0')
    page.ctx.__hb = wire('\r\n')
    crun('on_bytes_received(__hb)')
    eq(crun('raw_messages.length'), 0, 'the heartbeat was recorded')
})

check('anything else is still recorded', () => {
    crun('raw_messages = []; dt_blob_left = 0')
    page.ctx.__up = wire('Version: "a-0"\r\nContent-Length: 2\r\n\r\nhi\r\n')
    crun('on_bytes_received(__up)')
    ok(crun('raw_messages.join("")').includes('Version: "a-0"'), 'the update went missing')
})

check('two such bytes inside a dt blob are the blob\'s, not a heartbeat', () => {
    // Mistaking them for one would leave the blob's byte count two short, and
    // every boundary after it wrong
    crun('raw_messages = []; dt_blob_left = 10')
    page.ctx.__mid = wire('\r\n')
    crun('on_bytes_received(__mid)')
    eq(crun('dt_blob_left'), 8, 'the blob lost track of two bytes')
})

// -------------------------------------------- taking the time-travel view down

console.log('\ntaking the diff view down')

check('being told to take down a diff that is not up leaves the page alone', () => {
    // The panel says this whenever it disconnects, which an event page makes
    // it do every 30 seconds. Rewriting the textarea's display flipped it from
    // inline-block to block, and the page flickered and grew a scrollbar over
    // a request to change nothing.
    crun(`__diff_d = document.createElement('pre'); __diff_d.style.display = 'none'
          textarea = document.createElement('textarea')
          show_diff_view(__diff_d, null)`)
    eq(crun('textarea.style.display'), '', 'the textarea display was rewritten')
})

const one = `[{from_version: ['a-1'], to_version: ['a-5'], at: null}]`
const two = `[{from_version: ['a-1'], to_version: ['a-5'], at: null},
              {from_version: ['a-8'], to_version: ['a-9'], at: null}]`

check('a selection already showing is recognised from the ask alone', () => {
    // The panel asks again every time its port comes back. Working the answer
    // out before noticing costs ~9ms on a 144k document, and this is on the
    // path a time-travel scroll takes every frame.
    crun('showing_diff = null')
    eq(crun(`already_showing(${one}, {}, false)`), false, 'the first ask')
    eq(crun(`already_showing(${one}, {}, false)`), true, 'the very same ask')
})

check('a different span is not', () => {
    eq(crun(`already_showing([{from_version:['a-1'],to_version:['a-9'],at:null}], {}, false)`),
       false, 'a new span')
})

check('nor the same span with a second one added beside it', () => {
    crun(`showing_diff = null; already_showing(${one}, {}, false)`)
    eq(crun(`already_showing(${two}, {}, false)`), false, 'a span was added')
})

check('nor the same span with the deletions turned on', () => {
    crun(`showing_diff = null; already_showing(${one}, {}, false)`)
    eq(crun(`already_showing(${one}, {}, true)`), false, 'deletions toggled')
})

check('nor the same span recoloured under it', () => {
    crun(`showing_diff = null; already_showing(${one}, {a: 'red'}, false)`)
    eq(crun(`already_showing(${one}, {a: 'blue'}, false)`), false, 'recoloured')
})

check('a diff it has not seen is still drawn', () => {
    crun(`__diff_d = document.createElement('pre'); __diff_d.style.display = 'none'
          textarea = document.createElement('textarea')
          show_diff_view(__diff_d, [[[0, 'kept ', null], [1, 'added', 'alice']]], {}, false)`)
    ok(crun('__diff_d.children.length') > 0, 'the diff was never drawn')
})

check('a straight-line history shows several spans in the one document too', () => {
    // Four updates, with the middle one left unselected
    crun(`__vs4 = [
        { version: ['server-0'], patches: [{ unit: 'body', range: '', content: 'hello' }] },
        { version: ['alice-1'], parents: ['server-0'],
          patches: [{ unit: 'text', range: '[5:5]', content: ' ALICE' }] },
        { version: ['bob-2'], parents: ['alice-1'],
          patches: [{ unit: 'text', range: '[11:11]', content: ' BOB' }] },
        { version: ['carol-3'], parents: ['bob-2'],
          patches: [{ unit: 'text', range: '[15:15]', content: ' CAROL' }] }]`)
    const diff = crun(`replay_spans(__vs4, [
        { from_version: ['server-0'], to_version: ['alice-1'] },
        { from_version: ['bob-2'],    to_version: ['carol-3'] }])`)
    const by = w => diff.filter(r => r[0] === w).map(r => r[1]).join('')
    eq(by(1), ' ALICE CAROL', 'what the selected spans wrote')
    ok(by(0).includes(' BOB'), `the gap's writing is missing: ${JSON.stringify(by(0))}`)
    eq(diff.filter(r => r[0] === 1 && r[2] === 'bob').length, 0,
       'the gap was called out as though it had been selected')
    eq(diff.filter(r => r[0] !== -1).map(r => r[1]).join(''), 'hello ALICE BOB CAROL',
       'the document itself')
})

check('and one span of it says what the old single-span path said', () => {
    eq(crun(`replay_spans(__vs4, [{ from_version: ['server-0'], to_version: ['bob-2'] }])`),
       crun(`replay_diff(__vs4, ['server-0'], ['bob-2'])`), 'the runs')
})

check('taking the diff down leaves the editor where it was reading', () => {
    // Not where the diff had got to: that is a different document, at a
    // different length, so the same offset in it is nowhere in this one
    crun(`__dd = document.createElement('pre'); __dd.style.display = 'none'
          textarea = document.createElement('textarea')
          textarea.scrollTop = 900; textarea.scrollLeft = 7
          showing_diff = null; editor_scroll = null
          show_diff_view(__dd, [[1, 'x', 'alice']], {}, false)`)
    eq(crun('__dd.style.display'), 'block', 'the diff never went up')

    crun('__dd.scrollTop = 12; __dd.scrollLeft = 3')     // the diff scrolls on its own
    crun('show_diff_view(__dd, null, {}, false)')
    eq([crun('textarea.scrollTop'), crun('textarea.scrollLeft')], [900, 7],
       'the editor came back somewhere else')
})

check('and a new sync forgets where the old editor was', () => {
    // It is about to be built again, and an offset into the document it used
    // to hold means nothing in the one arriving
    // Neither path is what is under test, and both would reach for the network
    crun(`handle_subscribe = () => {}; handle_specific_version = () => {}
          editor_scroll = { vertical: 900, horizontal: 7 }
          showing_diff = 'something'
          connect({})`)
    eq(crun('showing_diff'), null, 'the old diff was still thought to be up')
    eq(crun('editor_scroll'), null, 'the old place was carried over')
})

check('being told to take down one that is up does take it down', () => {
    crun(`__diff_d.style.display = 'block'; show_diff_view(__diff_d, null)`)
    eq(crun('__diff_d.style.display'), 'none', 'the diff stayed up')
    eq(crun('textarea.style.display'), 'block', 'the textarea stayed hidden')
})

check('the textarea is laid out as a block from the start', () => {
    // Which is what keeps the line above from being a layout change. As an
    // inline-block it sat on a baseline, and the space that reserves below it
    // was enough to overflow the container it fills.
    const src = fs.readFileSync(path.join(DIR, 'content-script.js'), 'utf8')
    const tag = src.match(/<textarea\s+class="\$\{uniquePrefix\}_textarea"\s+style="([^"]*)"/)
    ok(tag, 'could not find the editor textarea')
    ok(/(^|;)\s*display:\s*block/.test(tag[1]),
       `the editor textarea does not declare display:block: ${tag[1]}`)
})

// ------------------------------------------ which pages the extension takes

console.log('\nthe extension takes over the pages it should')

// Nothing here should reach the network: connect() is the moment the page
// would be fetched a second time, so standing in for it is exactly the
// question being asked.
crun('connect = p => { globalThis.__connected = p }; setupDragAndDrop = () => {}')

function deliver_load(url, headers, dev_message) {
    page.win.__connected = undefined
    for (const listener of page.told)
        listener({ cmd: 'loaded', url, headers, request_headers: {}, dev_message }, {}, () => { })
    return page.win.__connected
}

const braid_headers = { vary: 'subscribe', 'content-type': 'text/plain' }
const plain_headers = { 'content-type': 'text/html' }
const panel_open = { asked_for: false, merge_type: 'simpleton' }
const panel_asked = { asked_for: true, merge_type: 'simpleton' }

check('a page advertising Braid is taken over', () => {
    ok(deliver_load('https://x.test/1', braid_headers, undefined), 'left alone')
})

check('an ordinary website is left alone', () => {
    eq(deliver_load('https://x.test/2', plain_headers, undefined), undefined, 'taken over')
})

check('having the panel open is not on its own a reason to take one over', () => {
    // The panel says what it is asking for on every page, so this arrives at
    // every ordinary website you visit while it is open
    eq(deliver_load('https://x.test/3', plain_headers, panel_open), undefined, 'taken over')
})

check('asking for something in the panel does take one over', () => {
    ok(deliver_load('https://x.test/4', plain_headers, panel_asked), 'left alone')
})

check('a Braid page loading with the panel open is connected the panel\'s way', () => {
    eq(deliver_load('https://x.test/5', braid_headers, panel_open).merge_type, 'simpleton',
       'the panel\'s merge-type')
})

check('a page handed back by the back button says its history over again', () => {
    // Nothing else can say it: no request goes out, so the background hears
    // nothing, and this script is the one that was already here
    crun('versions = [{ method: "GET", version: ["a-0"] }]; headers = { subscribe: "?1" }')
    page.said.length = 0
    for (const fn of page.listening.pageshow ?? []) fn({ persisted: true })

    const init = page.said.find(m => m.action === 'init')
    ok(init, 'devtools was left showing the page you came from')
    eq(init.versions, [{ method: 'GET', version: ['a-0'] }], 'the history it sent')
})

check('an ordinary reload is left to say it in the usual way', () => {
    // persisted is false for a document that was really built again, and that
    // one announces itself through the background as it always did
    page.said.length = 0
    for (const fn of page.listening.pageshow ?? []) fn({ persisted: false })
    eq(page.said.filter(m => m.action === 'init').length, 0, 'said it twice')
})

// ------------------------------------------------- the background, on its own

console.log('\nthe background hands each page the settings that apply to it')

// Enough of the extension APIs for service-worker.js to register itself, and
// a way to fire each event the way the browser would.
function make_worker() {
    const sent = []
    const hooks = {}
    const hook = name => ({ addListener: fn => (hooks[name] ??= []).push(fn) })
    const win = {
        console: { log() { } },
        chrome: {
            tabs: {
                onUpdated: hook('updated'), onRemoved: hook('removed'),
                sendMessage: (tabid, message, cb) => { sent.push({ tabid, message }); cb?.() },
            },
            webRequest: {
                onSendHeaders: hook('sending'), onHeadersReceived: hook('received'),
            },
            runtime: { onConnect: hook('connect'), onMessage: hook('message'), lastError: null },
        },
    }
    win.window = win, win.self = win, win.globalThis = win
    const w = { win, sent, ctx: vm.createContext(win) }
    w.fire = (name, ...args) => (hooks[name] ?? []).forEach(fn => fn(...args))
    load(w.ctx, 'service-worker.js')
    return w
}

// Opening the panel on a tab, announcing what its controls currently say
function open_panel(w, tabid, settings) {
    let deliver = null, disconnect = null
    const port = {
        name: 'braid-devtools-panel', postMessage() { },
        onMessage: { addListener: fn => (deliver = fn) },
        onDisconnect: { addListener: fn => (disconnect = fn) },
    }
    w.fire('connect', port)
    deliver({ cmd: 'init', tab_id: tabid, ...settings })
    return { say: deliver, close: () => disconnect() }
}

// A navigation, in the order the browser really reports one: the request goes
// out, the content script is parsed and runs and announces itself, and only
// then does webRequest get around to the response headers.
function navigate(w, tabid, url) {
    w.fire('sending', { tabId: tabid, requestHeaders: [{ name: 'Accept', value: 'text/plain' }] })
    w.fire('message', { cmd: 'ready' }, { tab: { id: tabid, url } })
    w.fire('received', { tabId: tabid, statusCode: 200, responseHeaders: [] })
}

const loaded_msgs = w => w.sent.filter(s => s.message.cmd === 'loaded')

check('a page that asks before the headers arrive is answered once, afterwards', () => {
    const w = make_worker()
    navigate(w, 7, 'https://x.test/a')
    const loads = loaded_msgs(w)
    eq(loads.length, 1, 'loaded messages')
    ok(loads[0].message.headers, 'answered without the headers it was waiting for')
})

check('a page loading while the panel is open is given the panel\'s settings', () => {
    const w = make_worker()
    open_panel(w, 7, { merge_type: 'simpleton', subscribe: true })
    navigate(w, 7, 'https://x.test/a')
    eq(loaded_msgs(w).pop().message.dev_message.merge_type, 'simpleton', 'merge-type')
})

check('so is the next url, and the version pinned in the panel goes with it', () => {
    // Resources that move in step name their versions alike, so carrying the
    // pin across is the point; a resource that has never heard of it says so.
    const w = make_worker()
    open_panel(w, 7, { merge_type: 'dt', version: '"a"-3' })
    navigate(w, 7, 'https://x.test/a')
    navigate(w, 7, 'https://x.test/b')
    const last = loaded_msgs(w).pop().message
    eq(last.url, 'https://x.test/b', 'the url answered')
    eq(last.dev_message.version, '"a"-3', 'the pinned version')
})

check('closing the panel stops it steering the loads that come after', () => {
    const w = make_worker()
    const panel_1 = open_panel(w, 7, {})
    panel_1.say({ cmd: 'rerequest', merge_type: 'simpleton' })
    navigate(w, 7, 'https://x.test/a')
    eq(loaded_msgs(w).pop().message.dev_message.merge_type, 'simpleton', 'while it was open')

    panel_1.close()
    navigate(w, 7, 'https://x.test/a')
    eq(loaded_msgs(w).pop().message.dev_message, undefined, 'settings outlived the panel')
})

check('a panel reconnecting after the background slept brings its settings back', () => {
    // The background is an event page: it wakes with nothing, and this is the
    // only way the settings return. Before, you had to toggle a control.
    const w = make_worker()
    open_panel(w, 7, { merge_type: 'simpleton' })
    const woken = make_worker()          // a fresh background, remembering nothing
    open_panel(woken, 7, { merge_type: 'simpleton' })
    navigate(woken, 7, 'https://x.test/a')
    eq(loaded_msgs(woken).pop().message.dev_message.merge_type, 'simpleton', 'merge-type')
})

check('one tab\'s panel does not steer another tab', () => {
    const w = make_worker()
    open_panel(w, 7, { merge_type: 'simpleton' })
    navigate(w, 9, 'https://x.test/a')
    eq(loaded_msgs(w).pop().message.dev_message, undefined, 'leaked across tabs')
})

check('nothing remembered about a tab outlives it', () => {
    const w = make_worker()
    open_panel(w, 7, { merge_type: 'simpleton' })
    navigate(w, 7, 'https://x.test/a')
    w.fire('removed', 7, {})
    for (const map of ['tab_to_dev', 'tab_to_last_dev_message', 'latest_headers_for_tab',
                       'latest_request_headers_for_tab', 'waiting_for_headers'])
        eq(vm.runInContext(`Object.keys(${map})`, w.ctx), [], `${map} still holds the tab`)
})

check('headers from the page being left do not answer for the page arriving', () => {
    // Serving them is what made a second reload look like it had worked
    const w = make_worker()
    navigate(w, 7, 'https://x.test/a')
    w.fire('sending', { tabId: 7, requestHeaders: [] })
    eq(vm.runInContext('latest_headers_for_tab[7]', w.ctx), undefined, 'stale headers kept')
})

// ------------------------------------- braid_fetch serializing patch bytes

console.log('\nbraid_fetch counts patch bytes before they go on the wire')

// A two-patch PUT once went out reading "Content-Length: undefined": the
// byte counter answered undefined for anything it did not recognize, and
// nothing checked its answer. These load the client alone, swap fetch for
// a recorder, and read the body it would have sent.

async function acheck(name, fn) {
    try {
        await fn()
        console.log(`  ok    ${name}`)
        passed++
    } catch (e) {
        console.log(`  FAIL  ${name}\n          ${e.message}`)
        failed++
    }
}

;(async () => {
    eval(fs.readFileSync(path.join(DIR, 'braid-http-client.js'), 'utf8'))

    let sent = null
    braid_fetch.set_fetch(async (url, params) => {
        sent = params
        return new Response('', { status: 200 })
    })

    const put = patches => {
        sent = null
        return braid_fetch('https://x.test/doc', {
            method: 'PUT', version: ['t-1'], parents: ['t-0'], patches })
    }
    const sent_body = async () =>
        Buffer.from(sent.body instanceof Blob ? await sent.body.arrayBuffer()
                                              : sent.body).toString()

    await acheck('string patches get real content-lengths', async () => {
        await put([{ unit: 'text', range: '[48:55]', content: '' },
                   { unit: 'text', range: '[55:55]', content: 'h' }])
        eq(await sent_body(),
           'Content-Length: 0\r\nContent-Range: text [48:55]\r\n\r\n\r\n\r\n' +
           'Content-Length: 1\r\nContent-Range: text [55:55]\r\n\r\nh\r\n',
           'the two-patch body')
    })

    await acheck('bytes born in another realm still get counted', async () => {
        // instanceof cannot see across realms, which is how good bytes once
        // read as uncountable. Bytes from a vm context are just as foreign.
        const foreign = vm.runInNewContext('new Uint8Array([104])')
        ok(!(foreign instanceof Uint8Array), 'the test bytes are not foreign enough')
        await put([{ unit: 'text', range: '[48:55]', content: '' },
                   { unit: 'text', range: '[55:55]', content: foreign }])
        const body = await sent_body()
        ok(body.includes('Content-Length: 1\r\nContent-Range: text [55:55]\r\n\r\nh'),
           `the wire says: ${JSON.stringify(body)}`)
    })

    await acheck('content nobody can count refuses to be sent', async () => {
        let threw = null
        await put([{ unit: 'text', range: '[0:0]', content: ['h'] },
                   { unit: 'text', range: '[1:1]', content: 'i' }]).catch(e => threw = e)
        ok(threw, 'it went on the wire instead')
        ok(/patch\.content/.test(threw.message), `the error says: ${threw.message}`)
        eq(sent, null, 'the request was made anyway')
    })

    await acheck('a lone patch is checked the same way', async () => {
        let threw = null
        await put([{ unit: 'text', range: '[0:0]' }]).catch(e => threw = e)
        ok(threw, 'a patch with no content went out')
        eq(sent, null, 'the request was made anyway')
    })


    console.log('\nan uploaded body is written down whatever shape it arrives in')

    await acheck('the shapes a dropped file can arrive in all give the same bytes', async () => {
        // ArrayBuffer.isView says no to an ArrayBuffer itself, and every branch
        // missing that is how an upload died on a name never defined
        const want = [104, 105, 33, 10]
        const got = await crun(`(async () => {
            let want = [104, 105, 33, 10]
            let buf = new ArrayBuffer(4); new Uint8Array(buf).set(want)
            // The same four bytes, sitting in the middle of a bigger buffer
            let big = new ArrayBuffer(8); new Uint8Array(big).set(want, 2)
            return {
                array_buffer: [...await body_as_bytes(buf)],
                uint8:        [...await body_as_bytes(new Uint8Array(want))],
                blob:         [...await body_as_bytes(new Blob([new Uint8Array(want)]))],
                data_view:    [...await body_as_bytes(new DataView(buf))],
                // A view of part of a buffer is not the whole buffer, and one
                // that is not a Uint8Array is the only way to reach that branch
                partial_view: [...await body_as_bytes(new DataView(big, 2, 4))],
                nothing:      [...await body_as_bytes(undefined)],
            }
        })()`)
        eq(got.array_buffer, want, 'an ArrayBuffer, which is what a dropped file becomes')
        eq(got.uint8, want, 'a Uint8Array')
        eq(got.blob, want, 'a Blob, which is what a File is')
        eq(got.data_view, want, 'a DataView')
        eq(got.partial_view, want, 'a view of part of a buffer')
        eq(got.nothing, [], 'a body that is not there')
    })

    await acheck('a body it cannot write down does not stop it writing the rest', async () => {
        // The recording runs on one promise chain; a rejection left on it used
        // to swallow every message that came after
        crun('raw_messages = []')
        // No headers to walk, so writing this one down throws
        crun(`on_bytes_going_out.chain = null
              on_bytes_going_out('http://x.test/', { method: 'PUT', body: 'first' })`)
        crun(`on_bytes_going_out('http://x.test/', { method: 'PUT', body: 'second',
                  headers: new Map([['content-type', 'text/plain']]) })`)
        await crun('on_bytes_going_out.chain')
        ok(crun('raw_messages.join("")').includes('second'),
           'the message after a bad one went unrecorded')
    })

// ----------------------------------------------------------------- summary

})().then(() => {
    console.log(`\n${passed} passed, ${failed} failed\n`)
    process.exit(failed ? 1 : 0)
})