99 lines
5.9 KiB
TypeScript
99 lines
5.9 KiB
TypeScript
import { mount, type VueWrapper } from '@vue/test-utils'
|
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
|
import { NButton } from 'naive-ui'
|
|
import DirectoryItem from '@/components/ui/DirectoryItem.vue'
|
|
import { readAllStyles } from '@/testing/styles'
|
|
|
|
let wrapper: VueWrapper | undefined
|
|
afterEach(() => wrapper?.unmount())
|
|
|
|
describe('统一目录条目', () => {
|
|
it('主体缩略图使用可选前导槽位，与标题一起保留满行点击区域', () => {
|
|
wrapper = mount(DirectoryItem, {
|
|
props: { active: true },
|
|
slots: { leading: '<span>母版缩略图</span>', default: '林默', eyebrow: '@CH0001' }
|
|
})
|
|
expect(wrapper.classes()).toContain('has-leading')
|
|
expect(wrapper.get('.directory-item-leading').text()).toBe('母版缩略图')
|
|
expect(wrapper.get('.directory-item-title').text()).toBe('林默')
|
|
expect(wrapper.get('.directory-item-leading').element.closest('button')).toBe(wrapper.element)
|
|
})
|
|
|
|
it('编号、长标题和多项状态各占独立层级，沿用 Naive 按钮', () => {
|
|
const title = '雨夜霓虹街全景与记忆当铺外的人群和闪烁灯牌'
|
|
wrapper = mount(DirectoryItem, {
|
|
props: { active: false },
|
|
slots: {
|
|
eyebrow: 'BEAT 2 / SHOT 3',
|
|
default: title,
|
|
meta: '<span class="directory-status">设计已保存</span><span class="directory-status">待状态</span>'
|
|
}
|
|
})
|
|
expect(wrapper.getComponent(NButton).props()).toMatchObject({ quaternary: true, block: true })
|
|
expect(wrapper.get('button').attributes('type')).toBe('button')
|
|
expect(wrapper.get('.directory-item-eyebrow').text()).toBe('BEAT 2 / SHOT 3')
|
|
expect(wrapper.get('.directory-item-title').text()).toBe(title)
|
|
expect(wrapper.get('.directory-item-meta').findAll('.directory-status')).toHaveLength(2)
|
|
expect(wrapper.find('.truncate').exists()).toBe(false)
|
|
expect(wrapper.findAll('.directory-item-body > span')).toHaveLength(3)
|
|
})
|
|
|
|
it('点击透传给业务层，选中态与无障碍属性保持同步', async () => {
|
|
const onClick = vi.fn<() => void>()
|
|
wrapper = mount(DirectoryItem, { props: { active: false }, attrs: { onClick }, slots: { default: '林默' } })
|
|
await wrapper.get('button').trigger('click')
|
|
expect(onClick).toHaveBeenCalledOnce()
|
|
expect(wrapper.attributes('aria-current')).toBeUndefined()
|
|
await wrapper.setProps({ active: true })
|
|
expect(wrapper.get('button').classes()).toContain('selected')
|
|
expect(wrapper.attributes('aria-current')).toBe('true')
|
|
expect(wrapper.find('.directory-item-eyebrow').exists()).toBe(false)
|
|
expect(wrapper.find('.directory-item-meta').exists()).toBe(false)
|
|
})
|
|
|
|
it('显式保护最小高度、留白、换行和窄屏横向条目，避免旧按钮样式重新挤压目录', () => {
|
|
// DOM 环境不计算视觉几何；这些约束不能替代浏览器验收。
|
|
const css = readAllStyles()
|
|
expect(css).toMatch(/\.n-button\.directory-item\s*\{[^}]*min-height:\s*88px;[^}]*padding:\s*12px 14px/)
|
|
expect(css).toMatch(/\.directory-item-body\s*\{[^}]*flex-direction:\s*column;[^}]*gap:\s*7px/)
|
|
expect(css).toMatch(/\.directory-item-title\s*\{[^}]*overflow-wrap:\s*anywhere/)
|
|
expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
|
|
expect(css).toContain('grid-template-columns: clamp(240px, 22%, 280px) minmax(0, 1fr)')
|
|
expect(css).toMatch(/\.identity-subject-list-content\s*\{[^}]*gap:\s*2px;[^}]*padding:\s*0 0 8px/)
|
|
expect(css).toMatch(/\.n-button\.identity-subject-item\s*\{[^}]*min-height:\s*86px;[^}]*padding:\s*10px 14px/)
|
|
expect(css).not.toMatch(/\.n-button\.identity-subject-item\s*\{[^}]*border-bottom:/)
|
|
expect(css).toMatch(/\.identity-thumbnail\s*\{[^}]*width:\s*48px;[^}]*height:\s*64px/)
|
|
expect(css).toMatch(/\.n-button\.identity-subject-item:not\(\.selected\)\s*\{[^}]*var\(--app-surface\)/)
|
|
})
|
|
|
|
it('侧栏与主体、镜头、剧集目录统一直角满行，保留文字内边距和移动端滚动', () => {
|
|
// happy-dom 无法计算伪元素几何，保护实际控制选中背景宽度的 CSS 规则。
|
|
const css = readAllStyles()
|
|
expect(css).toMatch(
|
|
/\.admin-sider \.n-menu \.n-menu-item-content::before\s*\{[^}]*left:\s*0;[^}]*right:\s*0;[^}]*border-radius:\s*0/
|
|
)
|
|
expect(css).toMatch(/\.directory-list-content\s*\{[^}]*padding:\s*8px 0 16px/)
|
|
expect(css).toMatch(/\.reader-directory-content\s*\{[^}]*padding:\s*4px 0 18px/)
|
|
expect(css).not.toMatch(/\.reader-directory-content\s*\{[^}]*padding-inline:\s*[1-9]/)
|
|
for (const selector of ['directory-item', 'reader-episode-link']) {
|
|
expect(css).toMatch(new RegExp(`\\.n-button\\.${selector}\\s*\\{[^}]*width:\\s*100%`))
|
|
expect(css).toMatch(new RegExp(`\\.n-button\\.${selector}\\s*\\{[^}]*padding:\\s*12px 14px`))
|
|
expect(css).toMatch(new RegExp(`\\.n-button\\.${selector}\\s*\\{[^}]*border-radius:\\s*0`))
|
|
}
|
|
expect(css).toMatch(/\.directory-group-heading\s*\{[^}]*padding:\s*10px 14px/)
|
|
expect(css).toMatch(/\.directory-list-content\s*\{[^}]*flex-direction:\s*row;[^}]*width:\s*max-content/)
|
|
})
|
|
|
|
it('Tabs 工具栏与筛选网格限制最小宽度，不让组件默认宽度挤压内容', () => {
|
|
const css = readAllStyles()
|
|
expect(css).toMatch(/\.workspace-tabs\.n-tabs\s*\{[^}]*width:\s*100%;[^}]*min-width:\s*0/)
|
|
expect(css).toMatch(/\.workspace-tabs \.n-tabs-nav-scroll-wrapper\s*\{[^}]*min-width:\s*0/)
|
|
expect(css).toMatch(
|
|
/\.form-image-filters\s*\{[^}]*grid-template-columns:\s*minmax\(200px, 360px\) 152px 160px auto/
|
|
)
|
|
expect(css).toMatch(
|
|
/@container \(max-width: 900px\)\s*\{\s*\.form-image-filters\s*\{[^}]*minmax\(0, 1fr\) 152px/
|
|
)
|
|
})
|
|
})
|