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: [email protected]
+      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/[email protected]
-      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/[email protected]
+        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 });