Nivo 라이브러리에 테스트 코드 기여하기
파이 차트의 gradients 설정을 살펴보다 비어 있는 테스트를 발견했다. 세 조각의 gradient 연결을 검증하는 테스트를 작성해 첫 코드 기여로 이어졌다.
예전에 Velog에 쓴 글에서 Nivo 이야기를 다시 옮겼다.
원래는 퀴즈 앱 하나를 만들어보려던 거였다. 결과 페이지에 정답 수와 오답 수를 보여주려고 @nivo/pie를 사용했고, 파이 차트에 gradients를 넣다가 라이브러리 코드까지 보게 됐다.
gradients가 생각대로 적용되지 않았다
기본 차트는 금방 만들었는데 gradients 설정은 기대한 대로 적용되지 않았다. 문서만 봐서는 원인을 모르겠어서 구현 코드와 테스트를 같이 읽기 시작했다. 그러다 should support gradients라는 테스트 본문이 // @todo 한 줄로 비어 있는 걸 발견했다.
라이브러리 사용법을 이해하려고 들어온 거였다. 테스트 이름에는 확인해야 할 동작이 이미 적혀 있었다. 마침 회사에서 테스트 코드를 작성하며 공부하던 시기라 직접 채워보고 싶었다.
비어 있던 테스트를 채워봤다
gradient 정의 세 개를 만들고 A, B, C 조각에 하나씩 연결했다. Pie 컴포넌트를 마운트한 뒤 조각 수를 확인했다. 각 조각의 datum.fill이 url(#gradientA)처럼 알맞은 gradient를 가리키는지도 봤다.
기능을 새로 구현한 건 아니다. 이미 있는 gradients 동작이 이후 변경에서 깨지는지 확인할 수 있도록 비어 있던 회귀 테스트를 채웠다. 변경도 테스트 파일 하나와 커밋 하나가 전부였다.
PR은 올린 당일 머지됐다. 처음에 겪었던 gradients 문제를 고친 건 아니었다. 라이브러리 코드를 읽다가 발견한 빈 테스트를 채운 작업이었다.
정확히는 첫 코드 기여였다
2022년에는 Vite 공식 문서 한국어 번역에 참여한 적이 있다. 문서 번역도 오픈소스 기여지만, 라이브러리 저장소에 테스트 코드를 보낸 건 이 Nivo PR이 처음이었다. 그래서 이 글에서는 첫 ‘코드 기여’라고 적었다.
그 뒤로는 라이브러리에서 문제가 생기면 사용법만 검색하지 않고 구현과 테스트도 같이 열어보게 됐다.