Add more robust e2e setup

Fixes #610

Add a more robust e2e setup with Dockerized Postgres and Clerk integration.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/BHelpful/MomentMeal/issues/610?shareId=XXXX-XXXX-XXXX-XXXX).

README.md

@@ -47,6 +47,27 @@ For this app to work you need to setup clerk OAuth providers. You can find the s
   - Or from the root: `pnpm run --filter=momentmeal prisma:push`
 - Run the development server `pnpm dev`
 
+## End-to-End Testing Setup
+
+To set up end-to-end (e2e) tests with Docker and Clerk, follow these steps:
+
+1. Ensure Docker is installed and running on your machine.
+2. Start the Dockerized Postgres database:
+   ```sh
+   pnpm db:dev
+   ```
+3. Set up the environment variables for Clerk in `apps/web/.env`:
+   ```sh
+   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
+   CLERK_SECRET_KEY=your-clerk-secret-key
+   E2E_CLERK_USER_USERNAME=your-clerk-username
+   E2E_CLERK_USER_PASSWORD=your-clerk-password
+   ```
+4. Run the e2e tests:
+   ```sh
+   pnpm e2e:ci
+   ```
+
 # Open Source
 
 MomentMeal is an open source project. We welcome contributions from the community. There are many ways to contribute to the project, from writing tutorials or blog posts, submitting bug reports and feature requests or writing code which can be incorporated into MomentMeal itself. Here is a list of some of the ways you can contribute to the project:

docker-compose.yml

@@ -12,5 +12,8 @@ services:
       - '6033:5432'
     volumes:
       - dbdata:/var/lib/postgresql/data
+    depends_on:
+      - db
+    command: ["sh", "-c", "until pg_isready -h localhost -p 5432; do sleep 1; done;"]
 volumes:
   dbdata:

packages/web-e2e/global.setup.ts

@@ -0,0 +1,15 @@
+import { clerkSetup } from "@clerk/testing/playwright";
+import { test as setup } from "@playwright/test";
+
+setup("global setup", async ({}) => {
+  await clerkSetup();
+
+  if (
+    !process.env.E2E_CLERK_USER_USERNAME ||
+    !process.env.E2E_CLERK_USER_PASSWORD
+  ) {
+    throw new Error(
+      "Please provide E2E_CLERK_USER_USERNAME and E2E_CLERK_USER_PASSWORD environment variables."
+    );
+  }
+});

packages/web-e2e/playwright.config.ts

@@ -70,9 +70,12 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://127.0.0.1:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'pnpm run start',
+    url: 'http://127.0.0.1:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+
+  /* Global setup for Clerk integration */
+  globalSetup: require.resolve('./global.setup.ts'),
 });