Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Splitting out E2E details into their own doc #1185

Merged
merged 1 commit into from
Oct 28, 2024
Merged

Splitting out E2E details into their own doc #1185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions E2E Overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix heading hierarchy.

The heading level jumps from h1 to h3. Heading levels should only increment by one level at a time.

Apply this diff:

-### Environment Variables
+## Environment Variables
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
### Environment Variables
## Environment Variables
🧰 Tools
🪛 Markdownlint

5-5: Expected: h2; Actual: h3
Heading levels should only increment by one level at a time

(MD001, heading-increment)


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`.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Documentation needs to be updated with correct file reference

The documentation incorrectly references drizzle/seedE2E.ts, but the E2E user setup is actually implemented in drizzle/seed.ts. The file contains the E2E user creation logic in the seedE2EUser and seedE2EUserSession functions, along with the E2E user configuration constants.

  • Update the documentation to reference drizzle/seed.ts instead of drizzle/seedE2E.ts
🔗 Analysis chain

Verify the referenced seed file location.

The documentation references drizzle/seedE2E.ts. Let's verify this file exists and contains the E2E user details.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify the existence and content of the seed file
if fd -t f "seedE2E.ts" drizzle; then
  echo "File exists. Checking content for E2E user details..."
  rg -A 5 "E2E.*user" drizzle/seedE2E.ts
else
  echo "Warning: Referenced file 'drizzle/seedE2E.ts' not found"
fi

Length of output: 245

Script:

#!/bin/bash
# Let's search for any seed or E2E related files in the entire repository
fd -t f -e ts "seed|e2e" --ignore-case

# Also search for files containing E2E user setup content
rg -l "E2E.*user|test.*user|seed.*user" -g "*.ts"

Length of output: 201

Script:

#!/bin/bash
# Let's check the content of seed.ts and e2e/utils/utils.ts for user setup details
echo "=== Content of drizzle/seed.ts ==="
cat drizzle/seed.ts

echo -e "\n=== Content of e2e/utils/utils.ts ==="
cat e2e/utils/utils.ts

Length of output: 10266


### 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.
133 changes: 28 additions & 105 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix grammar: "Setup" should be "Set up"

"Setup" is a noun, while "Set up" is the correct verb form for this instruction.

-6. Setup the tables in the database with Drizzle by running:
+6. Set up the tables in the database with Drizzle by running:
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
6. Setup the tables in the database with Drizzle by running:
6. Set up the tables in the database with Drizzle by running:
🧰 Tools
🪛 LanguageTool

[grammar] ~48-~48: This sentence should probably be started with a verb instead of the noun ‘Setup’. If not, consider inserting a comma for better clarity.
Context: ...atabase is running](#database_url). 6. Setup the tables in the database with Drizzle...

(SENT_START_NN_DT)


```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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix package.json link format

The link to package.json should use a relative path format.

-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#L16) file.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
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#L16) 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.

Expand All @@ -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

```
Comment on lines +100 to 108
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add language specifiers to code blocks

Code blocks should specify their language for proper syntax highlighting.

-```
+```plaintext
 http://localhost:3000/

- +plaintext
http://localhost:3000/api/auth

🧰 Tools
🪛 Markdownlint

102-102: null
Fenced code blocks should have a language specified

(MD040, fenced-code-language)

108-108: null
Fenced code blocks should have a language specified

(MD040, fenced-code-language)

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

Expand All @@ -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

Expand All @@ -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.
Loading