리팩터링 가이드

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

테스트 고정

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

예제 단계

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

자료

비공식 위키 설명

예시