博客建站教程：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /4ac090e45c4b.html
📄
博客建站教程：同一组件在不同页面表现不同时怎样构造验收样例
先判断差异来自“页面环境不同”还是“组件状态被页面改写”，再决定验收样例的构造方式。若组件在A页正常、B页异常，但两页传入的属性完全一致，优先按环境差异构造样例；若两页传入属性不同，则按状态组合构造样例。前者验收的是组件对上下文的适应边界，后者验收的是调用方是否遵守约定。以下两种条件对应不同选择，先确认属于哪一种，再决定样例数量与通过标准。
条件一：属性一致但表现不同，按环境差异构造样例
这种情况下组件本身没有收到不同输入，差异通常来自页面提供的上下文：容器宽度、继承的字号与行高、主题变量、并排元素数量、异步加载顺序。此时验收样例不应只复制组件调用代码，而要把页面环境一并固化。
实际动作：在每个出现该组件的页面模板中，记录三项可量化环境值——容器可用宽度、组件外层继承的字体大小、组件挂载时同级元素数量。把这三项写进样例的前提条件，而不是只写“在首页显示正常”。
结果如何影响下一步：如果同一组件在窄容器页面出现换行、在宽容器页面正常，说明验收标准应改为“容器宽度低于某阈值时的降级规则”，而不是要求所有页面表现一致。若三项环境值都相同却仍表现不同，才需要转向条件二排查调用参数。
例外：当差异只在某一页面出现、且该页面存在其他脚本改写DOM时，环境值可能被运行时覆盖。此时应先在无其他脚本的最小页面复现，再决定是否把该脚本列为验收前提。
条件二：属性不同导致表现不同，按状态组合构造样例
如果两页传给组件的参数不同，差异是预期行为，验收重点变成“每种参数组合是否都有明确结果”。此时不需要穷举所有页面，而要按参数取值边界构造最小组合集。
实际动作：列出组件接收的参数，每个参数取最小值、典型值、最大值三类，交叉后挑出能触发不同分支的组合，形成样例清单。每个样例写明输入参数与预期输出区域，不写“显示正常”这类无法判定的描述。
结果如何影响下一步：若某个组合没有预期输出，说明组件契约不完整，应先补契约再继续验收；若所有组合都有预期输出但页面仍异常，说明问题回到条件一的环境层，需要补环境值。
例外：参数之间存在互斥关系时，不应强行交叉。此时改为按合法组合列表逐个构造，非法组合单独列为“应被拒绝”的样例，而不是跳过。
用一组可区分原因的证据缩小范围
构造样例前先收集能区分两类原因的证据，避免样例越写越多却无法定位。可用的区分证据包括：
- 把同一组件调用代码原样复制到两个页面模板，若表现仍不同，指向环境差异；若表现一致，指向原调用参数差异。
- 在异常页面禁用其他脚本后重新加载，若恢复正常，指向运行时改写；若仍异常，指向样式或容器差异。
- 固定容器宽度后对比，若差异消失，说明宽度是主因；若差异仍在，继续查继承样式。
这些证据只用于缩小范围，不能单独证明某个原因成立。例如禁用脚本后恢复正常，也可能是加载顺序变化带来的副作用，需要再固定顺序复测一次。
一个注明假设的短例子
假设某博客的“相关文章”组件在文章页显示三列，在列表页显示为单列且间距异常。假设两页传入的文章数量相同，则先按条件一处理：记录两页容器宽度，若文章页容器明显更宽，则样例应写成“容器宽度大于某值时三列，小于某值时单列”，并规定单列下的间距下限。若两页容器宽度相同，再按条件二检查传入参数，确认列表页是否传了不同的布局标记。这个例子的数字仅用于说明比较方法，不代表任何实际站点数据。
验收样例的写法与通过标准
每个样例至少包含四项：前提环境值、输入参数、可观察的输出区域、判定方式。判定方式要能给出是或否，例如“标题不换行”“图片不溢出容器”“间距不小于设定值”。
- 先写环境前提，再写参数，避免把两者混在一句里。
- 每个样例只验证一个分支，不把多个页面差异塞进同一条。
- 通过标准用可观察结果描述，不用“正常”“美观”这类词。
- 记录未覆盖的组合，作为下一轮补充范围，而不是默认通过。
当样例通过后，下一步是把已验证的环境值与参数写回页面模板或组件文档，使后续改动有参照；若样例未通过且原因未定位，应先补区分证据，再决定是修组件还是修页面调用方式，不要直接放宽通过标准。
