리팩터링 가이드

이 문서는 리팩터링을 수행하는 동안 고려해야 할 기법과 모범 사례들의 모음입니다.

테스트 고정

테스트 고정은 당신이 리팩터링하는 엔터티의 출력 또는 동작을 의도하지 않게 변경하지 않도록 도와줍니다. 이는 소비자가 그러한 버그에 의존할 수 있기 때문에 기존의 버그가 있는 동작까지 보존하는 것을 포함합니다.

예제 단계

  1. 리팩터링 대상에 주입되거나 조건부로 사용되는 모든 가능한 입력을 식별합니다(예: 템플릿에 주입된 것 또는 조건부로 사용된 것).
  2. 각 가능한 입력에 대해 중요한 가능한 값들을 식별합니다.
  3. 각 유용한 조합 값마다 자세한 스냅샷을 저장하기 위한 테스트를 만듭니다. 이는 현재 동작을 “고정” 했다는 것을 보장해야 합니다. 이 스냅샷은 문자 그대로 스크린샷, HTML 덤프 또는 디버깅 문장의 정렬된 디렉터리일 수 있습니다.
  4. 리팩터링을 시작하기 전에 코드에 대해 모든 테스트를 실행하세요 (오라클).
  5. 리팩터링을 수행하세요 (또는 작업이 완료된 커밋 확인).
  6. 리팩터링 후 코드에 대해 다시 모든 테스트를 실행하세요 (Pin).
  7. 오라클과 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

핀이 Green을 유지하려고 노력하세요

리팩터링이 100% 순수할 수 없다는 것은 어려운 문제입니다. 따라서 절대적으로 모든 것을 캡처하는 핀은 몇 가지 사소한 예상된 차이로 실패할 것입니다. 예상된 변경으로 핀을 정리하여 Green을 유지하려고 노력하세요. 이것은 다른 사람들이 빠르게 리팩터링이 안전했는지 확인할 수 있도록 도와줍니다.

예시: 

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

리소스

비공식 위키 설명

예제