admin-web/src/modules/master-data/express-companies/pages/ExpressCompaniesView.test.ts

import ElementPlus from 'element-plus'
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'
import { createPinia, setActivePinia } from 'pinia'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { getPlatformExpressCompany, listPlatformExpressCompanies, type PlatformExpressCompanyResource } from '@/modules/master-data/express-companies/api/platformExpressCompanies'
import { useAccessPreviewStore } from '@/core/access/accessPreview'
import { useAuthStore } from '@/core/auth/auth'
import ExpressCompaniesView from './ExpressCompaniesView.vue'

const expressCompaniesSource = readFileSync(resolve(process.cwd(), 'src/modules/master-data/express-companies/pages/ExpressCompaniesView.vue'), 'utf8')

vi.mock('@/modules/master-data/express-companies/api/platformExpressCompanies', () => ({
  listPlatformExpressCompanies: vi.fn(),
  getPlatformExpressCompany: vi.fn(),
  createPlatformExpressCompany: vi.fn(),
  downloadPlatformExpressCompanyImportTemplate: vi.fn(),
  importPlatformExpressCompanies: vi.fn(),
  updatePlatformExpressCompany: vi.fn(),
  changePlatformExpressCompanyStatus: vi.fn(),
}))

class ResizeObserverStub implements ResizeObserver {
  observe() {}
  unobserve() {}
  disconnect() {}
}

function createMemoryStorage(): Storage {
  const values = new Map<string, string>()
  return {
    get length() { return values.size },
    clear: () => values.clear(),
    getItem: (key) => values.get(key) ?? null,
    key: (index) => [...values.keys()][index] ?? null,
    removeItem: (key) => values.delete(key),
    setItem: (key, value) => values.set(key, value),
  }
}

const company: PlatformExpressCompanyResource = {
  id: '19001',
  tenantId: 0,
  companyCode: 'SF',
  companyName: '顺丰速运',
  servicePhone: '95338',
  website: 'https://www.sf-express.com',
  trackingUrlTemplate: 'https://example.com/track/{trackingNo}',
  status: 'ACTIVE',
  remark: '测试数据',
  updatedAt: '2026-07-31T10:20:00',
}

async function mountView() {
  vi.stubGlobal('localStorage', createMemoryStorage())
  vi.stubGlobal('sessionStorage', createMemoryStorage())
  const pinia = createPinia()
  setActivePinia(pinia)
  const auth = useAuthStore()
  auth.token = 'token'
  auth.permissions = ['platform:express:list', 'platform:express:create', 'platform:express:edit', 'platform:express:status']
  useAccessPreviewStore().initializeAfterLogin()
  const wrapper = mount(ExpressCompaniesView, {
    attachTo: document.body,
    global: { plugins: [pinia, ElementPlus] },
  })
  await flushPromises()
  return wrapper
}

enableAutoUnmount(afterEach)
afterAll(() => vi.unstubAllGlobals())

