리팩토링 가이드

이 문서는 리팩토링을 수행할 때 고려해야 할 기술과 모범 사례의 모음입니다.

테스트 고정

테스트 고정은 리팩토링 중에 리팩토링하는 엔티티의 출력이나 동작이 의도치 않게 변경되지 않도록 하는 데 도움을 줍니다. 여기에는 소비자가 이러한 버그에 암묵적으로 의존할 수 있으므로 기존의 버그가 있는 동작을 보존하는 것도 포함됩니다.

예제 단계

  1. 리팩토링 주제에 대한 모든 가능한 입력을 식별합니다(예: 템플릿에 주입되거나 조건문에서 사용되는 모든 것).
  2. 각 가능한 입력에 대해 중요한 가능한 값을 식별합니다.
  3. 각 입력당 유용한 조합 값에 대한 전체 상세 스냅샷을 저장하는 테스트를 만듭니다. 이는 현재 동작이 “고정”되었다는 것을 보장해야 합니다. 스냅샷은 문자 그대로 스크린샷, HTML 덤프 또는 디버깅 문장의 정렬 목록이 될 수 있습니다.
  4. 리팩토링을 시작하기 전에 코드에 대해 모든 고정 테스트를 실행합니다(Oracle).
  5. 리팩토링을 수행합니다(또는 완료된 작업과 함께 커밋을 체크아웃합니다).
  6. 리팩토링 후 코드에 대해 모든 고정 테스트를 다시 실행합니다(Pin).
  7. Oracle과 Pin을 비교합니다. Pin이 다르다면, 리팩토링이 기존 동작을 보존하지 않는다는 것을 알 수 있습니다.
  8. 리팩토링이 완료될 때까지 이전의 세 단계를 필요에 따라 반복합니다.

예제 커밋 기록

핀을 추가하고 제거하는 커밋에 남겨두면 다른 사람들이 테스트 결과를 확인하고 검증하는 데 도움이 됩니다.

AAAAAA 핀 테스트를 funky_foo에 추가
BBBBBB funky_foo를 nice_foo로 리팩토링
CCCCCC 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();

리소스

비공식 위키 설명

예제