리팩터링 가이드

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

테스트 고정

테스트 고정은 당신이 리팩터링하는 항목의 출력물이나 동작을 의도하지 않게 변경하지 않도록 도와줍니다. 이는 소비자들이 그러한 버그를 함축적으로 의존할 수도 있기 때문에 기존의 버그 동작을 보존하는 데에도 도움이 됩니다.

예제 단계

  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에서 고정 테스트를 실행하는 방법에 대한 지침을 남길 수 있습니다. 예:

먼저 pin을 제거하는 커밋을 되돌립니다. 

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

리소스

비공식 위키 설명

예제