Frontend E2E(End to End) Testing: Cypress

[jimin9038]

Describe the problem and solution

E2E Test를 도입하면..

• 사용자 관점에서 테스트가 가능합니다.
• 사용자의 시나리오를 스크립트를 통해 작성하여 브라우저 내에서 실행 할 수 있습니다.
• 실제 사용자가 사용하는 상황에서 발생하는 에러를 확인 할 수 있습니다.

E2E Test 중 Cypress를 도입하는 이유

Pros 👍

• 문서화가 굉장히 잘 되어있습니다.
• API가 간단해서 처음 사용해도 어렵지 않습니다. (Mocha 등 기존의 테스팅 툴을 기반으로 API가 짜여져 있습니다.)
• Electron 기반으로, 스크린샷, 비디오 레코딩 등 다양한 기능을 지원합니다.
• 브라우저 내에서 작동하는 것이고 GUI 환경에서 주로 쓰기 때문에 유저들의 실제 환경과 크게 다르지 않습니다.

Cons 👎

• 네이티브 환경 이외에 작동이 어렵습니다.
• 테스트 하나하나가 오래 걸립니다. (예를 들어, 문제 하나를 만든다고 하면 글자들을 타이핑하는 시간 등이 오래 걸립니다.)

To Be discussed 🤔

1. Cypress는 Electron 기반 앱이라 Cypress의 많은 기능을 Dev container에서는 원래 사용할 수 없습니다. 따라서, 이전 리포의 PR에서는 x11-bridge 컨테이너를 사용하여 디스플레이 포워딩을 하는 방법으로 설정을 해두었습니다. 하지만 이를 위해 초기 설정에 많은 시간이 들어가고, 환경에 따라 오류가 많이 나며, 사용성도 좋지 않아 이를 보완할 설정이 있을지 찾아봐야 합니다. 없다면 headless 모드로만 사용할 수 있게 해두는 것도 나쁘지 않을 것 같습니다.

2. Cypress 같은 E2E Test Tool을 사용하려면 DB Seed 커맨드 제공이 전제되어야 합니다. (Mocking으로 하는 건 진정한 E2E Test는 아니니까요) Prisma(혹은 Type ORM)에서 Seed 관련 설정을 찾아봐야 합니다.

3. Cypress가 Github Actions에서 돌아갈 수 있는지 확인이 필요합니다. Cypress는 오픈소스이지만 Cypress dashboard는 유료 서비스라, 공식으로 지원하는 Github Action 템플릿인 cypress-io/github-action을 사용할 수 있는지 검토해야 하고, 아니면 다른 워크플로우를 만들어야 합니다.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines
• Check that there isn't already an issue

[dotoleeoak]

Cypress 같은 E2E Test Tool을 사용하려면 DB Seed 커맨드 제공이 전제되어야 합니다. (Mocking으로 하는 건 진정한 E2E Test는 아니니까요) Prisma(혹은 Type ORM)에서 Seed 관련 설정을 찾아봐야 합니다.

Prisma에서 seeding은 문제 없이 지원하니까 상관 없습니다.
https://www.prisma.io/docs/guides/database/seed-database

seed 파일 예: https://github.com/prisma/prisma-examples/blob/latest/typescript/rest-nestjs/prisma/seed.ts

[jimin9038]

#1898 에서 작업중입니다.

[jimin9038]

Changed the connected Notion task status to done

TAS- 페이지 배너 리디자인