BPOS-MVP/apps/api/src/modules/interaction/__tests__/view-render.test.ts

/** 视图模版填数 —— domain 测试零 mock(AM 07:模版是内容不是代码) */
import { describe, expect, it } from 'vitest';
import { displayValue, escapeHtml, renderView, resolveSlot } from '../internal/domain/view-render.ts';
import { templateIsSafe } from '../internal/domain/control-handover.ts';

describe('取值与展示', () => {
  it('点号下行 + 数组下标 —— 与步声明的写法一致', () => {
    const scope = { records: [{ pn: 'LM358DR' }], n: 3 };
    expect(resolveSlot(scope, 'records.0.pn')).toBe('LM358DR');
    expect(resolveSlot(scope, 'n')).toBe(3);
    expect(resolveSlot(scope, 'nope.deep')).toBeUndefined();
  });

  it('空值显示为「—」,免得画面留空洞', () => {
    expect(displayValue(undefined)).toBe('—');
    expect(displayValue('')).toBe('—');
    expect(displayValue(null)).toBe('—');
  });

  it('数组显示条数,布尔显示是/否,小数收敛', () => {
    expect(displayValue([1, 2, 3])).toBe('3');
    expect(displayValue(true)).toBe('是');
    expect(displayValue(0.123456789)).toBe('0.1235');
  });
});

describe('填数只做取值与转义 —— 模版不得成为代码', () => {
  it('填入的值被转义,注不进标签', () => {
    const html = '<b data-slot="x"></b>';
    const out = renderView(html, { x: '<img src=x onerror=alert(1)>' });
    // 标签没能成型:尖括号全被转义,留下的是惰性文本
    expect(out).not.toContain('<img');
    expect(out).toBe('<b>&lt;img src=x onerror=alert(1)&gt;</b>');
  });

  it('净化门查的是**作者写的模版**,不是填完数据的成品', () => {
    // 模版本身必须无脚本、无事件处理器、无外链
    expect(templateIsSafe('<b data-slot="x"></b>')).toBe(true);
    expect(templateIsSafe('<b onclick="x()"></b>')).toBe(false);
    // 成品里出现「onerror=」这串字面文本是转义后的惰性文本,不该再拿模版规则去卡它 ——
    // 否则任何正文提到事件处理器的业务数据都会被误伤。安全由「模版过门 + 沙箱容器」两道保证。
    expect(renderView('<b data-slot="x"></b>', { x: 'onclick=1' })).toBe('<b>onclick=1</b>');
  });

  it('未命中的槽位填「—」,不把占位文字漏到成品上', () => {
    expect(renderView('<b data-slot="missing">占位</b>', {})).toBe('<b>—</b>');
  });

  it('填充消费槽位 —— 交出去的是干净 HTML,不带模板属性', () => {
    expect(renderView('<b class="k" data-slot="x"></b>', { x: 1 })).toBe('<b class="k">1</b>');
  });
});

describe('行模版 —— 逐条清单不写死条数', () => {
  const html = '<table data-rows="records"><tr><td data-slot="pn"></td><td data-slot="eau"></td></tr></table>';

  it('按数组逐项复制,行内槽位相对该行取值', () => {
    const out = renderView(html, {
      records: [
        { pn: 'A1', eau: 100 },
        { pn: 'B2', eau: 200 },
      ],
    });
    expect(out).toContain('<td>A1</td>');
    expect(out).toContain('<td>B2</td>');
    expect(out).toContain('<td>200</td>');
  });

  it('空数组渲染成空容器,不留一行占位', () => {
    const out = renderView(html, { records: [] });
    expect(out).toBe('<table></table>');
  });

  it('行先展开再填标量槽 —— 顺序反了行内会被外层作用域填掉', () => {
    const out = renderView('<ul data-rows="rs"><li data-slot="v"></li></ul><b data-slot="v"></b>', {
      rs: [{ v: '行内' }],
      v: '外层',
    });
    expect(out).toContain('<li>行内</li>');
    expect(out).toContain('<b>外层</b>');
  });
});

