@operato/layout 10.29.37 → 10.29.39

package/test/address-sequences.test.ts

@@ -0,0 +1,185 @@
+import { expect, fixture } from '@open-wc/testing'
+import { sendMouse } from '@web/test-runner-commands'
+import { html } from 'lit'
+import { addressController, writeAddress } from '@operato/utils/address.js'
+import { closeOverlay, openPopup } from '../src/index.js'
+import type { PopupHandle } from '@operato/popup'
+
+const wait = () => new Promise(resolve => setTimeout(resolve, 10))
+const navigation = () => (window as any).navigation
+
+/** An independent product model: visible popups, the user's URL steps, and the cursor among them. */
+class Expected {
+  entries: string[]
+  index = 0
+  popups: { at: number; below: number }[] = []
+  constructor(url: string) {
+    this.entries = [url]
+  }
+  write(url: string, replace = false) {
+    if (this.popups.length) return false
+    if (url === this.entries[this.index]) return true
+    if (replace) this.entries[this.index] = url
+    else {
+      this.entries.splice(++this.index)
+      this.entries.push(url)
+    }
+    return true
+  }
+  open() {
+    const below = this.index
+    const url = this.entries[this.index]
+    this.entries.splice(++this.index)
+    this.entries.push(url)
+    this.popups.push({ at: this.index, below })
+  }
+  close() {
+    const top = this.popups.pop()
+    if (top) this.index = top.below
+  }
+  move(delta: number) {
+    this.index += delta
+    this.popups = this.popups.filter(popup => popup.at <= this.index)
+  }
+}
+
+describe('address behaviour against an independent expected history', () => {
+  it('matches every step, including close followed immediately by a new committed query', async () => {
+    const events: unknown[] = []
+    let phase = 'setup'
+    const snapshot = (kind: string, details?: unknown) => events.push({
+      kind, phase, details, time: performance.now(), ready: document.readyState,
+      historyLength: history.length, activated: navigator.userActivation.hasBeenActive, current: navigation().currentEntry.key,
+      entries: navigation().entries().map((entry: any) => [entry.key, entry.index, new URL(entry.url).search])
+    })
+    const observed = new WeakSet<object>()
+    const observeEntries = () => navigation().entries().forEach((entry: any) => {
+      if (observed.has(entry)) return
+      observed.add(entry)
+      entry.addEventListener('dispose', () => snapshot('dispose', { key: entry.key, url: entry.url }))
+    })
+    const navigate = (event: any) => snapshot('navigate', { type: event.navigationType,
+      destination: event.destination.key, url: event.destination.url, cancelled: event.defaultPrevented })
+    const changed = (event: any) => {
+      snapshot('currententrychange', { type: event.navigationType, from: event.from.key })
+      observeEntries()
+    }
+    navigation().addEventListener('navigate', navigate)
+    navigation().addEventListener('currententrychange', changed)
+    const original = { pushState: history.pushState, replaceState: history.replaceState, traverseTo: navigation().traverseTo }
+    for (const method of ['pushState', 'replaceState'] as const) {
+      history[method] = function (...args: Parameters<History[typeof method]>) {
+        snapshot(method, { url: String(args[2]), stack: new Error().stack })
+        return original[method].apply(this, args)
+      }
+    }
+    navigation().traverseTo = function (...args: any[]) {
+      snapshot('traverseTo', { key: args[0] })
+      const result = original.traverseTo.apply(this, args)
+      for (const name of ['committed', 'finished']) result[name].then(
+        () => snapshot(name, { key: args[0] }),
+        (error: Error) => snapshot(name, { key: args[0], error: error.name }))
+      return result
+    }
+    observeEntries()
+    snapshot('start')
+    try {
+    // The oracle models user actions. At Chrome's 50-entry limit, an unactivated document's
+    // entries are preferentially pruned, including a recently pushed baseline. See the native
+    // no-app control in operato-application/test/address-browser/native-retention.cjs.
+    const start = await fixture<HTMLButtonElement>(html`<button>Start history sequence</button>`)
+    const bounds = start.getBoundingClientRect()
+    await sendMouse({ type: 'click', position: [Math.round(bounds.x + bounds.width / 2), Math.round(bounds.y + bounds.height / 2)] })
+    expect(navigator.userActivation.hasBeenActive, 'real user activation for the product oracle').to.equal(true)
+    start.remove()
+    await fixture(html`<ox-header-bar></ox-header-bar>`)
+    addressController().registerQuery()
+    for (let seed = 1; seed <= 10; seed++) {
+      let randomState = seed
+      const random = () => (randomState = (Math.imul(1664525, randomState) + 1013904223) >>> 0) / 2 ** 32
+      expect(await writeAddress(`?filters=seed-${seed}`)).to.equal(true)
+      let floorKey = navigation().currentEntry.key
+      const floor = () =>
+        navigation()
+          .entries()
+          .findIndex((entry: { key: string }) => entry.key === floorKey)
+      const expected = new Expected(location.href)
+      let handles: PopupHandle[] = []
+      const trace: string[] = []
+      const snapshots: unknown[] = []
+      for (let step = 0; step < 30; step++) {
+        const action = Math.floor(random() * 7)
+        phase = `seed ${seed} step ${step} action ${action}`
+        snapshot('action')
+        trace.push(String(action))
+        if (action === 0 || action === 1 || action === 6) {
+          if (action === 6 && handles.length) {
+            handles.pop()!.close()
+            expected.close()
+          }
+          const url = new URL(expected.entries[expected.index])
+          url.searchParams.set(action === 1 ? 'f' : 'filters', `${seed}-${step}`)
+          const replace = action === 1
+          const accepted = await writeAddress(url, { replace })
+          expect(accepted, `seed ${seed}, step ${step}`).to.equal(expected.write(url.href, replace))
+          if (accepted && replace && expected.index === 0) floorKey = navigation().currentEntry.key
+        } else if (action === 2 && handles.length < 2) {
+          handles.push(openPopup(html`<div>picker</div>`, { backdrop: true, escapable: true }))
+          expected.open()
+        } else if (action === 3 && handles.length) {
+          handles.pop()!.close()
+          expected.close()
+        } else if (action === 4 && expected.index > 0) {
+          expected.move(-1)
+          await navigation().back().finished
+          handles = handles.slice(0, expected.popups.length)
+        } else if (action === 5 && expected.index + 1 < expected.entries.length) {
+          expected.move(1)
+          await navigation().forward().finished
+        }
+        await addressController().whenSettled()
+        for (let attempt = 0; navigation().currentEntry.index !== floor() + expected.index; attempt++) {
+          if (attempt > 100) throw new Error(`did not settle: seed ${seed}, step ${step}, trace ${trace}`)
+          await wait()
+        }
+        await wait()
+        snapshots.push({ step, action, floorKey, current: navigation().currentEntry.key,
+          entries: navigation().entries().map((entry: any) => [entry.key, entry.index, new URL(entry.url).search]) })
+        expect(
+          floor(),
+          `sequence retained: seed ${seed}, step ${step}, snapshots ${JSON.stringify(snapshots)}, trace ${trace}, entries ${navigation()
+            .entries()
+            .map((entry: { url: string }) => new URL(entry.url).search)}`
+        ).to.be.at.least(0)
+        const actual = navigation()
+          .entries()
+          .slice(floor())
+          .map((entry: { url: string }) => entry.url)
+        const detail = `seed ${seed}, step ${step}, trace ${trace}`
+        expect(actual, detail).to.deep.equal(expected.entries)
+        expect(location.href, detail).to.equal(expected.entries[expected.index])
+        const bar = document.querySelector('ox-header-bar')!.shadowRoot!
+        expect(bar.querySelectorAll('ox-floating-overlay').length, detail).to.equal(expected.popups.length)
+      }
+      while (handles.length) {
+        closeOverlay(handles.pop()!.name)
+        expected.close()
+        await addressController().whenSettled()
+        for (let attempt = 0; navigation().currentEntry.index !== floor() + expected.index; attempt++) {
+          if (attempt > 100) throw new Error('popup cleanup did not settle')
+          await wait()
+        }
+      }
+    }
+    } catch (error) {
+      console.error('ADDRESS_HISTORY_TRACE', JSON.stringify(events))
+      throw error
+    } finally {
+      history.pushState = original.pushState
+      history.replaceState = original.replaceState
+      navigation().traverseTo = original.traverseTo
+      navigation().removeEventListener('navigate', navigate)
+      navigation().removeEventListener('currententrychange', changed)
+    }
+  }).timeout(30000)
+})

