HW1의 Integration Test fail 관련하여 질문 드립니다.

[ohsuhyeon0119]

우선 오류 전체 내용은 세미나장님과 조교님께 제 HW1을 collaborator로 걸어 놓은 상태라 직접 보시는 것도 좋을 것 같습니다!
Actions - test로 확인한 오류 내용은 다음과 같습니다.

2 failed [chromium] › create-review.spec.ts:22:5 › 리뷰의 내용을 작성하여 작성 버튼을 누르면 맨 위에 리뷰가 추가된다 (모두 입력) ──────── [chromium] › create-review.spec.ts:88:5 › 한 번 오류가 났어도 고치면 작성된다 ─────────────────────────────────

26 | await fillCreateReviewModal(page, { image: 'image', name: 'snack', rating: '4', content: 'content' }); 27 | await reviewModal.getByTestId(TEST_ID['리뷰 작성 모달 작성 버튼']).click(); > 28 | await expect(reviewModal).not.toBeVisible();

첫번째 오류는 리뷰 내용을 작성해서 작성 버튼을 눌렀는데 리뷰가 추가 되지 않아서(toBeVisible하여) 오류가 생긴 것 같은데,
제 코드의 경우 hw.md에서 이미지 관련하여 언급했던 보너스 조건
"작성 버튼을 눌렀을 때, 미리보기 이미지가 로드되지 않았거나 로드할 수 없다면 이미지 입력칸 아래에 에러 메시지를 보여준다." 을 고려해서, src 값이 유효하지 않을 경우에는(정상 로드가 되지 않는 경우에는) 리뷰박스 리스트에 추가 되지 않고 에러메시지를 보여주게끔 작성했습니다. 따라서
fillCreateReviewModal(page, { image: 'image', name: 'snack', rating: '4', content: 'content' })
의 경우에 image 값이 'image'라는 단순 string의 테스트 케이스로 리뷰를 작성하려 시도해서 src를 유효하지 않은 것으로 확인하고 visible이 계속 유지돼서(createReviewModal 창이 계속 보여지므로) fail이 뜬 것 같습니다. (실제로 src 값에 관계없이 리뷰가 추가되도록 코드를 고쳐서 테스트를 다시 수행했을 때 오류가 뜨지 않았습니다.)
두 번째 오류 또한 image 값에 정상 src가 아니라 단순 'image' 가 입력돼서 fail이 뜬 것 같습니다...!

테스트 케이스에 맞게, 입력받은 src가 유효한지 관계없이 리뷰 추가가 되도록 코드를 변경해야 할지, 아니면 hw.md의 보너스 조건을 고려해서 완성본을 짜야 할지 궁금하여 질문드립니다!
제가 Playwright 이용한 Integration Test에 관하여 처음 접하여 부족한 점이 많고, 제 추측 자체가 잘못된 것일 수도 있어서, 혹시 틀리게 생각한 것이라면 바로 피드백 해주시면 감사하겠습니다!! 항상 많이 배웁니다 감사합니다~~

[woohm402]

제보해주신 이슈 확인했습니다! 잘 구현해 주셨고, 테스트케이스가 보너스 문제를 풀었을 때를 충분히 고려하지 못하여 생긴 문제였습니다.

크게 세 가지 문제가 있었는데,

1. 말씀주신 대로, 테스트케이스에서 'image'라는 invalid한 이미지 url을 넣고 있었습니다. 따라서 보너스를 구현해주신 분들의 경우 리뷰가 작성되지 않았을 것 같습니다.
2. 하지만 테스트케이스에서 ☝️ 을 수정해도 여전히 테스트는 fail하는데, 테스트가 이미지를 검증하는 1초를 기다리지 않고 바로 작성 버튼을 클릭하기 때문입니다. 이 문제를 해결하기 위해 보너스 스펙을 구현했는지 아닌지에 따라 분기를 칠 수도 있었지만 좀 투머치인 느낌이 있어서, 대신 보너스스펙에 "검증 중이면 button을 disable한다" 스펙을 추가했습니다. 어렵지 않은 스펙일 거라 이 부분 구현해주시면 될 것 같습니다! 찾아주셔서 감사합니다
   • 참고사항: integration 테스트 도구들은 "button을 클릭한다" 는 스펙에서 button이 disable되어 있으면 바로 클릭하는 대신 disabled={false} 가 될 때까지 기다렸다가 클릭합니다.
3. 이외에도 테스트케이스가 보너스 스펙 구현한 분과 구현하지 않은 분 모두를 커버할 수 있도록 조금 더 완화해서 수정 후 공지드렸습니다. seminar-2023 레포 git pull 해서 최신화 부탁드립니다.

불편을 드려 죄송합니다. 다음번부터는 조금 더 꼼꼼하게 확인해서 테스트케이스 제작하겠습니다 🙇

감사합니다 :)

---

세줄요약

1. 수현님 코드에는 이슈 없습니다.
2. 세미나 채널에 공지된 작성버튼 disable 스펙 구현 부탁드립니다!
3. 테스트케이스 로컬에 풀땡겨서 최신화 부탁드립니다!

[ohsuhyeon0119]

아 이해했습니다, 자세히 설명해주셔서 감사합니다!! 즐거운 주말 되세요!!