@operato/menu 10.7.0 → 10.8.0

package/test/ox-menu-portrait.test.ts

@@ -0,0 +1,431 @@
+import { html } from 'lit'
+import { fixture, expect } from '@open-wc/testing'
+
+import '../src/ox-menu-portrait.js'
+import { OxMenuPortrait } from '../src/ox-menu-portrait.js'
+import { Menu } from '../src/types.js'
+
+/**
+ * 왼쪽 메뉴가 **모양 표대로 그려지고 움직이나.**
+ *
+ * `menu-mode.test.ts` 는 표 자체를 못박는다. 이 시험은 그 표가 **실제로 배선되어 있나**를 본다 —
+ * 순수 함수가 맞아도 컴포넌트가 그것을 안 물어보면 화면은 그대로 깨진다. 실제로 그랬다:
+ * `drawer` 를 만들고 넘기지 않아 거동이 하나도 바뀌지 않았다.
+ */
+
+const 메뉴: Menu[] = [
+  {
+    name: 'my-work',
+    label: '내 일',
+    path: 'todo-list',
+    icon: 'inbox',
+    badge: () => 7,
+    menus: [
+      { name: 'todo', label: '할 일', path: 'todo-list', badge: () => 3 },
+      { name: 'done', label: '완료', path: 'done-list' }
+    ]
+  },
+  {
+    name: 'work',
+    label: '작업',
+    path: 'job-order-list',
+    menus: [{ name: 'job-order', label: '작업지시', path: 'job-order-list' }]
+  },
+  /* 하위가 없는 최상위 — 「묶음이냐 끝이냐」를 가리는 시험에 쓴다. */
+  { name: 'maturity', label: '성숙도', path: 'maturity-page', icon: 'insights' }
+]
+
+async function 세운다(props: Partial<OxMenuPortrait> = {}) {
+  const el = (await fixture(html`<ox-menu-portrait></ox-menu-portrait>`)) as OxMenuPortrait
+
+  el.menus = 메뉴
+  el.activeTopLevel = 메뉴[0]
+  el.activeMenu = 메뉴[0].menus![0]
+  Object.assign(el, props)
+  await el.updateComplete
+
+  return el
+}
+
+
+/**
+ * 누르고, **컴포넌트가 이동을 막았나**를 돌려준다.
+ *
+ * ── 왜 이렇게 하나 ──────────────────────────────────────────────────────────
+ * 그냥 dispatch 하면 브라우저가 `<a href>` 의 기본 동작을 실행해 **시험 페이지가 실제로
+ * 이동한다.** 그래서 러너가 멈췄다(404 job-order-list).
+ *
+ * document 에서 받아 막으려 했더니 안 됐다 — 어떤 가지는 `stopPropagation` 을 하므로 거기까지
+ * 오지 않는다. 그러면 「막았다」를 「안 막았다」로 읽는다.
+ *
+ * 그래서 누르기 직전에 **href 를 뗀다.** 컴포넌트는 그 속성을 보지 않고 메뉴 객체의 `path` 로
+ * 판단하므로 판정이 바뀌지 않고, 브라우저는 갈 곳이 없어 움직이지 않는다.
+ */
+function 눌러본다(el: OxMenuPortrait, target: HTMLElement) {
+  const anchor = target.closest('a')
+  const href = anchor?.getAttribute('href')
+  anchor?.removeAttribute('href')
+
+  const ev = new MouseEvent('click', { bubbles: true, composed: true, cancelable: true })
+  target.dispatchEvent(ev)
+
+  if (href !== null && href !== undefined) {
+    anchor?.setAttribute('href', href)
+  }
+
+  return ev.defaultPrevented
+}
+
+const 최상위들 = (el: OxMenuPortrait) =>
+  Array.from(el.renderRoot.querySelectorAll('li[top]')) as HTMLElement[]
+
+const 최상위 = (el: OxMenuPortrait, name: string) =>
+  최상위들(el).find(li => (li as any).menu?.name === name)!
+
+describe('ox-menu-portrait', () => {
+  describe('최상위와 하위의 표시는 뜻이 다르다', () => {
+    it('열린 묶음은 active, 지금 페이지는 current', async () => {
+      const el = await 세운다()
+      const top = 최상위(el, 'my-work')
+
+      expect(top.hasAttribute('active'), '하위가 펼쳐져 있다').to.be.true
+      expect(top.hasAttribute('current'), '최상위가 지금 페이지는 아니다').to.be.false
+
+      const kid = top.querySelector(':scope > ul > li')!
+      expect(kid.hasAttribute('current'), '지금 페이지는 이 하위다').to.be.true
+    })
+
+    it('최상위에만 top 이 붙는다 — 하위도 active 를 달기 때문이다', async () => {
+      const el = await 세운다()
+      const kid = 최상위(el, 'my-work').querySelector(':scope > ul > li')!
+
+      expect(kid.hasAttribute('top')).to.be.false
+    })
+  })
+
+  describe('하위를 어디에 여나', () => {
+    /* 상태를 손으로 넣지 않고 **누른다** — 실제 경로가 그것이다. */
+    const 최상위를누른다 = async (el: OxMenuPortrait, name: string) => {
+      눌러본다(el, 최상위(el, name).querySelector('a')!)
+      await el.updateComplete
+      await el.updateComplete
+    }
+
+    it('기존 메뉴 · 펼친 레일 · 서랍은 그 자리다 — 팝업이 없다', async () => {
+      for (const props of [{}, { rail: true }, { drawer: true }]) {
+        const el = await 세운다(props)
+        await 최상위를누른다(el, 'work')
+
+        expect(el.renderRoot.querySelector('.railpop'), JSON.stringify(props)).to.be.null
+      }
+    })
+
+    it('접힌 레일에서만 팝업이 뜬다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      await 최상위를누른다(el, 'work')
+
+      expect(el.renderRoot.querySelector('.railpop')).to.exist
+    })
+
+    it('서랍은 레일·접힘을 함께 켜도 팝업이 아니다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true, drawer: true })
+      await 최상위를누른다(el, 'work')
+
+      expect(el.renderRoot.querySelector('.railpop')).to.be.null
+    })
+  })
+
+  describe('최상위를 누르면', () => {
+    const 누른다 = (el: OxMenuPortrait, name: string) => 눌러본다(el, 최상위(el, name).querySelector('a')!)
+
+    it('늘 보이는 메뉴에서는 이동을 막지 않는다', async () => {
+      const el = await 세운다({ rail: true })
+      expect(누른다(el, 'work'), '막으면 대표 화면으로 갈 수 없다').to.be.false
+    })
+
+    it('서랍에서는 이동을 막고 펼치기만 한다', async () => {
+      const el = await 세운다({ drawer: true })
+      let 올라온것: any = 'not-fired'
+      el.addEventListener('active-toplevel', (e: Event) => (올라온것 = (e as CustomEvent).detail))
+
+      expect(누른다(el, 'work'), '이동하면 서랍이 닫혀 나머지 하위를 볼 기회가 없다').to.be.true
+      expect(올라온것?.name).to.equal('work')
+    })
+
+    it('접힌 레일에서는 팝업을 띄운다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      const 막았나 = 누른다(el, 'work')
+      await el.updateComplete
+
+      expect(막았나).to.be.true
+      expect(el.renderRoot.querySelector('.railpop .phead')!.textContent!.trim()).to.equal('작업')
+    })
+
+    it('같은 것을 다시 누르면 팝업이 닫힌다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      누른다(el, 'work')
+      await el.updateComplete
+      누른다(el, 'work')
+      await el.updateComplete
+
+      expect(el.renderRoot.querySelector('.railpop')).to.be.null
+    })
+  })
+
+  describe('화살표는 여닫기만 한다', () => {
+    it('이동을 막고 뜻을 올린다', async () => {
+      const el = await 세운다({ rail: true })
+      let 올라온것: any = 'not-fired'
+      el.addEventListener('active-toplevel', (e: Event) => (올라온것 = (e as CustomEvent).detail))
+
+      const caret = 최상위(el, 'work').querySelector('[submenu-button]') as HTMLElement
+
+      expect(눌러본다(el, caret), '화살표는 주소를 바꾸지 않는다').to.be.true
+      expect(올라온것?.name).to.equal('work')
+    })
+
+    it('열려 있는 것의 화살표를 누르면 닫겠다는 뜻이 올라간다', async () => {
+      const el = await 세운다({ rail: true })
+      let 올라온것: any = 'not-fired'
+      el.addEventListener('active-toplevel', (e: Event) => (올라온것 = (e as CustomEvent).detail))
+
+      눌러본다(el, 최상위(el, 'my-work').querySelector('[submenu-button]') as HTMLElement)
+
+      /*
+       * **`detail: undefined` 는 `null` 로 도착한다.** `CustomEvent` 의 detail 기본값이 null 이다.
+       * 그래서 받는 쪽은 `=== undefined` 로 가리면 한 번도 못 맞힌다 — 값이 있나 없나로 가른다.
+       * 그 함정 때문에 접기가 한 번도 살아 있지 못했다.
+       */
+      expect(올라온것, '값이 없는 것이 곧 「닫는다」다').to.be.null
+    })
+  })
+
+  describe('하위를 누르면 최상위 상태를 건드리지 않는다', () => {
+    it('active-toplevel 은 최상위에서만 나간다', async () => {
+      const el = await 세운다({ rail: true })
+      let 나갔나 = false
+      el.addEventListener('active-toplevel', () => (나갔나 = true))
+
+      /*
+       * `:scope` 가 필요하다. `querySelector('li a')` 는 **범위 요소 자신이 li 로 쓰이는 것도
+       * 허용**하므로 최상위의 링크가 잡힌다 — 그래서 이 시험이 처음에 거짓으로 빨개졌다.
+       */
+      눌러본다(el, 최상위(el, 'my-work').querySelector(':scope > ul > li > a') as HTMLElement)
+
+      expect(나갔나, '하위를 올리면 「열린 묶음」이 하위로 바뀐다').to.be.false
+    })
+  })
+
+  describe('팝업은 하위를 다시 만들지 않는다', () => {
+    it('레일 안쪽과 같은 모양으로 그린다 — 이름 · 건수 · 지금 페이지가 함께 온다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      눌러본다(el, 최상위(el, 'my-work').querySelector('a')!)
+      await el.updateComplete
+      await el.updateComplete
+
+      const pop = el.renderRoot.querySelector('.railpop')!
+      const rows = Array.from(pop.querySelectorAll('li'))
+
+      expect(rows.length, '하위 둘').to.equal(2)
+      expect(rows[0].querySelector('span')!.textContent).to.equal('할 일')
+      expect(rows[0].querySelector('[badge]')!.textContent, '건수가 빠지면 열어 보지 않고는 알 수 없다').to.equal('3')
+      expect(rows[0].hasAttribute('current'), '열어 놓고도 어디인지 알아야 한다').to.be.true
+      expect(rows[1].querySelector('[badge]'), '건수가 없는 하위에는 알약을 두지 않는다').to.be.null
+    })
+
+    /**
+     * **접힘 규칙이 팝업까지 흘러가지 않나.**
+     *
+     * 팝업은 같은 shadow root 안의 형제라서, 접힘 규칙을 `li` 로만 좁히면 팝업 줄도 함께
+     * 걸린다(팝업 줄도 `li` 다). 그러면 이름이 지워지고 가운데 정렬·여백 0 이 같이 걸려
+     * **아이콘만 남는다** — 접힌 레일에서 팝업은 이름을 읽으러 여는 자리인데.
+     *
+     * 위의 시험은 `textContent` 를 보므로 이것을 못 잡았다. 여기서는 **보이나**를 잰다.
+     */
+    it('접힘 규칙이 팝업까지 흘러가지 않는다 — 이름이 보인다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      눌러본다(el, 최상위(el, 'my-work').querySelector('a')!)
+      await el.updateComplete
+      await el.updateComplete
+
+      const 이름 = el.renderRoot.querySelector('.railpop li a > span') as HTMLElement
+
+      expect(getComputedStyle(이름).display, '레일의 이름 감추기가 팝업까지 걸렸다').to.not.equal('none')
+      expect(이름.offsetWidth, '자리가 0 이면 글자가 있어도 안 읽힌다').to.be.greaterThan(0)
+    })
+
+    it('팝업의 건수는 이름 오른쪽 알약이다 — 아이콘 위에 겹치지 않는다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      눌러본다(el, 최상위(el, 'my-work').querySelector('a')!)
+      await el.updateComplete
+      await el.updateComplete
+
+      const badge = el.renderRoot.querySelector('.railpop li [badge]') as HTMLElement
+
+      expect(getComputedStyle(badge).position, '접힌 레일의 겹치기 규칙이 팝업까지 걸렸다').to.equal('static')
+    })
+
+    it('머리에 그 묶음의 이름이 온다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+      눌러본다(el, 최상위(el, 'my-work').querySelector('a')!)
+      await el.updateComplete
+      await el.updateComplete
+
+      expect(el.renderRoot.querySelector('.railpop .phead')!.textContent!.trim()).to.equal('내 일')
+    })
+  })
+
+  /**
+   * 줄만 보고 **묶음인지 끝인지** 알 수 있나.
+   *
+   * 두 스타일 파일을 합칠 때 화살표의 `::before` 를 잃었다. `<md-icon submenu-button>` 은
+   * 그대로 있었고 크기·자리 규칙도 다 있어서 **빈 아이콘이 자리만 차지했다** — 오류도 없고
+   * 요소도 있으니 시험도 화면 로그도 아무 말을 하지 않았다.
+   */
+  describe('묶음인지 끝인지', () => {
+    const 화살표 = (el: OxMenuPortrait, name: string) =>
+      최상위(el, name).querySelector(':scope > a > [submenu-button]') as HTMLElement | null
+
+    it('하위가 있는 줄에는 화살표가 있고 글자가 그려진다', async () => {
+      const el = await 세운다({ rail: true })
+      const caret = 화살표(el, 'work')!
+
+      expect(caret, '요소가 없으면 하위가 있다는 신호가 없다').to.exist
+      expect(getComputedStyle(caret).display, '자리만 차지하고 안 보이면 없는 것과 같다').to.not.equal('none')
+      expect(
+        getComputedStyle(caret, '::before').content,
+        '아이콘 이름을 안 주면 빈 아이콘이 자리만 차지한다'
+      ).to.contain('chevron_right')
+    })
+
+    it('하위가 없는 줄에는 화살표가 없다', async () => {
+      const el = await 세운다({ rail: true })
+
+      expect(화살표(el, 'maturity'), '끝인데 화살표가 있으면 눌러 볼 것이 있다고 말하는 셈이다').to.be.null
+    })
+
+    it('펼쳐지면 화살표가 돈다 — 여닫힘까지 이 하나가 말한다', async () => {
+      const el = await 세운다({ rail: true })
+
+      const 열림 = getComputedStyle(화살표(el, 'my-work')!).transform
+      const 닫힘 = getComputedStyle(화살표(el, 'work')!).transform
+
+      expect(최상위(el, 'my-work').hasAttribute('active')).to.be.true
+      expect(열림).to.not.equal(닫힘)
+    })
+  })
+
+  /**
+   * 마우스를 올렸을 때 뜨는 글.
+   *
+   * 접히면 아이콘만 남아 **이름을 모른다.** 그때만 이름을 윗줄에 얹는다. 펼쳐져 있으면 이름은
+   * 이미 옆에 있으니 되풀이하지 않는다 — 이름을 그대로 다시 말하는 툴팁은 소음이다.
+   */
+  describe('마우스를 올렸을 때 뜨는 글', () => {
+    const 설명있는메뉴: Menu[] = [
+      { name: 'map', label: '현장', path: 'map-page', description: '지금 공장에서 일어나는 일' },
+      { name: 'plain', label: '조직', path: 'org-page' }
+    ]
+
+    const 올린글 = async (props: Partial<OxMenuPortrait>, name: string) => {
+      const el = await 세운다({ ...props, menus: 설명있는메뉴, activeTopLevel: undefined, activeMenu: undefined })
+      const li = 최상위들(el).find(x => (x as any).menu?.name === name)!
+      return li.querySelector('a')!.getAttribute('title')
+    }
+
+    it('펼쳐져 있으면 설명만 낸다', async () => {
+      expect(await 올린글({ rail: true }, 'map')).to.equal('지금 공장에서 일어나는 일')
+    })
+
+    it('펼쳐져 있고 설명이 없으면 아무것도 안 낸다 — 이름을 되풀이하지 않는다', async () => {
+      expect(await 올린글({ rail: true }, 'plain')).to.be.null
+    })
+
+    it('접히면 이름을 윗줄에 얹는다 — 아이콘만 보이므로 이름이 먼저다', async () => {
+      expect(await 올린글({ rail: true, collapsed: true }, 'map')).to.equal('현장\n지금 공장에서 일어나는 일')
+    })
+
+    it('접혔고 설명이 없으면 이름만 낸다', async () => {
+      expect(await 올린글({ rail: true, collapsed: true }, 'plain')).to.equal('조직')
+    })
+  })
+
+  describe('합계 배지는 낱개가 안 보일 때만 나온다', () => {
+    /*
+     * 두 스타일 파일을 합칠 때 이 규칙을 잃었고 시험이 못 잡았다. 그래서 여기 넣는다.
+     */
+    const 합계배지 = (el: OxMenuPortrait) =>
+      getComputedStyle(최상위(el, 'my-work').querySelector(':scope > a > [badge]')!).display
+
+    it('하위가 펼쳐져 있으면 감춘다 — 낱개가 다 보인다', async () => {
+      const el = await 세운다()
+
+      expect(최상위(el, 'my-work').hasAttribute('active')).to.be.true
+      expect(합계배지(el)).to.equal('none')
+    })
+
+    it('하위가 닫혀 있으면 보인다 — 낱개가 안 보인다', async () => {
+      const el = await 세운다({ activeTopLevel: undefined })
+
+      expect(합계배지(el)).to.not.equal('none')
+    })
+
+    it('접혔으면 보인다 — 그때는 합계가 유일한 신호다', async () => {
+      const el = await 세운다({ rail: true, collapsed: true })
+
+      expect(합계배지(el)).to.not.equal('none')
+    })
+  })
+
+  describe('세로 단으로 선다', () => {
+    /*
+     * `display: flex` · `flex-direction: column` 이 없으면 gap 이 안 먹고 **바닥에 붙이는 빈
+     * 자리가 자라지 않아** 시스템 줄이 목록 바로 뒤에 붙는다. 파일을 합칠 때 그것을 잃었다.
+     */
+    it('호스트가 세로 단이다', async () => {
+      const el = await 세운다()
+      const cs = getComputedStyle(el)
+
+      expect(cs.display).to.equal('flex')
+      expect(cs.flexDirection).to.equal('column')
+    })
+
+    it('빈 자리가 자란다 — 시스템이 바닥에 붙는 전제다', async () => {
+      const el = await 세운다()
+      el.morendas = [{ icon: html`<i></i>`, name: '설정', action: () => {} }]
+      await el.updateComplete
+
+      const spacer = el.renderRoot.querySelector('.railspacer')!
+      expect(getComputedStyle(spacer).flexGrow).to.equal('1')
+    })
+  })
+
+  describe('시스템 자리', () => {
+    it('항목이 없으면 자리도 없다 — 눌러도 아무 일이 없는 줄을 두지 않는다', async () => {
+      const el = await 세운다({ rail: true })
+      el.morendas = []
+      await el.updateComplete
+
+      expect(Array.from(el.renderRoot.querySelectorAll('[group-label]')).length).to.equal(0)
+    })
+
+    it('어느 모양에서든 나온다 — 레일에만 두었다가 감추기 모드에서 사라졌다', async () => {
+      for (const props of [{}, { rail: true }, { rail: true, collapsed: true }, { drawer: true }]) {
+        const el = await 세운다(props)
+        el.morendas = [{ icon: html`<i></i>`, name: '설정', action: () => {} }]
+        await el.updateComplete
+
+        const 시스템 = Array.from(el.renderRoot.querySelectorAll('li[menu]')).find(li => !(li as any).menu)
+        expect(시스템, JSON.stringify(props)).to.exist
+      }
+    })
+
+    it('빈 자리가 그 앞에 있다 — 바닥에 붙는다', async () => {
+      const el = await 세운다({})
+      el.morendas = [{ icon: html`<i></i>`, name: '설정', action: () => {} }]
+      await el.updateComplete
+
+      expect(el.renderRoot.querySelector('.railspacer')).to.exist
+    })
+  })
+})