package/test/entity360.test.ts

@@ -112,17 +112,17 @@ describe('shared nonmodal entity 360 dock', () => {
     expect(dock()).to.exist
   })
 
-  it('records distinct targets and preserves unrelated address state', () => {
+  it('records distinct targets and preserves unrelated address state', async () => {
     const initial = location.href
     history.replaceState({ userState: 42 }, '', initial)
     const first = new URL(initial)
     first.searchParams.set('f', 'testSpecifications:one')
     first.searchParams.set('revision', 'r1')
-    navigateEntity360(first.href)
+    expect(await navigateEntity360(first.href)).to.equal(true)
     expect(canGoBackEntity360()).to.equal(false)
     const second = new URL(first)
     second.searchParams.set('revision', 'r2')
-    navigateEntity360(second.href)
+    expect(await navigateEntity360(second.href)).to.equal(true)
     expect(canGoBackEntity360()).to.equal(true)
     expect(history.state.userState).to.equal(42)
     expect(history.state.entity360Previous).to.equal(first.href)

package/test/history-retention.test.ts

@@ -0,0 +1,25 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+import { openPopup } from '../src/index.js'
+
+const wait = () => new Promise(resolve => setTimeout(resolve, 30))
+
+describe('popup identity when the browser prunes old history', () => {
+  it('closing a nested popup keeps its parent even when entry indices have shifted', async () => {
+    await fixture(html`<ox-header-bar></ox-header-bar>`)
+    // Chrome retains a bounded session history. New entries can renumber existing entries.
+    for (let i = 0; i < 70; i++) history.pushState({}, '', `?retention=${i}`)
+    const parent = openPopup(html`<div>parent</div>`, { backdrop: true })
+    await wait()
+    const child = openPopup(html`<div>child</div>`, { backdrop: true })
+    await wait()
+    child.close()
+    await child.result
+    await wait()
+    expect(parent.closed, 'the parent is still open').to.equal(false)
+    const overlays = document.querySelector('ox-header-bar')!.shadowRoot!.querySelectorAll('ox-floating-overlay')
+    expect(overlays.length).to.equal(1)
+    parent.close()
+    await parent.result
+  })
+})