From 8d1e3003f0da1b5cad206445932d53b55e80627c Mon Sep 17 00:00:00 2001 From: John <46611809+JohnAllenTech@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:16:47 -0600 Subject: [PATCH 1/2] chore: moved out E2E details from README into their own doc (#1185) --- E2E Overview.md | 48 +++++++++++++++++ README.md | 133 ++++++++++-------------------------------------- 2 files changed, 76 insertions(+), 105 deletions(-) create mode 100644 E2E Overview.md diff --git a/E2E Overview.md b/E2E Overview.md new file mode 100644 index 00000000..54197f59 --- /dev/null +++ b/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. diff --git a/README.md b/README.md index 1bbcb11b..a366c088 100644 --- a/README.md +++ b/README.md @@ -41,17 +41,17 @@ 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: @@ -59,7 +59,7 @@ The full command can be seen in our [package.json](/package.json#16) file 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: @@ -67,11 +67,9 @@ The full command can be seen in our [package.json](/package.json#19) file 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. From 60267e5029932ce0016f1d8a64e6896bf3e1e916 Mon Sep 17 00:00:00 2001 From: Niall Maher Date: Mon, 28 Oct 2024 22:19:48 +0000 Subject: [PATCH 2/2] Removed the likes from the article preview (#1186) --- components/ArticlePreview/ArticlePreview.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx index fe33136b..559451a8 100644 --- a/components/ArticlePreview/ArticlePreview.tsx +++ b/components/ArticlePreview/ArticlePreview.tsx @@ -7,7 +7,6 @@ import { Temporal } from "@js-temporal/polyfill"; import { BookmarkIcon, EllipsisHorizontalIcon, - HeartIcon, } from "@heroicons/react/20/solid"; import { Menu, @@ -56,16 +55,15 @@ const ArticlePreview: NextPage = ({ 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", @@ -128,15 +126,6 @@ const ArticlePreview: NextPage = ({ <> {readTime} min read - {likes && ( - <> - - {likes} - - - )} )}