Add supabase playwright tests

.github/workflows/ci.yaml

@@ -5,15 +5,13 @@ on:
    branches:
      - main
   pull_request:
-  deployment_status:
 
 # Cancel in-progress runs when a new commit is pushed
 concurrency:
   # For pull requests, use the PR number as the concurrency group
-  # For other events (push, deployment_status), use the branch/ref
+  # For other events (push), use the branch/ref
   # This ensures PR builds are cancelled when new commits are pushed
-  # And deployment status events don't interfere with push events for the same branch
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.event.deployment.environment || github.ref }}
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
 # Define Node.js version in one place
@@ -24,7 +22,6 @@ env:
 jobs:
   typecheck:
     name: Type Check
-    if: ${{ github.event_name == 'pull_request' }}
     runs-on: ubuntu-latest
     timeout-minutes: 10
     continue-on-error: true
@@ -74,7 +71,6 @@ jobs:
 
   lint:
     name: Lint
-    if: ${{ github.event_name == 'pull_request' }}
     runs-on: ubuntu-latest
     timeout-minutes: 10
     continue-on-error: true
@@ -124,7 +120,6 @@ jobs:
 
   test:
     name: Unit Tests
-    if: ${{ github.event_name == 'pull_request' }}
     runs-on: ubuntu-latest
     timeout-minutes: 15
     continue-on-error: true
@@ -171,78 +166,3 @@ jobs:
 
       - name: Run tests
         run: pnpm run test
