@operato/layout 10.29.24 → 10.29.26

package/test/entity360-kind.test.ts

@@ -0,0 +1,176 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html, render } from 'lit'
+import { store, UPDATE_CONTEXT } from '@operato/shell'
+import '../src/index.js'
+import {
+  closeEntity360,
+  entity360Link,
+  onEntity360Change,
+  openEntity360Kind,
+  redrawEntity360,
+  registerEntity360Kind,
+  type Entity360Subject,
+  type OxEntity360Dock
+} from '../src/index.js'
+
+/**
+ * A 360 opened by kind and id, the dock's own back trail, and the assistant subject it stands in for.
+ *
+ * A screen often holds an identifier, not a typed value: a location inside a stock line, an order
+ * inside a task's 360. It still opens the 360 of that kind, with the same link as entity360Name.
+ * Opening is a step in the address (f=kind:id), so back - the dock's or the browser's - returns to the one before.
+ */
+
+const settle = () => new Promise(resolve => setTimeout(resolve, 50))
+/** Go back and wait for the address to arrive - a late popstate would land in the next test. */
+const back = (go: () => void = () => history.back()) =>
+  new Promise<void>(resolve => {
+    window.addEventListener('popstate', () => setTimeout(resolve, 0), { once: true })
+    go()
+  })
+let bar: HTMLElement
+const dock = () => bar.shadowRoot!.querySelector('ox-entity360-dock') as OxEntity360Dock
+const subject = () => (store.getState() as any).route?.context?.subject
+const address = () => new URLSearchParams(location.search).get('f')
+
+registerEntity360Kind({ kind: 'kx-order', typenames: [], title: s => `order ${s.id}`, assistantSubject: true })
+registerEntity360Kind({ kind: 'kx-place', typenames: [], title: s => `place ${s.id}`, assistantSubject: true })
+registerEntity360Kind({ kind: 'kx-quiet', typenames: [], title: s => `quiet ${s.id}` })
+let late = ''
+registerEntity360Kind({ kind: 'kx-late', typenames: [], title: s => late || s.id })
+
+describe('entity 360 by kind', () => {
+  beforeEach(async () => {
+    history.replaceState(null, '', location.pathname)
+    bar = await fixture(html`<ox-aside-bar></ox-aside-bar>`)
+    store.dispatch({ type: UPDATE_CONTEXT, context: { title: 'page', subject: { type: 'page', id: 'P' } } })
+  })
+  afterEach(() => dock()?.view?.onClose())
+
+  it('★ an identifier of a registered kind is the same link as a name; an unregistered one stays text', async () => {
+    const host = document.createElement('div')
+    render(html`${entity360Link('kx-order', 'SO-1')}|${entity360Link('nobody', 'X-1')}|${entity360Link('kx-order', '')}`, host)
+
+    const anchors = host.querySelectorAll('a[data-entity360]')
+    expect(anchors.length).to.equal(1)
+    expect(anchors[0].textContent).to.equal('SO-1')
+    expect(host.textContent).to.include('X-1')
+  })
+
+  it('★ a click on the link opens that kind with that id', async () => {
+    const host = await fixture(html`<div>${entity360Link('kx-order', 'SO-2')}</div>`)
+    ;(host.querySelector('a') as HTMLElement).click()
+    await settle()
+
+    expect(dock().view!.title).to.equal('order SO-2')
+  })
+
+  it('★ opening is a step in the address; back returns to the 360 before', async () => {
+    openEntity360Kind('kx-order', { id: 'SO-3' })
+    await settle()
+    expect(address()).to.equal('kx-order:SO-3')
+    expect(dock().view!.onBack).to.equal(undefined)
+
+    openEntity360Kind('kx-place', { id: 'L-1' })
+    await settle()
+    expect(address()).to.equal('kx-place:L-1')
+
+    await back(() => dock().view!.onBack!())
+    expect(dock().view!.title).to.equal('order SO-3')
+    expect(address()).to.equal('kx-order:SO-3')
+  })
+
+  it('★ an id with colons (an EPC) survives the address', async () => {
+    openEntity360Kind('kx-order', { id: 'SO-6' })
+    await settle()
+    openEntity360Kind('kx-place', { id: 'urn:epc:id:sgln:0614141.00001.0' })
+    await settle()
+    openEntity360Kind('kx-order', { id: 'SO-7' })
+    await settle()
+    /* Back only from a step this test took - otherwise it would leave the test page. */
+    expect(address()).to.equal('kx-order:SO-7')
+    expect(dock().view!.onBack).to.be.a('function')
+
+    await back()
+    expect(dock().view!.title).to.equal('place urn:epc:id:sgln:0614141.00001.0')
+  })
+
+  it('★ closing leaves the address without a 360', async () => {
+    openEntity360Kind('kx-order', { id: 'SO-4' })
+    await settle()
+    dock().view!.onClose()
+    await settle()
+
+    expect(address()).to.equal(null)
+    expect(dock()).to.equal(null)
+  })
+
+  it('★ while open, the 360 is the page subject; closing gives the page its own back', async () => {
+    openEntity360Kind('kx-order', { id: 'SO-5' })
+    await settle()
+    expect(subject()).to.deep.equal({ type: 'kx-order', id: 'SO-5' })
+
+    openEntity360Kind('kx-place', { id: 'L-3' })
+    await settle()
+    expect(subject()).to.deep.equal({ type: 'kx-place', id: 'L-3' })
+
+    dock().view!.onClose()
+    await settle()
+    expect(subject()).to.deep.equal({ type: 'page', id: 'P' })
+  })
+
+  it('a kind that does not stand in for the page leaves the page subject alone', async () => {
+    openEntity360Kind('kx-quiet', { id: 'Q-1' })
+    await settle()
+    expect(subject()).to.deep.equal({ type: 'page', id: 'P' })
+  })
+
+  it('★ an app hears what the dock shows - open, back, and close', async () => {
+    const heard: (Entity360Subject | undefined)[] = []
+    const stop = onEntity360Change(subject => heard.push(subject))
+
+    openEntity360Kind('kx-order', { id: 'SO-8' })
+    await settle()
+    openEntity360Kind('kx-place', { id: 'L-8' })
+    await settle()
+    await back(() => dock().view!.onBack!())
+    dock().view!.onClose()
+    await settle()
+    stop()
+
+    expect(heard.map(one => (one ? `${one.kind}:${one.id}` : 'closed'))).to.deep.equal(['kx-order:SO-8', 'kx-place:L-8', 'kx-order:SO-8', 'closed'])
+  })
+
+  it('an app that let go of its selection closes the 360 and its step', async () => {
+    openEntity360Kind('kx-order', { id: 'SO-9' })
+    await settle()
+    closeEntity360()
+    await settle()
+
+    expect(dock()).to.equal(null)
+    expect(address()).to.equal(null)
+  })
+
+  it('redraw reads the title again - for a title its section learns later', async () => {
+    late = ''
+    openEntity360Kind('kx-late', { id: 'X-9' })
+    await settle()
+    expect(dock().view!.title).to.equal('X-9')
+
+    late = 'named later'
+    redrawEntity360()
+    await settle()
+    expect(dock().view!.title).to.equal('named later')
+  })
+
+  it('a link carries more for the sections, beside the id', async () => {
+    const heard: (Entity360Subject | undefined)[] = []
+    const stop = onEntity360Change(subject => heard.push(subject))
+    const host = await fixture(html`<div>${entity360Link('kx-order', 'SO-10', undefined, { instanceId: 'twin-2' })}</div>`)
+    ;(host.querySelector('a') as HTMLElement).click()
+    await settle()
+    stop()
+
+    expect(heard[0]?.value).to.include({ id: 'SO-10', instanceId: 'twin-2' })
+  })
+})