@operato/layout 10.27.0 → 10.28.0

package/test/url-tabs.test.ts

@@ -0,0 +1,80 @@
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+import '../src/index.js'
+import type { OxUrlTabs } from '../src/index.js'
+
+/**
+ * Tabs whose choice lives in the address (ADR-0060 decision 8 addendum): what is read, what is
+ * written, and that the two always go together.
+ */
+
+const TABS = [
+  { key: 'orders', label: 'orders' },
+  { key: 'ledger', label: 'ledger' },
+  { key: 'journal', label: 'journal' }
+]
+
+const start = location.href
+const at = (search: string, path = location.pathname) => history.replaceState(null, '', path + search)
+
+describe('ox-url-tabs', () => {
+  afterEach(() => history.replaceState(null, '', start))
+
+  it('★ opens on the tab the address names, and on the first when it names none', async () => {
+    at('?tab=ledger&q=x')
+    const named = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    expect(named.selected).to.equal('ledger')
+
+    at('?tab=nothing-like-it')
+    const unknown = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    expect(unknown.selected).to.equal('orders')
+  })
+
+  it('★ choosing a tab writes it into the address and keeps the rest of the query', async () => {
+    at('?q=x')
+    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    const lengthBefore = history.length
+    ;(tabs.shadowRoot!.querySelector('[data-key="journal"]') as HTMLButtonElement).click()
+
+    const query = new URLSearchParams(location.search)
+    expect(query.get('tab')).to.equal('journal')
+    expect(query.get('q')).to.equal('x')
+    expect(history.length).to.equal(lengthBefore)
+  })
+
+  it('the first tab is the default and is not written', async () => {
+    at('?tab=ledger')
+    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    tabs.select('orders')
+    expect(new URLSearchParams(location.search).has('tab')).to.equal(false)
+  })
+
+  it('★ back or forward to another address moves the tab, and the screen hears it', async () => {
+    at('?tab=ledger')
+    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    let heard = ''
+    tabs.addEventListener('tab-change', event => (heard = (event as CustomEvent).detail.key))
+
+    at('?tab=journal')
+    window.dispatchEvent(new PopStateEvent('popstate'))
+    expect(tabs.selected).to.equal('journal')
+    expect(heard).to.equal('journal')
+  })
+
+  it('arrow keys move between tabs', async () => {
+    at('')
+    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs .tabs=${TABS}></ox-url-tabs>`)
+    const first = tabs.shadowRoot!.querySelector('[data-key="orders"]') as HTMLButtonElement
+    first.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', bubbles: true, composed: true }))
+    expect(tabs.selected).to.equal('journal')
+  })
+
+  it('transitional path segment: the key after the page is read', async () => {
+    at('', '/domain/x/quality-list/disposition')
+    const tabs = await fixture<OxUrlTabs>(html`<ox-url-tabs base="quality-list" .tabs=${[
+      { key: 'inspection', label: 'i' },
+      { key: 'disposition', label: 'd' }
+    ]}></ox-url-tabs>`)
+    expect(tabs.selected).to.equal('disposition')
+  })
+})