Fix/e2e tests

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });

.github/workflows/e2e-tests.yml

@@ -18,20 +18,20 @@ jobs:
  initial-checks:
  runs-on: ubuntu-latest
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
 
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
 
- - name: Install dependencies
- run: npm ci
+- name: Install dependencies
+run: npm ci
 
  e2e:
  needs: initial-checks
@@ -44,66 +44,69 @@ jobs:
  GITHUB_ID: ${{ secrets.E2E_GITHUB_ID }}
  GITHUB_SECRET: ${{ secrets.E2E_GITHUB_SECRET }}
  NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+ E2E_USER_EMAIL: e2e@codu.co
+ E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
+ E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
  steps:
- - name: Checkout repository
- uses: actions/checkout@v4
- with:
- ref: ${{ github.event.pull_request.head.sha }}
- fetch-depth: 0
-
- - name: Setup Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 'lts/*'
- cache: 'npm'
-
- - name: Cache Playwright browsers
- uses: actions/cache@v3
- with:
- path: ~/.cache/ms-playwright
- key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
- restore-keys: |
- ${{ runner.os }}-playwright-
-
- - name: Run docker-compose
- uses: isbang/compose-action@v1.5.1
- with:
- compose-file: "./docker-compose.yml"
- down-flags: "--volumes"
- services: |
- db
-
- - name: Wait for DB to be ready
- run: |
- timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
- shell: bash
-
- - name: Install dependencies
- run: npm ci
-
- - name: Install Playwright browsers
- run: npx playwright install --with-deps
- if: steps.playwright-cache.outputs.cache-hit != 'true'
-
- - name: Seed database
- run: |
- npm run db:push
- npm run db:seed
-
- - name: Run Playwright tests
- id: playwright-tests
- run: npx playwright test
- continue-on-error: true
-
- - name: Upload Playwright report
- uses: actions/upload-artifact@v4
- if: always()
- with:
- name: playwright-report
- path: playwright-report/
- retention-days: 30
-
- - name: Check test results
- if: steps.playwright-tests.outcome == 'failure'
- run: exit 1
+- name: Checkout repository
+uses: actions/checkout@v4
+with:
+ref: ${{ github.event.pull_request.head.sha }}
+fetch-depth: 0
+
+- name: Setup Node.js
+uses: actions/setup-node@v4
+with:
+node-version: "lts/*"
+cache: "npm"
+
+- name: Cache Playwright browsers
+uses: actions/cache@v3
+with:
+path: ~/.cache/ms-playwright
+key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+restore-keys: |
+${{ runner.os }}-playwright-
+
+- name: Run docker-compose
+uses: isbang/compose-action@v1.5.1
+with:
+compose-file: "./docker-compose.yml"
+down-flags: "--volumes"
+services: |
+db
+
+- name: Wait for DB to be ready
+run: |
+timeout 60s bash -c 'until nc -z localhost 5432; do echo "Waiting for database connection..."; sleep 2; done'
+shell: bash
+
+- name: Install dependencies
+run: npm ci
+
+- name: Install Playwright browsers
+run: npx playwright install --with-deps
+if: steps.playwright-cache.outputs.cache-hit != 'true'
+
+- name: Seed database
+run: |
+npm run db:push
+npm run db:seed
+
+- name: Run Playwright tests
+id: playwright-tests
+run: npx playwright test
+continue-on-error: true
+
+- name: Upload Playwright report
+uses: actions/upload-artifact@v4
+if: always()
+with:
+name: playwright-report
+path: playwright-report/
+retention-days: 30
+
+- name: Check test results
+if: steps.playwright-tests.outcome == 'failure'
+run: exit 1

.gitignore

@@ -67,4 +67,4 @@ ssmSetup.zsh
 
 
 # open-next
-.open-next
+.open-next

README.md

@@ -26,6 +26,7 @@ We have a fantastic community growing on Discord. Click [here](https://discord.g
 ```bash
 npm install
 ```
+
 - If you have any issues installing dependencies, check your node version against that defined in the `.nvmrc`. If you're using `nvm`, you can run `nvm use` before installing dependencies.
 
 5. Create a `.env` file and add the following variables. You can copy the contents of `sample.env` with `cat sample.env > .env`.
@@ -46,17 +47,18 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 
 6. Setup the tables in the database with Drizzle by running:
 
-
 ```bash
 npm run db:push
 ```
+
 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
 
 8. Finally, run the development server:
@@ -94,17 +96,21 @@ Alternatively, if you have PostgreSQL running locally then you can use your loca
 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:
-- [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 setup New OAuth App and fill in the details as shown below.
 
 For development, make sure you setup this with a **Homepage URL** of
+
 ```
 http://localhost:3000/
 ```
+
 and **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)
@@ -135,6 +141,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_SESSION_ID
+
+This is the sessionToken uuid that .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
+### E2E_USER_ID
+
+This is the userId if the E2E user used for testing .
+This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
+
 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**
 
@@ -147,6 +163,47 @@ For more information, you can read the documentation [here](https://next-auth.js
  - 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_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
+```
+
 ## 📙 Prerequisite Skills to Contribute
 
 - [Git](https://git-scm.com/)

app/(app)/get-started/_client.tsx

@@ -87,6 +87,7 @@ const GetStarted: NextPage = () => {
  )}
 
  <button
+ data-testid="github-login-button"
  type="button"
  onClick={async () => {
  await signIn("github", { callbackUrl: redirectTo });
@@ -117,6 +118,7 @@ const GetStarted: NextPage = () => {
  Continue with GitHub
  </button>
  <button
+ data-testid="gitlab-login-button"
  type="button"
  onClick={async () => {
  await signIn("gitlab", { callbackUrl: redirectTo });