@operato/help 10.29.17 → 10.29.20

package/test/ox-doc.test.ts

@@ -0,0 +1,94 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing'
+
+import '../src/components/ox-doc.js'
+import '../src/components/ox-help-spot.js'
+import type { OxDoc } from '../src/components/ox-doc.js'
+
+/**
+ * ox-doc reads /helps/{topic}.html and renders it; the products that used to keep their own copy rely on
+ * these behaviours.
+ */
+const DOCS: Record<string, string> = {
+  'a/one': `<h1 id="top">One</h1><p>lead</p><h2 id="part">Part</h2><p>in part</p><table><tr><td>x</td></tr></table><h2 id="next">Next</h2><p>after</p><a data-topic="a/two#end">two</a>`,
+  'a/two': `<h1>Two</h1><h2 id="end">End</h2>`
+}
+
+let requests: string[] = []
+const realFetch = window.fetch
+
+beforeEach(() => {
+  requests = []
+  window.fetch = (async (input: RequestInfo | URL) => {
+    const url = String(input)
+    requests.push(url)
+    const topic = url.replace(/^\/helps\//, '').replace(/\.html.*$/, '')
+    return DOCS[topic] ? new Response(DOCS[topic]) : new Response('', { status: 404 })
+  }) as typeof window.fetch
+})
+
+afterEach(() => {
+  window.fetch = realFetch
+})
+
+const bodyOf = (el: OxDoc) => el.shadowRoot!.querySelector('.body') as HTMLElement
+
+describe('ox-doc', () => {
+  it('reads /helps/{topic}.html with the language and renders it', async () => {
+    const el = await fixture<OxDoc>(html`<ox-doc topic="a/one"></ox-doc>`)
+    await waitUntil(() => bodyOf(el)?.querySelector('h1'))
+
+    expect(requests[0]).to.match(/^\/helps\/a\/one\.html\?lng=/)
+    expect(bodyOf(el).querySelector('h1')!.textContent).to.equal('One')
+  })
+
+  it('wraps tables in a scrolling box so they do not push the page wide', async () => {
+    const el = await fixture<OxDoc>(html`<ox-doc topic="a/one"></ox-doc>`)
+    await waitUntil(() => bodyOf(el)?.querySelector('table'))
+
+    expect(bodyOf(el).querySelector('table')!.parentElement!.classList.contains('tablewrap')).to.equal(true)
+  })
+
+  it('shows only the named section, up to the next heading of its level', async () => {
+    const el = await fixture<OxDoc>(html`<ox-doc topic="a/one" section="part"></ox-doc>`)
+    await waitUntil(() => bodyOf(el)?.querySelector('h2'))
+
+    expect(bodyOf(el).textContent).to.contain('in part')
+    expect(bodyOf(el).textContent).to.not.contain('lead')
+    expect(bodyOf(el).textContent).to.not.contain('after')
+  })
+
+  it('follows a topic link in place and tells the host, without keeping the anchor in the file name', async () => {
+    const el = await fixture<OxDoc>(html`<ox-doc topic="a/one"></ox-doc>`)
+    await waitUntil(() => bodyOf(el)?.querySelector('a[data-topic]'))
+
+    let told: any
+    el.addEventListener('ox-doc-topic', e => (told = (e as CustomEvent).detail))
+    ;(bodyOf(el).querySelector('a[data-topic]') as HTMLElement).click()
+    await waitUntil(() => bodyOf(el)?.querySelector('h1')?.textContent === 'Two')
+
+    expect(told).to.deep.equal({ topic: 'a/two', hash: 'end' })
+    expect(requests[requests.length - 1]).to.match(/^\/helps\/a\/two\.html\?/)
+  })
+
+  it('says the topic is missing instead of showing an empty page', async () => {
+    const el = await fixture<OxDoc>(html`<ox-doc topic="a/none"></ox-doc>`)
+    await waitUntil(() => el.shadowRoot!.querySelector('.status.err'))
+
+    expect(el.shadowRoot!.querySelector('.status.err')!.textContent).to.contain('a/none')
+  })
+})
+
+describe('ox-help-spot', () => {
+  it('opens the section in place and closes on Escape', async () => {
+    const el = await fixture<HTMLElement>(html`<ox-help-spot topic="a/one" section="part"></ox-help-spot>`)
+    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()
+    await waitUntil(() => el.shadowRoot!.querySelector('ox-doc'))
+
+    const doc = el.shadowRoot!.querySelector('ox-doc') as OxDoc
+    expect(doc.getAttribute('section')).to.equal('part')
+    expect(doc.hasAttribute('compact')).to.equal(true)
+
+    el.shadowRoot!.querySelector('.panel')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, composed: true }))
+    await waitUntil(() => !el.shadowRoot!.querySelector('.panel'))
+  })
+})