邵阳网站开发，同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
🔗 /cd61fff7326f.html
📄
邵阳网站开发，同一组件在不同页面表现不同时怎样构造验收样例
先给结论：不要为“组件本身”写一份通用验收样例，而要按“组件所处的页面上下文”分别构造。判断分界线是——差异是否由页面级输入或容器条件引起。若是，验收样例必须复制该页面的真实输入与容器约束；若否，才把组件抽出来单独验收。下面给出两种条件下的不同选择、实施动作和例外。
条件一：差异来自页面级输入，验收样例要连上下文一起复制
同一组件在不同页面表现不同，最常见的原因是页面传给它的数据形态不同。例如列表页传入的是摘要字段，详情页传入的是完整字段；列表页可能缺封面图，详情页一定有。此时组件内部逻辑没错，错的是验收样例只用了单一输入。
做法是：为每个出现差异的页面各建一份样例，样例里写清三件事——传入字段的完整程度、字段为空时的取值、以及该页面特有的排序或截断规则。动作上，先固定一份“最小输入”和一份“完整输入”，分别跑一遍，记录哪些分支被触发。结果是：如果差异只在最小输入下出现，说明问题在缺省值处理，接下来应回到组件内部补默认值，而不是继续改页面样式。
假设一个卡片组件在列表页显示正常、在详情页侧栏被压扁。假设原因是侧栏容器宽度只有列表页的一半。这时验收样例要带上容器宽度这个变量，而不是只比较组件代码。若把宽度写进样例后表现一致，就能排除组件缺陷，把问题归到布局约束上。
条件二：差异来自容器或继承样式，验收样例要隔离变量
如果页面级输入相同、表现仍不同，就要怀疑容器与继承样式。典型情形是旧系统遗留的全局样式覆盖了组件内部类名，或者父级设置了不同的行高、字号、盒模型。这类差异不会因为换数据而消失。
做法是构造“同输入、不同容器”的对照样例：同一份数据，分别放进窄容器和宽容器、有无全局样式覆盖的两种环境，各跑一次。动作上，先禁用页面级样式表再测一遍。结果是：禁用后表现一致，说明问题在样式继承与优先级，下一步应缩小选择器作用范围或给组件加隔离层，而不是改组件结构。
例外是：如果组件依赖页面注入的全局变量或主题变量，隔离后反而失效，那说明它本就不是可独立复用的组件。此时验收样例应改为“按主题分别验收”，并明确该组件只服务于特定页面，不再承诺跨页一致。
验收样例里必须写清的可区分证据
为了让样例能真正定位原因，每份样例至少记录以下可区分项，而不是只写“显示正常/异常”：
- 输入数据：字段是否齐全、空值如何表示、数组长度。
- 容器条件：可用宽度、是否处于弹性或网格布局、有无滚动容器。
- 样式环境：是否加载全局样式、主题变量取值、继承的字号与行高。
- 渲染时机：是否在数据异步返回后才挂载，是否经历重新渲染。
这几项能把“组件问题”和“页面问题”分开。若两份样例只有容器宽度不同就出现差异，证据指向布局；若只有数据完整度不同就出现差异，证据指向缺省值处理。
实施动作与结果如何影响下一步
建议按这个顺序执行：先复制差异页面的真实输入与容器，跑一份对照样例；若差异复现，逐项去掉变量，直到表现一致，被去掉的那一项就是原因；若差异不复现，说明原页面上还有未记录的环境因素，需要回到页面抓取实际计算样式和实际传入数据。
这个动作的结果直接决定下一步：变量被定位在输入层，就补组件默认值和空值分支；定位在容器层，就调整布局约束或加隔离；定位在样式继承，就收敛选择器。三种结果对应三种不同的修改位置，不能混用。
旧页面退出时，哪些验收样例可以保留
当旧内容、旧系统或旧合作关系需要退出时，不必把所有样例一并废弃。判断标准是：样例描述的是组件行为，还是某个页面的偶然状态。描述组件在标准输入下行为的样例可以保留并迁移；只服务于某个即将下线页面布局的样例，应标记为随页面一起退出。
动作上，把保留的样例重新跑一遍，确认在新容器下仍然通过。若通过，它可以继续作为回归基线；若不通过，说明该组件实际上依赖旧页面环境，应连同旧页面一起处理，而不是强行迁移。这样既保住了仍有价值的部分，也避免把旧环境的隐含依赖带进新页面。