describe('转义', () => {
  it('四个字符各归其位', () => {
    expect(escapeHtml('<a href="x">&</a>')).toBe('&lt;a href=&quot;x&quot;&gt;&amp;&lt;/a&gt;');
  });
});

describe('整键优先 —— 台账地址本身带点号', () => {
  const scope = {
    'quote_intake.record': [{ pn: 'LM358DR', eau: 12000 }],
    quote_intake: { record: [{ pn: '不该取到这个' }] },
    a: { b: 'nested' },
  };

  it('字面整键存在时取它,不拆成两级', () => {
    const rows = resolveSlot(scope, 'quote_intake.record');
    expect(Array.isArray(rows) && (rows[0] as { pn: string }).pn).toBe('LM358DR');
  });

  it('没有整键才按点号下行', () => {
    expect(resolveSlot(scope, 'a.b')).toBe('nested');
  });

  it('行模版用地址键取表', () => {
    const out = renderView('<tbody data-rows="quote_intake.record"><tr><td data-slot="pn"></td></tr></tbody>', scope);
    expect(out).toContain('<td>LM358DR</td>');
  });
});

/**
 * `data-blank` —— 「这一格客户没给」与「这一格填了个破折号」是两件事。
 *
 * 报告里的必填 / 选填胶囊、缺必填的整行标底,全靠这一格**真的空**才生效
 * (`td:empty::after` / `tr:has(td.req:empty)`)。填了「—」就永远标不出来。
 */
describe('data-blank:空值真的留空', () => {
  it('空串 / null / 缺席一律留空,属性随槽位一并消费', () => {
    const html = '<td class="req" data-blank data-slot="eau"></td>';
    expect(renderView(html, { eau: '' })).toBe('<td class="req"></td>');
    expect(renderView(html, { eau: null })).toBe('<td class="req"></td>');
    expect(renderView(html, {})).toBe('<td class="req"></td>');
  });

  it('有值照填 —— 0 与 false 都是值,不算空', () => {
    const html = '<td class="req" data-blank data-slot="v"></td>';
    expect(renderView(html, { v: 30_000 })).toBe('<td class="req">30000</td>');
    expect(renderView(html, { v: 0 })).toBe('<td class="req">0</td>');
    expect(renderView(html, { v: false })).toBe('<td class="req">否</td>');
  });

  it('不带 data-blank 的照旧填「—」—— 老模版行为不动', () => {
    expect(renderView('<b data-slot="x"></b>', { x: '' })).toBe('<b>—</b>');
  });

  it('逐行展开时每行各判各的空', () => {
    const out = renderView('<tbody data-rows="rs"><tr><td class="req" data-blank data-slot="eau"></td></tr></tbody>', {
      rs: [{ eau: 30_000 }, { eau: '' }],
    });
    expect(out).toBe('<tbody><tr><td class="req">30000</td></tr><tr><td class="req"></td></tr></tbody>');
  });
});

/**
 * `data-class-of` —— **按值上色**,模版仍然不许算。
 *
 * 「A 绿 / B 橙 / C 紫」这类分档表现,从前只能三个值一个色 —— 那等于假装读懂了值。
 * 把值投影成 class 仍然只是取值:没有表达式、没有分支,判断留在样式表里。
 * 属性位是唯一一处让值进属性的地方,所以消毒必须硬。
 */
