179 lines
8.1 KiB
TypeScript
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: '京东物流' })
|
|
})
|
|
})
|