Supaplate Docs
🇬🇧🇰🇷

Testing

Supaplate uses Playwright for end-to-end testing of the authentication and user pages as well as a couple of settings.

In this section we will learn about the tests we have in the project, how to run them and configure them.

Tests

Here are all the tests we have in the project:

Testing

We mostly have two test categories, UI tests and 'Flow' tests.

UI tests are tests that check the UI of the application, they are useful to make sure the UI is working as expected, like checking that a field is displayed correctly or that an error message is displayed when a field is empty.

Flow tests are tests that check the flow of the application, they are useful to make sure the flow of the application is working as expected.

For example, a flow test would be to check that a user can sign up, log in and log out.

'Flow' tests are much more slower to run than UI tests because they need to go through the full flow of the application, like creating a user, confirming their email, logging in, doing actions, etc.

Scripts

In the package.json file you will find the following testing related scripts:

"scripts":{
"test:e2e":"npx playwright test",
"test:e2e:ui":"npx playwright test --ui"
}
  • test:e2e: Runs the tests in headless mode, that means, without opening a browser window, everything is done from the command line.
  • test:e2e:ui: Runs the tests in headed mode, that means, opening a browser window and running the tests in the browser.

Before you test

There are some environment variables that need to be set for the tests to work, so make sure you set them first.

Because the tests simulate a real user, confirmation, reset password and other emails are sent, to avoid flaky tests make sure you have set up a custom SMTP server.

Writing tests

The tests are located in the ./e2e directory, each directory is named after the feature and the file is named after the thing we are testing, for example:

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

Playwright is configured to read files in the ./e2e directory and use the .env file to read the environment variables.

Environment variables

Here are the environment variables you need to set for the tests to work:

# 🚨 All these emails should be different from each other 🚨
# Sign Up Test
JOIN_TEST_UNCONFIRMED_USER_EMAIL=""
JOIN_TEST_EXISTING_USER_EMAIL=""
# Login Test
LOGIN_TEST_USER_EMAIL=""
# Forgot Password Test
FORGOT_PASSWORD_TEST_USER_EMAIL=""
# Magic Link Test
MAGIC_LINK_TEST_USER_EMAIL=""
# Change Email Test
CHANGE_EMAIL_TEST_USER_EMAIL=""
CHANGE_EMAIL_TEST_USER_NEW_EMAIL=""
# Change Password Test
CHANGE_PASSWORD_TEST_USER_EMAIL=""
# Edit Profile Test
EDIT_PROFILE_TEST_USER_EMAIL=""
# Delete Profile Test
DELETE_PROFILE_TEST_USER_EMAIL=""

Every test will create a new user with the email you set in the environment variables and delete it after the test is done.

⚠️Make sure the emails are all yours, all different and not used by other users⚠️

One way of getting unlimited email addresses is to use your Gmail email address and write a '+' and a random string to the email address, for example: if your email address is nicolas@gmail.com, you can use nicolas+test@gmail.com, nicolas+test2@gmail.com, etc.

This way all the emails 'look' different˜ but they are all delivered to the same inbox.