@things-factory/figure-ui 10.1.146 → 10.1.149

package/test/browser/places-mesh.check.mjs

@@ -0,0 +1,239 @@
+/*
+ * A GLB made into a mesh part (ADR-0129) and places made by a rule (ADR-0118), in a real browser, driven as a person
+ * does: the palette's import button and the file chooser, the choice of what of the file becomes a part, the places
+ * choice, the shared slot layout editor's preset, fields and Apply. Then what the page says and what the session holds
+ * are read. The page loads no translations, so the words read are i18n keys. The server that reads a GLB is answered in
+ * memory (figure-service tests its reading).
+ *
+ * Run:  node --test test/browser/places-mesh.check.mjs
+ */
+import { test, describe, before, after } from 'node:test'
+import assert from 'node:assert/strict'
+import { writeFileSync, mkdtempSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+import { addFigureBox, createFigureAsset, serializeFigureAsset } from '@hatiolab/figure-model'
+
+import { buildPage } from './build.mjs'
+import { openPage } from './serve.mjs'
+
+const sleep = ms => new Promise(done => setTimeout(done, ms))
+
+let opened
+before(async () => {
+  opened = await openPage(await buildPage('places-mesh-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 source = () => read(() => probe.source())
+const drawn = () => read(() => look.drawn())
+
+async function until(fn, args, what, ms = 8000) {
+  const deadline = Date.now() + ms
+  for (;;) {
+    if (await read(fn, ...args)) return
+    if (Date.now() > deadline) assert.fail(`waited for ${what}`)
+    await sleep(50)
+  }
+}
+const settled = () => read(() => document.querySelector('figure-editor').updateComplete)
+
+async function mount(asset) {
+  await read(text => harness.mount('given', text), serializeFigureAsset(asset))
+  await until(() => look.drawn().length > 0, [], 'the board is drawn')
+}
+/** The element `findDeep` finds, as a handle the mouse and keyboard act on. */
+const handle = (selector, options = {}) => page().evaluateHandle((s, o) => findDeep(s, o), selector, options)
+async function click(selector, options = {}, what = selector) {
+  const element = await handle(selector, options)
+  assert.ok(await element.evaluate(e => !!e), `${what} is on the page`)
+  await element.evaluate(e => e.scrollIntoView({ block: 'center' }))
+  await element.click()
+  await settled()
+}
+async function type(selector, options, text) {
+  const field = await handle(selector, options)
+  assert.ok(await field.evaluate(e => !!e), `${selector} is on the page`)
+  await field.evaluate(e => e.scrollIntoView({ block: 'center' }))
+  await field.click({ clickCount: 3 })
+  await page().keyboard.type(text)
+  await page().keyboard.press('Tab')
+  await settled()
+}
+async function choose(selector, options, value) {
+  const select = await handle(selector, options)
+  assert.ok(await select.evaluate(e => !!e), `${selector} is on the page`)
+  await select.select(value)
+  await settled()
+}
+const has = (selector, options = {}) => read((s, o) => !!findDeep(s, o), selector, options)
+async function pick(part) {
+  const at = await read(id => probe.row(id), part)
+  assert.ok(at, `the row of ${part}`)
+  await page().mouse.click(at.x, at.y)
+  await until(id => probe.state().selected === id, [part], `${part} selected`)
+}
+
+const PALETTE = { 'palette.dark': '#2b2b2b', 'palette.neutral': '#9a9a9a', 'palette.primary': '#477b9e', 'palette.accent': '#f79c40', 'palette.light': '#dddddd' }
+const figure = name => {
+  const a = createFigureAsset(name)
+  a.palette = { ...a.palette, ...PALETTE }
+  return a
+}
+
+describe('a GLB made into a mesh part', () => {
+  const HASH = 'c'.repeat(64)
+  const bounds = (x0, y0, z0, x1, y1, z1) => ({ min: { x: x0, y: y0, z: z0 }, max: { x: x1, y: y1, z: z1 } })
+  const node = (index, name, b, triangles, more = {}) => ({ index, name, parent: index ? 0 : null, bounds: b, triangles, primitives: 1, position: { x: 0, y: 0, z: 0 }, rotation: { x: 0, y: 0, z: 0 }, ...more })
+  const girder = bounds(-3000, -800, -400, 3000, 200, 400)
+  const hoist = bounds(-200, -300, -150, 200, 0, 150)
+  const one = { hash: HASH, summary: { bounds: girder, triangles: 5000, primitives: 1, unit: 'm', nodes: [node(0, 'Girder', girder, 5000)] } }
+  const crane = {
+    hash: HASH,
+    summary: {
+      bounds: girder,
+      triangles: 6200,
+      primitives: 2,
+      unit: 'm',
+      nodes: [node(0, 'Girder', girder, 5000), node(1, 'Hoist Unit #2', hoist, 1200, { position: { x: 1000, y: -500, z: 0 }, rotation: { x: 0, y: 90, z: 0 } })]
+    }
+  }
+  const file = join(mkdtempSync(join(tmpdir(), 'figure-glb-')), 'crane.glb')
+  writeFileSync(file, Buffer.from('glTF'))
+
+  /** The palette's import button, the file chooser it opens, the file chosen. */
+  async function importFile() {
+    const [chooser] = await Promise.all([page().waitForFileChooser({ timeout: 4000 }), click('button[shape]', { has: 'figure.button.import-mesh' }, 'the import button')])
+    await chooser.accept([file])
+    await settled()
+  }
+  const meshNodes = () => read(() => probe.source().document.model.nodes.filter(n => n.op === 'mesh@1'))
+
+  before(async () => {
+    await mount(addFigureBox(figure('Crane'), { id: 'box', size: { x: 400, y: 400, z: 400 }, position: { x: 0, y: 200, z: 0 } }))
+  })
+
+  test('the file chooser takes GLB files', async () => {
+    assert.equal(await read(() => findDeep('input[mesh-file]').accept), '.glb,model/gltf-binary')
+  })
+
+  test('a file with one node: uploaded, added at once as one step, named by the file, selected', async () => {
+    await read(a => meshServer.answer({ upload: a }), one)
+    const start = await state()
+    await importFile()
+    await until(() => probe.ids().includes('crane'), [], 'the part made of the file')
+    assert.deepEqual((await read(() => meshServer.uploads())).at(-1), { name: 'crane.glb', size: 4 })
+    const after = await state()
+    assert.equal(after.revision, start.revision + 1, 'one step')
+    assert.equal(after.selected, 'crane')
+    assert.equal(after.error, '')
+    const [mesh] = await meshNodes()
+    assert.equal(mesh.params.asset, `sha256-${HASH}`)
+    assert.equal(await has('figure-mesh-choice'), false, 'nothing to choose between: no question')
+  })
+
+  test('a file of several nodes: the author is asked, and the node chosen is the part, where the file had it', async () => {
+    await read(a => meshServer.answer({ upload: a }), crane)
+    const start = await state()
+    await importFile()
+    await until(() => !!findDeep('figure-mesh-choice'), [], 'the question')
+    const choices = await read(() => [...findDeep('figure-mesh-choice').shadowRoot.querySelectorAll('li button')].map(b => b.textContent.replace(/\s+/g, ' ').trim()))
+    assert.equal(choices.length, 3)
+    assert.match(choices[0], /^figure\.text\.mesh-whole-file/)
+    assert.match(choices[2], /^Hoist Unit #2/)
+    await click('button', { within: 'figure-mesh-choice', has: 'Hoist Unit #2' })
+    await until(() => probe.ids().includes('Hoist-Unit-2'), [], 'the hoist made a part')
+    const after = await state()
+    assert.equal(after.revision, start.revision + 1)
+    assert.equal(after.selected, 'Hoist-Unit-2')
+    const hoistNode = (await meshNodes()).find(n => n.params.node === 'node-1')
+    assert.ok(hoistNode, 'the part is the node, not the whole file')
+  })
+
+  test('the question cancelled: nothing added', async () => {
+    await read(a => meshServer.answer({ upload: a }), crane)
+    const start = await state()
+    await importFile()
+    await until(() => !!findDeep('figure-mesh-choice'), [], 'the question')
+    await click('md-text-button', { within: 'figure-mesh-choice', text: 'figure.button.cancel' })
+    await until(() => !findDeep('figure-mesh-choice'), [], 'the question gone')
+    assert.equal((await state()).revision, start.revision)
+  })
+
+  test('a file the server refuses: said in its words, nothing added', async () => {
+    await read(() => meshServer.answer({ refused: 'The file is larger than 64 MiB' }))
+    const start = await state()
+    await importFile()
+    await until(() => probe.state().error === 'The file is larger than 64 MiB', [], 'the refusal said')
+    assert.equal((await state()).revision, start.revision)
+  })
+
+  test('the app fetches a mesh file from its own server, under the domain it is on', async () => {
+    assert.equal(await read(() => meshUrlAt('/domain/acme/figure-modeller/f1')), `/domain/acme/figure-mesh/${HASH}`)
+    assert.equal(await read(() => meshUrlAt('/figure-modeller/f1')), `/figure-mesh/${HASH}`)
+  })
+})
+
+describe('places made by a rule: the shared slot layout editor on a part\'s face', () => {
+  before(async () => {
+    await mount(addFigureBox(figure('Stacker'), { id: 'fork', size: { x: 1200, y: 50, z: 900 }, position: { x: 0, y: 25, z: 0 } }))
+    await pick('fork')
+    const tab = await read(l => probe.tab(l), 'figure.label.tab-short-capability')
+    await page().mouse.click(tab.x, tab.y)
+    await settled()
+  })
+
+  test('one places section, one at a time first; by a rule shows the editor, with no default to fall back to', async () => {
+    assert.equal(await has('figure-slot-layout-panel'), false)
+    await click('md-filter-chip[data-value="rule"]', {}, 'the by-a-rule choice')
+    await until(() => !!findDeep('ox-slot-layout-editor'), [], 'the editor')
+    assert.equal(await has('button[data-action="use-default"]'), false, 'no default: the figure\'s layout is the only one')
+  })
+
+  test('a preset on the fork\'s top: a slot that names no type is held back with the figure\'s words', async () => {
+    assert.equal(await read(() => findDeep('input[data-preset="width"]').value), '1200', 'the face\'s size is where the preset starts')
+    await type('input[data-preset="slotHeight"]', {}, '1000')
+    await click('button[data-action="start-preset"]')
+    assert.equal(await read(() => findDeep('button[data-action="apply"]').disabled), true)
+    assert.equal(await has('*', { within: 'ox-slot-layout-editor', has: 'figure.text.slot-accepts-required' }), true)
+  })
+
+  test('the slot names a type; Apply is one step, the layout the figure holds, its slots drawn on the fork', async () => {
+    const start = await state()
+    await choose('select[data-field="accepts-mode"]', {}, 'LIST')
+    await type('input[data-field="accepts"]', {}, 'PALLET')
+    await click('button[data-action="apply"]')
+    await until(r => probe.state().revision === r + 1, [start.revision], 'the layout written')
+    const held = (await source()).document.capabilities.slotLayout
+    assert.equal(held.role, 'seat')
+    assert.deepEqual(held.anchors.map(a => [a.id, a.frame]), [['fork', 'fork.face.top.frame']], 'on the fork\'s top')
+    assert.deepEqual(held.layout.tiers[0].layout.slot, { allowed: { width: 1200, depth: 900, height: 1000 }, accepts: ['PALLET'] })
+    assert.equal(held.layout.preset.key, 'single')
+    await until(() => look.drawn().includes('__slot:t1_s1'), [], 'the slot drawn')
+  })
+
+  test('a layout figure-model refuses is said from its details, nothing written', async () => {
+    const start = await state()
+    const layout = (await source()).document.capabilities.slotLayout.layout
+    await read(
+      l => look.tell('places', 'command', { action: { kind: 'set-slot-layout', label: 'Forks', role: 'seat', anchors: [{ id: 'a', part: 'fork', face: 'top' }, { id: 'a', part: 'fork', face: 'top' }], layout: l } }),
+      layout
+    )
+    await until(() => probe.state().error === 'figure.text.slot-anchor-duplicate', [], 'the refusal said')
+    assert.equal((await state()).revision, start.revision)
+  })
+
+  test('removed: one step, no layout, no slots drawn', async () => {
+    const start = await state()
+    await click('button', { within: 'figure-slot-layout-panel', has: 'figure.button.remove-slot-layout' })
+    await until(r => probe.state().revision === r + 1, [start.revision], 'the layout removed')
+    assert.equal((await source()).document.capabilities.slotLayout, undefined)
+    assert.equal((await drawn()).some(n => n.startsWith('__slot')), false)
+  })
+})