Complete E2E Test Implementation with Reliability Fixes

.claude/commands/commit.md

@@ -0,0 +1,7 @@
+Commit the changes to the repository:
+
+1. Change the current directory to the root of the repository.
+2. If currently on the main branch, create a new feature branch.
+3. Add all the changes to the staging area, and make a commit.
+4. Push the changes to the remote repository.
+5. Create a pull request to the main branch, or update the existing one.

.claude/commands/main.md

@@ -0,0 +1,8 @@
+Go back to the main branch and pull the latest changes.
+
+1. Check if there are any changes on the current branch that are not committed.
+2. If so, ask the user if they want to commit the changes.
+3. If they don't, stash the changes.
+4. Go on the main branch and pull the latest changes.
+5. Pop the changes from the stash.
+6. If there are any conflicts, resolve them.

.claude/settings.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/claude-code-settings.json",
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(grep:*)",
+      "Bash(find:*)",
+      "Bash(mkdir:*)",
+      "Bash(git:*)",
+      "Bash(gh:*)",
+      "Bash(cd:*)",
+      "Bash(yarn:*)",
+      "Bash(npm:*)",
+      "WebFetch(domain:docs.anthropic.com)"
+    ],
+    "deny": []
+  }
+}

.gitignore

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

.vscode/settings.json

@@ -0,0 +1,30 @@
+{
+  "workbench.colorCustomizations": {
+    "statusBarItem.warningBackground": "#681DD7",
+    "statusBarItem.warningForeground": "#ffffff",
+    "statusBarItem.warningHoverBackground": "#681DD7",
+    "statusBarItem.warningHoverForeground": "#ffffff90",
+    "statusBarItem.remoteBackground": "#681DD7",
+    "statusBarItem.remoteForeground": "#ffffff",
+    "statusBarItem.remoteHoverBackground": "#681DD7",
+    "statusBarItem.remoteHoverForeground": "#ffffff90",
+    "focusBorder": "#681DD799",
+    "progressBar.background": "#681DD7",
+    "textLink.foreground": "#a85dff",
+    "textLink.activeForeground": "#b56aff",
+    "selection.background": "#5b10ca",
+    "activityBarBadge.background": "#681DD7",
+    "activityBarBadge.foreground": "#ffffff",
+    "activityBar.activeBorder": "#681DD7",
+    "list.highlightForeground": "#681dd7",
+    "list.focusAndSelectionOutline": "#681DD799",
+    "button.background": "#681DD7",
+    "button.foreground": "#ffffff",
+    "button.hoverBackground": "#752ae4",
+    "tab.activeBorderTop": "#752ae4",
+    "pickerGroup.foreground": "#752ae4",
+    "list.activeSelectionBackground": "#681DD74d",
+    "panelTitle.activeBorder": "#752ae4"
+  },
+  "window.title": "spliit--add-e2e-tests"
+}

CLAUDE.md

@@ -0,0 +1,44 @@
+# CLAUDE.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.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,38 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  timeout: 30000,
+  retries: 2, // Increased retries for better stability
+  use: {
+    headless: true,
+    viewport: { width: 1280, height: 720 },
+    ignoreHTTPSErrors: true,
+    video: 'on-first-retry',
+    // Add navigation timeout for more reliable page loads
+    navigationTimeout: 15000,
+    // Add action timeout for more reliable interactions
+    actionTimeout: 10000,
+  },
+  // Global test settings
+  expect: {
+    // Default timeout for expect() assertions
+    timeout: 10000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+    {
+      name: 'firefox',
+      use: { browserName: 'firefox' },
+    },
+    {
+      name: 'webkit',
+      use: { browserName: 'webkit' },
+    },
+  ],
+};
+
+export default config;