@csntgao/uni-base 0.1.0

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

@@ -0,0 +1,798 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  ACCOUNT_CONTEXT_TAG,
+  createMockOrganizationOnboardingTransport,
+  UniplatAccountContext,
+  type AccountContextProjection,
+  type AccountContextTransport,
+  type UniplatUserMenu,
+} from '../src'
+import type { UniplatApplicationSwitcher } from '../src/application-switcher'
+
+const APPLICATION_NAME = 'OfficialWebsite'
+
+function serverProjection(
+  currentOrganizationId: string | null = 'enterprise-a',
+): AccountContextProjection {
+  const organizations = [
+    {
+      id: 'enterprise-a',
+      name: '企业 A',
+      type: 'enterprise' as const,
+      employeeDisplayName: '企业员工小张',
+      employeeAvatarText: '员',
+      companyName: '企业 A 有限公司',
+      employeeDepartmentName: '总裁办',
+      employeeEmploymentStatus: 'active',
+      verificationStatus: 'verified' as const,
+      role: '所有者',
+      memberCount: 187,
+    },
+    {
+      id: 'team-b',
+      name: '团队 B',
+      type: 'team' as const,
+      employeeDisplayName: '团队成员小李',
+      employeeAvatarText: '李',
+      role: '成员',
+      memberCount: 8,
+    },
+  ]
+  return {
+    applicationName: APPLICATION_NAME,
+    user: {
+      displayName: '用户张伟',
+      maskedMobile: '138****6688',
+      avatarText: '用',
+    },
+    currentOrganizationId,
+    currentOrganization:
+      organizations.find((organization) => organization.id === currentOrganizationId) ?? null,
+    organizations,
+  }
+}
+
+async function settle(context: UniplatAccountContext): Promise<void> {
+  await context.updateComplete
+  await Promise.resolve()
+}
+
+describe('<uniplat-account-context>', () => {
+  afterEach(() => {
+    document.body.replaceChildren()
+    vi.restoreAllMocks()
+  })
+
+  it('loads user, organizations and verification state from applicationName plus transport', async () => {
+    const load = vi.fn(async () => serverProjection())
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: { load },
+    })
+    document.body.append(context)
+
+    await vi.waitFor(() =>
+      expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('企业员工小张'),
+    )
+    expect(load).toHaveBeenCalledWith(APPLICATION_NAME)
+    expect(context.shadowRoot?.textContent).toContain('企业 A')
+    expect(context.shadowRoot?.querySelector('.status-icon.verified')).not.toBeNull()
+    expect(context.shadowRoot?.querySelector('.count')?.textContent?.trim()).toBe('2')
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    expect(menu?.shadowRoot?.textContent).toContain('企业 A')
+    expect(menu?.shadowRoot?.textContent).toContain('团队 B')
+    expect(menu?.shadowRoot?.querySelector('.profile-mobile')?.textContent).toBe('138****6688')
+  })
+
+  it('lets the Host respond to organization-selected through the public switch method', async () => {
+    const transport: AccountContextTransport = {
+      load: vi.fn(async () => serverProjection()),
+      switchOrganization: vi.fn(async (_applicationName, organizationId) =>
+        serverProjection(organizationId),
+      ),
+    }
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({ applicationName: APPLICATION_NAME, transport })
+    context.addEventListener('organization-selected', (event) => {
+      const selected = event as CustomEvent<{ organizationId: string }>
+      void context.switchOrganization(selected.detail.organizationId)
+    })
+    document.body.append(context)
+    await vi.waitFor(() => expect(context.shadowRoot?.textContent).toContain('企业 A'))
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('[data-organization-id="team-b"]')?.click()
+
+    await vi.waitFor(() =>
+      expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('团队成员小李'),
+    )
+    expect(transport.switchOrganization).toHaveBeenCalledWith(APPLICATION_NAME, 'team-b')
+    expect(context.shadowRoot?.textContent).toContain('团队 B')
+  })
+
+  it('starts internal onboarding from the account-menu create action without a public create event', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    const create = vi.fn()
+    context.addEventListener('organization-create-requested', create)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: { load: async () => serverProjection() },
+      organizationOnboarding: { transport: createMockOrganizationOnboardingTransport() },
+    })
+    document.body.append(context)
+
+    await vi.waitFor(() => expect(context.shadowRoot?.textContent).toContain('企业 A'))
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('.create-action')?.click()
+    await settle(context)
+
+    expect(create).not.toHaveBeenCalled()
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).toBeNull()
+    const onboarding = context.shadowRoot?.querySelector('uniplat-internal-organization-onboarding')
+    await onboarding?.updateComplete
+    expect(onboarding?.shadowRoot?.textContent).toContain('创建你的团队 / 企业')
+  })
+
+  it('refreshes its own organization projection after internal onboarding creates an organization', async () => {
+    const initialProjection = serverProjection()
+    const createdOrganization = {
+      id: 'team-created',
+      name: '新创建团队',
+      type: 'team' as const,
+      employeeDisplayName: '团队成员小张',
+      employeeAvatarText: '张',
+      role: '所有者',
+      memberCount: 1,
+    }
+    const updatedProjection: AccountContextProjection = {
+      ...initialProjection,
+      organizations: [...initialProjection.organizations, createdOrganization],
+    }
+    const load = vi
+      .fn<() => Promise<AccountContextProjection>>()
+      .mockResolvedValueOnce(initialProjection)
+      .mockResolvedValueOnce(updatedProjection)
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: { load },
+      organizationOnboarding: { transport: createMockOrganizationOnboardingTransport() },
+    })
+    document.body.append(context)
+
+    await vi.waitFor(() => expect(load).toHaveBeenCalledTimes(1))
+    context.startOrganizationOnboarding()
+    await settle(context)
+    const onboarding = context.shadowRoot?.querySelector('uniplat-internal-organization-onboarding')
+    onboarding?.dispatchEvent(
+      new CustomEvent('organization-created', {
+        detail: { organizationId: createdOrganization.id, type: 'team' },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+
+    await vi.waitFor(() => expect(load).toHaveBeenCalledTimes(2))
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    expect(menu?.shadowRoot?.textContent).toContain('新创建团队')
+  })
+
+  it('registers and renders the personal account navigation state', async () => {
+    expect(customElements.get(ACCOUNT_CONTEXT_TAG)).toBe(UniplatAccountContext)
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    const account = vi.fn()
+    context.addEventListener('account-menu-requested', account)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '张伟',
+      avatarText: '张',
+      organizationOnboarding: { transport: createMockOrganizationOnboardingTransport() },
+    })
+    document.body.append(context)
+    await settle(context)
+
+    expect(context.shadowRoot?.textContent).toContain('创建团队 / 企业')
+    expect(context.shadowRoot?.textContent).toContain('张伟')
+    expect(context.shadowRoot?.querySelector('.context.personal')).not.toBeNull()
+    expect(context.shadowRoot?.querySelector('.workbench')).toBeNull()
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.create')?.click()
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    expect(account.mock.calls[0]?.[0].detail).toEqual({ organizationId: null })
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).not.toBeNull()
+  })
+
+  it('shows the workbench for an open application with oid=0 and unselected organizations', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: { load: async () => serverProjection(null) },
+      workbench: { getAccessToken: async () => 'test.access.token' },
+      organizationOnboarding: { transport: createMockOrganizationOnboardingTransport() },
+    })
+    document.body.append(context)
+
+    await vi.waitFor(() =>
+      expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('用户张伟'),
+    )
+    expect(context.shadowRoot?.querySelector('.context.personal')).not.toBeNull()
+    expect(context.shadowRoot?.querySelector('.create')).toBeNull()
+    expect(context.shadowRoot?.querySelector('.workbench')).not.toBeNull()
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.workbench')?.click()
+    await settle(context)
+    expect(context.shadowRoot?.querySelector('.workbench-panel')).not.toBeNull()
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    expect(menu?.shadowRoot?.textContent).toContain('企业 A')
+    expect(menu?.shadowRoot?.textContent).toContain('团队 B')
+  })
+
+  it.each([
+    ['unverified', 'unverified', '企业未认证', 'alert-circle'],
+    ['pending', 'pending', '企业认证审核中', 'clock-hour-4'],
+    ['rejected', 'rejected', '企业认证未通过', 'alert-triangle'],
+    ['verified', 'verified', '企业已认证', 'discount-check-filled'],
+    ['expired', 'expired', '企业认证已过期', 'clock-exclamation'],
+  ] as const)(
+    'renders the compact enterprise %s status from the prototype',
+    async (status, cssClass, label, iconName) => {
+      const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+      context.configure({
+        applicationName: APPLICATION_NAME,
+        displayName: '张伟',
+        organization: {
+          id: 'enterprise-beijing',
+          name: '北京星河科技有限公司',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+          avatarText: '星',
+          verificationStatus: status,
+        },
+      })
+      document.body.append(context)
+      await settle(context)
+
+      expect(context.shadowRoot?.textContent).toContain('工作台')
+      expect(context.shadowRoot?.textContent).toContain('北京星河科技有限公司')
+      const statusIcon = context.shadowRoot?.querySelector(`.status-icon.${cssClass}`)
+      expect(statusIcon?.getAttribute('aria-label')).toBe(label)
+      expect(statusIcon?.querySelector('svg')?.dataset.prototypeIcon).toBe(iconName)
+      expect(statusIcon?.querySelector('path')?.namespaceURI).toBe('http://www.w3.org/2000/svg')
+      expect(context.shadowRoot?.querySelector('.selector')).not.toBeNull()
+      expect(context.shadowRoot?.querySelector('.verification')).toBeNull()
+      expect(context.shadowRoot?.querySelector('.attention-dot') !== null).toBe(
+        status === 'rejected' || status === 'expired',
+      )
+    },
+  )
+
+  it('integrates mutually exclusive workbench and organization panels without changing layout', async () => {
+    const token = 'integrated.private.jwt'
+    const getAccessToken = vi.fn(async () => token)
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '张伟',
+      maskedMobile: '138****6688',
+      organization: {
+        id: 'enterprise-beijing',
+        name: '北京星河科技有限公司',
+        type: 'enterprise',
+        applicationNames: [APPLICATION_NAME],
+        verificationStatus: 'verified',
+      },
+      organizations: [
+        {
+          id: 'enterprise-beijing',
+          name: '北京星河科技有限公司',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+          avatarText: '星',
+          verificationStatus: 'verified',
+          role: '超管',
+          memberCount: 128,
+        },
+        {
+          id: 'team-growth',
+          name: '星河增长项目组',
+          type: 'team',
+          applicationNames: [APPLICATION_NAME],
+          avatarText: '增',
+          role: '团队负责人',
+          memberCount: 9,
+        },
+      ],
+      workbench: { getAccessToken },
+    })
+    document.body.append(context)
+    await settle(context)
+
+    const contextBox = context.shadowRoot?.querySelector<HTMLElement>('.context')
+    const workbenchTrigger = context.shadowRoot?.querySelector<HTMLElement>('.workbench')
+    const accountTrigger = context.shadowRoot?.querySelector<HTMLElement>('.account')
+    const count = context.shadowRoot?.querySelector<HTMLElement>('.count')
+    const initialWidth = getComputedStyle(contextBox!).width
+    expect(getComputedStyle(workbenchTrigger!).paddingTop).toBe('9px')
+    expect(getComputedStyle(accountTrigger!).height).toBe('42px')
+    expect(getComputedStyle(count!).paddingTop).toBe('1px')
+    expect(
+      context.shadowRoot?.querySelector('.workbench svg')?.getAttribute('data-prototype-icon'),
+    ).toBe('layout-grid')
+    expect(context.shadowRoot?.querySelector('.workbench svg path')?.getAttribute('d')).toBe(
+      'M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z',
+    )
+    expect(
+      context.shadowRoot?.querySelector('.selector svg')?.getAttribute('data-prototype-icon'),
+    ).toBe('selector')
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.workbench')?.click()
+    await settle(context)
+
+    const workbenchPanel = context.shadowRoot?.querySelector<HTMLElement>('.workbench-panel')
+    const switcher = context.shadowRoot?.querySelector<UniplatApplicationSwitcher>(
+      'uniplat-internal-application-switcher',
+    )
+    expect(getComputedStyle(workbenchPanel!).position).toBe('absolute')
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).toBeNull()
+    await vi.waitFor(() =>
+      expect(switcher?.shadowRoot?.querySelectorAll('.application')).toHaveLength(9),
+    )
+    expect(switcher?.shadowRoot?.querySelector('.launcher')).toBeNull()
+    expect(switcher?.shadowRoot?.querySelector('.organization-selector')).toBeNull()
+    expect(switcher?.shadowRoot?.querySelector('.panel.embedded')).not.toBeNull()
+    expect(context.shadowRoot?.innerHTML).not.toContain(token)
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const accountPanel = context.shadowRoot?.querySelector<HTMLElement>('.account-panel')
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    expect(getComputedStyle(accountPanel!).position).toBe('absolute')
+    expect(context.shadowRoot?.querySelector('uniplat-internal-application-switcher')).toBeNull()
+    expect(menu?.shadowRoot?.textContent).toContain('个人账号设置')
+    expect(menu?.shadowRoot?.textContent).toContain('我的员工信息')
+    expect(menu?.shadowRoot?.textContent).toContain('在 北京星河科技有限公司 的员工信息')
+    expect(menu?.shadowRoot?.textContent).toContain('切换企业 / 团队（2）')
+    expect(menu?.shadowRoot?.textContent).toContain('退出登录')
+    expect(menu?.shadowRoot?.querySelector('.profile-mobile')?.textContent).toBe('138****6688')
+    expect(
+      menu?.shadowRoot?.querySelector(
+        '[data-organization-id="enterprise-beijing"] .organization-icon svg[data-prototype-icon="building"]',
+      ),
+    ).not.toBeNull()
+    expect(getComputedStyle(contextBox!).width).toBe(initialWidth)
+  })
+
+  it('keeps organization selection Host-controlled and closes the integrated menu', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    const selected = vi.fn()
+    const logout = vi.fn()
+    context.addEventListener('organization-selected', selected)
+    context.addEventListener('logout-requested', logout)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '张伟',
+      organization: {
+        id: 'enterprise-a',
+        name: '企业 A',
+        type: 'enterprise',
+        applicationNames: [APPLICATION_NAME],
+        verificationStatus: 'verified',
+      },
+      organizations: [
+        {
+          id: 'enterprise-a',
+          name: '企业 A',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+          verificationStatus: 'verified',
+        },
+        {
+          id: 'team-b',
+          name: '团队 B',
+          type: 'team',
+          applicationNames: [APPLICATION_NAME],
+        },
+      ],
+    })
+    document.body.append(context)
+    await settle(context)
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('[data-organization-id="team-b"]')?.click()
+    await settle(context)
+
+    expect(selected.mock.calls[0]?.[0].detail).toEqual({ organizationId: 'team-b' })
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).toBeNull()
+    expect(context.shadowRoot?.textContent).toContain('企业 A')
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const reopened = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await reopened?.updateComplete
+    reopened?.shadowRoot?.querySelector<HTMLButtonElement>('.logout')?.click()
+    expect(logout.mock.calls[0]?.[0].detail).toEqual({})
+  })
+
+  it('forwards the new account actions and closes the integrated menu', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    const accountSettings = vi.fn()
+    const employeeInfo = vi.fn()
+    context.addEventListener('account-settings-requested', accountSettings)
+    context.addEventListener('employee-info-requested', employeeInfo)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '张伟',
+      organization: {
+        id: 'enterprise-a',
+        name: '企业 A',
+        type: 'enterprise',
+        applicationNames: [APPLICATION_NAME],
+        companyName: '企业 A 有限公司',
+        employeeDepartmentName: '总裁办',
+        employeeEmploymentStatus: 'active',
+        employeeDisplayName: '张伟',
+        role: '所有者',
+        verificationStatus: 'verified',
+      },
+    })
+    document.body.append(context)
+    await settle(context)
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    let menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('.account-settings-action')?.click()
+    await settle(context)
+    expect(accountSettings.mock.calls[0]?.[0].detail).toEqual({})
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).toBeNull()
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('.employee-info-action')?.click()
+    await settle(context)
+    expect(employeeInfo.mock.calls[0]?.[0].detail).toEqual({ organizationId: 'enterprise-a' })
+    expect(context.shadowRoot?.querySelector('uniplat-user-menu')).toBeNull()
+    const employeeInfoModal = context.shadowRoot?.querySelector<HTMLDialogElement>(
+      '[part="employee-info-modal"]',
+    )
+    expect(employeeInfoModal).toBeInstanceOf(HTMLDialogElement)
+    expect(employeeInfoModal?.open).toBe(true)
+    expect(context.shadowRoot?.querySelector('[part="employee-info-dialog"]')).not.toBeNull()
+    expect(context.shadowRoot?.textContent).toContain('所属企业')
+    expect(context.shadowRoot?.textContent).toContain('企业 A 有限公司')
+    expect(context.shadowRoot?.textContent).toContain('部门')
+    expect(context.shadowRoot?.textContent).toContain('未设置')
+    expect(context.shadowRoot?.textContent).toContain('姓名')
+    expect(context.shadowRoot?.textContent).toContain('张伟')
+    expect(context.shadowRoot?.textContent).toContain('我的角色')
+    expect(context.shadowRoot?.textContent).toContain('所有者')
+    expect(context.shadowRoot?.textContent).toContain('在职')
+  })
+
+  it('loads the current employee department only after opening the employee information dialog', async () => {
+    const loadCurrentEmployeeInfo = vi.fn(async () => ({ departmentName: '总裁办' }))
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: {
+        load: vi.fn(async () => serverProjection()),
+        loadCurrentEmployeeInfo,
+      },
+    })
+    document.body.append(context)
+    await vi.waitFor(() => expect(context.shadowRoot?.textContent).toContain('企业 A'))
+
+    expect(loadCurrentEmployeeInfo).not.toHaveBeenCalled()
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('.employee-info-action')?.click()
+
+    await vi.waitFor(() =>
+      expect(context.shadowRoot?.querySelector('.employee-info-details')?.textContent).toContain(
+        '总裁办',
+      ),
+    )
+    expect(loadCurrentEmployeeInfo).toHaveBeenCalledTimes(1)
+  })
+
+  it('opens personal account settings in a pre-opened window when the transport provides ticket navigation', async () => {
+    const replace = vi.fn()
+    const pendingWindow = {
+      closed: false,
+      opener: window,
+      location: { replace },
+      close: vi.fn(),
+    } as unknown as Window
+    const open = vi.spyOn(window, 'open').mockReturnValue(pendingWindow)
+    const launchAccountSettings = vi.fn(async () => ({
+      url: 'https://accounts.example.com/personal#uniplat_application_ticket=account_settings_ticket_1234567890',
+    }))
+    const requested = vi.fn()
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.addEventListener('account-settings-requested', requested)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      transport: {
+        load: async () => serverProjection(),
+        launchAccountSettings,
+      },
+    })
+    document.body.append(context)
+    await vi.waitFor(() =>
+      expect(context.shadowRoot?.querySelector<HTMLButtonElement>('.account')).not.toBeNull(),
+    )
+
+    context.shadowRoot?.querySelector<HTMLButtonElement>('.account')?.click()
+    await settle(context)
+    const menu = context.shadowRoot?.querySelector<UniplatUserMenu>('uniplat-user-menu')
+    await menu?.updateComplete
+    menu?.shadowRoot?.querySelector<HTMLButtonElement>('.account-settings-action')?.click()
+    await vi.waitFor(() => expect(launchAccountSettings).toHaveBeenCalledTimes(1))
+
+    expect(launchAccountSettings).toHaveBeenCalledWith(APPLICATION_NAME)
+    expect(open).toHaveBeenCalledWith('about:blank', '_blank')
+    expect(replace).toHaveBeenCalledWith(
+      'https://accounts.example.com/personal#uniplat_application_ticket=account_settings_ticket_1234567890',
+    )
+    expect(requested).not.toHaveBeenCalled()
+  })
+
+  it('requires applicationName and renders the complete server-projected organization list', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    expect(() => context.configure({ applicationName: '   ', displayName: '张伟' })).toThrow(
+      TypeError,
+    )
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '张伟',
+      organization: {
+        id: 'enterprise-a',
+        name: '企业 A',
+        type: 'enterprise',
+        verificationStatus: 'verified',
+      },
+      organizations: [
+        {
+          id: 'enterprise-a',
+          name: '企业 A',
+          type: 'enterprise',
+          verificationStatus: 'verified',
+        },
+        {
+          id: 'team-b',
+          name: '服务端投影团队 B',
+          type: 'team',
+        },
+        {
+          id: 'team-c',
+          name: '服务端投影团队 C',
+          type: 'team',
+        },
+      ],
+      organizationCount: 3,
+    })
+    document.body.append(context)
+    await settle(context)
+
+    expect(context.shadowRoot?.querySelector('.count')?.textContent?.trim()).toBe('3')
+    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('[data-organization-id="enterprise-a"]')).not.toBeNull()
+    expect(menu?.shadowRoot?.querySelector('[data-organization-id="team-c"]')).not.toBeNull()
+    expect(menu?.shadowRoot?.querySelector('[data-organization-id="team-b"]')).not.toBeNull()
+    expect(menu?.shadowRoot?.textContent).toContain('服务端投影团队 B')
+  })
+
+  it('uses the selected organization employee identity and falls back to the user identity', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '用户张伟',
+      maskedMobile: '138****6688',
+      avatarText: '用',
+      avatarUrl: 'https://static.example.com/user-avatar.png',
+      organization: {
+        id: 'enterprise-a',
+        name: '企业 A',
+        type: 'enterprise',
+        applicationNames: [APPLICATION_NAME],
+        verificationStatus: 'verified',
+      },
+      organizations: [
+        {
+          id: 'enterprise-a',
+          name: '企业 A',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+          avatarText: '企',
+          employeeDisplayName: '企业员工小张',
+          employeeAvatarText: '员',
+          employeeAvatarUrl: 'https://static.example.com/employee-a.png',
+          verificationStatus: 'verified',
+        },
+        {
+          id: 'team-b',
+          name: '团队 B',
+          type: 'team',
+          applicationNames: [APPLICATION_NAME],
+          avatarText: '团',
+          employeeDisplayName: '团队成员小李',
+          employeeAvatarText: '李',
+          employeeAvatarUrl: 'https://static.example.com/employee-b.png',
+        },
+      ],
+    })
+    document.body.append(context)
+    await settle(context)
+
+    expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('企业员工小张')
+    expect(context.shadowRoot?.querySelector('.avatar-fallback')?.textContent).toBe('员')
+    expect(context.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')?.src).toBe(
+      'https://static.example.com/employee-a.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('.profile-name')?.textContent).toBe('企业员工小张')
+    expect(menu?.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')?.src).toBe(
+      'https://static.example.com/employee-a.png',
+    )
+    expect(
+      menu?.shadowRoot
+        ?.querySelector('[data-organization-id="enterprise-a"] .organization-icon')
+        ?.querySelector('svg')?.dataset.prototypeIcon,
+    ).toBe('building')
+
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '用户张伟',
+      avatarText: '用',
+      avatarUrl: 'https://static.example.com/user-avatar.png',
+      organization: {
+        id: 'team-b',
+        name: '团队 B',
+        type: 'team',
+        applicationNames: [APPLICATION_NAME],
+      },
+      organizations: [
+        {
+          id: 'enterprise-a',
+          name: '企业 A',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+          employeeDisplayName: '企业员工小张',
+          verificationStatus: 'verified',
+        },
+        {
+          id: 'team-b',
+          name: '团队 B',
+          type: 'team',
+          applicationNames: [APPLICATION_NAME],
+          employeeDisplayName: '团队成员小李',
+          employeeAvatarText: '李',
+          employeeAvatarUrl: 'https://static.example.com/employee-b.png',
+        },
+      ],
+    })
+    await settle(context)
+    expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('团队成员小李')
+    expect(context.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')?.src).toBe(
+      'https://static.example.com/employee-b.png',
+    )
+
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '用户张伟',
+      avatarText: '用',
+      avatarUrl: 'https://static.example.com/user-avatar.png',
+    })
+    await settle(context)
+    expect(context.shadowRoot?.querySelector('.display-name')?.textContent).toBe('用户张伟')
+    expect(context.shadowRoot?.querySelector('.avatar-fallback')?.textContent).toBe('用')
+    expect(context.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(() =>
+      context.configure({
+        applicationName: APPLICATION_NAME,
+        displayName: '用户张伟',
+        avatarUrl: 'https://static.example.com/avatar.png?accessToken=private',
+      }),
+    ).toThrow(TypeError)
+    expect(() =>
+      context.configure({
+        applicationName: APPLICATION_NAME,
+        displayName: '用户张伟',
+        organization: {
+          id: 'team-a',
+          name: '团队 A',
+          type: 'team',
+          applicationNames: [APPLICATION_NAME],
+          employeeAvatarUrl: 'https://static.example.com/employee.png',
+        },
+      }),
+    ).toThrow(TypeError)
+
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '用户张伟',
+      avatarText: '用',
+      avatarUrl: 'https://static.example.com/avatar.png',
+    })
+    document.body.append(context)
+    await settle(context)
+    const image = context.shadowRoot?.querySelector<HTMLImageElement>('.avatar-image')
+    image?.dispatchEvent(new Event('error'))
+    expect(image?.hidden).toBe(true)
+    expect(context.shadowRoot?.querySelector('.avatar-fallback')?.textContent).toBe('用')
+    image?.dispatchEvent(new Event('load'))
+    expect(image?.hidden).toBe(false)
+  })
+
+  it('requires enterprise status, rejects raw mobile numbers and renders labels as text', async () => {
+    const context = document.createElement(ACCOUNT_CONTEXT_TAG)
+    expect(() =>
+      context.configure({
+        applicationName: APPLICATION_NAME,
+        displayName: '张伟',
+        organization: {
+          id: 'enterprise-beijing',
+          name: '北京星河科技有限公司',
+          type: 'enterprise',
+          applicationNames: [APPLICATION_NAME],
+        },
+      }),
+    ).toThrow(TypeError)
+    expect(() =>
+      context.configure({
+        applicationName: APPLICATION_NAME,
+        displayName: '张伟',
+        maskedMobile: '13800138000',
+      }),
+    ).toThrow(TypeError)
+
+    context.configure({
+      applicationName: APPLICATION_NAME,
+      displayName: '<script>unsafe()</script>',
+    })
+    document.body.append(context)
+    await settle(context)
+    expect(context.shadowRoot?.querySelector('script')).toBeNull()
+    expect(context.shadowRoot?.textContent).toContain('<script>unsafe()</script>')
+  })
+})