chore: moved out E2E details from README into their own doc

Author: JohnAllenTech

E2E Overview.md

@@ -0,0 +1,48 @@
+# End-to-End Testing with Playwright
+
+To run the end-to-end tests using Playwright, you need to configure your environment and follow these steps:
+
+### Environment Variables
+
+Ensure you have the following variables set in your `.env` file:
+
+- `E2E_USER_ID`: The ID of the E2E user for testing.
+- `E2E_USER_EMAIL`: The email of the E2E user for testing.
+- `E2E_USER_ONE_SESSION_ID`: The session ID that the user will use to authenticate.
+
+Note: The sample `.env` file is fine to use.
+
+### Session and User Setup
+
+First, you need to add your E2E test user to your locally running database. Do this by running the following script if you haven't already:
+
+```bash
+npm run db:seed
+```
+
+This will create a user and session for your E2E tests. Details of the E2E user created can be seen in `drizzle/seedE2E.ts`.
+
+### Running the Tests
+
+You can run the end-to-end tests using one of the following commands:
+
+For headless mode:
+
+```bash
+npx playwright test
+```
+
+For UI mode:
+
+```bash
+npx playwright test --ui
+```
+
+### Additional E2E Environment Variables
+
+- **E2E_USER_ONE_SESSION_ID**: This is the session token UUID for one E2E user.
+- **E2E_USER_TWO_SESSION_ID**: This is the session token UUID for another E2E user.
+- **E2E_USER_ONE_ID**: The user ID of one of the E2E users.
+- **E2E_USER_TWO_ID**: The user ID of another E2E user.
+
+These values are currently hardcoded and should be unique for each user.

README.md

@@ -41,37 +41,35 @@ GITHUB_SECRET=YOUR_GITHUB_APP_SECRET
 NEXTAUTH_URL=http://localhost:3000/api/auth
 ```
 
-For a more detailed how to guide on setting them up [go to the Environment Variables section](#environment-variables).
+For a more detailed guide on setting them up [go to the Environment Variables section](#environment-variables).
 
 **NOTE:** Before proceeding, [make sure your database is running](#database_url).
 
-6.  Setup the tables in the database with Drizzle by running:
+6. Setup the tables in the database with Drizzle by running:
 
 ```bash
 npm run db:migrate
 ```
 
-The full command can be seen in our [package.json](/package.json#16) file
+The full command can be seen in our [package.json](/package.json#16) file.
 
 7. Seed the database with some mock data by running:
 
 ```bash
 npm run db:seed
 ```
 
-The full command can be seen in our [package.json](/package.json#19) file
+The full command can be seen in our [package.json](/package.json#19) file.
 
 8. Finally, run the development server:
 
 ```bash
 npm run dev
 ```
 
-After completion of above commands, now -
+After completion of the above commands, navigate to [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 
-Navigate to [http://localhost:3000](http://localhost:3000) in your browser to see the result.
-
-You can start your journey by modifying `pages/index.tsx`. With Auto-update feature, pages updates as you edit the file.
+You can start your journey by modifying `pages/index.tsx`. With the auto-update feature, pages update as you edit the file.
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
@@ -89,49 +87,39 @@ To run this file, make sure you have [Docker installed](https://docs.docker.com/
 
 Run the command `docker compose up`.
 
-Alternatively, if you have PostgreSQL running locally then you can use your local connection string or grab one from a free service like [Supabase](https://supabase.com/docs/guides/database/connecting-to-postgres#finding-your-connection-string).
+Alternatively, if you have PostgreSQL running locally, you can use your local connection string or grab one from a free service like [Supabase](https://supabase.com/docs/guides/database/connecting-to-postgres#finding-your-connection-string).
 
 ### GITHUB_ID and GITHUB_SECRET
 
-Currently, we only allow authentication via GitHub. To enable this you need to have a `GITHUB_ID` and `GITHUB_SECRET` value.
+Currently, we only allow authentication via GitHub. To enable this, you need to have a `GITHUB_ID` and `GITHUB_SECRET` value.
 
-Setup your GitHub ID & Secret on GitHub:
+Set up your GitHub ID & Secret on GitHub:
 
-- [Click here](https://github.com/settings/applications/new) to setup New OAuth App and fill in the details as shown below.
+- [Click here](https://github.com/settings/applications/new) to set up a New OAuth App and fill in the details as shown below.
 
-For development, make sure you setup this with a **Homepage URL** of
+For development, make sure you set this up with a **Homepage URL** of
 
 ```
 http://localhost:3000/
 ```
 
-and **Authorization callback URL** of
+and an **Authorization callback URL** of
 
 ```
 http://localhost:3000/api/auth
 ```
 
-as shown in the image below:
-
-![Screenshot 2022-10-25 at 08 22 03](https://user-images.githubusercontent.com/12615742/197709325-50766dc2-2245-438c-8f71-09064fc3b123.png)
-
-After you click the "Register application" button you should see the `GITHUB_ID` and be able to generate a new client secret. You can see this in the screenshot below. 👇
-![Screenshot 2022-10-25 at 08 23 22](https://user-images.githubusercontent.com/12615742/197710695-d3ef9cb7-fe66-4a53-8b3e-d66064434068.png)
-After generating the secret, make sure you copy this value to your `.env` file as this value can not be seen again once you refresh the page. 👇
-![Screenshot 2022-10-25 at 08 26 04](https://user-images.githubusercontent.com/12615742/197710697-ef791d9e-b205-4667-a97c-477148917897.png)
+After you click the "Register application" button, you should see the `GITHUB_ID` and be able to generate a new client secret. After generating the secret, make sure you copy this value to your `.env` file as this value cannot be seen again once you refresh the page.
 
-More info on Authorizing OAuth in the GitHub documentation
-[here](https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps).
+More info on Authorizing OAuth in the GitHub documentation [here](https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps).
 
-### Setting up Passwordless auth locally
+### Setting up Passwordless Auth Locally
 
-In order to use Passwordless login locally you need to have a `ACCESS_KEY` and `SECRET_KEY` value.
+In order to use Passwordless login locally, you need to have an `ACCESS_KEY` and `SECRET_KEY` value.
 
-Niall has written a [tutorial](https://www.codu.co/articles/sending-emails-with-aws-ses-and-nodemailer-in-node-js-xfuucrri) on how to send emails with AWS SES and shows how to get these values.
+Check out the example `.env` file [here](./sample.env) to see how to populate these values.
 
-Check out the example .env file [here](./sample.env) to see how to populate these values
-
-**Note: Currenly the AWS region of the SNS service is hardcoded to "eu-west-1" it may be necessary to change this if your SNS service is in a different region**
+**Note:** Currently, the AWS region of the SNS service is hardcoded to "eu-west-1"; it may be necessary to change this if your SNS service is in a different region.
 
 ### NEXTAUTH_URL
 
@@ -141,85 +129,16 @@ You shouldn't need to change the default value here. This is a variable used by
 NEXTAUTH_URL=http://localhost:3000/api/auth
 ```
 
