Help us learn about your current experience with the documentation. Take the survey.

重构指南

本文档是一份在进行重构时需要考虑的技术和最佳实践集合。

固定测试（Pinning tests）

固定测试帮助你确保不会无意中改变你正在重构的实体的输出或行为。这甚至包括保留任何现有的错误行为，因为消费者可能隐式地依赖这些错误。

示例步骤

  1. 识别重构主题的所有可能输入（例如，注入到模板中的任何内容或在条件语句中使用的任何内容）。
  2. 对于每个可能的输入，识别其重要的可能值。
  3. 创建一个测试，为每个输入的有用值组合保存一个完整详细的快照。这应该能保证我们已经"固定"了当前行为。快照可以是字面意义上的截图、HTML 转储，甚至是调试语句的有序列表。
  4. 在开始重构之前，对所有代码运行固定测试（Oracle）
  5. 执行重构（或检出已完成工作的提交）
  6. 再次对重构后的代码运行所有固定测试（Pin）
  7. 比较 Oracle 和 Pin。如果 Pin 不同，你就知道重构没有保留现有行为。
  8. 根据需要重复前三个步骤，直到重构完成。

示例提交历史

保留添加和移除固定测试的提交有助于其他人检出并验证测试结果。

AAAAAA Add pinning tests to funky_foo
BBBBBB Refactor funky_foo into nice_foo
CCCCCC Remove pinning tests for funky_foo

然后你可以在你的合并请求（MR）中给审查者留下如何运行固定测试的说明。示例：

首先还原移除固定测试的提交。

git revert --no-commit $(git log -1 --grep="Remove pinning test for funky_foo" --pretty=format:"%H")

然后运行测试

yarn run jest path/to/funky_foo_pin_spec.js

尝试保持固定测试通过

重构要做到 100% 纯是很难的。这意味着捕捉所有内容的固定测试必然会因为一些琐碎和预期的差异而失败。尝试通过用预期的更改清理固定测试来保持其通过。这有助于其他人快速验证重构是否安全。

示例:

// funky_foo_pin_spec.js

const cleanForSnapshot = el => {
  Array.from(rootEl.querySelectorAll('[data-deprecated-attribute]')).forEach(el => {
    el.removeAttribute('data-deprecated-attribute');
  });
};

// ...

expect(cleanForSnapshot(wrapper.element)).toMatchSnapshot();

资源

非官方维基解释

示例