@csntgao/uni-base 0.1.3 → 0.1.5

package/packages/web-components/tests/account-context.test.ts

@@ -273,7 +273,9 @@ describe('<uniplat-account-context>', () => {
       await settle(context)
 
       expect(context.shadowRoot?.textContent).toContain('工作台')
-      expect(context.shadowRoot?.textContent).toContain('北京星河科技有限公司')
+      const capsuleOrganization = context.shadowRoot?.querySelector('.organization-name')
+      expect(capsuleOrganization?.textContent?.trim()).toBe('北京星河科技有限…')
+      expect(capsuleOrganization?.getAttribute('title')).toBe('北京星河科技有限公司')
       const statusIcon = context.shadowRoot?.querySelector(`.status-icon.${cssClass}`)
       expect(statusIcon?.getAttribute('aria-label')).toBe(label)
       expect(statusIcon?.querySelector('svg')?.dataset.prototypeIcon).toBe(iconName)
@@ -725,6 +727,39 @@ describe('<uniplat-account-context>', () => {
     )
   })
 
+  it('falls back to the user avatar when the selected organization employee has no avatar', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '用户张伟',
+      avatarText: '用',
+      avatarUrl: 'https://static.example.com/user-avatar.png',
+      organization: {
+        id: 'enterprise-a',
+        name: '企业 A',
+        type: 'enterprise',
+        employeeDisplayName: '企业员工小张',
+        employeeAvatarText: '员',
+        verificationStatus: 'verified',
+      },
+    })
+    document.body.append(context)
+    await settle(context)
+
+    expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('企业员工小张')
+    expect(context.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')?.src).toBe(
+      'https://static.example.com/user-avatar.png',
+    )
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    expect(menu?.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')?.src).toBe(
+      'https://static.example.com/user-avatar.png',
+    )
+  })
+
   it('falls back to initials for failed avatars and rejects unsafe identity URLs', async () => {
     const context = document.createElement(ACCOUNT_CONTEXT_TAG)
     expect(() =>
@@ -764,6 +799,49 @@ describe('<uniplat-account-context>', () => {
     expect(image?.hidden).toBe(false)
   })
 
+  it('truncates long capsule names so the navigation width stays fixed', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '欧阳夏尔泽辉安',
+      organization: {
+        id: 'enterprise-huaqin',
+        name: '北京华勤百业技术服务有限公司',
+        type: 'enterprise',
+        applicationNames: [APPLICATION_NAME],
+        verificationStatus: 'verified',
+      },
+    })
+    document.body.append(context)
+    await settle(context)
+
+    const capsuleName = context.shadowRoot?.querySelector('.display-name')
+    const capsuleOrganization = context.shadowRoot?.querySelector('.organization-name')
+    expect(capsuleName?.textContent?.trim()).toBe('欧阳夏尔泽辉…')
+    expect(capsuleName?.getAttribute('title')).toBe('欧阳夏尔泽辉安')
+    expect(capsuleOrganization?.textContent?.trim()).toBe('北京华勤百业技术…')
+    expect(capsuleOrganization?.getAttribute('title')).toBe('北京华勤百业技术服务有限公司')
+
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '高高高',
+      organization: {
+        id: 'team-small',
+        name: '小团队',
+        type: 'team',
+        applicationNames: [APPLICATION_NAME],
+      },
+    })
+    await settle(context)
+
+    const shortName = context.shadowRoot?.querySelector('.display-name')
+    const shortOrganization = context.shadowRoot?.querySelector('.organization-name')
+    expect(shortName?.textContent?.trim()).toBe('高高高')
+    expect(shortName?.hasAttribute('title')).toBe(false)
+    expect(shortOrganization?.textContent?.trim()).toBe('小团队')
+    expect(shortOrganization?.hasAttribute('title')).toBe(false)
+  })
+
   it('requires enterprise status, rejects raw mobile numbers and renders labels as text', async () => {
     const context = document.createElement(ACCOUNT_CONTEXT_TAG)
     expect(() =>
@@ -793,6 +871,8 @@ describe('<uniplat-account-context>', () => {
     document.body.append(context)
     await settle(context)
     expect(context.shadowRoot?.querySelector('script')).toBeNull()
-    expect(context.shadowRoot?.textContent).toContain('<script>unsafe()</script>')
+    const capsuleName = context.shadowRoot?.querySelector('.display-name')
+    expect(capsuleName?.textContent?.trim()).toBe('<scrip…')
+    expect(capsuleName?.getAttribute('title')).toBe('<script>unsafe()</script>')
   })
 })

package/packages/web-components/tests/organization-selector.test.ts

@@ -4,10 +4,13 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import {
   ORGANIZATION_SELECTOR_TAG,
   UniplatOrganizationSelector,
+  resolveOrganizationEntryDecision,
   type OrganizationSelectorConfig,
 } from '../src'
 
 const CONFIG: OrganizationSelectorConfig = {
+  displayName: '张伟',
+  maskedMobile: '138****8000',
   selectedOrganizationId: 'enterprise-beijing',
   rememberSelection: true,
   organizations: [
@@ -19,6 +22,7 @@ const CONFIG: OrganizationSelectorConfig = {
       role: '超管',
       memberCount: 128,
       lastEnteredLabel: '上次进入 2 小时前',
+      unifiedSocialCreditCode: '91110108MA01XY7788',
     },
     {
       id: 'enterprise-shanghai',
@@ -58,70 +62,278 @@ async function settle(selector: UniplatOrganizationSelector): Promise<void> {
   await Promise.resolve()
 }
 
+async function mount(
+  config: OrganizationSelectorConfig = CONFIG,
+): Promise<UniplatOrganizationSelector> {
+  const selector = document.createElement(ORGANIZATION_SELECTOR_TAG)
+  selector.configure(config)
+  document.body.append(selector)
+  await settle(selector)
+  return selector
+}
+
+function rowNames(selector: UniplatOrganizationSelector): string[] {
+  return [...(selector.shadowRoot?.querySelectorAll('.organization .name') ?? [])].map(
+    (node) => node.textContent?.trim() ?? '',
+  )
+}
+
+async function typeSearch(selector: UniplatOrganizationSelector, value: string): Promise<void> {
+  const input = selector.shadowRoot?.querySelector<HTMLInputElement>('.search input')
+  if (!input) throw new Error('Missing search input')
+  input.value = value
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+  await settle(selector)
+}
+
 describe('<uniplat-organization-selector>', () => {
   afterEach(() => {
     document.body.replaceChildren()
   })
 
-  it('registers and renders all enterprise and team memberships from the prototype', async () => {
+  it('registers and renders the S.1 default state from the prototype', async () => {
     expect(customElements.get(ORGANIZATION_SELECTOR_TAG)).toBe(UniplatOrganizationSelector)
-    const selector = document.createElement(ORGANIZATION_SELECTOR_TAG)
-    selector.configure(CONFIG)
-    document.body.append(selector)
-    await settle(selector)
+    const selector = await mount()
 
-    expect(selector.shadowRoot?.textContent).toContain('你归属 5 个团队 / 企业')
+    const text = selector.shadowRoot?.textContent ?? ''
+    expect(text).toContain('选择要进入的团队 / 企业')
+    expect(text).toContain('张伟 · 138****8000')
+    expect(text).toContain('你共归属 5 个组织，进入后可在导航随时切换')
+    expect(selector.shadowRoot?.querySelector('.search input')?.getAttribute('placeholder')).toBe(
+      '搜索名称，或输入统一社会信用代码',
+    )
+    expect(text).toContain('最近进入')
+    expect(text).toContain('全部组织')
     expect(selector.shadowRoot?.querySelectorAll('.organization')).toHaveLength(5)
-    expect(selector.shadowRoot?.textContent).toContain('北京星河科技有限公司')
-    expect(selector.shadowRoot?.textContent).toContain('企业')
-    expect(selector.shadowRoot?.textContent).toContain('未认证')
-    expect(selector.shadowRoot?.textContent).toContain('已过期')
-    expect(selector.shadowRoot?.textContent).toContain('团队')
-    expect(selector.shadowRoot?.textContent).toContain('超管 · 128 人 · 上次进入 2 小时前')
+    expect(text).toContain('未认证')
+    expect(text).toContain('已过期')
+    expect(text).toContain('团队')
+    expect(text).toContain('超管 · 128 人 · 上次进入 2 小时前')
+    expect(text).toContain('记住选择，下次直接进入')
+    expect(text).toContain('+ 创建 / 加入')
+    expect(text).toContain('退出登录')
+  })
+
+  it('shows type filter counts and filters the list without collapsing the counts', async () => {
+    const selector = await mount()
+    const chips = [...(selector.shadowRoot?.querySelectorAll<HTMLButtonElement>('.chip') ?? [])]
+
+    expect(chips.map((chip) => chip.textContent?.trim())).toEqual(['全部 5', '企业 3', '团队 2'])
+    expect(chips[0]?.getAttribute('aria-pressed')).toBe('true')
+
+    chips[2]?.click()
+    await settle(selector)
+
+    expect(rowNames(selector)).toEqual(['星河增长项目组', '2026 校招筹备团队'])
+    expect(
+      [...(selector.shadowRoot?.querySelectorAll('.chip') ?? [])].map((chip) =>
+        chip.textContent?.trim(),
+      ),
+    ).toEqual(['全部 5', '企业 3', '团队 2'])
+    expect(selector.shadowRoot?.textContent).not.toContain('最近进入')
+  })
+
+  it('searches by name and by unified social credit code without rendering the code', async () => {
+    const selector = await mount()
+
+    await typeSearch(selector, '上海')
+    expect(rowNames(selector)).toEqual(['星河（上海）分公司'])
+
+    await typeSearch(selector, '91110108ma01xy7788')
+    expect(rowNames(selector)).toEqual(['北京星河科技有限公司'])
+    expect(selector.shadowRoot?.textContent).not.toContain('91110108MA01XY7788')
+
+    await typeSearch(selector, '不存在的组织')
+    expect(rowNames(selector)).toEqual([])
+    expect(selector.shadowRoot?.textContent).toContain('没有匹配的团队或企业')
+  })
+
+  it('groups the recently entered organization first and preselects it by default', async () => {
+    const selector = await mount({ organizations: CONFIG.organizations })
+    const groups = [...(selector.shadowRoot?.querySelectorAll('.group') ?? [])]
+
+    expect(
+      [...(groups[0]?.querySelectorAll('.name') ?? [])].map((node) => node.textContent?.trim()),
+    ).toEqual(['北京星河科技有限公司'])
+    expect(
+      [...(groups[1]?.querySelectorAll('.name') ?? [])].map((node) => node.textContent?.trim()),
+    ).toEqual(['星河（上海）分公司', '星河增长项目组', '已过期企业', '2026 校招筹备团队'])
+    expect(selector.shadowRoot?.querySelector('.organization.selected .name')?.textContent).toBe(
+      '北京星河科技有限公司',
+    )
+    expect(selector.shadowRoot?.querySelector('.enter')?.textContent?.trim()).toBe(
+      '进入「北京星河科技有限公司」',
+    )
   })
 
   it('keeps the choice local until enter and emits only ids and the remember preference', async () => {
     const selector = document.createElement(ORGANIZATION_SELECTOR_TAG)
     const enter = vi.fn()
     const create = vi.fn()
+    const logout = vi.fn()
     selector.addEventListener('organization-enter-requested', enter)
     selector.addEventListener('organization-create-requested', create)
+    selector.addEventListener('logout-requested', logout)
     selector.configure(CONFIG)
     document.body.append(selector)
     await settle(selector)
 
     selector.shadowRoot?.querySelectorAll<HTMLButtonElement>('.organization')[2]?.click()
+    await settle(selector)
+    expect(selector.shadowRoot?.querySelector('.enter')?.textContent?.trim()).toBe(
+      '进入「星河增长项目组」',
+    )
+
     const remember = selector.shadowRoot?.querySelector<HTMLInputElement>('.remember input')
     if (!remember) throw new Error('Missing remember checkbox')
     remember.checked = false
     remember.dispatchEvent(new Event('change', { bubbles: true }))
     selector.shadowRoot?.querySelector<HTMLButtonElement>('.enter')?.click()
     selector.shadowRoot?.querySelector<HTMLButtonElement>('.create')?.click()
+    selector.shadowRoot?.querySelector<HTMLButtonElement>('.logout')?.click()
 
     expect(enter.mock.calls[0]?.[0].detail).toEqual({
       organizationId: 'team-growth',
       rememberSelection: false,
     })
-    expect(JSON.stringify(enter.mock.calls[0]?.[0].detail)).not.toContain('星河')
+    const serialized = JSON.stringify(enter.mock.calls[0]?.[0].detail)
+    expect(serialized).not.toContain('星河')
+    expect(serialized).not.toContain('张伟')
+    expect(serialized).not.toContain('8000')
     expect(create.mock.calls[0]?.[0].detail).toEqual({})
+    expect(logout.mock.calls[0]?.[0].detail).toEqual({})
+    expect(logout.mock.calls[0]?.[0].composed).toBe(true)
     expect(enter.mock.calls[0]?.[0].composed).toBe(true)
   })
 
-  it('rejects duplicate ids and renders external labels as text', async () => {
+  it('renders a forced modal without a close button and ignores overlay clicks and Escape', async () => {
+    const selector = await mount({ ...CONFIG, presentation: 'modal' })
+    const hostEscape = vi.fn()
+    document.addEventListener('keydown', hostEscape)
+
+    const overlay = selector.shadowRoot?.querySelector<HTMLElement>('.overlay')
+    expect(overlay).not.toBeNull()
+    expect(selector.getAttribute('data-presentation')).toBe('modal')
+    expect(selector.shadowRoot?.querySelector('.card')?.getAttribute('aria-modal')).toBe('true')
+    expect(selector.shadowRoot?.querySelectorAll('button')).not.toHaveLength(0)
+    expect(
+      [...(selector.shadowRoot?.querySelectorAll('button') ?? [])].some((button) =>
+        /关闭|close|×/i.test(`${button.className} ${button.getAttribute('part') ?? ''}`),
+      ),
+    ).toBe(false)
+
+    overlay?.click()
+    await settle(selector)
+    expect(selector.shadowRoot?.querySelector('.overlay')).not.toBeNull()
+
+    const escape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+    document.dispatchEvent(escape)
+    expect(escape.defaultPrevented).toBe(true)
+    expect(hostEscape).not.toHaveBeenCalled()
+
+    document.removeEventListener('keydown', hostEscape)
+  })
+
+  it('stays inline by default and releases the Escape guard after removal', async () => {
+    const inline = await mount()
+    expect(inline.shadowRoot?.querySelector('.overlay')).toBeNull()
+    expect(inline.hasAttribute('data-presentation')).toBe(false)
+
+    const modal = await mount({ ...CONFIG, presentation: 'modal' })
+    modal.remove()
+    await settle(modal)
+
+    const hostEscape = vi.fn()
+    document.addEventListener('keydown', hostEscape)
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+    expect(hostEscape).toHaveBeenCalledTimes(1)
+    document.removeEventListener('keydown', hostEscape)
+  })
+
+  it('rejects duplicate ids, full mobile numbers and unknown presentations', async () => {
     const selector = document.createElement(ORGANIZATION_SELECTOR_TAG)
     expect(() =>
       selector.configure({
         organizations: [CONFIG.organizations[0]!, CONFIG.organizations[0]!],
       }),
     ).toThrow(TypeError)
+    expect(() =>
+      selector.configure({ organizations: CONFIG.organizations, maskedMobile: '13800008000' }),
+    ).toThrow(TypeError)
+    expect(() =>
+      selector.configure({
+        organizations: CONFIG.organizations,
+        presentation: 'drawer' as never,
+      }),
+    ).toThrow(TypeError)
 
     selector.configure({
       organizations: [{ id: 'safe-id', name: '<img src=x onerror=unsafe()>', type: 'team' }],
+      displayName: '<b>张伟</b>',
     })
     document.body.append(selector)
     await settle(selector)
 
     expect(selector.shadowRoot?.querySelector('img')).toBeNull()
+    expect(selector.shadowRoot?.querySelector('b')).toBeNull()
     expect(selector.shadowRoot?.textContent).toContain('<img src=x onerror=unsafe()>')
+    expect(selector.shadowRoot?.textContent).toContain('<b>张伟</b>')
+  })
+
+  it('renders the empty state without search or filters', async () => {
+    const selector = await mount({ organizations: [] })
+
+    expect(selector.shadowRoot?.textContent).toContain('暂无可进入的团队或企业')
+    expect(selector.shadowRoot?.querySelector('.search')).toBeNull()
+    expect(selector.shadowRoot?.querySelector('.chip')).toBeNull()
+    expect(selector.shadowRoot?.querySelector<HTMLButtonElement>('.enter')?.disabled).toBe(true)
+  })
+})
+
+describe('resolveOrganizationEntryDecision()', () => {
+  it('sends users without memberships to the personal state', () => {
+    expect(resolveOrganizationEntryDecision({ organizations: [] })).toEqual({ kind: 'personal' })
+  })
+
+  it('enters directly with a single membership even when nothing is remembered', () => {
+    expect(resolveOrganizationEntryDecision({ organizations: [CONFIG.organizations[2]!] })).toEqual(
+      { kind: 'auto-enter', organizationId: 'team-growth' },
+    )
+  })
+
+  it('skips the prompt when the remembered organization is still available', () => {
+    expect(
+      resolveOrganizationEntryDecision({
+        organizations: CONFIG.organizations,
+        rememberedOrganizationId: 'team-campus',
+      }),
+    ).toEqual({ kind: 'auto-enter', organizationId: 'team-campus' })
+  })
+
+  it('prompts with the recently entered organization for two or more memberships', () => {
+    expect(resolveOrganizationEntryDecision({ organizations: CONFIG.organizations })).toEqual({
+      kind: 'prompt',
+      selectedOrganizationId: 'enterprise-beijing',
+    })
+  })
+
+  it('prompts again when the remembered organization is no longer available', () => {
+    expect(
+      resolveOrganizationEntryDecision({
+        organizations: CONFIG.organizations,
+        rememberedOrganizationId: 'enterprise-removed',
+      }),
+    ).toEqual({ kind: 'prompt', selectedOrganizationId: 'enterprise-beijing' })
+  })
+
+  it('rejects malformed input instead of guessing an entry', () => {
+    expect(() => resolveOrganizationEntryDecision({ organizations: undefined as never })).toThrow(
+      TypeError,
+    )
+    expect(() =>
+      resolveOrganizationEntryDecision({
+        organizations: [CONFIG.organizations[0]!, CONFIG.organizations[0]!],
+      }),
+    ).toThrow(TypeError)
   })
 })