Testing

Supaplate는 Playwright를 사용하여 인증 및 인증 유저 페이지를 포함한 End-to-End(E2E) 테스트를 수행하며, 일부 설정도 테스트합니다.

이 섹션에서는 프로젝트의 테스트에 대해 배우고, 테스트를 실행하고 구성하는 방법에 대해 알아보겠습니다.

테스트

프로젝트에서 실행되는 모든 테스트는 다음과 같습니다:

크게 UI 테스트와 'Flow' 테스트, 두 가지 카테고리로 나뉩니다:

UI 테스트는 애플리케이션의 UI를 확인하는 테스트로, 필드가 올바르게 표시되는지 또는 필드가 비어 있을 때 오류 메시지가 표시되는지 확인하는 등 UI가 예상대로 작동하는지 확인하는 데 유용합니다.

Flow 테스트는 애플리케이션의 흐름을 확인하는 테스트로, 애플리케이션의 플로우가 예상대로 작동하는지 확인하는 데 유용합니다.

예를 들어, Flow 테스트는 유저가 회원가입, 로그인, 로그아웃을 할 수 있는지 확인하는 것입니다.

'Flow' 테스트는 유저 생성, 이메일 확인, 로그인, 작업 수행 등 애플리케이션의 전체 흐름을 거쳐야 하기 때문에 UI 테스트보다 실행 속도가 훨씬 느립니다.

Scripts

package.json 파일에는 다음과 같은 테스트 관련 스크립트가 포함되어 있습니다:

"scripts":{
"test:e2e":"npx playwright test",
"test:e2e:ui":"npx playwright test --ui"
}

• test:e2e: Headless 모드로 테스트를 실행합니다. 즉, 브라우저 창을 열지 않고 커맨드 라인에서 모든 작업을 수행합니다.
• test:e2e:ui: Headed 모드, 즉 브라우저 창을 열고 브라우저에서 테스트를 실행하는 방식으로 작업을 수행합니다.

테스트 작성하기

모든 테스트는 ./e2e 디렉토리에 저장되며, 각 디렉토리는 기능의 이름을 따르고 파일 이름은 테스트 대상의 이름을 따라 정합니다. 예시:

./e2e/auth/login.spec.ts
./e2e/auth/forgot-password.spec.ts

Playwright는 ./e2e 디렉토리의 파일을 읽도록 구성되어 있으며, .env 파일에서 환경 변수를 읽습니다.

환경 변수

테스트가 작동하기 위해 설정해야 하는 환경 변수는 다음과 같습니다:

# 🚨 이 모든 이메일은 서로 달라야 합니다 🚨
# 회원가입 테스트
JOIN_TEST_UNCONFIRMED_USER_EMAIL=""
JOIN_TEST_EXISTING_USER_EMAIL=""
# 로그인 테스트
LOGIN_TEST_USER_EMAIL=""
# 비밀번호 찾기 테스트
FORGOT_PASSWORD_TEST_USER_EMAIL=""
# 매직링크 테스트
MAGIC_LINK_TEST_USER_EMAIL=""
# 이메일 변경 테스트
CHANGE_EMAIL_TEST_USER_EMAIL=""
CHANGE_EMAIL_TEST_USER_NEW_EMAIL=""
# 비밀번호 변경 테스트
CHANGE_PASSWORD_TEST_USER_EMAIL=""
# 프로필 편집 테스트
EDIT_PROFILE_TEST_USER_EMAIL=""
# 프로필 삭제 테스트
DELETE_PROFILE_TEST_USER_EMAIL=""

모든 테스트는 환경 변수에 설정한 이메일로 새 사용자를 생성하고, 테스트가 완료된 후 삭제합니다.

⚠모든 이메일 주소가 본인 소유의 주소이고, 서로 다르며 다른 사용자가 사용 중이지 않은지 확인하세요⚠

무제한 이메일 주소를 얻는 한 가지 방법은 Gmail 이메일 주소를 사용하고 이메일 주소에 '+'와 임의의 문자열을 쓰는 것입니다(예시: 이메일 주소가 nicolas@gmail.com이면 nicolas+test@gmail.com, nicolas+test2@gmail.com 등을 사용할 수 있습니다.)

이 방법을 사용하면 모든 이메일 주소는 '다르게' 보이지만 전부 같은 이메일의 편지함으로 배달됩니다.