Testing

Playwright

Testing for this project is done with Playwright. Playwright is currently one of the most best and most popular testing frameworks in the ecosystem.

Its robust API, ease of use and developer experience have made it a top contender.

https://playwright.dev (opens in a new tab)

One Time DB setup

There will be a one time setup required to setup the test database before running the tests.

Simply create a test database using a tool such as PGadmin4 and substitute the connection string for the DATABASE_URL_TEST Env variable.

Substitute the env variable DATABASE_URL_TEST in the prisma.schema file and run npx prisma dev migrate to create the tables.

Thats it. Playwright will automatically clear this db after every test run.

Writing Tests

Writing tests is very easy with playwrights codegen feature.

Simply run the codegen extension and use your app based on how the test should be run.

The code for the test will be automatically generated for you!

See below for more details on working with playwright codegen.

Codegen playwright

https://playwright.dev/docs/codegen (opens in a new tab)

Alternatives

Jest and React Testing Library

Jest + Testing library is another common pattern for testing but is not used in this project.

Playwright is far more powerful than Jest. It can do everything Jest can do and more.

Jest with RTL is an older pattern. It`s a way to test components based on props and simple state changes and asserting on DOM elements.

This is good for writing simple isolated tests, however it`s far more valuable to write tests that mirror real user interactions as much as possible.

This will give you far more confidence that your app will work as intended for end users.

For this reason Playwright is used as it performs interactions in a browser as a real user would do.

If you would like simple Unit component tests, Storybook is also a solid option.

Cypress

Cypress is another common testing framework.

Playwright has a much better and simpler api.

Tests are written as closer to regular javascript, Cypress requires writing tests using its API, there`s also no async await or using third party libraries directly in the code but requires setting up Cypress commands.

Playwright has codegen and its overall easier and better DX writing tests with Playwright.

Implicit Tests

The E2E Tests are meant to be a combination of tests and provide a more realistic test of how users will actually use the app.

This means some tests are implicit. For example, testing authentication.

The testing is configured in a way where authentication is done as part of the testing setup. This means there isn't a separate test for login and authentication.

If a breaking change is introduced to the authentication flow, the test setup will fail and alert you. A dedicated test is not necessary as the setup failure will serve as sufficient feedback.

This is done to avoid unnecessary redundancy and keep the tests concise and focused which allows for faster test run times.

Other examples include the invite flow as part of the permissions tests.

If you would like dedicated tests simply copy the portion of code from other tests to better isolate and test functionality.