@operato/menu 10.6.0 → 10.8.0

package/test/menu-mode.test.ts

@@ -0,0 +1,135 @@
+import { expect } from '@open-wc/testing'
+
+import {
+  AUTO_COLLAPSE_UNDER,
+  childrenOpenAs,
+  menuMode,
+  shouldAutoCollapse,
+  showsLabels,
+  topNavigates
+} from '../src/menu-mode.js'
+
+/**
+ * 왼쪽 메뉴의 **모양 표**.
+ *
+ * 이 표가 깨진 적이 네 번이다 — 합계 배지 감추기 · 시스템 자리 · 팝업 꾸밈 · 서랍 판정. 넷 다
+ * 화면을 눈으로 보고서야 알았고, 넷 다 「이 모양에서는 어떻게 되나」를 그때그때 판단해서 났다.
+ *
+ * 여기서 표 전체를 못박는다. 규칙을 하나 고치면 다른 칸이 함께 빨개진다.
+ */
+describe('메뉴 모양', () => {
+  describe('세 플래그에서 모양 하나를 정한다', () => {
+    it('아무것도 켜지 않으면 기존 메뉴다', () => {
+      expect(menuMode({})).to.equal('list')
+    })
+
+    it('레일만 켜면 펼친 레일이다', () => {
+      expect(menuMode({ rail: true })).to.equal('rail')
+    })
+
+    it('레일에 접힘을 더하면 접힌 레일이다', () => {
+      expect(menuMode({ rail: true, collapsed: true })).to.equal('rail-collapsed')
+    })
+
+    it('레일 없이 접힘만 켜도 기존 메뉴다 — 접을 대상이 없다', () => {
+      expect(menuMode({ collapsed: true })).to.equal('list')
+    })
+
+    it('서랍이 가장 세다 — 레일과 접힘을 함께 켜도 서랍이다', () => {
+      expect(menuMode({ drawer: true })).to.equal('drawer')
+      expect(menuMode({ drawer: true, rail: true })).to.equal('drawer')
+      expect(menuMode({ drawer: true, rail: true, collapsed: true })).to.equal('drawer')
+    })
+  })
+
+  describe('하위를 어디에 여나', () => {
+    it('접힌 레일에서만 팝업이다 — 56px 안에 들여쓴 목록이 안 들어간다', () => {
+      expect(childrenOpenAs('rail-collapsed')).to.equal('popup')
+    })
+
+    it('나머지 셋은 그 자리에서 열린다', () => {
+      expect(childrenOpenAs('list')).to.equal('inline')
+      expect(childrenOpenAs('rail')).to.equal('inline')
+      expect(childrenOpenAs('drawer')).to.equal('inline')
+    })
+
+    it('서랍은 팝업이 아니다 — 화면 위에 뜬 서랍 옆에 고정 팝업이 설 자리가 없다', () => {
+      expect(childrenOpenAs(menuMode({ drawer: true }))).to.equal('inline')
+    })
+  })
+
+  describe('최상위를 누르면 이동하나', () => {
+    it('늘 보이는 메뉴에서는 이동한다 — 누르면 어디든 도착한다', () => {
+      expect(topNavigates('list')).to.be.true
+      expect(topNavigates('rail')).to.be.true
+    })
+
+    it('서랍에서는 이동하지 않는다 — 이동하면 서랍이 닫혀 나머지 하위를 볼 기회가 없다', () => {
+      expect(topNavigates('drawer')).to.be.false
+    })
+
+    it('접힌 레일에서도 이동하지 않는다 — 팝업을 열어 고르게 한다', () => {
+      expect(topNavigates('rail-collapsed')).to.be.false
+    })
+  })
+
+  describe('이름이 보이나', () => {
+    it('접힌 레일만 아이콘뿐이다', () => {
+      expect(showsLabels('rail-collapsed')).to.be.false
+      expect(showsLabels('list')).to.be.true
+      expect(showsLabels('rail')).to.be.true
+      expect(showsLabels('drawer')).to.be.true
+    })
+  })
+
+  describe('좁아지면 스스로 접는다', () => {
+    it('기준 폭 아래면 접는다 — 이름이 이름 노릇을 못 한다', () => {
+      expect(shouldAutoCollapse(120, { rail: true })).to.be.true
+      expect(shouldAutoCollapse(AUTO_COLLAPSE_UNDER, { rail: true })).to.be.true
+    })
+
+    it('기준 폭보다 넓으면 그대로 둔다', () => {
+      expect(shouldAutoCollapse(AUTO_COLLAPSE_UNDER + 1, { rail: true })).to.be.false
+      expect(shouldAutoCollapse(208, { rail: true })).to.be.false
+    })
+
+    it('이미 접혔으면 보지 않는다 — 56px 이 이 판정에 다시 걸려 되풀이된다', () => {
+      expect(shouldAutoCollapse(56, { rail: true, collapsed: true })).to.be.false
+    })
+
+    it('레일이 아니면 접을 것이 없다', () => {
+      expect(shouldAutoCollapse(60, {})).to.be.false
+      expect(shouldAutoCollapse(60, { rail: false })).to.be.false
+    })
+
+    it('폭이 0 이면 판단하지 않는다 — 붙는 순간이거나 감춰진 순간이다', () => {
+      expect(shouldAutoCollapse(0, { rail: true })).to.be.false
+    })
+  })
+
+  describe('표 전체 — 네 모양 × 세 답', () => {
+    /**
+     * 이 배열이 곧 문서다. 규칙을 고치면 여기도 고쳐야 하고, 고치는 순간 그 판단을 한 번 더
+     * 들여다보게 된다.
+     */
+    const 표: { 모양: ReturnType<typeof menuMode>; 하위: 'inline' | 'popup'; 이동: boolean; 이름: boolean }[] = [
+      { 모양: 'list', 하위: 'inline', 이동: true, 이름: true },
+      { 모양: 'rail', 하위: 'inline', 이동: true, 이름: true },
+      { 모양: 'rail-collapsed', 하위: 'popup', 이동: false, 이름: false },
+      { 모양: 'drawer', 하위: 'inline', 이동: false, 이름: true }
+    ]
+
+    표.forEach(줄 => {
+      it(`${줄.모양} — 하위 ${줄.하위} · 이동 ${줄.이동} · 이름 ${줄.이름}`, () => {
+        expect(childrenOpenAs(줄.모양)).to.equal(줄.하위)
+        expect(topNavigates(줄.모양)).to.equal(줄.이동)
+        expect(showsLabels(줄.모양)).to.equal(줄.이름)
+      })
+    })
+
+    it('네 모양을 다 덮는다 — 새 모양이 생기면 이 시험이 먼저 빨개진다', () => {
+      const 모양들: ReturnType<typeof menuMode>[] = ['list', 'rail', 'rail-collapsed', 'drawer']
+      expect(표.map(줄 => 줄.모양)).to.deep.equal(모양들)
+    })
+  })
+})

