77 lines
3.1 KiB
TypeScript
77 lines
3.1 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it } from 'vitest'
|
|
import AdminPage from './AdminPage.vue'
|
|
import DetailPageLayout from './DetailPageLayout.vue'
|
|
import FormSection from './FormSection.vue'
|
|
import ListPageLayout from './ListPageLayout.vue'
|
|
import PageToolbar from './PageToolbar.vue'
|
|
|
|
describe('admin page layout components', () => {
|
|
it('renders a semantic page root with stable layout classes', () => {
|
|
const wrapper = mount(AdminPage, {
|
|
props: { width: 'comfortable', spacing: 'compact' },
|
|
slots: { default: '<p>内容</p>' },
|
|
})
|
|
expect(wrapper.element.tagName).toBe('MAIN')
|
|
expect(wrapper.classes()).toEqual(expect.arrayContaining(['is-width-comfortable', 'is-spacing-compact']))
|
|
expect(wrapper.text()).toBe('内容')
|
|
})
|
|
|
|
it('keeps page title and actions in separate regions', () => {
|
|
const wrapper = mount(PageToolbar, {
|
|
props: { title: '客户管理', description: '维护客户资料' },
|
|
slots: { actions: '<button>新增</button>' },
|
|
})
|
|
expect(wrapper.get('h1').text()).toBe('客户管理')
|
|
expect(wrapper.get('.page-toolbar__description').text()).toBe('维护客户资料')
|
|
expect(wrapper.get('.page-toolbar__actions').text()).toBe('新增')
|
|
})
|
|
|
|
it('renders optional list regions only when supplied', () => {
|
|
const wrapper = mount(ListPageLayout, {
|
|
slots: { toolbar: '<div>筛选</div>', default: '<div>表格</div>' },
|
|
})
|
|
expect(wrapper.find('.list-page-layout__toolbar').exists()).toBe(true)
|
|
expect(wrapper.find('.list-page-layout__metrics').exists()).toBe(false)
|
|
expect(wrapper.text()).toContain('筛选')
|
|
expect(wrapper.text()).toContain('表格')
|
|
})
|
|
|
|
it('removes registered but empty list regions from flex layout', () => {
|
|
const wrapper = mount(ListPageLayout, {
|
|
slots: {
|
|
toolbar: '<div>筛选</div>',
|
|
state: '<template v-if="false"><div>错误</div></template>',
|
|
default: '<div>表格</div>',
|
|
},
|
|
})
|
|
expect(wrapper.find('.list-page-layout__state').exists()).toBe(false)
|
|
expect(wrapper.text()).toBe('筛选表格')
|
|
})
|
|
|
|
it('keeps plain-text list regions visible', () => {
|
|
const wrapper = mount(ListPageLayout, {
|
|
slots: { state: '正在同步', default: '表格内容' },
|
|
})
|
|
|
|
expect(wrapper.get('.list-page-layout__state').text()).toBe('正在同步')
|
|
expect(wrapper.get('.list-page-layout__content').text()).toBe('表格内容')
|
|
})
|
|
|
|
it('supports detail regions and form section descriptions', () => {
|
|
const detail = mount(DetailPageLayout, {
|
|
slots: { header: '<h1>详情</h1>', default: '<p>正文</p>', footer: '<button>保存</button>' },
|
|
})
|
|
expect(detail.find('.detail-page-layout__header').exists()).toBe(true)
|
|
expect(detail.find('.detail-page-layout__footer').text()).toBe('保存')
|
|
|
|
const form = mount(FormSection, {
|
|
props: { title: '基础信息', description: '填写必填字段' },
|
|
slots: { default: '<input aria-label="名称" />' },
|
|
})
|
|
expect(form.get('h2').text()).toBe('基础信息')
|
|
expect(form.get('.form-section__heading p').text()).toBe('填写必填字段')
|
|
expect(form.find('input').exists()).toBe(true)
|
|
})
|
|
})
|