Archived
test(w05): 数据工单嵌套 data-rows 探针 —— 钉死 collect() 的并行行为,平坦形状是唯一能用的路
W05「核心参数值」想做成外层按候选料分组(<section>)、内层铺参数瓷贴的嵌套 data-rows 版面。 用真实渲染管线(renderView)产出 DOM 后喂给真实 collect() 实测:rowOf() 爬到 host 的直接 子元素时只能爬到候选料的 <section>(瓷贴与 section 之间还隔着内层 data-rows 留下的一层 <div>),于是一颗料的多个参数瓷贴被并成一条记录、后写的列覆盖先写的,悄悄丢数据 —— 证实预读判断(嵌套 = 并行),用两条断言(记录数 2 非 6、input_voltage/output_voltage 两条 参数在输出里完全消失)钉死,并用四条变异验证(候选数变 3→段数跟 / 摘一整段→记录数跟 / 摘主键 data-col→字段消失)确认断言真的在读结构。 同时钉平坦退路形状(瓷贴直接是 data-edit 宿主的子元素,data-rows 不分料铺):collect() 按瓷贴数返回记录、互不覆盖,行容器换成 <div>/<li> 均成立(现有测试全是 <tr>,没人钉过 非表格行容器)。 renderView(apps/api,tsconfig.node.json)与 collect()(packages/ui-kit,tsconfig.web.json: jsx react-jsx + DOM lib)不能进同一个测试文件——depcruise 放行,但 typecheck 真红 (TS6142: ViewContainer.tsx 用了 JSX,tsconfig.node.json 没设 --jsx),两侧拆开、 中间用同一段渲染输出的 HTML 字符串接力(两处注释互相点名,防副本漂移)。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LKMZDwMbyKzjw6Hembwvet
This commit is contained in:
xcs
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* **平坦退路形状:瓷贴是 `data-edit` 宿主的直接子元素,行容器是 `<div>` 不是 `<tr>`**
|
||||
* (2026-08-30,W05 数据工单版面探针)。
|
||||
*
|
||||
* 对照 `view-container-collect-nested.test.ts` 那条「外层按料分组、内层铺瓷贴」的嵌套形状——
|
||||
* 那种形状里瓷贴与 host 之间隔了两层(候选料的 `<section>` + 内层 `data-rows` 留下的 `<div>`),
|
||||
* `rowOf()` 爬到 host 直接子元素时只能到 `<section>`,把一颗料的 3 个瓷贴全部并成一条记录、
|
||||
* 后写的列覆盖先写的,悄悄丢数据。
|
||||
*
|
||||
* 这里是**能用的退路**:`data-rows="mine:parts.parameter"` 直接铺在 host(`data-edit` 那个元素)
|
||||
* 身上,不分料、不套内层 —— 瓷贴(`<div class="pv">`)因此是 host 的**直接子元素**,`rowOf()`
|
||||
* 第一步往上爬就撞到 host,一个瓷贴就是一行,互不干扰。W05 若要「一个候选一个卡片」的排版,
|
||||
* 换个思路做(每颗候选各给一张单独的 `data-edit` 宿主,或纯展示的分组包着这一层可编辑的平铺表),
|
||||
* 不能靠嵌套 `data-rows` 省一层。
|
||||
*
|
||||
* `rowOf()`(`../src/ViewContainer.tsx:178`)按 `parentElement` 一路爬,不认标签名 ——
|
||||
* 现有 `view-container-collect.test.ts` 的用例全是 `<tr>` 行(表格),这里换成 `<div class="pv">`
|
||||
* 的瓷贴卡,证明它不是"认表格"这条窄路,是通用的"host 的直接子元素就是行"。
|
||||
*/
|
||||
// @vitest-environment jsdom
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { collect } from '../src/ViewContainer.tsx';
|
||||
|
||||
/** 两颗候选料、每颗 3 个参数瓷贴(与嵌套形状那条用同一组事实数据,方便对照) */
|
||||
const TILES_HOST =
|
||||
'<div data-edit="parts.parameter">' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="input_voltage"/><input data-col="param_value" value="4.5~40"/></div>' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="output_voltage"/><input data-col="param_value" value="5"/></div>' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="enable_threshold"/><input data-col="param_value" value="2.5"/></div>' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="XL2596S-5.0"/><input data-col="param_key" value="input_voltage"/><input data-col="param_value" value="4.5~40"/></div>' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="XL2596S-5.0"/><input data-col="param_key" value="output_voltage"/><input data-col="param_value" value="5"/></div>' +
|
||||
'<div class="pv"><input data-col="internal_pn" value="XL2596S-5.0"/><input data-col="param_key" value="enable_threshold"/><input data-col="param_value" value="3.0"/></div>' +
|
||||
'</div>';
|
||||
|
||||
function docOf(html: string): Document {
|
||||
const doc = document.implementation.createHTMLDocument('');
|
||||
doc.body.innerHTML = html;
|
||||
return doc;
|
||||
}
|
||||
|
||||
describe('collect():瓷贴(<div class="pv">)是 data-edit 宿主的直接子元素 —— 一瓷贴一记录,互不覆盖', () => {
|
||||
it('6 个瓷贴收到 6 条记录(不是并成 2 条候选级记录)', () => {
|
||||
const got = collect(docOf(TILES_HOST), 'parts.parameter');
|
||||
expect(got).toHaveLength(6);
|
||||
});
|
||||
|
||||
it('每条记录三格各自带对:主键 internal_pn + param_key + param_value,不互相覆盖', () => {
|
||||
const got = collect(docOf(TILES_HOST), 'parts.parameter');
|
||||
// 同一颗料的 3 条参数各自独立成行,3 个键值全部保留(与嵌套形状那条"只剩最后一瓷贴"相反)
|
||||
const lm = got.filter((r) => r['internal_pn'] === 'LM2596S-5.0');
|
||||
expect(lm).toHaveLength(3);
|
||||
const byKey = new Map(lm.map((r) => [r['param_key'], r['param_value']]));
|
||||
expect(byKey.get('input_voltage')).toBe('4.5~40');
|
||||
expect(byKey.get('output_voltage')).toBe('5');
|
||||
expect(byKey.get('enable_threshold')).toBe('2.5');
|
||||
|
||||
const xl = got.filter((r) => r['internal_pn'] === 'XL2596S-5.0');
|
||||
expect(xl).toHaveLength(3);
|
||||
expect(new Map(xl.map((r) => [r['param_key'], r['param_value']])).get('enable_threshold')).toBe('3.0');
|
||||
});
|
||||
|
||||
/*
|
||||
* 行容器换一个跟表格毫无关系的标签(`<li>`)结果不变 —— 证明 `rowOf` 认的是
|
||||
* "host 的直接子元素",不是专挑某个标签名。
|
||||
*
|
||||
* 特意不拿 `<tr>` 来比:裸 `<tr>`(不包在 `<table><tbody>` 里)会撞上 HTML 解析算法的
|
||||
* "foster parenting"(表格内容规则规定 `<tr>` 只能直接装 `<td>/<th>`,`<input>` 这类
|
||||
* 不合规内容会被解析器整体挪到 `<tr>` 外面)——真拿裸 tr 包 input 试过,jsdom 吐出的是
|
||||
* 9 条(3 个空 `<tr>` + 6 个被挪出来的 `<input>` 各自成行),这是 HTML 解析的固有行为,
|
||||
* 与 `rowOf` 是否"认标签"无关,拿来当反例只会误导。已有的 `view-container-collect.test.ts`
|
||||
* 用 `<table><tbody data-edit>` 包着的 `<tr>` 早就证明过 tr 这条路是对的。
|
||||
*/
|
||||
it('行容器换成完全不相干的标签(<li>)结果不变 —— 证明 rowOf 认的是"host 的直接子元素",不是专挑某个标签名', () => {
|
||||
const liHost =
|
||||
'<div data-edit="parts.parameter">' +
|
||||
'<li class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="input_voltage"/><input data-col="param_value" value="4.5~40"/></li>' +
|
||||
'<li class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="output_voltage"/><input data-col="param_value" value="5"/></li>' +
|
||||
'<li class="pv"><input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="enable_threshold"/><input data-col="param_value" value="2.5"/></li>' +
|
||||
'</div>';
|
||||
const got = collect(docOf(liHost), 'parts.parameter');
|
||||
expect(got).toHaveLength(3);
|
||||
expect(new Set(got.map((r) => r['param_key']))).toEqual(new Set(['input_voltage', 'output_voltage', 'enable_threshold']));
|
||||
});
|
||||
|
||||
it('变异验证:去掉一个瓷贴整行,记录数跟着从 6 变成 5 —— 证明「6 条」不是巧合,是按瓷贴数记', () => {
|
||||
const oneLess = TILES_HOST.replace(
|
||||
'<div class="pv"><input data-col="internal_pn" value="XL2596S-5.0"/><input data-col="param_key" value="enable_threshold"/><input data-col="param_value" value="3.0"/></div>',
|
||||
'',
|
||||
);
|
||||
const got = collect(docOf(oneLess), 'parts.parameter');
|
||||
expect(got).toHaveLength(5);
|
||||
});
|
||||
|
||||
it('变异验证:摘掉一个瓷贴的主键 data-col(internal_pn)—— 只有那一条记录缺这一列,其余 5 条不受影响', () => {
|
||||
const withoutOnePk = TILES_HOST.replace(
|
||||
'<input data-col="internal_pn" value="LM2596S-5.0"/><input data-col="param_key" value="enable_threshold"/>',
|
||||
'<input value="LM2596S-5.0"/><input data-col="param_key" value="enable_threshold"/>',
|
||||
);
|
||||
const got = collect(docOf(withoutOnePk), 'parts.parameter');
|
||||
expect(got).toHaveLength(6);
|
||||
const missingPk = got.filter((r) => !('internal_pn' in r));
|
||||
expect(missingPk).toHaveLength(1);
|
||||
expect(missingPk[0]?.['param_key']).toBe('enable_threshold');
|
||||
expect(missingPk[0]?.['param_value']).toBe('2.5');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* **嵌套 `data-rows`(外层按料分组、内层铺参数瓷贴)喂给真实 `collect()`,会并成一条记录**
|
||||
* (2026-08-30,W05 数据工单版面探针 —— 探的是「一个候选一个 section、section 里铺参数瓷贴」
|
||||
* 这形状能不能拿来做可编辑版面)。
|
||||
*
|
||||
* 这段夹具字符串 **原样照抄自** `apps/api/src/modules/interaction/__tests__/
|
||||
* view-render-nested-editable.test.ts` 里 `renderView(NESTED_TPL, NESTED_SCOPE)` 的真实产出
|
||||
* (该文件断言过逐字节相等,变量名同为 `NESTED_RENDERED`)——两侧各钉一条是因为 `collect()`
|
||||
* 住在 `@ui`(tsconfig.web.json:`jsx: react-jsx` + DOM lib)、`renderView` 住在 `apps/api`
|
||||
* (tsconfig.node.json:两者都没有对方要的编译选项),`packages-are-leaves` 门禁也不许
|
||||
* `packages/*` 反向 import `apps/*`——两侧不能用同一份代码/常量接力,只能用**同一段字符串**
|
||||
* 接力,不一致就靠这条注释与两处的断言互相盯着。
|
||||
*
|
||||
* ── 结论 ──────────────────────────────────────────────────────────────────
|
||||
* `rowOf()` 从格子往上爬,爬到 host(`[data-edit="parts.parameter"]`,即 `<article>`)的
|
||||
* **直接子元素**为止——嵌套形状里那正是每颗候选料的 `<section>`,不是瓷贴自己的 `<span class="pv">`
|
||||
* (瓷贴与 section 之间还隔着内层 `data-rows` 留下的那层 `<div>`)。于是一颗料的 3 个瓷贴全部
|
||||
* 归到同一个 `<section>` 名下:`collect()` 只吐出 **2 条记录**(candidate 数,不是瓷贴数),
|
||||
* 且同一列被后一个瓷贴的值**悄悄覆盖**前一个——`param_key`/`param_value` 最终只剩最后一颗瓷贴
|
||||
* (`enable_threshold`)的值,`input_voltage`/`output_voltage` 两条参数的编辑结果整个丢失,
|
||||
* 界面上却看不出任何报错。**所以数据工单版面不许这么嵌**——要么瓷贴与 host 之间只隔一层
|
||||
* (见 `view-container-collect-div-rows.test.ts` 的平坦退路形状),要么给每个瓷贴单独一张
|
||||
* `data-edit` 宿主。
|
||||
*/
|
||||
// @vitest-environment jsdom
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { collect } from '../src/ViewContainer.tsx';
|
||||
|
||||
/** 与 view-render-nested-editable.test.ts 的 `NESTED_RENDERED` 逐字节相同 —— 见该文件头注 */
|
||||
const NESTED_RENDERED =
|
||||
'<article data-edit="parts.parameter"><section><h3>LM2596S-5.0</h3><div>' +
|
||||
'<span class="pv"><input data-col="param_key" value="input_voltage"/>' +
|
||||
'<input data-col="param_value" value="4.5~40"/>' +
|
||||
'<input data-col="internal_pn" value="LM2596S-5.0"/></span>' +
|
||||
'<span class="pv"><input data-col="param_key" value="output_voltage"/>' +
|
||||
'<input data-col="param_value" value="5"/>' +
|
||||
'<input data-col="internal_pn" value="LM2596S-5.0"/></span>' +
|
||||
'<span class="pv"><input data-col="param_key" value="enable_threshold"/>' +
|
||||
'<input data-col="param_value" value="2.5"/>' +
|
||||
'<input data-col="internal_pn" value="LM2596S-5.0"/></span>' +
|
||||
'</div></section><section><h3>XL2596S-5.0</h3><div>' +
|
||||
'<span class="pv"><input data-col="param_key" value="input_voltage"/>' +
|
||||
'<input data-col="param_value" value="4.5~40"/>' +
|
||||
'<input data-col="internal_pn" value="XL2596S-5.0"/></span>' +
|
||||
'<span class="pv"><input data-col="param_key" value="output_voltage"/>' +
|
||||
'<input data-col="param_value" value="5"/>' +
|
||||
'<input data-col="internal_pn" value="XL2596S-5.0"/></span>' +
|
||||
'<span class="pv"><input data-col="param_key" value="enable_threshold"/>' +
|
||||
'<input data-col="param_value" value="3.0"/>' +
|
||||
'<input data-col="internal_pn" value="XL2596S-5.0"/></span>' +
|
||||
'</div></section></article>';
|
||||
|
||||
function docOf(html: string): Document {
|
||||
const doc = document.implementation.createHTMLDocument('');
|
||||
doc.body.innerHTML = html;
|
||||
return doc;
|
||||
}
|
||||
|
||||
describe('collect():外层 data-rows 分组、内层 data-rows 铺瓷贴 —— 一个候选的三个瓷贴并成一条记录', () => {
|
||||
it('两颗候选料只收到 2 条记录,不是 6 条(3 瓷贴 × 2 料)——瓷贴被 section 并行掉了', () => {
|
||||
const got = collect(docOf(NESTED_RENDERED), 'parts.parameter');
|
||||
expect(got).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('同一 section 内后一个瓷贴的列值覆盖前一个:param_key/param_value 只剩最后一瓷贴(enable_threshold),前两条参数的编辑结果丢失', () => {
|
||||
const got = collect(docOf(NESTED_RENDERED), 'parts.parameter');
|
||||
const byPn = new Map(got.map((r) => [r['internal_pn'], r]));
|
||||
// 3 个瓷贴按 DOM 序是 input_voltage → output_voltage → enable_threshold,最后写的赢
|
||||
expect(byPn.get('LM2596S-5.0')).toEqual({ param_key: 'enable_threshold', param_value: '2.5', internal_pn: 'LM2596S-5.0' });
|
||||
expect(byPn.get('XL2596S-5.0')).toEqual({ param_key: 'enable_threshold', param_value: '3.0', internal_pn: 'XL2596S-5.0' });
|
||||
// input_voltage / output_voltage 两条参数的值,在 collect() 的输出里完全找不到痕迹
|
||||
expect(JSON.stringify(got)).not.toContain('input_voltage');
|
||||
expect(JSON.stringify(got)).not.toContain('output_voltage');
|
||||
});
|
||||
|
||||
it('变异验证:去掉一整颗候选料的 3 个瓷贴,记录数跟着从 2 变成 1 —— 证明上面「2 条」不是巧合,是真的按 section 数记', () => {
|
||||
const oneSection = NESTED_RENDERED.slice(0, NESTED_RENDERED.indexOf('</section>') + '</section>'.length) + '</article>';
|
||||
const got = collect(docOf(oneSection), 'parts.parameter');
|
||||
expect(got).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('变异验证:摘掉主键 data-col(internal_pn)—— 记录里就再也找不到这一列(证明断言真的在读 data-col,不是巧合)', () => {
|
||||
const withoutPk = NESTED_RENDERED.replaceAll('<input data-col="internal_pn" value="LM2596S-5.0"/>', '<input value="LM2596S-5.0"/>').replaceAll(
|
||||
'<input data-col="internal_pn" value="XL2596S-5.0"/>',
|
||||
'<input value="XL2596S-5.0"/>',
|
||||
);
|
||||
const got = collect(docOf(withoutPk), 'parts.parameter');
|
||||
for (const row of got) expect(row).not.toHaveProperty('internal_pn');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user