Files
admin-web/src/modules/master-data/express-companies/pages/ExpressCompaniesView.test.ts
T
2026-09-30 14:01:58 +08:00

179 lines
8.1 KiB
TypeScript

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 shared outlined text buttons', () => {
const actions = expressCompaniesSource.slice(expressCompaniesSource.indexOf('<template #actions='), expressCompaniesSource.indexOf('</template>', expressCompaniesSource.indexOf('<template #actions=')))
expect(actions.match(/class="density-action"/g)).toHaveLength(2)
expect(actions).toContain('>编辑</el-button>')
expect(actions).toContain(' :data-tone=')
expect(actions).not.toMatch(/<(?:el-dropdown|Pencil|Power|Eye|Trash2|Download|CircleX)\b/)
})
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('.data-table__notices').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('.data-table__notices').exists()).toBe(true)
expect(wrapper.find('.el-table').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: '京东物流' })
})
})