feat: 🎸 add end-to-end test harness (#253)

* feat: 🎸 add end-to-end test harness

* Address PR comments

.github/workflows/publish.yml

@@ -64,8 +64,65 @@ jobs:
       - name: 🔎 Type check
         run: pnpm run typecheck --filter webapp
 
+  e2e:
+    name: e2e Tests
+    runs-on: buildjet-4vcpu-ubuntu-2204
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: ⎔ Setup pnpm
+        uses: pnpm/action-setup@v2.2.4
+        with:
+          version: 7.18
+
+      - name: ⎔ Setup node
+        uses: buildjet/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - name: 📥 Download deps
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: |
+          # Setup environment variables
+          cp ./.env.example ./.env
+          cp ./examples/nextjs-test/.env.example ./examples/nextjs-test/.env.local
+          cp ./packages/database/.env.example ./packages/database/.env
+
+          # Build packages
+          pnpm run build --filter @examples/nextjs-test^...
+          pnpm --filter @trigger.dev/database generate
+
+          # Move trigger-cli bin to correct place
+          pnpm install --frozen-lockfile
+
+          # Execute tests
+          pnpm run docker
+          pnpm run db:migrate
+          pnpm run db:seed
+          pnpm run test:e2e
+
+          # Cleanup
+          pnpm run docker:stop
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
   publish:
-    needs: [typecheck]
+    needs: [typecheck, e2e]
     runs-on: buildjet-4vcpu-ubuntu-2204
     outputs:
       version: ${{ steps.get_version.outputs.version }}

.gitignore

@@ -48,4 +48,7 @@ apps/**/public/build
 .sentryclirc
 .buildt
 
-**/tmp/
+**/tmp/
+/test-results/
+/playwright-report/
+/playwright/.cache/

CONTRIBUTING.md

@@ -169,6 +169,52 @@ pnpm exec trigger-cli dev
 
 9. Please remember to delete the temporary project you created after you've tested the changes, and before you raise a PR.
 
+## Running end-to-end webapp tests
+
+To run the end-to-end tests, follow the steps below:
+
+1. Set up environment variables (copy example envs into the correct place)
+
+```sh
+cp ./.env.example ./.env
+cp ./examples/nextjs-test/.env.example ./examples/nextjs-test/.env.local
+cp ./packages/database/.env.example ./packages/database/.env
+```
+
+2. Set up dependencies
+
+```sh
+# Build packages
+pnpm run build --filter @examples/nextjs-test^...
+pnpm --filter @trigger.dev/database generate
+
+# Move trigger-cli bin to correct place
+pnpm install --frozen-lockfile
+```
+
+3. Set up the database
+
+```sh
+pnpm run docker
+pnpm run db:migrate
+pnpm run db:seed
+```
+
+4. Run the end-to-end tests
+
+```sh
+pnpm run test:e2e
+```
+
+### Cleanup
+
+The end-to-end tests use a `setup` and `teardown` script to seed the database with test data. If the test runner doesn't exit cleanly, then the database can be left in a state where the tests can't run because the `setup` script will try to create data that already exists. If this happens, you can manually delete the `users` and `organizations` from the database using prisma studio:
+
+```sh
+# With the database running (i.e. pnpm run docker)
+pnpm run db:studio
+```
+
 ## Add sample jobs
 
 The [examples/jobs-starter](./examples/jobs-starter/) project defines simple jobs you can get started with.

apps/webapp/app/services/email.server.ts

@@ -1,6 +1,7 @@
 import type { DeliverEmail } from "emails";
 import { EmailClient } from "emails";
 import type { SendEmailOptions } from "remix-auth-email-link";
+import { redirect } from "remix-typedjson";
 import { env } from "~/env.server";
 import type { User } from "~/models/user.server";
 import type { AuthUser } from "./authUser";
@@ -14,6 +15,11 @@ const client = new EmailClient({
 });
 
 export async function sendMagicLinkEmail(options: SendEmailOptions<AuthUser>): Promise<void> {
+  // Auto redirect when in development mode
+  if (env.NODE_ENV === "development") {
+    throw redirect(options.magicLink);
+  }
+
   return client.send({
     email: "magic_link",
     to: options.emailAddress,

apps/webapp/package.json

@@ -14,6 +14,7 @@
     "start": "cross-env NODE_ENV=production node --max-old-space-size=8192 ./build/server.js",
     "typecheck": "tsc --noEmit",
     "db:seed": "node prisma/seed.js",
+    "db:seed:local": "ts-node prisma/seed.ts",
     "generate:sourcemaps": "remix build --sourcemap",
     "clean:sourcemaps": "run-s clean:sourcemaps:*",
     "clean:sourcemaps:public": "rimraf ./build/**/*.map",

examples/nextjs-test/.env.example

@@ -0,0 +1,3 @@
+
+TRIGGER_API_KEY=tr_dev_test-api-key
+TRIGGER_API_URL=http://localhost:3030

examples/nextjs-test/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs-test/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-test/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs-test/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

examples/nextjs-test/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig

examples/nextjs-test/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@examples/nextjs-test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "concurrently --kill-others \"pnpm dev:next\" \"wait-on http://localhost:3000 && pnpm dev:trigger\"",
+    "dev:next": "next dev",
+    "dev:trigger": "trigger-cli dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "next": "13.4.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@trigger.dev/sdk": "^2.0.0-next.22",
+    "@trigger.dev/nextjs": "^1.0.0-next.8"
+  },
+  "trigger.dev": {
+    "endpointId": "nextjs-test"
+  },
+  "devDependencies": {
+    "@trigger.dev/cli": "workspace:*",
+    "concurrently": "^8.2.0",
+    "eslint": "8.42.0",
+    "eslint-config-next": "13.4.6",
+    "wait-on": "^7.0.1"
+  }
+}

examples/nextjs-test/src/app/api/trigger/route.js

@@ -0,0 +1,9 @@
+
+import { createAppRoute } from "@trigger.dev/nextjs";
+import { client } from "@/trigger";
+
+// Replace this with your own jobs
+import "@/jobs/examples";
+
+//this route is used to send and receive data with Trigger.dev
+export const { POST, dynamic } = createAppRoute(client);