diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index 4bbbcdd2..952e8feb 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.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 diff --git a/.gitignore b/.gitignore index 705a6d5c..d3f19f80 100644 --- a/.gitignore +++ b/.gitignore @@ -67,4 +67,4 @@ ssmSetup.zsh # open-next -.open-next \ No newline at end of file +.open-next diff --git a/README.md b/README.md index f63cedbd..aa018f98 100644 --- a/README.md +++ b/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,10 +47,10 @@ 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: @@ -57,6 +58,7 @@ The full command can be seen in our [package.json](/package.json#16) file ```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/) diff --git a/app/(app)/get-started/_client.tsx b/app/(app)/get-started/_client.tsx index ac68a332..0ceb9b56 100644 --- a/app/(app)/get-started/_client.tsx +++ b/app/(app)/get-started/_client.tsx @@ -87,6 +87,7 @@ const GetStarted: NextPage = () => { )}