-        
-  playwright:
-    name: Playwright Tests
-    runs-on: ubuntu-latest
-    timeout-minutes: 30
-    if: ${{ (github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success') }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-
-      - name: Setup PNPM
-        uses: pnpm/action-setup@v2
-        with:
-          version: ${{ env.PNPM_VERSION }}
-          
-      # Use PNPM store cache to improve performance
-      - name: PNPM store cache
-        uses: actions/cache@v4
-        with:
-          path: ~/.pnpm-store
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      # Use node_modules cache to improve performance between runs
-      - name: Cache node_modules
-        uses: actions/cache@v4
-        with:
-          path: |
-            **/node_modules
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-modules-
-
-      # Install dependencies with fallback for lockfile mismatch
-      - name: Install dependencies
-        run: |
-          # Try frozen install first
-          pnpm install --frozen-lockfile || \
-          # If frozen install fails, update lockfile and try again
-          (echo "Frozen install failed, updating lockfile..." && pnpm install)
-
-      # Cache Playwright browsers to speed up workflow
-      - name: Cache Playwright browsers
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-playwright-
-
-      - name: Install Playwright browsers
-        run: pnpm playwright install chromium
-
-      - name: Get Vercel Preview URL
-        run: |
-          echo "PLAYWRIGHT_TEST_BASE_URL=${{ github.event.deployment_status.target_url }}" >> $GITHUB_ENV
-          echo "Testing against Vercel Preview URL: ${{ github.event.deployment_status.target_url }}"
-
-      - name: Run Playwright tests against Vercel preview
-        if: ${{ github.event_name == 'deployment_status' }}
-        run: pnpm run test:e2e
-      
-      - name: Upload test results
-        if: always()
-        uses: actions/upload-artifact@v4
-        with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 30

.github/workflows/playwright.yaml

@@ -0,0 +1,104 @@
+name: Playwright Tests
+
+on:
+  deployment_status:
+
+
+# Cancel in-progress runs when a new deployment status event is received
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.deployment.environment || github.ref }}
+  cancel-in-progress: true
+
+# Define Node.js version in one place
+env:
+  NODE_VERSION: "22.x"
+  PNPM_VERSION: 8
+
+jobs:
+  test:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    if: ${{ github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success' }}
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9.4.0
+          
+      - name: Install dependencies
+        run: pnpm install 
+      
+      - name: Install Playwright browsers
+        run: pnpm playwright install chromium
+      
+      - name: Get Vercel Preview URL
+        if: ${{ github.event_name == 'deployment_status' }}
+        run: |
+          echo "PLAYWRIGHT_TEST_BASE_URL=${{ github.event.deployment_status.target_url }}" >> $GITHUB_ENV
+          echo "Testing against Vercel Preview URL: ${{ github.event.deployment_status.target_url }}"
+
+      - name: Run Playwright tests 
+        run: pnpm test:e2e
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Install Vercel CLI
+        run: pnpm install -g vercel@latest
+
+      - name: Deploy to Vercel with Supabase Target
+        id: deploy
+        run: |
+          DEPLOY_OUTPUT=$(vercel deploy --yes --target=supabase --token=${{ secrets.VERCEL_TOKEN }})
+          WITH_SUPABASE_PREVIEW_URL=$(echo "$DEPLOY_OUTPUT" | grep -o 'https://[^ ]*' | tail -1)
+          echo "WITH_SUPABASE_PREVIEW_URL=$WITH_SUPABASE_PREVIEW_URL" >> $GITHUB_OUTPUT
+          echo "Deployed to: $WITH_SUPABASE_PREVIEW_URL"
+
+      - name: Wait for deployment to be ready
+        run: |
+          echo "Waiting for deployment to be fully available..."
+          # Simple check to see if the URL is accessible
+          timeout=300  # 5 minutes timeout
+          interval=10  # Check every 10 seconds
+          elapsed=0
+          
+          until curl -s --head --fail "${{ steps.deploy.outputs.WITH_SUPABASE_PREVIEW_URL }}" > /dev/null; do
+            if [ $elapsed -ge $timeout ]; then
+              echo "Timeout waiting for deployment to be available"
+              exit 1
+            fi
+            echo "Waiting for deployment to be available... ($elapsed seconds elapsed)"
+            sleep $interval
+            elapsed=$((elapsed + interval))
+          done
+          
+          echo "Deployment is now available!"
+          # Additional wait to ensure everything is fully loaded
+          sleep 10
+
+      # Run Playwright tests against the newly deployed URL
+      - name: Run Playwright tests against Supabase deployment
+        run: pnpm run test:e2e
+        env:
+          PLAYWRIGHT_TEST_BASE_URL: ${{ steps.deploy.outputs.WITH_SUPABASE_PREVIEW_URL }}
+      
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-supabase
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -51,3 +51,4 @@ app/commit.json
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.env*.local

app/lib/supabase/client.ts

@@ -83,7 +83,7 @@ export function shouldUseSupabase(): boolean {
 
 export function getSupabase() {
   // Determine execution environment and get appropriate variables
-  if (process.browser) {
+  if (typeof window == 'object') {
     supabaseUrl = window.ENV.SUPABASE_URL || '';
     supabaseAnonKey = window.ENV.SUPABASE_ANON_KEY || '';
   } else {

app/root.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
 import { logStore } from './lib/stores/logs';
 import { initializeAuth, userStore, isLoadingStore } from './lib/stores/auth';
 import { ToastContainer } from 'react-toastify';
+import { Analytics } from '@vercel/analytics/remix';
 
 import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
 import globalStyles from './styles/index.scss?url';
@@ -51,10 +52,12 @@ export const links: LinksFunction = () => [
   },
 ];
 
-export const loader: LoaderFunction = async ({ context }) => {
-  const supabaseUrl = (context.SUPABASE_URL || process.env.SUPABASE_URL || '') as string;
-  const supabaseAnonKey = (context.SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY || '') as string;
-  const useSupabase = (context.USE_SUPABASE || process.env.USE_SUPABASE || '') as string;
+export const loader: LoaderFunction = async () => {
+  const supabaseUrl = process.env.SUPABASE_URL as string;
+  const supabaseAnonKey = process.env.SUPABASE_ANON_KEY as string;
+  const useSupabase = process.env.USE_SUPABASE as string;
+
+  console.log('useSupabase', useSupabase);
 
   return json<LoaderData>({
     ENV: {
@@ -165,6 +168,7 @@ export default function App() {
       </ClientOnly>
       <ScrollRestoration />
       <Scripts />
+      <Analytics />
     </>
   );
 }

package.json

@@ -84,6 +84,7 @@
     "@supabase/supabase-js": "^2.49.1",
     "@uiw/codemirror-theme-vscode": "^4.23.6",
     "@unocss/reset": "^0.61.9",
+    "@vercel/analytics": "^1.5.0",
     "@vercel/remix": "2.15.3",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-web-links": "^0.11.0",

vercel.json

@@ -3,7 +3,9 @@
   "framework": "remix",
   "installCommand": "pnpm install",
   "outputDirectory": "build",
-  "regions": ["iad1"],
+  "regions": [
+    "iad1"
+  ],
   "headers": [
     {
       "source": "/(.*)",

vite.config.ts

@@ -20,9 +20,6 @@ const getGitHash = () => {
   }
 };
 
-
-
-
 export default defineConfig((config) => {
   return {
     define: {
@@ -35,15 +32,12 @@ export default defineConfig((config) => {
       sourcemap: true,
     },
     plugins: [
-      nodePolyfills({
-        include: ['path', 'buffer', 'process'],
-      }),
       remixVitePlugin({
         future: {
           v3_fetcherPersist: true,
           v3_relativeSplatPath: true,
           v3_throwAbortReason: true,
-          v3_lazyRouteDiscovery: true
+          v3_lazyRouteDiscovery: true,
         },
         presets: [vercelPreset()],
       }),
@@ -59,7 +53,16 @@ export default defineConfig((config) => {
           project: 'nut',
         }),
     ],
-    envPrefix: ["VITE_","OPENAI_LIKE_API_BASE_URL", "OLLAMA_API_BASE_URL", "LMSTUDIO_API_BASE_URL","TOGETHER_API_BASE_URL"],
+    envPrefix: [
+      'VITE_',
+      'OPENAI_LIKE_API_BASE_URL',
+      'OLLAMA_API_BASE_URL',
+      'LMSTUDIO_API_BASE_URL',
+      'TOGETHER_API_BASE_URL',
+      'SUPABASE_URL',
+      'SUPABASE_ANON_KEY',
+      'USE_SUPABASE',
+    ],
     css: {
       preprocessorOptions: {
         scss: {