task-99(店铺中心): 实现店铺中心响应式表格
新增 shop-table-layout.ts:店铺/密钥列表列定义与按视口宽度筛选可见列, 店铺名/操作等关键列任意宽度保留。 TDD: task-99.test.ts 8 用例先 RED 后 GREEN。
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
import test from 'node:test'
|
||||
import assert from 'node:assert/strict'
|
||||
import { readSource } from './helpers.ts'
|
||||
import {
|
||||
SHOP_KEYS_COLUMNS,
|
||||
SHOP_MANAGE_COLUMNS,
|
||||
shopColumnsForWidth,
|
||||
} from '../src/pages/shop/shop-table-layout.ts'
|
||||
|
||||
test('test_task_099_shop_table_responsive_normal_primary_path', () => {
|
||||
// 正常主路径:宽屏(≥1200px)显示店铺表全部分组列。
|
||||
const wide = shopColumnsForWidth(SHOP_MANAGE_COLUMNS, 1280)
|
||||
assert.equal(wide.length, SHOP_MANAGE_COLUMNS.length)
|
||||
assert.ok(wide.some((c) => c.key === 'account'))
|
||||
assert.ok(wide.some((c) => c.key === 'password'))
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_normal_variant_input', () => {
|
||||
// 正常变体:密钥表在常规宽度保留关键列。
|
||||
const cols = shopColumnsForWidth(SHOP_KEYS_COLUMNS, 900)
|
||||
assert.ok(cols.some((c) => c.key === 'remarkName'))
|
||||
assert.ok(cols.some((c) => c.key === 'actions'))
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_repeated_is_idempotent', () => {
|
||||
// 正常重复:同一宽度列集合稳定、顺序稳定。
|
||||
assert.deepEqual(shopColumnsForWidth(SHOP_MANAGE_COLUMNS, 1100), shopColumnsForWidth(SHOP_MANAGE_COLUMNS, 1100))
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_boundary_empty_input', () => {
|
||||
// 边界空值:极窄宽度仍保留 always 列(店铺名/操作)。
|
||||
const narrow = shopColumnsForWidth(SHOP_MANAGE_COLUMNS, 1)
|
||||
assert.ok(narrow.some((c) => c.key === 'shopName'))
|
||||
assert.ok(narrow.some((c) => c.key === 'actions'))
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_boundary_single_item', () => {
|
||||
// 边界单元素:恰好等于某列最小宽度时该列可见。
|
||||
const account = SHOP_MANAGE_COLUMNS.find((c) => c.key === 'account')
|
||||
assert.ok(account)
|
||||
const atWidth = shopColumnsForWidth(SHOP_MANAGE_COLUMNS, account!.minWidth)
|
||||
assert.ok(atWidth.some((c) => c.key === 'account'))
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_boundary_limit_or_missing_field', () => {
|
||||
// 边界上限/缺字段:未知列/空列集合被安全处理。
|
||||
assert.deepEqual(shopColumnsForWidth([], 2000), [])
|
||||
assert.deepEqual(shopColumnsForWidth(undefined as never, 1200), [])
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_invalid_input_rejected', () => {
|
||||
// 异常输入:非正宽度按最小可用处理。
|
||||
const cols = shopColumnsForWidth(SHOP_MANAGE_COLUMNS, -10)
|
||||
assert.ok(cols.every((c) => c.always))
|
||||
assert.ok(cols.length > 0)
|
||||
})
|
||||
|
||||
test('test_task_099_shop_table_responsive_dependency_failure_returns_actionable_message', () => {
|
||||
// 依赖失败/可操作:表格布局纯逻辑、无框架/http。
|
||||
const mod = readSource('src/pages/shop/shop-table-layout.ts')
|
||||
assert.equal(/axios|http\.|vue/.test(mod), false, '表格布局保持纯逻辑')
|
||||
assert.match(mod, /SHOP_MANAGE_COLUMNS/)
|
||||
})
|
||||
Reference in New Issue
Block a user