Add Playwright E2E testing setup

- Added Playwright configuration for automated and visual E2E tests
- Updated Next.js configuration to accept localhost:3003 for testing
- Included Playwright as a dev dependency

💘 Generated with Crush
Co-Authored-By: Crush <crush@charm.land>

.gitignore

@@ -25,6 +25,9 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# crush
+.crush/
+
 # local env files
 .env*.local
 *.env

CRUSH.md

@@ -0,0 +1,44 @@
+# CRUSH.md
+
+## Build, Lint, and Test Commands
+- **Build the project**: `npm run build`
+- **Start the project**: `npm run start`
+- **Run the project in development**: `npm run dev`
+- **Lint the project**: `npm run lint`
+- **Check types**: `npm run check-types`
+- **Format code**: `npm run prettier`
+- **Test the project**: `npm run test`
+- **Run a single test**: Use Jest's `-t` option, e.g., `npm run test -- -t 'test name'`
+
+## Code Style Guidelines
+
+### Import Conventions
+- Use `import` statements for importing modules.
+- Organize imports using **prettier-plugin-organize-imports**.
+- Import globals from libraries before local modules.
+
+### Formatting
+- Use **Prettier** for code formatting.
+- Adhere to a line width of 80 characters where possible.
+- Use 2 spaces for indentation.
+
+### Types
+- Utilize TypeScript for static typing throughout the codebase.
+- Define interfaces and types for complex objects.
+
+### Naming Conventions
+- Use camelCase for variable and function names.
+- Use PascalCase for component and type/interface names.
+
+### Error Handling
+- Use `try...catch` blocks for async functions.
+- Handle errors gracefully and log them where required.
+
+### Miscellaneous
+- Ensure all new components are functional components.
+- Prefer arrow functions for component definition.
+- Use hooks like `useEffect` and `useState` for managing component state.
+
+---
+
+**Note**: Please follow these guidelines to maintain consistency and quality within the codebase.

next.config.mjs

@@ -30,7 +30,7 @@ const nextConfig = {
   // Required to run in a codespace (see https://github.com/vercel/next.js/issues/58019)
   experimental: {
     serverActions: {
-        allowedOrigins: ['localhost:3000'],
+        allowedOrigins: ['localhost:3000', 'localhost:3003'],
     },
 },
 }

package-lock.json

@@ -65,6 +65,7 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@playwright/test": "^1.54.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.4.8",
         "@testing-library/react": "^16.0.0",
@@ -5508,6 +5509,22 @@
         "node": ">=14"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz",
+      "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.54.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@prisma/client": {
       "version": "5.9.1",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.9.1.tgz",
@@ -15528,6 +15545,53 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz",
+      "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.54.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.54.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz",
+      "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json

@@ -13,7 +13,9 @@
     "postinstall": "prisma migrate deploy && prisma generate",
     "build-image": "./scripts/build-image.sh",
     "start-container": "docker compose --env-file container.env up",
-    "test": "jest"
+    "test": "jest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "npm run test:e2e -- --ui"
   },
   "dependencies": {
     "@formatjs/intl-localematcher": "^0.5.4",
@@ -72,6 +74,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@playwright/test": "^1.54.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",

playwright.config.ts

@@ -0,0 +1,29 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30000,
+  retries: 1,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+    {
+      name: 'firefox',
+      use: { browserName: 'firefox' },
+    },
+    {
+      name: 'webkit',
+      use: { browserName: 'webkit' },
+    },
+  ],
+};
+
+export default config;

prds/e2e-testing-setup.md

@@ -0,0 +1,93 @@
+# Setting Up E2E Testing with Playwright
+
+Follow these steps to integrate Playwright for end-to-end testing in your application:
+
+## Step 1: Install Playwright
+
+Install Playwright along with its testing library by running:
+
+```bash
+npm install --save-dev @playwright/test
+```
+
+This command sets up Playwright to manage automated browser interactions.
+
+## Step 2: Configure Playwright
+
+Create a Playwright configuration file named `playwright.config.ts` at the root of your project with the following content:
+
+```typescript
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30000,
+  retries: 1,
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+    {
+      name: 'firefox',
+      use: { browserName: 'firefox' },
+    },
+    {
+      name: 'webkit',
+      use: { browserName: 'webkit' },
+    },
+  ],
+};
+
+export default config;
+```
+
+## Step 3: Add E2E Test
+
+Create a `tests` directory in the root of your project. Add E2E tests under this directory.
+
+Example test file `tests/example.spec.ts`:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('basic test', async ({ page }) => {
+  await page.goto('http://localhost:3000'); // replace with your local dev URL
+  await expect(page).toHaveTitle(/Your App Title/); // update with your app's title
+});
+```
+
+## Step 4: Update Package.json
+
+Add a script in `package.json` for running Playwright tests:
+
+```json
+  "scripts": {
+    ...
+    "test:e2e": "playwright test"
+  }
+```
+
+## Step 5: Run the Test
+
+Ensure your application is running locally, then execute your tests with:
+
+```bash
+npm run test:e2e
+```
+
+---
+
+**Additional Considerations**
+
+- If using CI/CD, adapt Playwright settings to accommodate environment constraints.
+- Manage environment variables as necessary for successful testing.
+- Utilize Playwright's `global-setup.js` and `global-teardown.js` for set up and tear down logic.
+
+Follow these steps to effectively incorporate E2E testing into your build process using Playwright. For further customization or troubleshooting, consult Playwright's documentation.

tests/example.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+
+test('basic test', async ({ page }) => {
+  await page.goto('http://localhost:3002'); // replace with your local dev URL
+  await expect(page).toHaveTitle(/Spliit · Share Expenses with Friends & Family/); // replace with your app's title
+});