Adding E2E tests and local MySQL environment

.github/workflows/ci.yml

@@ -1,6 +1,10 @@
 name: CI
 
-on: [push, pull_request]
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
 
 env:
   DATABASE_URL: "https://fake.com"
@@ -17,13 +21,10 @@ jobs:
         run: cp .env.example .env
 
       - name: Install Dependencies
-        run: npm install
+        run: npm ci
 
       - name: Typecheck
         run: npm run typecheck
 
       - name: Lint
         run: npm run lint
-
-      - name: Print Environment Variable
-        run: echo $MY_ENV_VAR

.github/workflows/e2e-tests.yml

@@ -0,0 +1,56 @@
+name: E2E Tests
+
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.42.0-jammy
+
+    services:
+      mysql:
+        image: mysql:8.0
+        env:
+          MYSQL_ROOT_PASSWORD: secret
+          MYSQL_DATABASE: testdb
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Create dummy env file
+        run: cp .env.example .env
+      - name: Install Dependencies
+        run: npm ci
+      - name: Seed Database
+        run: |
+          npx prisma db push
+          npx prisma db seed
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Start dev server
+        run: npm run dev > /dev/null 2>&1 &
+      - name: Wait for dev server to be ready
+        run: timeout 60s sh -c 'until curl http://localhost:3000 -I; do echo "Waiting for dev server to be running..."; sleep 2; done'
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          HOME: /root
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+    env:
+      DATABASE_URL: "mysql://root:secret@mysql:3306/testdb"

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

README.md

@@ -16,18 +16,48 @@ This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3
 
 ### Prerequisites
 
-- A MySQL database URL (you can get one for free at [Planet Scale](https://planetscale.com/))
+- A MySQL database URL (you can get one for free at [Planet Scale](https://planetscale.com/) or use the docker compose file to run MySQL locally)
 - Google authentication credentials - [Read more](https://next-auth.js.org/providers/google)
 - (Optional) A free [Upstash](https://upstash.com/) redis URL
 
-Once you have these three things, you can run
+### Setup
 
 ```bash
 cp .env.example .env
 # edit the `.env` file with your configuration details, and then
 npm install
 ```
 
+### Local MySQL database
+
+You must have docker installed for this to work. You can use a local MySQL database with the following commands
+
+```bash
+docker-compose -f docker-compose.mysql.yml up
+# Wait for mysql server to be ready, then run
+npx prisma db push
+npx prisma db seed
+```
+
+Then you can just update your `.env` file with `DATABASE_URL=mysql://root:secret@127.0.0.1:3306/testdb`.
+
+If you ever need to reset the database, you have two options:
+
+#### 1. Soft reset
+
+```bash
+npx prisma db push --force-reset
+npx prisma db seed
+```
+
+#### 2. Hard reset
+
+Run the following command to destroy the volumes associated with the mysql database, and then start again from scratch.
+
+```bash
+docker-compose -f docker-compose.mysql.yml down -v
+```
+
 ### Running the project
 
 As simple as
@@ -42,6 +72,53 @@ You can also run prisma studio with the following command:
 npx prisma studio
 ```
 
+## Running E2E tests locally
+
+You must have docker installed for this to work. That's because, when running tests locally, we use the same docker container that is used in CI. This ensures that there aren't differences when doing screenshot / visual regression testing.
+
+You must also make sure that you are using a freshly seeded [local MySQL database](#local-mysql-database).
+
+### Build the image
+
+```bash
+docker build -t playwright-docker -f tests/Dockerfile-playwright .
+docker image ls # Should output "playwright-docker"
+```
+
+### Run the tests
+
+```bash
+docker run -p 9323:9323 --rm --name playwright-runner -it playwright-docker:latest /bin/bash
+# From inside the container now you can run
+npx playwright test
+```
+
+More detailed instructions on the [Docker | Playwright](https://playwright.dev/docs/docker) documentation. Loosely based on [this guide](https://www.digitalocean.com/community/tutorials/how-to-run-end-to-end-tests-using-playwright-and-docker#step-3-mdash-executing-the-tests).
+
+#### Updating screenshots
+
+If you need to update the screenshots, then you can run this command instead:
+
+```bash
+npx playwright test --update-snapshots
+```
+
+And then, once you've run tests, you can update the snapshots in the git repository by running the following (while the docker container is still running, in a separate terminal):
+
+```bash
+docker cp playwright-runner:/app/tests .
+```
+
+## Updating seed data
+
+While connected to a production/staging database, run the following:
+
+```bash
+npx tsx prisma/updateSeedData.ts
+```
+
+This will pull all resources and all public lesson plans into the `seedData.json` file in the git repository.
+
 ## Learn More about T3
 
 To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:

docker-compose.mysql.yml

@@ -0,0 +1,31 @@
+# https://github.com/kuroski/github-issue-viewer/blob/main/docker-compose.yml
+
+version: "3.9"
+
+services:
+  db:
+    image: mysql:oracle
+    restart: always
+    environment:
+      MYSQL_ROOT_PASSWORD: secret
+      MYSQL_DATABASE: testdb
+    volumes:
+      - ./scripts/init.sql:/docker-entrypoint-initdb.d/init-script.sql
+      - mysql:/var/lib/mysql
+    ports:
+      - "3306:3306"
+    networks:
+      - mysql
+    healthcheck:
+      test: curl --fail http://127.0.0.1:3306/ping || exit 1
+      interval: 2s
+      retries: 10
+      start_period: 10s
+      timeout: 10s
+
+networks:
+  mysql:
+    driver: bridge
+
+volumes:
+  mysql:

package.json

@@ -71,6 +71,7 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.0.3",
+    "@playwright/test": "^1.42.0",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/eslint": "^8.44.7",