package/test/menu-privilege.test.ts

@@ -0,0 +1,138 @@
+import { expect } from '@open-wc/testing'
+
+import { Menu } from '../src/types.js'
+import { permittedMenus } from '../src/menu-privilege.js'
+
+/**
+ * 쓸 수 있는 메뉴만 남기는 규칙.
+ *
+ * 이 판단이 앱마다 있었다. operato-plant 는 「소유자면 조직 묶음을 배열에 넣는다」였고,
+ * operato-twin 은 항목마다 `superOnly` · `ownerOnly` 플래그였다. 같은 물음에 답이 둘이었고,
+ * 둘 다 **서버의 문과 다른 낱말**이라 문이 열어 주는 사람에게 메뉴가 안 보이는 일이 났다.
+ *
+ * 규칙을 한 자리에 두고 여기서 못박는다.
+ */
+
+/** 못 가진 요구 하나 — 이것이 걸리면 그 줄은 사라져야 한다. */
+const 없는권한 = { category: '없는분류', privilege: 'query' }
+const 있는권한 = { category: 'employee', privilege: 'query' }
+
+/** 시험용 판정 — 「employee/query 만 가졌다」. */
+const 가진사람: (p: NonNullable<Menu['privilege']>) => boolean = p =>
+  p.category === 있는권한.category && p.privilege === 있는권한.privilege
+
+const 이름들 = (menus: Menu[]) => menus.map(menu => menu.name)
+
+describe('쓸 수 있는 메뉴만 남긴다', () => {
+  it('요구가 없는 줄은 그대로 둔다', async () => {
+    const 남은것 = await permittedMenus([{ name: 'plain', path: 'a' }], 가진사람)
+
+    expect(이름들(남은것)).to.deep.equal(['plain'])
+  })
+
+  it('가진 요구면 남고, 못 가진 요구면 빠진다', async () => {
+    const 남은것 = await permittedMenus(
+      [
+        { name: 'mine', path: 'a', privilege: 있는권한 },
+        { name: 'theirs', path: 'b', privilege: 없는권한 }
+      ],
+      가진사람
+    )
+
+    expect(이름들(남은것)).to.deep.equal(['mine'])
+  })
+
+  it('부모가 걸리면 자식까지 뺀다 — 묶음에 못 들어가면 그 안도 갈 수 없다', async () => {
+    const 남은것 = await permittedMenus(
+      [{ name: 'group', path: 'a', privilege: 없는권한, menus: [{ name: 'kid', path: 'a1' }] }],
+      가진사람
+    )
+
+    expect(남은것).to.deep.equal([])
+  })
+
+  it('자식이 다 빠진 부모도 뺀다 — 눌러도 아무 데도 못 간다', async () => {
+    const 남은것 = await permittedMenus(
+      [{ name: 'group', path: 'a', menus: [{ name: 'kid', path: 'a1', privilege: 없는권한 }] }],
+      가진사람
+    )
+
+    expect(남은것).to.deep.equal([])
+  })
+
+  it('자식이 하나라도 남으면 부모도 남는다 — 남은 것만 데리고', async () => {
+    const 남은것 = await permittedMenus(
+      [
+        {
+          name: 'group',
+          path: 'a',
+          menus: [
+            { name: 'stay', path: 'a1' },
+            { name: 'go', path: 'a2', privilege: 없는권한 }
+          ]
+        }
+      ],
+      가진사람
+    )
+
+    expect(이름들(남은것)).to.deep.equal(['group'])
+    expect(이름들(남은것[0].menus!)).to.deep.equal(['stay'])
+  })
+
+  it('원래 자식이 없던 잎은 남는다 — 「자식이 다 빠졌다」로 읽지 않는다', async () => {
+    const 남은것 = await permittedMenus([{ name: 'leaf', path: 'a' }], 가진사람)
+
+    expect(이름들(남은것), '이 갈래가 없으면 잎이 전부 사라진다').to.deep.equal(['leaf'])
+  })
+
+  it('원래 것을 고치지 않는다 — 다시 거를 때 앞의 결과가 섞이지 않게', async () => {
+    const 원래: Menu[] = [
+      {
+        name: 'group',
+        path: 'a',
+        menus: [
+          { name: 'stay', path: 'a1' },
+          { name: 'go', path: 'a2', privilege: 없는권한 }
+        ]
+      }
+    ]
+
+    await permittedMenus(원래, 가진사람)
+
+    expect(원래[0].menus, '입력을 고치면 로그인할 때마다 메뉴가 줄어든다').to.have.lengthOf(2)
+  })
+
+  it('판정이 늦게 와도 기다린다 — 프로필은 비동기로 온다', async () => {
+    const 느린판정 = async (p: NonNullable<Menu['privilege']>) => {
+      await new Promise(resolve => setTimeout(resolve, 5))
+      return 가진사람(p)
+    }
+
+    const 남은것 = await permittedMenus(
+      [
+        { name: 'mine', path: 'a', privilege: 있는권한 },
+        { name: 'theirs', path: 'b', privilege: 없는권한 }
+      ],
+      느린판정
+    )
+
+    expect(이름들(남은것)).to.deep.equal(['mine'])
+  })
+
+  it('여러 층을 내려간다', async () => {
+    const 남은것 = await permittedMenus(
+      [
+        {
+          name: 'top',
+          menus: [
+            { name: 'mid', menus: [{ name: 'deep', path: 'x', privilege: 없는권한 }] },
+            { name: 'keep', path: 'y' }
+          ]
+        }
+      ],
+      가진사람
+    )
+
+    expect(이름들(남은것[0].menus!), '깊은 곳이 비면 그 부모도 함께 빠진다').to.deep.equal(['keep'])
+  })
+})