describe('data-class-of:按值上色', () => {
  it('值消毒成 v-<值> 追加进 class,属性随之消费', () => {
    const html = '<td class="pill" data-class-of="type_tag" data-slot="type_tag"></td>';
    expect(renderView(html, { type_tag: 'A' })).toBe('<td class="pill v-a">A</td>');
    expect(renderView(html, { type_tag: 'C' })).toBe('<td class="pill v-c">C</td>');
  });

  it('没有 class 属性就新建一个', () => {
    expect(renderView('<i data-class-of="k" data-slot="k"></i>', { k: 'B' })).toBe('<i class="v-b">B</i>');
  });

  it('布尔与数字都投影得出来 —— 是/否两态也要能分色', () => {
    expect(renderView('<b data-class-of="f" data-slot="f"></b>', { f: true })).toBe('<b class="v-true">是</b>');
    expect(renderView('<b data-class-of="n" data-slot="n"></b>', { n: 0 })).toBe('<b class="v-0">0</b>');
  });

  it('**值只放行 ASCII 字母数字与横杠**:引号、尖括号、空格全剔掉,注不进属性', () => {
    const out = renderView('<b class="x" data-class-of="k" data-slot="k"></b>', { k: '" onclick=alert(1) <b>' });
    // class 里只剩白名单字符;文本位照旧转义 —— 两处都注不进去
    expect(out).toBe('<b class="x v-onclickalert1b">&quot; onclick=alert(1) &lt;b&gt;</b>');
    expect(out).not.toContain('onclick=alert(1)"');
  });

  it('一个合规字符都没有(中文 / 空值)就不给 class —— 宁可没颜色,不给错钩子', () => {
    expect(renderView('<b class="x" data-class-of="k" data-slot="k"></b>', { k: '老客户' })).toBe('<b class="x">老客户</b>');
    expect(renderView('<b class="x" data-class-of="k" data-slot="k"></b>', {})).toBe('<b class="x">—</b>');
  });

  it('逐行展开时每行按自己的值上色', () => {
    const out = renderView('<tbody data-rows="rs"><tr><td data-class-of="t" data-slot="t"></td></tr></tbody>', {
      rs: [{ t: 'A' }, { t: 'C' }],
    });
    expect(out).toBe('<tbody><tr><td class="v-a">A</td></tr><tr><td class="v-c">C</td></tr></tbody>');
  });

  /*
   * **上色不以填字为条件** —— 这一组是补的账。
   *
   * 从前只认「带 data-slot 的元素」,于是分布条那种纯色块
   * (`<i data-class-of="type_tag"></i>`,一格一条料、格里不写字)整条静默失色:
   * 属性还留在成品上,一个 class 都没长出来。屏上是一排灰格子 ——
   * 而灰格子看着像「还没算出来」,不像「没上色」,查了两遍才认出来。
   * 上面每一条老用例都同时写了 data-slot,所以谁都没拦住它。
   */
  it('**只上色不填字**:没有 data-slot 也照样长出 class', () => {
    expect(renderView('<i data-class-of="t"></i>', { t: 'B' })).toBe('<i class="v-b"></i>');
    expect(renderView('<i class="seg" data-class-of="t"></i>', { t: 'C' })).toBe('<i class="seg v-c"></i>');
  });

  it('只上色的格子逐行展开,每格按自己那一行的值', () => {
    const out = renderView('<div class="bar" data-rows="rs"><i data-class-of="t"></i></div>', {
      rs: [{ t: 'A' }, { t: 'B' }, { t: 'C' }],
    });
    expect(out).toBe('<div class="bar"><i class="v-a"></i><i class="v-b"></i><i class="v-c"></i></div>');
  });

  it('值取不到就把属性摘掉了事 —— 不留半成品属性到成品上', () => {
    expect(renderView('<i class="seg" data-class-of="nope"></i>', {})).toBe('<i class="seg"></i>');
    expect(renderView('<i data-class-of="k"></i>', { k: '老客户' })).toBe('<i></i>');
  });

  it('壳上的 data-class-of 按外层作用域上色,行内的仍按各自那一行', () => {
    const out = renderView('<div data-class-of="hit" data-rows="rs"><i data-class-of="t"></i></div>', {
      hit: 'r1',
      rs: [{ t: 'A' }, { t: 'C' }],
    });
    expect(out).toBe('<div class="v-r1"><i class="v-a"></i><i class="v-c"></i></div>');
  });
});

/**
 * `data-edit` + `data-col` —— **就地改**:可改的格子渲两份,只读那份与输入孪生件。
 *
 * 为什么两份都渲、而不是渲成输入:同一份件既要在待处理页给人改,
 * 又要在工作成果里定稿归档 —— 两处是同一份 HTML。渲两套等于存两份、也就会分叉。
 * 显示哪一份由样式表按根节点上的 `editing` 决定,填数这一侧仍然只做取值。
 */