describe('ExpressCompaniesView query and table migration', () => {
  it('renders edit and status as colored outlined buttons with prototype icons', () => {
    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              type="primary"')
    expect(expressCompaniesSource).toContain('size="small"\n              plain\n              :disabled="loading"\n              :type=')
    expect(expressCompaniesSource).toContain('<Pencil :size="15" />编辑')
    expect(expressCompaniesSource).toContain('<Power :size="15" />')
    expect(expressCompaniesSource).not.toContain("access.can('platform:express:edit')\"\n              link")
    expect(expressCompaniesSource).not.toContain("access.can('platform:express:status')\"\n              link")
  })

  it('keeps operation first and exposes the prototype business columns separately', () => {
    const actionsIndex = expressCompaniesSource.indexOf("{ key: 'actions', label: '操作'")
    const nameIndex = expressCompaniesSource.indexOf("{ key: 'company', label: '公司名称'")
    const codeIndex = expressCompaniesSource.indexOf("{ key: 'companyCode', prop: 'companyCode', label: '编码'")
    const websiteIndex = expressCompaniesSource.indexOf("{ key: 'website', label: '官方网站'")
    const phoneIndex = expressCompaniesSource.indexOf("{ key: 'servicePhone', prop: 'servicePhone', label: '客服电话'")
    expect([actionsIndex, nameIndex, codeIndex, websiteIndex, phoneIndex].every((index) => index >= 0)).toBe(true)
    expect(actionsIndex).toBeLessThan(nameIndex)
    expect(nameIndex).toBeLessThan(codeIndex)
    expect(codeIndex).toBeLessThan(websiteIndex)
    expect(websiteIndex).toBeLessThan(phoneIndex)
    expect(expressCompaniesSource).toContain("label: '更新时间', minWidth: 150, defaultVisible: false")
  })
  beforeEach(() => {
    vi.stubGlobal('ResizeObserver', ResizeObserverStub)
    document.body.innerHTML = ''
    vi.mocked(listPlatformExpressCompanies).mockReset().mockResolvedValue({
      records: [company], page: 1, size: 20, total: 1, pages: 1,
    })
    vi.mocked(getPlatformExpressCompany).mockReset().mockResolvedValue(company)
  })

  it('renders the shared toolbar and data table without a summary strip', async () => {
    const wrapper = await mountView()

    expect(wrapper.find('.query-toolbar').exists()).toBe(true)
    expect(wrapper.find('input[aria-label="所属企业"]').exists()).toBe(false)
    expect(wrapper.find('.data-table').exists()).toBe(true)
    expect(wrapper.text()).toContain('顺丰速运')
    expect(wrapper.text()).toContain('平台公共数据 · 共 1 家快递公司')
    expect(wrapper.find('.metric-strip').exists()).toBe(false)
    expect(wrapper.find('.list-page-layout__state').exists()).toBe(false)
    expect(listPlatformExpressCompanies).toHaveBeenCalledWith(1, 20, '', '')
    expect(wrapper.find('.data-table').text()).not.toContain('轨迹查询模板')
    expect(wrapper.find('.data-table').text()).not.toContain('测试数据')
  })

  it('renders the error state instead of an empty table panel', async () => {
    vi.mocked(listPlatformExpressCompanies).mockRejectedValueOnce(new Error('Gateway unavailable'))
    const wrapper = await mountView()

    expect(wrapper.find('.list-page-layout__state').exists()).toBe(true)
    expect(wrapper.find('.table-panel').exists()).toBe(false)
    expect(wrapper.text()).toContain('快递公司加载失败')
    expect(wrapper.text()).not.toContain('Gateway unavailable')
  })

  it('does not request with edited filters until search is submitted', async () => {
    const wrapper = await mountView()
    await wrapper.find('input[placeholder="请输入快递公司名称"]').setValue('顺丰')
    await flushPromises()
    expect(listPlatformExpressCompanies).toHaveBeenCalledTimes(1)

    const searchButton = wrapper.findAll('button').find((button) => button.text().trim() === '查询')
    await searchButton?.trigger('click')
    await flushPromises()

    expect(listPlatformExpressCompanies).toHaveBeenLastCalledWith(1, 20, '顺丰', '')
  })

  it('opens the create form without selecting an enterprise', async () => {
    const wrapper = await mountView()
    const createButton = wrapper.findAll('button').find((button) => button.text().trim() === '新增快递公司')
    await createButton?.trigger('click')
    await flushPromises()

    expect(document.body.textContent).toContain('新增快递公司')
    expect(document.body.textContent).not.toContain('请先在筛选条件中选择所属企业')
    expect(document.body.textContent).toContain('轨迹查询地址模板')
    expect(document.body.textContent).toContain('内部说明')
  })

  it('keeps the latest express company selected for editing', async () => {
    const secondCompany = { ...company, id: '19002', companyCode: 'JD', companyName: '京东物流' }
    let resolveFirst!: (value: PlatformExpressCompanyResource) => void
    let resolveSecond!: (value: PlatformExpressCompanyResource) => void
    vi.mocked(getPlatformExpressCompany).mockImplementation((companyId) => new Promise((resolve) => {
      if (String(companyId) === String(company.id)) resolveFirst = resolve
      else resolveSecond = resolve
    }))
    const wrapper = await mountView()
    const vm = wrapper.vm as unknown as {
      form: { companyCode: string; companyName: string }
      openEdit(row: PlatformExpressCompanyResource): Promise<void>
    }

    void vm.openEdit(company)
    void vm.openEdit(secondCompany)
    resolveSecond(secondCompany)
    await flushPromises()
    resolveFirst(company)
    await flushPromises()

    expect(vm.form).toMatchObject({ companyCode: 'JD', companyName: '京东物流' })
  })
})