-### E2E_USER_ONE_SESSION_ID
-
-This is the sessionToken uuid that is used to identify a users current active session.
-This is currently hardcoded and their is no reason to change this value.
-**Note: This value must be different to E2E_USER_TWO_SESSION_ID**
-
-
-### E2E_USER_TWO_SESSION_ID
-
-This is the sessionToken uuid that is used to identify a users current active session.
-This is currently hardcoded and their is no reason to change this value.
-**Note: This value must be different to E2E_USER_ONE_SESSION_ID**
-
-
-### E2E_USER_ONE_ID
-
-This is the userId of one of our E2E users and is used for testing.
-This is currently hardcoded and there is no reason to change this value.
-**Note: This value must be different from E2E_USER_TWO_ID**
-
-
-### E2E_USER_TWO_ID
-
-This is the userId of one of our E2E users and is used for testing.
-This is currently hardcoded and there is no reason to change this value.
-**Note: This value must be different from E2E_USER_ONE_ID**
-
-For more information, you can read the documentation [here](https://next-auth.js.org/configuration/options).
-**Example .env file can be found [here](./sample.env). You can rename this to .env to get started**
+**Example .env file can be found [here](./sample.env). You can rename this to `.env` to get started.**
 
 ## 👨‍💻 Contribution Guidelines
 
 - Contributions are **greatly appreciated**. Contributions make the open-source community an amazing place to learn, inspire, and create.
-- Check out our [contribution guidelines](/CONTRIBUTING.md) for contributiong to our repo. It includes
+- Check out our [contribution guidelines](/CONTRIBUTING.md) for contributing to our repo. It includes
   - How to Contribute
   - How to create a Pull Request
   - Run Tests
-  - Also, Style Guide for Commit Messages
-
-## End-to-End Testing with Playwright
-
-To run the end-to-end tests using Playwright, you need to configure your environment and follow these steps:
-
-### Environment Variables
-
-Please ensure you have the following variables set in your `.env` file:
-
-- `E2E_USER_ID`: The id of the E2E user for testing.
-- `E2E_USER_EMAIL`: The email of the E2E user for testing.
-- `E2E_USER_ONE_SESSION_ID`: The session id that the user will use to authenticate.
-
-
-Note the sample .env [here](./sample.env) is fine to use.
-
-### Session and User setup
-
-First you need to add your E2E test user to your locally running database. Do this by running the following script if you havent already
-
-```
-npm run db:seed
-```
-
-This will create a user and session for your E2E tests. Details of the E2E user created can be seen [here](./drizzle/seedE2E.ts)
-
-### Running the Tests
-
-You can run the end-to-end tests using one of the following commands:
-
-For headless mode:
-
-```zsh
-npx playwright test
-```
-
-For UI mode:
-
-```zsh
-npx playwright test --ui
-```
+  - Style Guide for Commit Messages
 
 ## 📙 Prerequisite Skills to Contribute
 
@@ -246,10 +165,14 @@ To learn more about Next.js, take a look at the following resources:
 
 ### Editor Doc
 
-To learn about the editor shortcuts and hotkeys you can check out this document
+To learn about the editor shortcuts and hotkeys, you can check out this document:
+
+- [Markdoc Editor Hotkeys and Shortcuts](/EDITOR_SHORTCUTS.MD)
+
+## 🧪 E2E Testing
 
-- [Markdoc Editor Hotkeys and Shortcus](/EDITOR_SHORTCUTS.MD)
+For information on E2E testing, please refer to our dedicated documentation [here](./E2E%20Overview.md).
 
 ## 💥 Issues
 
-You are welcome to [open issues](https://github.com/codu-code/codu/issues/new/choose) to discuss ideas about improving our Codú. Enhancements are encouraged and appreciated.
+You are welcome to [open issues](https://github.com/codu-code/codu/issues/new/choose) to discuss ideas about improving Codú. Enhancements are encouraged and appreciated.