リファクタリングガイド

このドキュメントは、リファクタリングを行う際に考慮すべきテクニックやベストプラクティスをまとめたものです。

テストの固定

テストをピン留めすることで、リファクタリング対象のエンティティの出力や振る舞いを 意図せず変更してしまわないようにすることができます。コンシューマが暗黙のうちにバグに依存している可能性があるからです。

ステップの例

  1. リファクタリング対象になりうるすべての入力を特定します (たとえば、テンプレートに注入されるもの、条件式で使用されるものなど)。
  2. それぞれの入力について、重要な値を特定します。
  3. 入力ごとの有用な組み合わせの値について、完全な詳細スナップショットを保存するテストを作成してください。これによって、現在の動作を「突き止めた」ことが保証されるはずです。スナップショットは、文字通りスクリーンショットでも、HTMLのダンプでも、あるいはデバッグ文の並べ替えリストでもかまいません。
  4. リファクタリングを始める前に、コードに対してすべてのピンニングテストを実行します。
  5. リファクタリングを実行します (あるいは、作業が完了したコミットをチェックアウトします)。
  6. リファクタリング後のコードに対してすべてのピンニングテストを再度実行します (Pin)
  7. Oracle と Pin を比較してください。Pin が異なる場合は、リファクタリングによって既存の動作が保持されていないことがわかります。
  8. リファクタリングが完了するまで、必要に応じて前の 3 つのステップを繰り返します。

コミット履歴の例

ピンの追加と削除のコミットを残しておくと、他の人がチェックアウトしてテストの結果を検証するのに役立ちます。

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

そして、レビュアーに MR でピンテストを実行する方法を残すことができます。例

まず、ピンを削除したコミットを revert してください。

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();

リソース

非公式Wikiの説明

使用例