@operato/context 10.19.0 → 10.20.0

package/test/action-bar-focus.test.ts

@@ -0,0 +1,83 @@
+/* 요소끼리 비교하지 않는다 — 실패하면 chai 가 DOM 을 펼치다 러너가 멈춘다. */
+import { expect, fixture } from '@open-wc/testing'
+import { html } from 'lit'
+
+import '../src/tools/ox-page-action-context-bar.js'
+
+/**
+ * 키보드로 온 사람이 **지금 어디인지 보인다.**
+ *
+ * ── 무엇이 있었나 ─────────────────────────────────────────────────────────
+ * 이 줄의 스타일에 `:host *:focus { outline: none }` 한 줄이 있었고 대신 그릴 것이 없었다. 그래서
+ * **하단 동작 줄의 단추에는 초점 표시가 아예 없었다** — 모든 제품의 모든 화면에 이 줄이 선다.
+ * [확인함] 2026-09-19 :3500 — 단추에 초점을 주고 재니 `outline-style: none` · `box-shadow: none`.
+ *
+ * 마우스로 누를 때 테두리가 뜨는 것이 싫어서 지운 것은 맞다. 그 뜻은 `:focus-visible` 이 정확히 낸다.
+ *
+ * ── 자리도 함께 준다 ──────────────────────────────────────────────────────
+ * 링은 단추 **밖으로 5px** 를 쓴다(3px 굵기 + 2px 띄움). 담는 줄이 `overflow: hidden` 이고 여백이
+ * 2px 이던 때는 그려도 위아래가 잘렸다. 그래서 이 시험은 **그렸나**와 **설 자리가 있나**를 함께 본다.
+ */
+
+const ACTIONS = [
+  { title: 'save', action: () => {} },
+  { title: 'cancel', action: () => {} }
+]
+
+async function bar() {
+  const el = (await fixture(html`
+    <ox-page-action-context-bar .actions=${ACTIONS}></ox-page-action-context-bar>
+  `)) as HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }
+
+  await el.updateComplete
+  return el
+}
+
+const buttonOf = (el: HTMLElement & { renderRoot: ShadowRoot }) => el.renderRoot.querySelector('button') as HTMLElement
+
+describe('하단 동작 줄의 초점 표시', () => {
+  it('키보드로 온 초점에 테두리를 그린다', async () => {
+    const el = await bar()
+
+    expect(buttonOf(el), '단추가 없다').to.not.equal(null)
+
+    /*
+     * 브라우저는 **키를 누른 뒤의 초점**만 키보드 초점으로 본다. 합성 키는 그림자 DOM 을 못 지나므로
+     * (2026-09-18 에 그것으로 없는 결함을 보고했다) 여기서는 규칙이 서 있는지를 본다. 실제로 그려지는
+     * 것은 앱에서 잰다.
+     *
+     * **주석을 걷고 본다.** 안 그러면 이 파일이 설명으로 적은 옛 규칙이 검사를 만족시킨다 —
+     * 자기 산문을 세는 것이 이 집 시험의 오래된 함정이다.
+     */
+    const rules = Array.from((el.constructor as any).elementStyles)
+      .map((sheet: any) => String(sheet.cssText ?? ''))
+      .join('\n')
+      .replace(/\/\*[\s\S]*?\*\//g, ' ')
+
+    /* 큰 문자열을 match 에 넣으면 실패 출력이 화면을 덮는다 — 참·거짓만 본다. */
+    expect(/:focus-visible\s*\{[^}]*outline:\s*3px solid/.test(rules), 'focus-visible 에 그릴 것이 없다').to.equal(true)
+    expect(/\*:focus\s*\{\s*outline:\s*none/.test(rules), '초점을 통째로 끄는 줄이 남아 있다').to.equal(false)
+    expect(
+      /:focus:not\(:focus-visible\)\s*\{[^}]*outline:\s*none/.test(rules),
+      '마우스 초점을 끄는 줄이 없다 — 누를 때마다 테두리가 뜬다'
+    ).to.equal(true)
+  })
+
+  it('링이 설 자리가 있다 — 그려도 잘리면 없는 것과 같다', async () => {
+    const el = await bar()
+    const container = el.renderRoot.querySelector('[container]') as HTMLElement
+    const style = getComputedStyle(container)
+
+    /* 링은 밖으로 5px 를 쓴다: 3px 굵기 + 2px 띄움. */
+    expect(parseFloat(style.paddingTop), '위 여백이 링보다 좁다').to.be.at.least(5)
+    expect(parseFloat(style.paddingBottom), '아래 여백이 링보다 좁다').to.be.at.least(5)
+    expect(parseFloat(style.paddingLeft), '왼쪽 여백이 링보다 좁다').to.be.at.least(5)
+  })
+
+  it('가로로 자르는 것은 그대로다 — 「더보기」가 넘침을 그 값으로 잰다', async () => {
+    const el = await bar()
+    const container = el.renderRoot.querySelector('[container]') as HTMLElement
+
+    expect(getComputedStyle(container).overflowX).to.equal('hidden')
+  })
+})