@things-factory/ai-assistant 10.1.6

package/client/components/mention-popup.test.ts

@@ -0,0 +1,588 @@
+/**
+ * mention-popup.ts 의 pure helper 단위 테스트.
+ *
+ * Lit 엘리먼트 자체는 jsdom 으로 부분 테스트하기 어려워 (customElements 등록 등)
+ * 핵심 로직만 별도 export 한 helper 들을 검증.
+ */
+import {
+  buildMentionCandidates,
+  buildCatalogCandidates,
+  buildSlashCandidates,
+  extractMentionContext,
+  filterMentionCandidates,
+  applyMentionSelection,
+  resolveMentionToken,
+  type MentionCandidate,
+  type CatalogEntry,
+  type SlashTemplate,
+  type FilterResult
+} from './mention-popup-helpers'
+
+describe('buildMentionCandidates — things-scene 필드 (id/type/tag/class/text)', () => {
+  test('id 있으면 label = id', () => {
+    const r = buildMentionCandidates([
+      { refid: 1, type: 'rect', id: 'motor-1' }
+    ])
+    expect(r[0].label).toBe('motor-1')
+    expect(r[0].id).toBe('motor-1')
+    expect(r[0].type).toBe('rect')
+  })
+
+  test('id 없으면 label = type (fallback)', () => {
+    const r = buildMentionCandidates([{ refid: 1, type: 'rect' }])
+    expect(r[0].label).toBe('rect')
+    expect(r[0].id).toBeUndefined()
+  })
+
+  test('모든 검색 필드 (id/tag/class/text) 보존', () => {
+    const r = buildMentionCandidates([
+      {
+        refid: 1,
+        type: 'rect',
+        id: 'motor-1',
+        tag: 'equipment',
+        class: 'critical',
+        text: 'WARNING'
+      }
+    ])
+    expect(r[0].id).toBe('motor-1')
+    expect(r[0].tag).toBe('equipment')
+    expect(r[0].class).toBe('critical')
+    expect(r[0].text).toBe('WARNING')
+  })
+
+  test('refid 없는 컴포넌트는 무시', () => {
+    const r = buildMentionCandidates([
+      { type: 'rect' },
+      { refid: 1, type: 'rect', id: 'OK' }
+    ])
+    expect(r).toHaveLength(1)
+    expect(r[0].label).toBe('OK')
+  })
+
+  test('빈 배열 / null / undefined 안전', () => {
+    expect(buildMentionCandidates([])).toEqual([])
+    expect(buildMentionCandidates(null as any)).toEqual([])
+    expect(buildMentionCandidates(undefined as any)).toEqual([])
+  })
+})
+
+describe('extractMentionContext — `@` trigger 변종', () => {
+  test('@token 감지 — 기본 `#` 와 동일 패턴', () => {
+    expect(extractMentionContext('hello @monitor', 14, '@')).toEqual({
+      hashPos: 6,
+      query: 'monitor'
+    })
+  })
+
+  test('email-like (user@host) — `@` 도 단어 중간 거부 → null', () => {
+    expect(extractMentionContext('user@host', 9, '@')).toBeNull()
+  })
+
+  test('`#` 와 `@` 가 동시에 있을 때 — 각자 독립 검출', () => {
+    const text = '#refid1 @prefab'
+    expect(extractMentionContext(text, text.length, '#')).toBeNull() // # 다음 공백 → 비활성
+    expect(extractMentionContext(text, text.length, '@')).toEqual({
+      hashPos: 8,
+      query: 'prefab'
+    })
+  })
+
+  test('default trigger = `#` (backward compat)', () => {
+    expect(extractMentionContext('#test', 5)).toEqual({ hashPos: 0, query: 'test' })
+  })
+
+  test('잘못된 trigger 길이 → null', () => {
+    expect(extractMentionContext('test', 4, '##')).toBeNull()
+    expect(extractMentionContext('test', 4, '')).toBeNull()
+  })
+})
+
+describe('buildCatalogCandidates', () => {
+  test('카탈로그 항목 → MentionCandidate (kind 가 type 으로 매핑)', () => {
+    const entries: CatalogEntry[] = [
+      { name: 'monitor-card', kind: 'prefab', description: '모니터링' }
+    ]
+    const r = buildCatalogCandidates(entries)
+    expect(r).toHaveLength(1)
+    expect(r[0].label).toBe('monitor-card')
+    expect(r[0].type).toBe('prefab')
+    expect(r[0].description).toBe('모니터링')
+    expect(r[0].refid).toBeUndefined()
+  })
+
+  test('정렬: prefab → palette → layout, 그 안에서 name asc', () => {
+    const entries: CatalogEntry[] = [
+      { name: 'kpi-row', kind: 'layout' },
+      { name: 'monitor-card', kind: 'prefab' },
+      { name: 'industrial-steel', kind: 'palette' },
+      { name: 'gauge-panel', kind: 'prefab' }
+    ]
+    const r = buildCatalogCandidates(entries)
+    const order = r.map(c => `${c.type}:${c.label}`)
+    expect(order).toEqual([
+      'prefab:gauge-panel',
+      'prefab:monitor-card',
+      'palette:industrial-steel',
+      'layout:kpi-row'
+    ])
+  })
+
+  test('description 이 별도 field 로 보존 — F-Finder 매칭에서 사용', () => {
+    const r = buildCatalogCandidates([
+      { name: 'AGV-Card', kind: 'prefab', description: '모니터링 KPI' }
+    ])
+    expect(r[0].label).toBe('AGV-Card')
+    expect(r[0].description).toBe('모니터링 KPI')
+  })
+})
+
+describe('buildSlashCandidates', () => {
+  test('SlashTemplate → MentionCandidate (replacementText 사용)', () => {
+    const tpls: SlashTemplate[] = [
+      { name: 'grid', description: '그리드', template: '선택을 그리드로' }
+    ]
+    const r = buildSlashCandidates(tpls)
+    expect(r).toHaveLength(1)
+    expect(r[0].label).toBe('grid')
+    expect(r[0].type).toBe('template')
+    expect(r[0].description).toBe('그리드')
+    expect(r[0].replacementText).toBe('선택을 그리드로')
+  })
+
+  test('정렬: name asc', () => {
+    const r = buildSlashCandidates([
+      { name: 'palette', template: 'p' },
+      { name: 'atmosphere', template: 'a' },
+      { name: 'grid', template: 'g' }
+    ])
+    expect(r.map(c => c.label)).toEqual(['atmosphere', 'grid', 'palette'])
+  })
+
+  test('description 이 별도 field 로 보존', () => {
+    const r = buildSlashCandidates([
+      { name: 'grid', description: '컴포넌트 정렬', template: 'x' }
+    ])
+    expect(r[0].description).toBe('컴포넌트 정렬')
+  })
+})
+
+describe('extractMentionContext — `/` slash trigger', () => {
+  test('/grid 감지', () => {
+    expect(extractMentionContext('/grid', 5, '/')).toEqual({ hashPos: 0, query: 'grid' })
+  })
+
+  test('URL like https:// 거부 — // 직전이 문자', () => {
+    // 'https:/' 에서 cursor=7. backward: i=6 '/'. prev (i=5) ':' → '[\s.,!?;:...]' 매칭 → 활성!
+    // 정책: ':' 도 구두점 set 에 들어가서 활성됨. URL 의 '://' 는 첫 / 만 매칭됨.
+    // 그래서 'https://abc' 의 cursor=11 일 때 / 트리거 처리는...
+    // Step backward from 11: 'c','b','a' (모두 word char). i=8 '/'. prev (i=7) '/' → 정규식 매칭 X → null.
+    // OK — 두 번째 '/' 는 mention 으로 안 봄.
+    expect(extractMentionContext('https://abc', 11, '/')).toBeNull()
+  })
+
+  test('단어 중간 / 거부', () => {
+    // 'abc/def' cursor=7. i=6: 'f' word. i=5: 'e'. i=4: 'd'. i=3: '/' break. prev='c' word → null
+    expect(extractMentionContext('abc/def', 7, '/')).toBeNull()
+  })
+
+  test('공백 후 /grid 활성', () => {
+    expect(extractMentionContext('hello /grid', 11, '/')).toEqual({
+      hashPos: 6,
+      query: 'grid'
+    })
+  })
+})
+
+describe('applyMentionSelection — replacementText (slash template) 모드', () => {
+  test('replacementText 가 있으면 trigger+label 대신 통째 교체', () => {
+    const r = applyMentionSelection(
+      '/grid',
+      5,
+      0,
+      {
+        label: 'grid',
+        type: 'template',
+        replacementText: '선택한 컴포넌트들을 3x2 그리드로 정렬해줘'
+      },
+      '/'
+    )
+    expect(r.text).toBe('선택한 컴포넌트들을 3x2 그리드로 정렬해줘')
+    expect(r.cursorPos).toBe(r.text.length)
+  })
+
+  test('replacementText 미설정 시 기존 동작 (trigger + label + space)', () => {
+    const r = applyMentionSelection(
+      '#A',
+      2,
+      0,
+      { label: '경광등1', type: 'rect' },
+      '#'
+    )
+    expect(r.text).toBe('#경광등1 ')
+  })
+})
+
+describe('extractMentionContext', () => {
+  test('cursor 직전 # — 빈 query 로 활성', () => {
+    expect(extractMentionContext('hello #', 7)).toEqual({ hashPos: 6, query: '' })
+  })
+
+  test('# + 한글 부분문자열', () => {
+    expect(extractMentionContext('hello #경', 8)).toEqual({
+      hashPos: 6,
+      query: '경'
+    })
+    expect(extractMentionContext('#경광', 3)).toEqual({ hashPos: 0, query: '경광' })
+  })
+
+  test('# + 영문/하이픈/숫자', () => {
+    expect(extractMentionContext('check #AGV-1', 12)).toEqual({
+      hashPos: 6,
+      query: 'AGV-1'
+    })
+  })
+
+  test('cursor 직전이 공백 — 비활성', () => {
+    expect(extractMentionContext('#경광등 ', 5)).toBeNull() // 공백 뒤
+  })
+
+  test('# 직전이 word char — 비활성 (foo#bar 같은 식별자)', () => {
+    expect(extractMentionContext('foo#bar', 7)).toBeNull()
+  })
+
+  test('# 직전이 공백/구두점/문자열 시작 — 활성', () => {
+    expect(extractMentionContext('#경광', 3)).not.toBeNull() // 시작
+    expect(extractMentionContext('a, #b', 5)).not.toBeNull() // 콤마
+    expect(extractMentionContext('hi! #c', 6)).not.toBeNull() // 느낌표
+    expect(extractMentionContext('(#d', 3)).not.toBeNull() // 괄호
+  })
+
+  test('cursor 와 # 사이에 공백 — 비활성 (이전 mention 마무리)', () => {
+    expect(extractMentionContext('#A B', 4)).toBeNull()
+  })
+
+  test('빈 텍스트 / cursor 0 — null', () => {
+    expect(extractMentionContext('', 0)).toBeNull()
+  })
+
+  test('cursor 가 # 정확히 위 — 활성 (빈 query)', () => {
+    // 'hi #' 에서 cursor=4 (마지막). hashPos=3, query=''
+    expect(extractMentionContext('hi #', 4)).toEqual({ hashPos: 3, query: '' })
+  })
+
+  test('## 연속 — cursor 직전 # 만 본다 (직전이 # 면 비활성)', () => {
+    // text = '##A', cursor=3
+    // i=2: 'A' 아니고 # 도 아님 → continue. i=1: '#' 발견. 직전 char (i=0) 도 '#'.
+    // 직전이 word/공백/구두점 정규식에 # 가 안 매칭 → null
+    expect(extractMentionContext('##A', 3)).toBeNull()
+  })
+})
+
+describe('filterMentionCandidates — FilterResult 반환', () => {
+  const candidates: MentionCandidate[] = [
+    { refid: 1, label: 'motor-1', type: 'rect', id: 'motor-1' },
+    { refid: 2, label: 'motor-2', type: 'rect', id: 'motor-2' },
+    { refid: 3, label: 'sensor-A', type: 'circle', id: 'sensor-A' },
+    { refid: 4, label: 'AGV-1', type: 'rect', id: 'AGV-1' },
+    { refid: 5, label: 'AGV-2', type: 'rect', id: 'AGV-2' }
+  ]
+
+  test('빈 query — 전체 반환 (default match)', () => {
+    const r = filterMentionCandidates(candidates, '')
+    expect(r).toHaveLength(5)
+    // 첫 non-empty field 가 default match (id 우선)
+    expect(r[0].matchType).toBe('id')
+  })
+
+  test('substring — id field 매칭', () => {
+    const r = filterMentionCandidates(candidates, 'agv')
+    expect(r).toHaveLength(2)
+    expect(r.every(x => x.matchType === 'id')).toBe(true)
+  })
+
+  test('cap default 50', () => {
+    const many: MentionCandidate[] = Array.from({ length: 60 }, (_, i) => ({
+      refid: i + 1,
+      label: `c${i}`,
+      type: 'rect',
+      id: `c${i}`
+    }))
+    expect(filterMentionCandidates(many, '')).toHaveLength(50)
+    expect(filterMentionCandidates(many, '', 5)).toHaveLength(5)
+  })
+
+  test('매칭 없음 → 빈 배열', () => {
+    expect(filterMentionCandidates(candidates, 'xyz')).toEqual([])
+  })
+
+  test('새 검색 필드 — tag/class/text 도 매칭', () => {
+    const cs: MentionCandidate[] = [
+      { refid: 1, label: 'A', type: 'rect', tag: 'equipment' },
+      { refid: 2, label: 'B', type: 'rect', class: 'critical' },
+      { refid: 3, label: 'C', type: 'rect', text: 'WARNING' }
+    ]
+    expect(filterMentionCandidates(cs, 'equip')[0].matchType).toBe('tag')
+    expect(filterMentionCandidates(cs, 'crit')[0].matchType).toBe('class')
+    expect(filterMentionCandidates(cs, 'warn')[0].matchType).toBe('text')
+  })
+
+  test('catalog: description field 매칭', () => {
+    const cs: MentionCandidate[] = [
+      {
+        label: 'monitor-card',
+        type: 'prefab',
+        description: 'KPI 모니터링 카드'
+      }
+    ]
+    const r = filterMentionCandidates(cs, '모니터링')
+    expect(r).toHaveLength(1)
+    expect(r[0].matchType).toBe('description')
+  })
+})
+
+describe('filterMentionCandidates — field:value (scene Finder)', () => {
+  const components: MentionCandidate[] = [
+    { refid: 1, label: 'motor-1', type: 'rect', id: 'motor-1' },
+    { refid: 2, label: 'motor-2', type: 'rect', id: 'motor-2' },
+    { refid: 3, label: 'sensor-A', type: 'circle', id: 'sensor-A' },
+    { refid: 4, label: 'rect', type: 'rect' }
+  ]
+
+  test('type:rect', () => {
+    const r = filterMentionCandidates(components, 'type:rect')
+    expect(r).toHaveLength(3)
+    expect(r.every(x => x.matchType === 'type')).toBe(true)
+  })
+
+  test('t:rect — shorthand', () => {
+    expect(filterMentionCandidates(components, 't:rect')).toHaveLength(3)
+  })
+
+  test('id:motor', () => {
+    const r = filterMentionCandidates(components, 'id:motor')
+    expect(r).toHaveLength(2)
+    expect(r.every(x => x.matchType === 'id')).toBe(true)
+  })
+
+  test('i:mot — shorthand', () => {
+    expect(filterMentionCandidates(components, 'i:mot')).toHaveLength(2)
+  })
+
+  test('새 field — tag/class/text 도 field:value 지원', () => {
+    const cs: MentionCandidate[] = [
+      { refid: 1, label: 'A', type: 'rect', tag: 'equipment' },
+      { refid: 2, label: 'B', type: 'rect', class: 'critical' },
+      { refid: 3, label: 'C', type: 'rect', text: 'WARN' }
+    ]
+    expect(filterMentionCandidates(cs, 'tag:equip')[0].matchType).toBe('tag')
+    expect(filterMentionCandidates(cs, 'class:crit')[0].matchType).toBe('class')
+    expect(filterMentionCandidates(cs, 'text:WARN')[0].matchType).toBe('text')
+  })
+
+  test('field 없는 prefix (foo:bar) → 자유 검색 fallback', () => {
+    expect(filterMentionCandidates(components, 'foo:bar')).toEqual([])
+  })
+
+  test('빈 needle (type:) → 전체 반환', () => {
+    expect(filterMentionCandidates(components, 'type:')).toHaveLength(4)
+  })
+
+  test('case-insensitive (영문)', () => {
+    expect(filterMentionCandidates(components, 'TYPE:RECT')).toHaveLength(3)
+    expect(filterMentionCandidates(components, 'ID:Motor')).toHaveLength(2)
+  })
+
+  test('catalog 후보도 type: 으로 필터 가능', () => {
+    const catalog: MentionCandidate[] = [
+      { label: 'monitor-card', type: 'prefab' },
+      { label: 'industrial-steel', type: 'palette' },
+      { label: 'kpi-row', type: 'layout' }
+    ]
+    expect(filterMentionCandidates(catalog, 'type:prefab')).toHaveLength(1)
+    expect(filterMentionCandidates(catalog, 't:palette')).toHaveLength(1)
+  })
+})
+
+describe('applyMentionSelection', () => {
+  test('빈 query — # 만 있는 상태 → 라벨 + 공백 삽입', () => {
+    const r = applyMentionSelection('hello #', 7, 6, {
+      refid: 1,
+      label: '경광등1',
+      type: 'rect'
+    })
+    expect(r.text).toBe('hello #경광등1 ')
+    expect(r.cursorPos).toBe('hello #경광등1 '.length)
+  })
+
+  test('일부 입력된 상태 — query 영역 교체', () => {
+    // 'hello #경 stuff' 에서 cursor=8 (경 뒤), hashPos=6 → '#경' 영역 (idx 6..7) 교체
+    const r = applyMentionSelection('hello #경 stuff', 8, 6, {
+      refid: 1,
+      label: '경광등1',
+      type: 'rect'
+    })
+    expect(r.text).toBe('hello #경광등1  stuff')
+    // cursor 는 '#경광등1 ' 끝
+    expect(r.cursorPos).toBe('hello #경광등1 '.length)
+  })
+
+  test('문장 시작 — 가장 앞', () => {
+    const r = applyMentionSelection('#A', 2, 0, {
+      refid: 1,
+      label: '경광등1',
+      type: 'rect'
+    })
+    expect(r.text).toBe('#경광등1 ')
+  })
+
+  test('cursor 가 query 끝과 같지 않은 경우 — 끝까지 교체', () => {
+    // 'a #foo bar' 에서 hashPos=2, cursor=6 (foo 뒤). #foo 영역 교체.
+    const r = applyMentionSelection('a #foo bar', 6, 2, {
+      refid: 5,
+      label: 'X',
+      type: 'rect'
+    })
+    expect(r.text).toBe('a #X  bar')
+  })
+})
+
+describe('resolveMentionToken — `#token` 클릭 → refid 우선순위 resolve', () => {
+  const mkResult = (
+    refid: number | undefined,
+    matchType?: FilterResult['matchType'],
+    matchValue?: string
+  ): FilterResult => ({
+    candidate: { label: 'x', type: 'rect', refid },
+    matchType,
+    matchValue
+  })
+
+  test('1순위: persistedRefid 가 있으면 즉시 반환 — 다른 옵션 무시', () => {
+    const refid = resolveMentionToken('motor1', {
+      persistedRefid: '35',
+      searchProvider: () => [mkResult(99)],
+      board: { components: [{ id: 'motor1', refid: 100 }] }
+    })
+    expect(refid).toBe(35)
+  })
+
+  test('1순위: persistedRefid 가 비-숫자 문자열 — fallback 으로 진행', () => {
+    const refid = resolveMentionToken('motor1', {
+      persistedRefid: 'NaN-string',
+      searchProvider: () => [mkResult(99)]
+    })
+    expect(refid).toBe(99)
+  })
+
+  test('1순위: persistedRefid null/빈 문자 — fallback 으로 진행', () => {
+    expect(
+      resolveMentionToken('m', { persistedRefid: null, searchProvider: () => [mkResult(7)] })
+    ).toBe(7)
+    expect(
+      resolveMentionToken('m', { persistedRefid: '', searchProvider: () => [mkResult(8)] })
+    ).toBe(8)
+  })
+
+  test('2순위: searchProvider — id 정확 일치 우선', () => {
+    const refid = resolveMentionToken('motor1', {
+      searchProvider: () => [
+        mkResult(50, 'tag', 'motor1'), // 첫 결과지만 matchType 다름
+        mkResult(35, 'id', 'motor1') // id 정확 일치 → 선택
+      ]
+    })
+    expect(refid).toBe(35)
+  })
+
+  test('2순위: id 정확 일치 없으면 첫 결과 사용', () => {
+    const refid = resolveMentionToken('motor1', {
+      searchProvider: () => [mkResult(50, 'tag', 'motor1'), mkResult(99, 'type', 'rect')]
+    })
+    expect(refid).toBe(50)
+  })
+
+  test('2순위: searchProvider 가 빈 결과 → board fallback 으로', () => {
+    const refid = resolveMentionToken('motor1', {
+      searchProvider: () => [],
+      board: { components: [{ id: 'motor1', refid: 77 }] }
+    })
+    expect(refid).toBe(77)
+  })
+
+  test('2순위: searchProvider 결과의 candidate.refid 가 undefined → fallback 으로', () => {
+    const refid = resolveMentionToken('motor1', {
+      searchProvider: () => [mkResult(undefined, 'id', 'motor1')],
+      board: { components: [{ id: 'motor1', refid: 77 }] }
+    })
+    expect(refid).toBe(77)
+  })
+
+  test('3순위: board.components — id 정확 일치', () => {
+    const refid = resolveMentionToken('pump', {
+      board: {
+        components: [
+          { id: 'motor1', refid: 1 },
+          { id: 'pump', refid: 42 }
+        ]
+      }
+    })
+    expect(refid).toBe(42)
+  })
+
+  test('3순위: board.components 의 refid 가 NaN → undefined 반환', () => {
+    const refid = resolveMentionToken('pump', {
+      board: { components: [{ id: 'pump', refid: NaN }] }
+    })
+    expect(refid).toBeUndefined()
+  })
+
+  test('모두 실패 → undefined', () => {
+    expect(
+      resolveMentionToken('unknown', {
+        searchProvider: () => [],
+        board: { components: [{ id: 'a', refid: 1 }] }
+      })
+    ).toBeUndefined()
+    expect(resolveMentionToken('unknown', {})).toBeUndefined()
+  })
+
+  test('빈 token → undefined (early exit)', () => {
+    expect(
+      resolveMentionToken('', {
+        persistedRefid: '99',
+        searchProvider: () => [mkResult(7)]
+      })
+    ).toBeUndefined()
+  })
+
+  test('searchProvider 미제공 + board 만 있을 때 — board 직접 사용', () => {
+    expect(
+      resolveMentionToken('a', { board: { components: [{ id: 'a', refid: 5 }] } })
+    ).toBe(5)
+  })
+
+  test('board 가 null/undefined 안전', () => {
+    expect(resolveMentionToken('a', { board: null })).toBeUndefined()
+    expect(resolveMentionToken('a', { board: undefined })).toBeUndefined()
+  })
+
+  test('board.components 가 array 아님 — 안전', () => {
+    expect(
+      resolveMentionToken('a', { board: { components: undefined } })
+    ).toBeUndefined()
+    expect(
+      resolveMentionToken('a', { board: { components: 'not array' as any } })
+    ).toBeUndefined()
+  })
+
+  test('한글 token — 동일 동작', () => {
+    expect(
+      resolveMentionToken('경광등1', { persistedRefid: '42' })
+    ).toBe(42)
+    expect(
+      resolveMentionToken('경광등1', {
+        board: { components: [{ id: '경광등1', refid: 7 }] }
+      })
+    ).toBe(7)
+  })
+})