describe('data-edit / data-col:可改格子的输入孪生件', () => {
  const ROWS = '<tbody data-rows="rs" data-edit="d.o"><tr><td><span class="jc-vcell mono" data-slot="pn" data-col="pn"></span></td></tr></tbody>';

  it('容器标了 data-edit,格子就多一个带值的 input', () => {
    const out = renderView(ROWS, { rs: [{ pn: 'AO6604' }] });
    expect(out).toContain('<span class="jc-vcell mono">AO6604</span>');
    expect(out).toContain('<input class="jc-cell mono" data-col="pn" data-row="0" value="AO6604"/>');
  });

  it('没标 data-edit 的表一个 input 都不长 —— 归档件就是件,不是表单', () => {
    const out = renderView(ROWS.replace(' data-edit="d.o"', ''), { rs: [{ pn: 'AO6604' }] });
    expect(out).not.toContain('<input');
  });

  it('行号钉在每一行上 —— 写回时按它对行', () => {
    const out = renderView(ROWS, { rs: [{ pn: 'A' }, { pn: 'B' }, { pn: 'C' }] });
    expect(out.match(/data-row="\d"/g)).toEqual(['data-row="0"', 'data-row="1"', 'data-row="2"']);
  });

  it('空值的 input 真空着 —— 空的输入框显示自己的 placeholder,那正是「这一格还没有」', () => {
    const out = renderView(ROWS, { rs: [{ pn: '' }] });
    expect(out).toContain('value=""');
  });

  it('**值进属性也要转义** —— 属性位插值只此一处,引号进去就是逃逸', () => {
    const out = renderView(ROWS, { rs: [{ pn: '" onfocus=alert(1) x="' }] });
    expect(out).toContain('value="&quot; onfocus=alert(1) x=&quot;"');
    expect(out).not.toMatch(/value="" onfocus/);
  });

  it('排版类跟着走(mono / num),别的类不带过去 —— 同一列两态字体要一致', () => {
    const num = ROWS.replace('jc-vcell mono', 'jc-vcell num req');
    expect(renderView(num, { rs: [{ pn: '30000' }] })).toContain('<input class="jc-cell num"');
  });
});

describe('手写的下拉孪生件:当下的值要标 selected', () => {
  const SELECT_ROW =
    '<tbody data-rows="rs" data-edit="d.o"><tr><td><select class="jc-cell" data-col="depth">' +
    '<option value=""></option><option value="deep">深度</option><option value="standard">标准</option>' +
    '<option value="light">轻度</option></select></td></tr></tbody>';

  it('当下的值标 selected —— 人一进编辑态就看得见 AI 填了什么', () => {
    const out = renderView(SELECT_ROW, { rs: [{ depth: 'standard' }] });
    expect(out).toContain('<option value="standard" selected>标准</option>');
  });

  it('值匹配到具体那个 option,不是随便一个', () => {
    const out = renderView(SELECT_ROW, { rs: [{ depth: 'light' }] });
    expect(out).toContain('<option value="light" selected>轻度</option>');
    expect(out).toContain('<option value="deep">深度</option>');
    expect(out).toContain('<option value="standard">标准</option>');
  });

  it('没有值 —— 照旧留白,不选任何一项(没答=不改的规矩不能被这条改掉)', () => {
    const out = renderView(SELECT_ROW, { rs: [{}] });
    expect(out).not.toContain('selected');
  });

  it('值不在选项里 —— 原样留白,不硬凑一个', () => {
    const out = renderView(SELECT_ROW, { rs: [{ depth: 'unknown-code' }] });
    expect(out).not.toContain('selected');
  });

  it('没标 data-edit 的表(归档件)一样标好 selected —— 静态归档也该如实呈现当下的值', () => {
    const out = renderView(SELECT_ROW.replace(' data-edit="d.o"', ''), { rs: [{ depth: 'deep' }] });
    expect(out).toContain('<option value="deep" selected>深度</option>');
  });
});

