VizDiff

VizDiff는 팀이 이미 작성한 스토리를 읽으므로 따로 유지할 테스트 모음이 없습니다. 파이프라인이 Storybook을 빌드하면 CLI가 결과를 업로드하고 도구가 스토리마다 스크린샷 한 장을 렌더링합니다. Storybook에 컴포넌트를 추가하면 별도 설정 없이 다음 비교에 나타납니다.

이 도구는 GitLab 병합 요청에 커밋 상태를, GitHub 풀 리퀘스트에 검사를 올립니다. GitLab 시각적 테스트와 GitHub 시각적 테스트가 같은 흐름에 올라탑니다. 스크린샷이 렌더링되는 동안, 그리고 새로 생기거나 바뀐 것을 누군가 검토하는 동안 이 검사는 대기 상태로 남습니다. 바뀐 게 없으면 스스로 성공으로 바뀌므로, 일상적인 커밋은 아무도 손대지 않고 통과합니다.

바뀐 스토리는 Old, New, Diff, 2-Up 네 가지 보기를 갖춘 비교 대화상자에서 열립니다. Diff 보기는 픽셀 차이 도구처럼 움직인 픽셀을 강조하고, 2-Up 모드는 두 버전을 나란히 놓습니다. 화살표 키로 다음으로 넘어갈 수 있어, 한 브랜치가 수십 개 스토리를 건드릴 때 특히 유용합니다.

승인된 스크린샷은 다음 빌드가 비교되는 기준선이 되고, 팀 전체가 같은 묶음으로 작업합니다. 스크린샷은 자신의 S3 호환 버킷에 저장되므로 참조 이미지가 인프라를 벗어나지 않습니다. 승인된 스크린샷이 있는 커밋에서 브랜치를 따면 비교가 의미를 유지하고, 전부 새 것으로 초기화되지 않습니다.

VizDiff는 MIT 라이선스 오픈 소스 프로젝트로 배포되며, api, worker, frontend 세 서비스로 PostgreSQL과 직접 마련한 버킷 위에서 돌아갑니다. 버전이 붙은 다중 아키텍처 이미지가 GitHub Container Registry에 올라가고, Docker Compose 파일과 Helm 차트가 모두 설치를 담당합니다. 공급업체 계정도, 사용자당 요금도 없습니다.