Backstop 을 도입해 보자

1. Backstop 설치
2. Backstop 실행 스크립트 추가

   1.     "backstop:init": "backstop init --config=backstop.config.js",
          "backstop:test": "backstop test --config=backstop.config.js",
          "backstop:reference": "backstop reference --config=backstop.config.js",
          "backstop:approve": "backstop approve --config=backstop.config.js",
          "backstop:openReport": "backstop openReport --config=backstop.config.js"

   2. init
      1. backstop 초기 설정을 해 줌 (backstop 관련 directory 들이 만들어짐)
      2. backstop.config.js >> 이건 backstop 설정 파일인데 깃에 올려야 할듯?
      3. init 하면 json 파일이 만들어져버리는데 이건 좀 더 고민을 해봐야 할 듯 싶다
   3. test
      1. test 하는 것임. 이전에 만들어졌던 screenshot 이랑 비교해서 diff 떠줌
   4. reference
      1. 맨 처음 스크린샷을 찍어 주는 명령어
      2. backstop 을 띄우고 초기에 딱 한번만 실행하면 됨
   5. approve
      1. 테스트가 실패되었을 때, 개발자가 의도한 것이 맞다면 approve 시켜서 이전 스크린샷을 새로운 스크린샷으로 교체함
   6. openReport
      1. 테스트는 안 하고 그냥 리포트만 띄우는 것

테스트

• base swiper 에서 억지로 height 를 1000px 로 만들어 줌
• backstop test 를 실행시켜 보니 바로 failed 뜸

2개가 실패했다고 뜸

• 이것은 또한 시각적으로 직접 비교해서 볼 수도 있음
• 뭐가 달라졌는지 핑크색으로 영역을 표시해 주고 마우스로 드래그 해서 비교해 볼 수도 있음

원하는 점

• 초기 목표에 맞게 PR 생성이 되면 test 를 실행시키고, failed 가 발생할 때만 뭔가의 봇이 알림을 줬으면 좋겠음
  • 봇은 teams 나 Bitbucket 댓글을 달아줬으면 좋겠음
  • 그 봇은 리포지토리에 저장된 이미지를 가지고 ~~~ 가 달라졌다고 보여줘야 함
• 그리고 backstop 이 생성해 준 index.html 을 스토리북에 추가하면 좋겠음 (가능하다면)

필요한 것

1. Bitbucket PR 이벤트 웹훅
   • Jenkins job 을 트리거해야 함
2. 새로운 Jenkin job 파이프라인
   • Backstop 실행하여 UI 테스트 수행하는 단계를 포함해야 함
3. (Bitbucket 댓글 봇을 만든다면)
   • Bitbucket 권한 및 인증 정보
   • PR 댓글 달아주는 스크립트
4. (teams 알림을 만든다면)
   • teams 웹훅

Jenkins job 이 새로 필요한 이유

1. PR 생성 이벤트를 받고 test 를 돌려야 하기 때문임
2. test 가 실패했을 경우 댓글이나 팀즈 알림을 줘야 하기 때문임

로컬에서 하면 왜 안 되는지

• 위에서 말했다시피 로컬에서 돌리려면 로컬 서버를 꼭 띄워야 함
• 로컬에서는 네트워크가 느릴수도 있음 (delay 5초는 줘야 할지도)
• 푸시할 때마다 그 과정을 기다리긴 힘듦

---

가능한 방법들

1. 로컬에서 깃 푸시할 때 테스트 실행 (husky)
   1. 로컬에 서버가 띄워져있어야 함
2. PR 생성 됐을 때 테스트 실행
   1. 젠킨스 잡이 추가되거나
   2. 기존 젠킨스 잡에 스크립트를 추가하면 될 것 같음
      1. 임시 도커를 띄워서 그것을 테스트…?
      2. 하지만 이것은 배포가 느려질 수도 있음
3. 주기적으로 테스트 실행
   1. 30분 단위로 테스트를 실행
   2. 젠킨스 배치가 추가되어야 함