Skip to content

Commit

Permalink
Merge branch 'develop' into chore/adding-my-posts-e2e-tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnAllenTech
JohnAllenTech authored Oct 29, 2024
2 parents 5a8f459 + 60267e5 commit aea9ff4
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 118 deletions.
48 changes: 48 additions & 0 deletions E2E Overview.md
View file
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

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.
133 changes: 28 additions & 105 deletions README.md
View file
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:

```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.

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

```
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.
15 changes: 2 additions & 13 deletions components/ArticlePreview/ArticlePreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { Temporal } from "@js-temporal/polyfill";
import {
BookmarkIcon,
EllipsisHorizontalIcon,
HeartIcon,
} from "@heroicons/react/20/solid";
import {
Menu,
Expand Down Expand Up @@ -56,16 +55,15 @@ const ArticlePreview: NextPage<Props> = ({
menuOptions,
showBookmark = true,
bookmarkedInitialState = false,
likes,
}) => {
const { data: session } = useSession();
const [bookmarked, setIsBookmarked] = useState(bookmarkedInitialState);
const howManySavedToShow = 3;
const { data: bookmarksData, refetch } = api.post.myBookmarks.useQuery(

const { refetch } = api.post.myBookmarks.useQuery(
{ limit: howManySavedToShow },
{ enabled: !!session },
);
const bookmarks = bookmarksData?.bookmarks;
const dateTime = Temporal.Instant.from(new Date(date).toISOString());
const readableDate = dateTime.toLocaleString(["en-IE"], {
year: "numeric",
Expand Down Expand Up @@ -128,15 +126,6 @@ const ArticlePreview: NextPage<Props> = ({
<>
<span aria-hidden="true">&middot;</span>
<span>{readTime} min read</span>
{likes && (
<>
<span aria-hidden="true">&middot;</span>
<span data-likes={likes}>{likes}</span>
<HeartIcon
className={`relative top-[1px] h-3.5 w-3.5 fill-red-400`}
/>
</>
)}
</>
)}
<div className="flex items-center justify-start"></div>
Expand Down

0 comments on commit aea9ff4

Please sign in to comment.