如何网站制作：同一组件在不同页面表现不同时怎样构造验收样例
📱 Mozilla/5.0 (compatible; QlyzeBot/1.0; +https://app.qlyze.io/bot)
🔗 /bc78dccf339f.html
📄
如何网站制作：同一组件在不同页面表现不同时怎样构造验收样例
先给结论：当同一组件在不同页面表现不同，验收样例不应只写“组件正常”，而要把“页面差异”本身变成可复现的对照条件。做法是固定组件版本，只改变页面上下文，记录差异是否可归因于上下文。若差异在相同上下文下仍出现，说明问题不在页面，而在组件内部状态或数据来源，此时对照样例失效。
先分清差异来自页面还是来自组件
同一组件在不同页面表现不同，通常有三类原因。第一类是页面上下文不同，例如容器宽度、父级样式、页面级脚本或数据字段。第二类是组件内部状态不同，例如缓存、初始化顺序或异步数据到达时间。第三类是数据本身不同，例如同一组件在A页面拿到完整字段，在B页面拿到空值。
构造验收样例时，先做一件事：把组件放在两个页面中，保持组件代码、数据结构和调用方式完全一致，只改变页面容器和页面级样式。如果差异消失，说明问题来自页面上下文；如果差异仍在，说明问题在组件内部或数据层。这个动作的结果直接决定下一步：前者改页面约束，后者改组件或数据契约。
验收样例的最小结构
一个可用的验收样例至少包含四部分：组件输入、页面上下文、预期表现、实际观察。输入要写明字段和值，上下文要写明容器宽度、父级样式和页面级脚本是否影响组件。预期表现不要写“显示正常”，而要写“在窄容器中按钮换行，在宽容器中按钮不换行”这类可判断的句子。
假设一个卡片组件在列表页显示两行摘要，在详情页显示四行摘要。验收样例可以写成：输入相同摘要字段，列表页容器宽度较窄，预期显示两行；详情页容器宽度较宽，预期显示四行。如果实际在详情页仍显示两行，先检查容器宽度是否真的不同，再检查组件是否读取了页面级配置。这里的关键不是数字本身，而是把“页面差异”写成可对照的条件。
旧内容退出时，保留哪些组件样例
旧内容、旧系统或旧合作关系需要退出时，不必保留所有页面的验收样例，但必须保留仍然有价值的组件样例。判断标准是：该组件是否还在新页面中使用，是否还有数据依赖，是否还有用户路径经过它。如果组件仍被复用，就保留它的输入和上下文样例；如果组件只存在于即将下线的页面，样例可以随页面一起归档。
实际操作时，先列出组件清单，再标注每个组件的使用页面、数据来源和退出时间。对于仍要保留的组件，把验收样例从旧页面中抽出来，改成独立可运行的对照样例。这样做的结果是：旧页面下线后，组件仍能在新页面中被验证，不会因为旧页面消失而失去判断依据。
一个会让结论失效的反例
如果两个页面的组件差异来自用户登录状态、权限或个性化数据，那么“固定组件版本、只改页面上下文”的对照样例就不成立。因为此时页面差异不是容器或样式，而是数据权限不同。继续用同一组输入去比对，只会得到看似矛盾的结果。
遇到这种情况，验收样例需要增加一个维度：数据权限。分别用同一权限和不同权限各跑一次，观察差异是否随权限变化。如果差异随权限变化，下一步应改数据契约或权限判断，而不是改页面样式。这个反例说明：对照样例的有效性取决于是否找对了变量。
下一步动作
把当前差异写成一条可复现的对照记录：组件版本、页面上下文、输入数据、预期表现、实际观察。然后只改变一个变量重跑一次。如果差异跟着变量走，就按该变量修；如果差异不跟着变量走，就回到组件内部状态或数据来源继续排查。这样验收样例才不是一次性检查，而是能指导下一步修改的依据。
