@things-factory/figure-ui 10.1.147 → 10.1.150

package/test/browser/section.check.mjs

@@ -0,0 +1,719 @@
+/*
+ * The section editor, the section panel, the inside's drawing, the fastening drawing and the face choice, driven in a
+ * real browser (ADR-0100). What the unit suite cannot prove lives here: that a value typed is drawn and not sent, that
+ * a command lands as one step, that keys go to the editor and not to the modeller behind it, that a refusal is held
+ * where the edit was made. The check does what a person does -- picks a part, presses, drags, types -- and reads what
+ * the screen shows and what the session holds.
+ *
+ * Run:  node --test test/browser/section.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('section-page.js'))
+})
+after(async () => {
+  await opened?.close()
+})
+
+const page = () => opened.page
+const read = (fn, ...args) => page().evaluate(fn, ...args)
+const state = () => read(() => probe.state())
+const editorNow = () => read(() => probe.sectionEditor())
+const panelNow = () => read(() => probe.sectionPanel())
+const drawn = id => read(id => probe.drawnShape(id), id)
+const held = id => read(id => probe.heldShape(id), id)
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+/** Waits until `fn` (run in the page) gives something truthy, and gives it; fails with `what` past the deadline. */
+async function until(fn, what, arg, ms = 5000) {
+  const end = Date.now() + ms
+  for (;;) {
+    const got = await page().evaluate(fn, arg)
+    if (got) return got
+    if (Date.now() > end) assert.fail(`waited for: ${what}`)
+    await sleep(50)
+  }
+}
+
+/** An element on the page (through shadow roots): see `findDeep` in section-page.js. */
+async function element(selector, options = {}) {
+  const handle = await page().evaluateHandle((s, o) => findDeep(s, o), selector, options)
+  assert.ok(await handle.evaluate(e => !!e), `on the page: ${selector} ${JSON.stringify(options)}`)
+  return handle
+}
+const present = (selector, options = {}) => read((s, o) => !!findDeep(s, o), selector, options)
+
+async function press(selector, options) {
+  await (await element(selector, options)).click()
+}
+
+/** Types `text` over what a field holds, then a key: Enter sends, Tab leaves, nothing keeps it typed. */
+async function type(selector, options, text, key = 'Enter') {
+  const field = await element(selector, options)
+  await field.click({ clickCount: 3 })
+  await page().keyboard.type(text)
+  if (key) await page().keyboard.press(key)
+}
+
+async function mount(name) {
+  await read(name => sectionHarness.mount(name), name)
+  /* Drawn in 3D before anything else: a board taken down while its 3D is still coming up throws in things-scene. */
+  await until(
+    () => {
+      /* Not drawn yet is not an error: until the canvas stands, reading it throws. */
+      try {
+        return !!probe.state() && probe.ids().some(id => !!probe.partOnPage(id))
+      } catch {
+        return false
+      }
+    },
+    'the figure drawn in 3D',
+    undefined,
+    15000
+  )
+}
+
+async function pick(id) {
+  const at = await until(id => probe.row(id), `${id} in the parts list`, id)
+  await page().mouse.click(at.x, at.y)
+  await until(id => probe.state().selected === id, `${id} picked`, id)
+}
+
+async function openEditor() {
+  await press('button[act]', { within: 'figure-section-panel' })
+  await until(() => !!probe.sectionEditor(), 'the section editor')
+}
+
+/** A point's coordinate field in the section editor, by the number the point is shown by: 0 across, 1 down. */
+async function typePoint(label, axis, text, key = 'Enter') {
+  const field = await page().evaluateHandle(
+    (label, axis) => [...(findDeep('figure-section-editor')?.shadowRoot.querySelectorAll('ol[points] li') ?? [])].find(li => li.querySelector('b').textContent.trim() === label)?.querySelectorAll('input')[axis] ?? null,
+    label,
+    axis
+  )
+  assert.ok(await field.evaluate(e => !!e), `point ${label}'s field`)
+  await field.click({ clickCount: 3 })
+  await page().keyboard.type(text)
+  if (key) await page().keyboard.press(key)
+}
+
+/** Drags a wall's handle in the inside's drawing in `within` by `dx` page pixels, in steps; `release` lets go. */
+async function dragWall(within, side, dx, release = true) {
+  const handle = await element(`g[wall="${side}"] rect`, { within })
+  /* Where the handle stands once the panel has settled: a part picked restores the panel's scroll a frame later. */
+  const where = () =>
+    handle.evaluate(e => {
+      e.scrollIntoView({ block: 'center' })
+      const b = e.getBoundingClientRect()
+      return { x: b.left + b.width / 2, y: b.top + b.height / 2 }
+    })
+  let at = await where()
+  for (;;) {
+    await sleep(100)
+    const again = await where()
+    if (again.x === at.x && again.y === at.y) break
+    at = again
+  }
+  await page().mouse.move(at.x, at.y)
+  await page().mouse.down()
+  for (let i = 1; i <= 5; i++) await page().mouse.move(at.x + (dx * i) / 5, at.y)
+  if (release) await page().mouse.up()
+  return at
+}
+
+const editorGone = () => until(() => !probe.sectionEditor(), 'the section editor closed')
+
+describe('the section editor on a drawn section: typed, previewed, applied or let go', () => {
+  before(async () => {
+    await mount('quad')
+    await pick('wedge')
+  })
+
+  test('the 단면 group opens the editor on the part', async () => {
+    assert.equal(await editorNow(), null)
+    await openEditor()
+    assert.equal((await editorNow()).points, 4)
+  })
+
+  test('a point typed is drawn at once and not sent; while the sides cross, the last valid outline is drawn and said', async () => {
+    const start = await state()
+    await typePoint('3', 0, '350')
+    await until(() => probe.drawnShape('wedge').section.points.find(p => p.id === 'p3').x === 350, 'the moved point drawn')
+    assert.equal((await state()).revision, start.revision, 'nothing sent')
+    assert.equal((await held('wedge')).section.points.find(p => p.id === 'p3').x, 300, 'the figure keeps its point')
+    assert.equal((await editorNow()).lastValid, false)
+
+    await typePoint('2', 0, '-400')
+    const now = await until(() => probe.sectionEditor().lastValid && probe.sectionEditor(), 'the outline refused')
+    assert.equal(now.caption, 'figure.text.section-editor-last-valid')
+    assert.ok(now.issues.length > 0, 'the list says what is wrong')
+    const shown = (await drawn('wedge')).section.points
+    assert.deepEqual(
+      shown.map(p => [p.id, p.x]),
+      [['p1', -300], ['p4', -300], ['p3', 350], ['p2', 300]],
+      'the solid is the last valid outline, not the crossing one'
+    )
+  })
+
+  test('a refused outline is not applied: apply is held back, and pressing it sends nothing', async () => {
+    const start = await state()
+    const now = await editorNow()
+    assert.equal(now.apply.disabled, true)
+    await press('footer button[primary]', { within: 'figure-section-editor' })
+    await sleep(200)
+    assert.equal((await state()).revision, start.revision)
+    assert.ok(await editorNow(), 'the editor stays open')
+  })
+
+  test('Esc with changes asks; a refused outline is not offered to apply, and the reason is said', async () => {
+    /* A point chosen, for the keys while the question is asked. */
+    await press('g[point="p4"] circle', { within: 'figure-section-editor' })
+    await page().keyboard.press('Escape')
+    const choice = await until(() => probe.closeChoice(), 'the close question')
+    assert.deepEqual(choice.words, ['figure.text.section-editor-close-changed', 'figure.text.section-editor-close-invalid'])
+    assert.deepEqual(choice.buttons, ['figure.button.keep-editing', 'figure.button.section-editor-discard'], 'no apply-and-close')
+    assert.equal((await state()).selected, 'wedge', 'the part stays selected')
+  })
+
+  test('while it asks, the keys are the question\'s: Delete takes no point; kept editing, the changes stay', async () => {
+    await page().keyboard.press('Delete')
+    await sleep(100)
+    assert.equal((await editorNow()).points, 4, 'no point deleted behind the question')
+    await press('md-text-button', { within: 'figure-section-close-choice', text: 'figure.button.keep-editing' })
+    await until(() => !probe.closeChoice(), 'the question closed')
+    const now = await editorNow()
+    assert.ok(now, 'the editor stays open')
+    assert.equal(now.lastValid, true, 'the changes kept')
+  })
+
+  test('let go from the question: nothing sent, the editor closes, the figure is drawn as it stands', async () => {
+    const start = await state()
+    await press('footer button', { within: 'figure-section-editor', text: 'figure.button.section-editor-cancel' })
+    await until(() => probe.closeChoice(), 'the close question')
+    await press('md-text-button', { within: 'figure-section-close-choice', text: 'figure.button.section-editor-discard' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision)
+    assert.equal((await state()).selected, 'wedge')
+    await until(() => probe.drawnShape('wedge').section.points.find(p => p.id === 'p3').x === 300, 'the figure drawn as it stands')
+  })
+
+  test('Esc with nothing changed closes the editor at once, nothing asked; the part stays selected', async () => {
+    await openEditor()
+    await page().keyboard.press('Escape')
+    await editorGone()
+    assert.equal(await read(() => probe.closeChoice()), null)
+    assert.equal((await state()).selected, 'wedge')
+  })
+
+  test('apply sends the outline as one step, and the editor closes', async () => {
+    await openEditor()
+    const start = await state()
+    await typePoint('3', 0, '350')
+    await press('footer button[primary]', { within: 'figure-section-editor' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision + 1)
+    assert.equal((await held('wedge')).section.points.find(p => p.id === 'p3').x, 350)
+  })
+
+  test('while the editor is open the modeller\'s keys step aside: Ctrl+Z does not undo the figure', async () => {
+    await openEditor()
+    const start = await state()
+    await page().keyboard.down('Control')
+    await page().keyboard.press('KeyZ')
+    await page().keyboard.up('Control')
+    await sleep(200)
+    assert.equal((await state()).revision, start.revision, 'the figure\'s history is not touched')
+    assert.equal((await held('wedge')).section.points.find(p => p.id === 'p3').x, 350)
+    assert.ok(await editorNow(), 'the editor stays open')
+  })
+
+  test('Backspace in a field deletes a character; Delete with a point chosen deletes the point, not the part', async () => {
+    const start = await state()
+    await typePoint('1', 0, '', null)
+    await page().keyboard.press('Backspace')
+    await sleep(100)
+    assert.equal((await editorNow()).points, 4, 'typing in a field')
+    await press('g[point="p4"] circle', { within: 'figure-section-editor' })
+    await page().keyboard.press('Delete')
+    await until(() => probe.sectionEditor().points === 3, 'the point deleted')
+    assert.ok((await read(() => probe.ids())).includes('wedge'), 'the part stays')
+    assert.equal((await state()).selected, 'wedge')
+    assert.equal((await state()).revision, start.revision, 'nothing sent')
+    await until(() => probe.drawnShape('wedge').section.points.length === 3, 'the solid drawn with three points')
+  })
+
+  test('picking another part with changes keeps the part until the editor is closed: asked, let go, then the pick goes on', async () => {
+    const start = await state()
+    const at = await read(() => probe.row('block'))
+    await page().mouse.click(at.x, at.y)
+    await until(() => probe.closeChoice(), 'the close question')
+    assert.equal((await state()).selected, 'wedge', 'the part stays selected while asked')
+    await press('md-text-button', { within: 'figure-section-close-choice', text: 'figure.button.section-editor-discard' })
+    await until(() => probe.state().selected === 'block', 'the pick goes on')
+    assert.equal(await editorNow(), null)
+    assert.equal((await state()).revision, start.revision)
+    assert.equal((await drawn('wedge')).section.points.length, 4, 'the figure drawn as it stands')
+  })
+
+  test('picking another part with nothing changed closes the editor; picked again, the part opens without it', async () => {
+    await pick('wedge')
+    await openEditor()
+    await pick('block')
+    await editorGone()
+    assert.equal(await read(() => probe.closeChoice()), null, 'nothing asked')
+    await pick('wedge')
+    await sleep(200)
+    assert.equal(await editorNow(), null, 'the editor does not come back')
+  })
+
+  test('the part removed while the editor has changes: there is nothing to go back to, and it closes without asking', async () => {
+    await openEditor()
+    await typePoint('3', 0, '360')
+    const at = await until(() => probe.partOp('wedge', 'remove-part'), 'the remove button in the parts list')
+    await page().mouse.click(at.x, at.y)
+    await editorGone()
+    assert.ok(!(await read(() => probe.ids())).includes('wedge'), 'the part removed')
+    await sleep(200)
+    assert.equal(await read(() => probe.closeChoice()), null, 'nothing asked')
+  })
+})
+
+describe('the section editor on a box: what follows, what is kept, and a figure changed while it is open', () => {
+  before(async () => {
+    await mount('floor-box')
+    await pick('box')
+    await openEditor()
+  })
+
+  test('the length says the face its placement keeps', async () => {
+    const now = await editorNow()
+    assert.equal(now.length.label, 'figure.label.section-editor-length')
+    assert.equal(now.length.disabled, false)
+    assert.equal(now.length.note, 'figure.text.section-editor-keeps')
+  })
+
+  test('the figure changed while the editor is open: apply is refused, and closing does not offer it', async () => {
+    const start = await state()
+    await type('input#corner', { within: 'figure-section-panel' }, '20')
+    await until(r => probe.state().revision === r + 1, 'the corner sent from the panel', start.revision)
+    const now = await until(() => probe.sectionEditor()?.stale && probe.sectionEditor(), 'the editor says the figure changed')
+    assert.equal(now.apply.disabled, true)
+    await type('div[sizes] label[mm] input', { within: 'figure-section-editor', index: 1 }, '500')
+    await page().keyboard.press('Escape')
+    const choice = await until(() => probe.closeChoice(), 'the close question')
+    assert.deepEqual(choice.words, ['figure.text.section-editor-close-changed', 'figure.text.section-editor-stale'])
+    assert.ok(!choice.buttons.includes('figure.button.section-editor-apply-and-close'))
+    await press('md-text-button', { within: 'figure-section-close-choice', text: 'figure.button.section-editor-discard' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision + 1, 'only the corner')
+    assert.equal((await held('box')).section.size.x, 400)
+  })
+})
+
+describe('the section editor on a box whose sizes follow the figure', () => {
+  before(async () => {
+    await mount('follows')
+    await pick('box')
+    await openEditor()
+  })
+
+  test('a measure that follows another value is shown and not offered', async () => {
+    const now = await editorNow()
+    assert.equal(now.length.disabled, true)
+    assert.equal(now.length.note, 'figure.text.section-editor-linked')
+  })
+})
+
+describe('a drawn section\'s end drawn to one point', () => {
+  test('turned on, the length is called the height', async () => {
+    await mount('wedge')
+    await pick('wedge')
+    await openEditor()
+    assert.deepEqual((await editorNow()).apex, { checked: false, disabled: false, words: '' }, 'nothing on its top: offered')
+    assert.equal((await editorNow()).length.label, 'figure.label.section-editor-length')
+    await press('label[apex] input', { within: 'figure-section-editor' })
+    await until(() => probe.sectionEditor().apex.checked, 'the apex on')
+    assert.equal((await editorNow()).length.label, 'figure.label.section-editor-height')
+    await until(() => !!probe.drawnShape('wedge').apex, 'the solid drawn as a pyramid')
+  })
+
+  test('something fastened to the end: drawing it to one point is not offered, and the face is said', async () => {
+    await mount('capped-wedge')
+    await pick('wedge')
+    await openEditor()
+    assert.deepEqual((await editorNow()).apex, { checked: false, disabled: true, words: 'figure.text.section-editor-apex-blocked' })
+  })
+
+  test('a pyramid in the 단면 group: its editor opens from there, and it has no corners and no inside', async () => {
+    await mount('pyramid')
+    await pick('wedge')
+    /* The group is drawn after the part is picked: read once it says what this part is. */
+    const panel = await until(() => {
+      const now = probe.sectionPanel()
+      return now?.edit && now.text.includes('figure.text.section-points-apex') ? now : null
+    }, 'the 단면 group of the pyramid, its edit button and its points and apex said')
+    assert.deepEqual(panel.inputs, [], 'no corner field')
+    assert.equal(panel.cavityToggle, false, 'no inside')
+    await openEditor()
+    const editor = await until(() => {
+      const now = probe.sectionEditor()
+      return now?.apex?.checked ? now : null
+    }, 'the editor open on the pyramid, its apex on')
+    assert.deepEqual(editor.apex, { checked: true, disabled: false, words: '' })
+    assert.equal(editor.length.label, 'figure.label.section-editor-height')
+  })
+})
+
+describe('the inside in the section editor: drawn on the widths being typed, sent with them in one step', () => {
+  before(async () => {
+    await mount('tray')
+    await pick('tray')
+    await openEditor()
+  })
+
+  test('a wall dragged in the editor is drawn on the solid while it fits; too thick, the solid keeps the last valid inside', async () => {
+    const start = await state()
+    assert.ok((await editorNow()).cavityDrawing, 'the inside\'s drawing in the editor')
+    const at = await dragWall('figure-section-editor', 'x-', 12, false)
+    await until(() => probe.drawnShape('tray').cavity.wall['x-'] > 40, 'the thicker wall drawn')
+    await page().mouse.move(at.x + 400, at.y)
+    await until(() => probe.cavityDrawing('figure-section-editor').refusal, 'too thick, said')
+    await until(() => probe.drawnShape('tray').cavity.wall['x-'] === 40, 'the last valid inside drawn')
+    await page().mouse.up()
+    await sleep(200)
+    assert.equal((await state()).revision, start.revision, 'nothing sent')
+  })
+
+  test('walls that fit only the wider section are taken with it, and go in one step with the widths', async () => {
+    const start = await state()
+    await type('div[sizes] label[mm] input', { within: 'figure-section-editor', index: 1 }, '600')
+    await type('div[sizes] label[mm] input', { within: 'figure-section-editor', index: 2 }, '400')
+    await press('g[wall="x-"] text', { within: 'figure-section-editor' })
+    await until(() => probe.cavityDrawing('figure-section-editor').typing?.focused, 'the wall\'s number field')
+    await page().keyboard.type('160')
+    await page().keyboard.press('Enter')
+    await until(() => probe.drawnShape('tray').cavity?.wall['x-'] === 160, 'the walls drawn on the solid')
+    assert.equal((await read(() => probe.cavityDrawing('figure-section-editor'))).refusal, '', 'judged on the widths being typed')
+    assert.equal((await state()).revision, start.revision, 'kept in the editor until applied')
+    await press('footer button[primary]', { within: 'figure-section-editor' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision + 1, 'one step')
+    const now = await held('tray')
+    assert.deepEqual(now.section.size, { x: 600, z: 400 })
+    assert.deepEqual(Object.values(now.cavity.wall), [160, 160, 160, 160])
+  })
+})
+
+describe('the 단면 group: a value typed is drawn, sent once, and stays typed while it is drawn', () => {
+  before(async () => {
+    await mount('floor-box')
+    await pick('box')
+  })
+
+  test('a corner typed is drawn and not sent, and the field keeps what was typed; Enter sends it as one step', async () => {
+    const start = await state()
+    await type('input#corner', { within: 'figure-section-panel' }, '40', null)
+    await until(() => probe.drawnShape('box').section.corner?.x === 40, 'the corner drawn')
+    assert.equal((await state()).revision, start.revision, 'nothing sent while typing')
+    await sleep(300)
+    assert.equal((await panelNow()).inputs.find(i => i.id === 'corner').value, '40', 'the drawn figure does not type over the field')
+    await page().keyboard.press('Enter')
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.deepEqual((await held('box')).section.corner, { x: 40, z: 40 })
+  })
+})
+
+describe('the inside\'s drawing in the 단면 group', () => {
+  before(async () => {
+    await mount('tray')
+    await pick('tray')
+  })
+
+  test('the inside is said by what it makes and how deep, and drawn; no number fields repeat the drawing', async () => {
+    const panel = await panelNow()
+    assert.ok(panel.text.includes('figure.text.section-depth'))
+    assert.ok(panel.cavityDrawing)
+    assert.deepEqual(panel.inputs.map(i => i.id), ['corner'], 'the corner only')
+  })
+
+  test('a wall dragged and let go is one step; every wall together', async () => {
+    const start = await state()
+    await dragWall('figure-section-panel', 'x-', 12)
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    const walls = Object.values((await held('tray')).cavity.wall)
+    assert.ok(walls[0] > 40 && walls.every(w => w === walls[0]), `every wall thicker: ${walls}`)
+  })
+
+  test('dragged too thick, the reason is said and nothing is drawn; let go, nothing is sent and the reason stays', async () => {
+    const start = await state()
+    const was = (await held('tray')).cavity.wall['x-']
+    await dragWall('figure-section-panel', 'x-', 400, false)
+    await until(() => probe.cavityDrawing().refusal, 'the reason said')
+    assert.equal((await drawn('tray')).cavity.wall['x-'], was, 'the figure drawn as it stands')
+    await page().mouse.up()
+    await sleep(200)
+    assert.equal((await state()).revision, start.revision, 'nothing sent')
+    assert.equal((await state()).error, '', 'nothing sent to be refused')
+    assert.ok((await read(() => probe.cavityDrawing())).refusal, 'the reason stays said')
+  })
+
+  test('a wall\'s number pressed is typed: Enter sends one step', async () => {
+    const start = await state()
+    await press('g[wall="x+"] text', { within: 'figure-section-panel' })
+    const typing = await until(() => probe.cavityDrawing().typing?.focused && probe.cavityDrawing().typing, 'the number field')
+    assert.equal(typing.label, 'figure.label.section-wall')
+    await page().keyboard.type('50')
+    await page().keyboard.press('Enter')
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.deepEqual(Object.values((await held('tray')).cavity.wall), [50, 50, 50, 50])
+  })
+
+  test('with walls one per side, a wall typed changes that wall only', async () => {
+    const start = await state()
+    await press('label[toggle] input', { within: 'figure-section-panel', index: 1 })
+    await press('g[wall="z+"] text', { within: 'figure-section-panel' })
+    await until(() => probe.cavityDrawing().typing?.focused && probe.cavityDrawing().typing, 'the number field')
+    await page().keyboard.type('70')
+    await page().keyboard.press('Enter')
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.deepEqual((await held('tray')).cavity.wall, { 'x-': 50, 'x+': 50, 'z-': 50, 'z+': 70 })
+  })
+
+  test('a closed end\'s number is typed; the open end has none, and pressed it closes in one step', async () => {
+    const ends = (await read(() => probe.cavityDrawing())).ends
+    assert.equal(ends.start.typed, true)
+    assert.equal(ends.end.typed, false)
+    await press('g[end="start"] text', { within: 'figure-section-panel' })
+    assert.equal((await until(() => probe.cavityDrawing().typing?.focused && probe.cavityDrawing().typing, 'the number field')).label, 'figure.label.face-bottom')
+    await page().keyboard.press('Escape')
+    await until(() => !probe.cavityDrawing().typing, 'the field put away')
+    const start = await state()
+    await press('g[end="end"] text', { within: 'figure-section-panel' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.equal((await read(() => probe.cavityDrawing())).typing, null, 'no number field for an open end')
+    assert.ok((await held('tray')).cavity.end.closed > 0, 'the open end closed')
+  })
+
+  test('a wall\'s number stands outside the section on its own side, clear of every handle', async () => {
+    const d = await read(() => probe.cavityDrawing())
+    const s = d.section
+    const { 'x-': l, 'x+': r, 'z-': t, 'z+': b } = d.walls
+    assert.ok(l.number.right <= s.left + 0.5, 'left of the section')
+    assert.ok(r.number.left >= s.right - 0.5, 'right of the section')
+    assert.ok(t.number.bottom <= s.top + 0.5, 'above the section')
+    assert.ok(b.number.top >= s.bottom - 0.5, 'below the section')
+    const meet = (a, c) => a.left < c.right && c.left < a.right && a.top < c.bottom && c.top < a.bottom
+    for (const one of Object.values(d.walls)) for (const other of Object.values(d.walls)) assert.ok(!meet(one.number, other.handle), 'a number clear of a handle')
+  })
+
+  test('across a shallow inside, the two walls\' handles step aside from each other', async () => {
+    await mount('shallow-tray')
+    await pick('tray')
+    const { 'z-': a, 'z+': b } = (await read(() => probe.cavityDrawing())).walls
+    const meet = a.handle.left < b.handle.right && b.handle.left < a.handle.right && a.handle.top < b.handle.bottom && b.handle.top < a.handle.bottom
+    assert.ok(!meet, `apart: ${JSON.stringify([a.handle, b.handle])}`)
+  })
+})
+
+describe('the fastening drawing in the fastening form', () => {
+  const labels = () => read(() => probe.fastenForm().map(s => s.label))
+  const target = () => read(() => probe.fastenForm().find(s => s.label === 'figure.label.target-part'))
+
+  test('the part\'s own face and the facing are not asked: the target, its face and how are drawn', async () => {
+    await mount('arm')
+    await pick('forearm')
+    const asked = await labels()
+    assert.ok(asked.includes('figure.label.target-part'))
+    assert.ok(!asked.includes('figure.label.my-face') && !asked.includes('figure.label.facing'), `asked: ${asked}`)
+    assert.ok(await read(() => !!probe.fastenDrawing()), 'the drawing in their place')
+  })
+
+  test('a fastened part: a face of the target pressed is one step', async () => {
+    const start = await state()
+    const was = await read(() => probe.fastening('forearm'))
+    const face = was.body0.face === 'front' ? 'right' : 'front'
+    await press(`[face="${face}"]`, { within: 'figure-fasten-drawing' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.equal((await read(() => probe.fastening('forearm'))).body0.face, face)
+  })
+
+  test('a fastened part: flush pressed is one step, and the drawing shows it', async () => {
+    const start = await state()
+    await press('button[mode="flush"]', { within: 'figure-fasten-drawing' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.equal(await read(() => probe.fastenMode()), 'flush')
+  })
+
+  test('a fastened part: the footprint dragged on the face and let go is one step', async () => {
+    const start = await state()
+    const foot = await element('g[footprint] rect', { within: 'figure-fasten-drawing' })
+    const at = await foot.evaluate(e => {
+      e.scrollIntoView({ block: 'center' })
+      const b = e.getBoundingClientRect()
+      return { x: b.left + b.width / 2, y: b.top + b.height / 2 }
+    })
+    await page().mouse.move(at.x, at.y)
+    await page().mouse.down()
+    for (let i = 1; i <= 5; i++) await page().mouse.move(at.x + 6 * i, at.y)
+    await page().mouse.up()
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    await sleep(300)
+    assert.equal((await state()).revision, start.revision + 1, 'and only one')
+  })
+
+  test('fastened to the plane: the plane is named by the placement, chosen, and set on only', async () => {
+    await mount('rollers')
+    await pick('bed')
+    const list = await target()
+    assert.equal(list.value, '__plane')
+    assert.equal(list.options.find(o => o.value === '__plane').text, 'figure.label.resize-place-floor')
+    assert.deepEqual((await read(() => probe.fastenDrawing())).modes, [], 'one way only: no choice offered')
+  })
+
+  test('a part that turns in place may have its centre on the face; a part that does not, not', async () => {
+    await pick('roller')
+    assert.deepEqual((await read(() => probe.fastenDrawing())).modes, ['meet', 'flush', 'centre'])
+    await pick('mark')
+    assert.deepEqual((await read(() => probe.fastenDrawing())).modes, ['meet', 'flush'])
+  })
+
+  test('a new fastening waits for 붙이기; the part\'s own face follows the target\'s face and how', async () => {
+    await mount('door')
+    await pick('leaf')
+    await press('button[act]', { has: 'figure.button.fasten-start' })
+    await until(() => probe.fastenForm().some(s => s.label === 'figure.label.target-part'), 'the target asked')
+    const targetSelect = await page().evaluateHandle(() => {
+      const deep = (root = document) => [...root.querySelectorAll('select')].concat(...[...root.querySelectorAll('*')].filter(e => e.shadowRoot).map(e => deep(e.shadowRoot)))
+      return deep().find(s => s.previousElementSibling?.textContent?.trim() === 'figure.label.target-part') ?? null
+    })
+    await targetSelect.select('frame')
+    await until(() => !!probe.fastenDrawing(), 'the fastening drawing')
+    const start = await state()
+    await press('[face="front"]', { within: 'figure-fasten-drawing' })
+    await sleep(300)
+    assert.equal((await state()).revision, start.revision, 'nothing sent before 붙이기')
+    await press('button[act]', { text: 'linkfigure.button.fasten' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    const joint = await read(() => probe.fastening('leaf'))
+    assert.deepEqual(joint.body0, { part: 'frame', face: 'front' })
+    assert.equal(joint.body1.face, 'back', 'set on the front, by its back')
+  })
+})
+
+describe('the face choice: asked where the edit was made, and the same edit goes again with it', () => {
+  before(async () => {
+    await mount('tote')
+    await pick('bin')
+  })
+
+  test('opening the floor under the divider in the 단면 group asks where the divider goes, there; nothing sent', async () => {
+    const start = await state()
+    await press('g[end="start"] rect', { within: 'figure-section-panel' })
+    await until(() => probe.sectionPanel().faceMapping, 'the choice in the 단면 group')
+    assert.equal((await state()).revision, start.revision)
+    assert.equal((await state()).error, '', 'asked, not refused')
+    assert.deepEqual(await read(() => probe.faceMapping()), { rows: 1, apply: { disabled: true } }, 'apply waits for every row')
+  })
+
+  test('another part picked lets the question go', async () => {
+    await pick('block')
+    await pick('bin')
+    assert.equal(await read(() => probe.faceMapping()), null)
+  })
+
+  test('chosen, the same edit goes in one step with where the divider goes', async () => {
+    const start = await state()
+    await press('g[end="start"] rect', { within: 'figure-section-panel' })
+    await until(() => probe.faceMapping(), 'the choice')
+    await (await element('select', { within: 'figure-face-mapping' })).select('top')
+    await until(() => !probe.faceMapping().apply.disabled, 'apply open')
+    await press('button[act]', { within: 'figure-face-mapping' })
+    await until(r => probe.state().revision === r + 1, 'one step', start.revision)
+    assert.deepEqual((await read(() => probe.fastening('divider'))).body0, { part: 'bin', face: 'top' })
+    assert.equal((await held('bin')).cavity.start, 'open')
+    assert.equal(await read(() => probe.faceMapping()), null)
+  })
+
+  test('in the section editor: apply is held open with the choice in it; chosen, it goes and the editor closes', async () => {
+    await mount('tote')
+    await pick('bin')
+    await openEditor()
+    const start = await state()
+    await press('g[end="start"] rect', { within: 'figure-section-editor' })
+    await press('footer button[primary]', { within: 'figure-section-editor' })
+    await until(() => probe.sectionEditor()?.faceMapping, 'the choice in the editor')
+    assert.equal((await state()).revision, start.revision)
+    assert.equal((await panelNow()).faceMapping, false, 'asked where the edit was made only')
+    await (await element('select', { within: 'figure-face-mapping' })).select('top')
+    await press('button[act]', { within: 'figure-face-mapping' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision + 1)
+    assert.deepEqual((await read(() => probe.fastening('divider'))).body0, { part: 'bin', face: 'top' })
+  })
+})
+
+describe('the section editor\'s room: side by side when there is room, taking turns when there is not', () => {
+  before(async () => {
+    await page().setViewport({ width: 2400, height: 900 })
+    await mount('quad')
+    await pick('wedge')
+    await openEditor()
+  })
+  after(async () => {
+    await page().setViewport({ width: 1400, height: 900 })
+  })
+
+  test('with room beside it, no tabs, and apply and cancel stand at its foot inside it', async () => {
+    const now = await editorNow()
+    assert.equal(now.narrow, false)
+    assert.equal(now.tabs, false)
+    for (const b of now.footer) {
+      assert.ok(b.bottom <= now.host.bottom && b.top >= now.bodyBox.bottom - 0.5, `a footer button inside, under the body: ${JSON.stringify(b)}`)
+    }
+  })
+
+  test('the scene behind focused: Delete deletes the chosen point and Esc asks -- the scene does not take them', async () => {
+    await press('g[point="p4"] circle', { within: 'figure-section-editor' })
+    /* The part's right side, beside the editor: the editor stands over its middle. */
+    const at = await read(() => probe.partOnPage('wedge'))
+    await page().mouse.click((await editorNow()).host.right + 30, at.y)
+    await sleep(300)
+    assert.equal((await state()).selected, 'wedge')
+    const keys = await read(() => probe.activePath())
+    assert.ok(keys.includes('FIGURE-CANVAS'), `the scene has the keys: ${keys}`)
+    const start = await state()
+    await page().keyboard.press('Delete')
+    await until(() => probe.sectionEditor().points === 3, 'the point deleted')
+    assert.ok((await read(() => probe.ids())).includes('wedge'), 'the part stays')
+    await page().keyboard.press('Escape')
+    await until(() => probe.closeChoice(), 'the close question')
+    assert.equal((await state()).selected, 'wedge', 'the part stays selected')
+    await press('md-text-button', { within: 'figure-section-close-choice', text: 'figure.button.section-editor-discard' })
+    await editorGone()
+    assert.equal((await state()).revision, start.revision)
+    await openEditor()
+  })
+
+  test('too little room beside it (yet wider than itself): the outline and the solid take turns', async () => {
+    await page().setViewport({ width: 1400, height: 900 })
+    const now = await until(() => probe.sectionEditor().narrow && probe.sectionEditor(), 'narrow')
+    assert.ok(now.room.width > now.host.width, `the room is wider than the editor: ${now.room.width}`)
+    assert.equal(now.tabs, true)
+    await press('nav[tabs] button', { within: 'figure-section-editor', text: 'figure.label.section-editor-solid' })
+    const solid = await until(() => !probe.sectionEditor().body && probe.sectionEditor(), 'the outline put away')
+    assert.equal(solid.show, 'solid')
+    await page().setViewport({ width: 2400, height: 900 })
+    const wide = await until(() => !probe.sectionEditor().narrow && probe.sectionEditor(), 'side by side again')
+    assert.equal(wide.body, true)
+  })
+})
+
+test('the page raised no error', () => {
+  assert.deepEqual(opened.errors, [])
+})