@operato/help 10.29.33 → 10.29.34

package/test/ox-doc.test.ts

@@ -2,7 +2,10 @@ import { expect, fixture, html, waitUntil } from '@open-wc/testing'
 
 import '../src/components/ox-doc.js'
 import '../src/components/ox-help-spot.js'
+import '../src/viewparts/ox-help-panel.js'
 import type { OxDoc } from '../src/components/ox-doc.js'
+import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+import { store } from '@operato/shell'
 
 /**
  * ox-doc reads /helps/{topic}.html and renders it; the products that used to keep their own copy rely on
@@ -79,54 +82,27 @@ describe('ox-doc', () => {
 })
 
 describe('ox-help-spot', () => {
-  /* Its two links are words of the reader's language, not English left in a Korean screen. */
-  it('names its links in the reader\'s language', async () => {
-    const { i18next } = await import('@operato/i18n')
-    i18next.addResourceBundle(i18next.language || 'en', 'translations', { 'button.close': '닫기', 'text.help-open-full': '전체 보기' }, true, true)
-    const el = await fixture<HTMLElement>(html`<ox-help-spot topic="a/one" section="part"></ox-help-spot>`)
-    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))
-    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()
-    await waitUntil(() => el.shadowRoot!.querySelector('.bar'))
-
-    const bar = el.shadowRoot!.querySelector('.bar')!.textContent!.replace(/\s+/g, ' ')
-    expect(bar).to.contain('전체 보기')
-    expect(bar).to.contain('닫기')
-    expect(bar).not.to.contain('close')
-  })
-
-  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>`)
-    await waitUntil(() => el.shadowRoot!.querySelector('button.q'))
-    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()
-    await waitUntil(() => el.shadowRoot!.querySelector('ox-doc'))
-
-    /* The dialog says what opened and can take focus (operato-twin's overlay guard asks both). */
-    const panel = el.shadowRoot!.querySelector('.panel')!
-    expect(panel.getAttribute('aria-label')).to.equal('help')
-    expect(panel.getAttribute('tabindex')).to.equal('-1')
-
-    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'))
-  })
-
-  /* A `?` in a grid header sits in nowrap, bold, right-aligned text; its panel is a document and must not take those. */
-  it('opens a panel that wraps and reads from the start, whatever the text around the ?', async () => {
+  /*
+   * The `?` opens the app's help overlay at its section and draws no panel of its own: one drawn inside it sat in
+   * whatever held the `?` (a card button, a grid header), took that parent's pointer and text settings, and handed
+   * its scrolling and presses back to it. The press of the `?` itself is not a press of its parent either.
+   */
+  it('opens the help overlay at its section, and its press does not reach what holds it', async () => {
+    appendViewpart({ name: 'help', viewpart: { show: false, hovering: 'edge', template: html`<ox-help-panel></ox-help-panel>` }, position: VIEWPART_POSITION.ASIDEBAR })
+    let parentPresses = 0
     const host = await fixture<HTMLElement>(
-      html`<div style="white-space: nowrap; text-align: right; font-weight: 700; width: 120px"><ox-help-spot topic="a/one" section="part"></ox-help-spot></div>`
+      html`<button style="cursor: pointer" @click=${() => parentPresses++} @pointerdown=${() => parentPresses++}><ox-help-spot topic="a/one" section="part"></ox-help-spot></button>`
     )
     const el = host.querySelector('ox-help-spot') as HTMLElement
     await waitUntil(() => el.shadowRoot!.querySelector('button.q'))
-    ;(el.shadowRoot!.querySelector('button.q') as HTMLButtonElement).click()
-    await waitUntil(() => el.shadowRoot!.querySelector('.panel'))
-
-    const panel = getComputedStyle(el.shadowRoot!.querySelector('.panel')!)
-    expect(panel.whiteSpace).to.equal('normal')
-    expect(panel.textAlign).to.equal('start')
-    expect(panel.fontWeight).to.equal('400')
+    const q = el.shadowRoot!.querySelector('button.q') as HTMLButtonElement
+    q.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true }))
+    q.click()
+
+    expect(parentPresses).to.equal(0)
+    expect(el.shadowRoot!.querySelector('.panel, ox-doc')).to.equal(null)
+    expect(history.state?.overlay?.name).to.equal('help')
+    expect((store.getState() as any).layout.viewparts.help.templateProperties).to.deep.equal({ topic: 'a/one', section: 'part' })
   })
 
   /* A `?` is placed before its help is written; it must not open 「Content not found」 or the whole document. */
@@ -150,3 +126,25 @@ describe('ox-help-spot', () => {
     expect(missing.hasAttribute('hidden')).to.equal(true)
   })
 })
+
+describe('ox-help-panel', () => {
+  /* The overlay shows what a `?` asked about - an html document's section - and the older markdown topics as before. */
+  it('shows an html topic through ox-doc at the section, and a markdown topic as markdown', async () => {
+    const html1 = await fixture<HTMLElement>(html`<ox-help-panel topic="a/one" section="part"></ox-help-panel>`)
+    await waitUntil(() => html1.shadowRoot!.querySelector('ox-doc'))
+    const doc = html1.shadowRoot!.querySelector('ox-doc') as OxDoc
+    expect([doc.getAttribute('topic'), doc.getAttribute('section'), doc.hasAttribute('compact')]).to.deep.equal(['a/one', 'part', true])
+
+    const md = await fixture<HTMLElement>(html`<ox-help-panel topic="b/md"></ox-help-panel>`)
+    await waitUntil(() => md.shadowRoot!.querySelector('ox-markdown'))
+    expect(md.shadowRoot!.querySelector('ox-doc')).to.equal(null)
+  })
+})
+
+describe('ox-doc anchor', () => {
+  /* The help page opens the whole document at the part the overlay showed. */
+  it('scrolls its scrolling parent to the anchor once the document is drawn', async () => {
+    const box = await fixture<HTMLElement>(html`<div style="height: 40px; overflow: auto"><ox-doc topic="a/one" anchor="next"></ox-doc></div>`)
+    await waitUntil(() => box.scrollTop > 0, 'the box scrolls to #next')
+  })
+})

package/translations/en.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "Close",
-  "text.help-open-full": "open full"
-}

package/translations/es.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "Cerrar",
-  "text.help-open-full": "abrir completo"
-}

package/translations/ja.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "閉じる",
-  "text.help-open-full": "全体を開く"
-}

package/translations/ko.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "닫기",
-  "text.help-open-full": "전체 보기"
-}

package/translations/ms.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "Tutup",
-  "text.help-open-full": "buka penuh"
-}

package/translations/zh.json

@@ -1,4 +0,0 @@
-{
-  "button.close": "关闭",
-  "text.help-open-full": "打开全文"
-}