test/#84 Divider vrt 테스트 추가 #91
Conversation
gs0428
requested review from
minai621,
ghdtjgus76 and
ShinYoung-Kim
as code owners
Walkthrough이 변경 사항은 Playwright를 사용하여 "Divider" 컴포넌트에 대한 엔드 투 엔드 테스트를 추가하는 새로운 파일을 도입합니다. 테스트는 시각적 회귀 테스트와 접근성 테스트로 구성되며, 각 테스트는 관련된 케이스를 그룹화하여 유지 관리성과 가독성을 향상시킵니다. 이로써 Divider 컴포넌트의 시각적 무결성과 접근성 준수를 보장합니다. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Tip OpenAI O1 model for chat
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (3)
Files skipped from review due to trivial changes (1)
Additional comments not posted (6)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- e2e/components/Divider.test.ts (1 hunks)
Additional comments not posted (3)
e2e/components/Divider.test.ts (3)
1-5: 적절한 라이브러리 및 유틸리티 가져오기테스트에 필요한 Playwright 테스트 라이브러리와 접근성, 스토리북 방문 유틸리티가 적절하게 가져와졌습니다.
6-13: 수평 구분선 시각적 회귀 테스트 승인수평 구분선에 대한 시각적 회귀 테스트가 잘 구성되어 있으며, 스크린샷을 사용하여 시각적 일관성을 확인합니다.
15-21: 수직 구분선 시각적 회귀 테스트 승인수직 구분선에 대한 시각적 회귀 테스트도 잘 구성되어 있으며, 스크린샷을 통해 시각적 일관성을 확인합니다.
e2e/components/Divider.test.ts
Outdated
| test("axe를 사용하여 자동 접근성 테스트(horizontal)", async ({ page }: { page: Page }) => { | ||
| await visit(page, { | ||
| id: "ui-divider--horizontal", | ||
| }); | ||
|
|
||
| const accessibilityScanResults = await axeAccessibilityScan(page); | ||
| expect(accessibilityScanResults.violations).toEqual([]); | ||
| }); | ||
|
|
||
| test("axe를 사용하여 자동 접근성 테스트(vertical)", async ({ page }: { page: Page }) => { | ||
| await visit(page, { | ||
| id: "ui-divider--vertical", | ||
| }); | ||
|
|
||
| const accessibilityScanResults = await axeAccessibilityScan(page); | ||
| expect(accessibilityScanResults.violations).toEqual([]); | ||
| }); |
There was a problem hiding this comment.
접근성 테스트 승인 및 개선 제안
axe 도구를 사용한 수평 및 수직 구분선의 접근성 테스트가 잘 구성되어 있습니다. 접근성 검사 결과가 기대한 대로 비어 있는 배열을 반환하는지 확인합니다. 추가적으로, 접근성 검사 결과에 대한 더 상세한 검증이나 예외 처리를 고려할 수 있습니다.
접근성 검사 결과에 대한 예외 처리를 추가하여, 실패한 경우에 대한 로깅이나 추가적인 조치를 취할 수 있도록 개선하는 것을 제안합니다.
github-actions
bot
added
D-2
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
minai621
added
VRT
스냅샷이랑 results 폴더내에 있는 것들도 지울까요? |
다른 분들 PR 리뷰 끝나고 나면 수정하고 push 하면 될 것 같습니다! |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=60 🐱 |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=61 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=62 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=63 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=64 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
* chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경
* chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경
* chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경
* chore: chromatic_auto_deploy 코드 리뷰 반영
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* chore: 코드 리뷰 반영
* chore: ${action} 캐시 형식으로 각 step name 변경
* chore: 각 action 최신 버전을 사용하도록 버전 수정
* chore: 의존성 설치 관련 스크립트 분리 후 재사용
* chore: playwright 설치 관련 스크립트 분리 후 재사용
* chore: 잘못된 경로 설정 수정
* chore: 잘못된 경로 설정 수정
* chore: pnpm, node 버전 환경 변수로 불러오도록 설정
* chore: 환경 변수 설정 별도 스크립트로 분리
* chore: pnpm/action-setup v4 버전으로 변경
* chore: eol 이슈 해결
* chore: 워크플로우 name 변경
---------
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=65 🐱 |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
VRT 테스트 성공VRT 테스트가 성공적으로 완료되었습니다. |
|
🐱 스토리북이 배포되었습니다: https://www.chromatic.com/build?appId=667edcfe9b923ba1892556f4&number=66 🐱 |
* test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* feat: hr 태그 style 초기화하는 로직 생성 * docs: Horizontal일 떄 args 추가 * test/#84 Divider vrt 테스트 추가 (#91) * test: Divider 컴포넌트의 e2e 테스트 코드 작성 * chore: Button 관련 파일들 모두 삭제 * rename: 컴포넌트명 케밥케이스로 변경 * chore: 테스트 파일 내부 텍스트 변경 * chore: 캐시된 내용 삭제 * rename: e2e 테스트 폴더 구조 변경 * feat/#50 github action 워크플로우 최적화 (#90) * chore: 크로마틱 배포 시 pnpm 캐시 사용하도록 변경 * chore: VRT 스냅샷 업데이트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: PR VRT 테스트 시 pnpm, playwright 캐시 사용하도록 변경 * chore: chromatic_auto_deploy 코드 리뷰 반영 Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore: 코드 리뷰 반영 * chore: ${action} 캐시 형식으로 각 step name 변경 * chore: 각 action 최신 버전을 사용하도록 버전 수정 * chore: 의존성 설치 관련 스크립트 분리 후 재사용 * chore: playwright 설치 관련 스크립트 분리 후 재사용 * chore: 잘못된 경로 설정 수정 * chore: 잘못된 경로 설정 수정 * chore: pnpm, node 버전 환경 변수로 불러오도록 설정 * chore: 환경 변수 설정 별도 스크립트로 분리 * chore: pnpm/action-setup v4 버전으로 변경 * chore: eol 이슈 해결 * chore: 워크플로우 name 변경 --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * feat/#85 codegen에 e2e 테스트 코드 템플릿 생성 및 적용 (#92) * feat: e2e 테스트 코드 템플릿 파일 생성 * feat: e2e 테스트 코드 템플릿 파일 생성기 config 작성 * chore: e2e 테스트 파일 생성기 파일명 kebabCase로 수정 * chore: 예시 버튼 e2e 테스트 파일 삭제 * chore: 스토리북 템플릿 id ui로 시작되도록 수정 * fix: e2e 테스트 plob 템플릿 수정 --------- Co-authored-by: 홍서현 <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore/#93 husky 오류 해결 (#112) * fix: pre-commit 오류 일으키는 코드 제거 * fix: jest testMatch 수정 * refactor: husky 구버전 관련 코드 pre push에서 제거 --------- Co-authored-by: 홍서현 <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: ShinYoung-Kim <[email protected]>
요약 (Summary)
Divider 컴포넌트의 e2e 테스트 코드를 작성했습니다.
배경 (Background)
Divider 컴포넌트의 시각적 회귀 테스트가 필요하여 playwright를 이용한 e2e 테스트 코드를 작성하게 되었습니다.
목표 (Goals)
이외 고려 사항들 (Other Considerations)
관련 이슈
Summary by CodeRabbit