75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import test from 'node:test'
|
|
import assert from 'node:assert/strict'
|
|
import { readSource } from './helpers.ts'
|
|
import {
|
|
ADMIN_DRAWER_WIDTH,
|
|
ADMIN_MODAL_RADIUS,
|
|
ADMIN_MODAL_WIDTH,
|
|
dialogTitleOf,
|
|
drawerLayoutSpec,
|
|
modalLayoutSpec,
|
|
} from '../src/components/modal-model.ts'
|
|
|
|
// module 13 task 248：模态/抽屉容器统一 —— 居中 modal min(920px,100vw-48)、右侧 drawer
|
|
// min(460px,100%)、三段式头/体/脚与关闭语义对齐 admin，页面接入统一宽度/结构。
|
|
|
|
test('test_task_248_container_model_normal_primary_path', () => {
|
|
const modal = modalLayoutSpec()
|
|
assert.equal(modal.width, ADMIN_MODAL_WIDTH)
|
|
assert.equal(modal.radius, ADMIN_MODAL_RADIUS)
|
|
assert.equal(ADMIN_MODAL_RADIUS, 14)
|
|
const drawer = drawerLayoutSpec()
|
|
assert.equal(drawer.width, ADMIN_DRAWER_WIDTH)
|
|
})
|
|
|
|
test('test_task_248_container_model_normal_variant_input', () => {
|
|
// 正常变体：modal/drawer 都支持遮罩点击与 Esc 关闭（对齐 admin 语义）。
|
|
assert.equal(modalLayoutSpec().maskClosable, true)
|
|
assert.equal(modalLayoutSpec().escClosable, true)
|
|
assert.equal(drawerLayoutSpec().maskClosable, true)
|
|
assert.equal(drawerLayoutSpec().escClosable, true)
|
|
})
|
|
|
|
test('test_task_248_container_model_normal_repeated_operation_is_idempotent', () => {
|
|
assert.deepEqual(modalLayoutSpec(), modalLayoutSpec())
|
|
assert.deepEqual(drawerLayoutSpec(), drawerLayoutSpec())
|
|
})
|
|
|
|
test('test_task_248_container_model_boundary_empty_input', () => {
|
|
// 边界空：无标题时页头兜底「操作」；空白标题同样兜底。
|
|
assert.equal(dialogTitleOf({}).title, '操作')
|
|
assert.equal(dialogTitleOf({ title: ' ' }).title, '操作')
|
|
})
|
|
|
|
test('test_task_248_container_model_boundary_single_item', () => {
|
|
// 边界单元素：带副标题保留、去首尾空白。
|
|
const head = dialogTitleOf({ title: ' 编辑店铺 ', subtitle: ' 店铺分组/账号凭证明细 ' })
|
|
assert.equal(head.title, '编辑店铺')
|
|
assert.equal(head.subtitle, '店铺分组/账号凭证明细')
|
|
})
|
|
|
|
test('test_task_248_container_model_boundary_limit_or_missing_field', () => {
|
|
// 边界上限：宽度表达式满足 admin 尺寸口径。
|
|
assert.match(ADMIN_MODAL_WIDTH, /920px/)
|
|
assert.match(ADMIN_MODAL_WIDTH, /100vw/)
|
|
assert.match(ADMIN_DRAWER_WIDTH, /460px/)
|
|
})
|
|
|
|
test('test_task_248_modal_shell_dependency_failure_returns_actionable_message', () => {
|
|
// 依赖失败：ModalShell 真实封装 el-dialog，宽度来自模型，标题透传、带 footer 槽。
|
|
const modal = readSource('src/components/ModalShell.vue')
|
|
assert.match(modal, /el-dialog/)
|
|
assert.match(modal, /modalLayoutSpec|ADMIN_MODAL_WIDTH/)
|
|
assert.match(modal, /#footer/)
|
|
assert.ok(readSource('src/components/DrawerShell.vue').length > 0)
|
|
})
|
|
|
|
test('test_task_248_drawer_shell_dependency_failure_returns_actionable_message', () => {
|
|
const drawer = readSource('src/components/DrawerShell.vue')
|
|
assert.match(drawer, /el-drawer/)
|
|
assert.match(drawer, /drawerLayoutSpec|ADMIN_DRAWER_WIDTH/)
|
|
assert.match(drawer, /:title=|head\.title/, '标题透传到 drawer 默认头部')
|
|
assert.match(drawer, /#footer/, '提供 footer 槽以构成头/体/脚三段')
|
|
assert.match(drawer, /close-on-press-escape|close-on-click-modal/, '需配置 Esc/遮罩关闭语义')
|
|
})
|