/**
 * 手写的多行文本孪生件 —— E04 执行回执的「结果摘要 / 客户反馈」照目标件是 textarea
 * (一句话装不下「见到的关键人、谈了什么、达成什么」)。与下拉同款:
 * 渲染时把当下的值填进正文,人一进编辑态看得见 AI/上一轮填了什么。
 */
describe('手写的多行文本孪生件:当下的值进正文', () => {
  const TEXTAREA_ROW =
    '<tbody data-rows="rs" data-edit="d.o"><tr><td>' +
    '<textarea class="jc-cell" data-col="result_summary" placeholder="谈了什么"></textarea>' +
    '</td></tr></tbody>';

  it('当下的值进正文 —— 人一进编辑态就看得见已填的内容', () => {
    const out = renderView(TEXTAREA_ROW, { rs: [{ result_summary: '见到了产品 VP,达成样品测试意向' }] });
    expect(out).toContain('data-col="result_summary" placeholder="谈了什么">见到了产品 VP,达成样品测试意向</textarea>');
  });

  it('没有值 —— 正文真空着,placeholder 才显得出来', () => {
    const out = renderView(TEXTAREA_ROW, { rs: [{}] });
    expect(out).toContain('placeholder="谈了什么"></textarea>');
  });

  it('值要转义 —— 正文里混进闭合标签就是逃逸', () => {
    const out = renderView(TEXTAREA_ROW, { rs: [{ result_summary: '</textarea><script>alert(1)</script>' }] });
    expect(out).not.toContain('<script>');
    expect(out).toContain('&lt;/textarea&gt;');
  });
});

describe('渲染两遍不叠加 —— 交出去的是干净 HTML', () => {
  it('第二遍渲染不会再长一个 input(属性已被消费)', () => {
    const once = renderView('<tbody data-rows="rs" data-edit="d.o"><tr><td><span data-slot="pn" data-col="pn"></span></td></tr></tbody>', {
      rs: [{ pn: 'X' }],
    });
    expect((once.match(/<input/g) ?? []).length).toBe(1);
    expect(renderView(once, {})).toBe(once);
  });

  it('模版里仍然没有脚本 —— 输入件是纯 HTML,没有事件处理器', () => {
    const out = renderView('<tbody data-rows="rs" data-edit="d.o"><tr><td><span data-slot="pn" data-col="pn"></span></td></tr></tbody>', {
      rs: [{ pn: 'X' }],
    });
    expect(out).not.toMatch(/<script|\son[a-z]+=/i);
  });
});

describe('data-file-of:这一格点开是一份资料文件', () => {
  const TPL =
    '<tbody data-rows="mine:content.asset"><tr>' +
    '<td><span data-file-of="content_id" data-slot="title"></span></td>' +
    '</tr></tbody>';

  it('换成认得出行的 data-file="地址/主键值",原属性被消费掉', () => {
    const out = renderView(TPL, {
      'mine:content.asset': [{ content_id: 'CT-2026-0001', title: '供货能力说明' }],
    });
    expect(out).toContain('data-file="content.asset/CT-2026-0001"');
    expect(out).not.toContain('data-file-of');
    expect(out).toContain('供货能力说明');
  });

  it('**地址去掉 `mine:` 前缀** —— 那是取值的路径,不是台账地址', () => {
    const out = renderView(TPL, { 'mine:content.asset': [{ content_id: 'A', title: 'T' }] });
    expect(out).toContain('data-file="content.asset/A"');
  });

  it('那一列还空着:整个属性去掉 —— 没有文件的行不该长得像能点开', () => {
    const out = renderView(TPL, { 'mine:content.asset': [{ title: '还没编号' }] });
    expect(out).not.toContain('data-file');
    expect(out).toContain('还没编号');
  });

  it('主键值里的引号被转义 —— 一行数据撑不开属性', () => {
    const out = renderView(TPL, { 'mine:content.asset': [{ content_id: 'A" onclick="x', title: 'T' }] });
    // 引号成了 &quot;,那一串整个还在 data-file 的值里面 —— 没有第二个属性冒出来
    expect(out).toContain('data-file="content.asset/A&quot; onclick=&quot;x"');
    expect(out).not.toContain('onclick="x"');
  });
});