admin-web/src/app/layouts/AppLayout.test.ts

import { createPinia, setActivePinia } from 'pinia'
import { flushPromises, mount } from '@vue/test-utils'
import { defineComponent, ref } from 'vue'
import { createMemoryHistory, createRouter } from 'vue-router'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { ElMessageBox } from 'element-plus'
import { useAuthStore } from '@/core/auth/auth'
import AppLayout from './AppLayout.vue'

const CachedPage = defineComponent({
  setup() {
    const count = ref(0)
    return { count }
  },
  template: '<button class="cached-count" @click="count += 1">{{ count }}</button>',
})

vi.mock('element-plus', async (importOriginal) => {
  const actual = await importOriginal<typeof import('element-plus')>()
  return { ...actual, ElMessage: { warning: vi.fn(), error: vi.fn() }, ElMessageBox: { confirm: vi.fn() } }
})

async function mountLayout(path = '/') {
  const pinia = createPinia()
  setActivePinia(pinia)
  const auth = useAuthStore()
  auth.token = 'token'
  auth.user = { id: '1', name: '平台管理员', account: 'admin', roles: ['PLATFORM_ADMIN'] }
  auth.permissions = ['platform:warehouse:list']
  const router = createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'home', component: { template: '<p>page</p>' }, meta: { requiresAuth: true, workspaceTab: false, keepAlive: false } },
      { path: '/customers', name: 'customers', component: CachedPage, meta: { title: '客户管理', showPageHeading: false, requiresAuth: true } },
      { path: '/warehouses', name: 'warehouses', component: { template: '<p>warehouses</p>' }, meta: { title: '仓库管理', requiresAuth: true } },
      { path: '/login', component: { template: '<p>login</p>' } },
    ],
  })
  await router.push(path)
  await router.isReady()
  const wrapper = mount(AppLayout, {
    global: { plugins: [pinia, router], stubs: { AdminSidebarMenu: { template: '<nav />' }, WorkspaceTabs: { template: '<div class="workspace-tabs-stub" />' }, 'el-button': { emits: ['click'], template: '<button @click="$emit(\'click\')"><slot /></button>' } } },
  })
  return { wrapper, router }
}

describe('AppLayout', () => {
  beforeEach(() => vi.mocked(ElMessageBox.confirm).mockReset())

  it('shows the authenticated identity without a role preview switcher', async () => {
    const { wrapper } = await mountLayout()
    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
    expect(wrapper.text()).not.toContain('权限预览')
  })

  it('hides the shell heading when the route opts out', async () => {
    const { wrapper } = await mountLayout('/customers')
    expect(wrapper.find('.page-heading').exists()).toBe(false)
    expect(wrapper.text()).toContain('登录身份：平台管理员（admin）')
  })

  it('logs out after confirmation', async () => {
    vi.mocked(ElMessageBox.confirm).mockResolvedValueOnce({} as never)
    const { wrapper, router } = await mountLayout()
    await wrapper.get('[aria-label="退出登录"]').trigger('click')
    await flushPromises()
    expect(router.currentRoute.value.path).toBe('/login')
  })

  it('opens business routes as workspace tabs and keeps route component state while switching', async () => {
    const { wrapper, router } = await mountLayout('/customers')
    expect(wrapper.find('.workspace-tabs-stub').exists()).toBe(true)
    await wrapper.get('.cached-count').trigger('click')
    expect(wrapper.get('.cached-count').text()).toBe('1')

    await router.push('/warehouses')
    await flushPromises()
    await router.push('/customers')
    await flushPromises()

    expect(wrapper.get('.cached-count').text()).toBe('1')
  })
})