test: add browser test to check websocket constructor (#1471)

* returned test:integration:browser

* added test

---------

Co-authored-by: georgiy.rusanov <[email protected]>

Author: georgRusanov

.github/workflows/ci.yml

@@ -23,6 +23,43 @@ env:
   NODE_VERSION: '20'
 
 jobs:
+  build-package:
+    name: Build supabase-js package
+    runs-on: ubuntu-latest
+    outputs:
+      tgz-name: ${{ steps.pack.outputs.filename }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies and build
+        run: |
+          npm ci
+          npm run build
+          npm run build:umd
+
+      - name: Pack npm module
+        id: pack
+        run: |
+          PKG=$(npm pack)
+          echo "filename=$PKG" >> "$GITHUB_OUTPUT"
+
+      - name: Upload .tgz package
+        uses: actions/upload-artifact@v4
+        with:
+          name: supabase-tgz
+          path: ${{ steps.pack.outputs.filename }}
+
+      - name: Upload UMD build
+        uses: actions/upload-artifact@v4
+        with:
+          name: supabase-umd
+          path: dist/umd/supabase.js
+
   test:
     name: Unit + Type Check / Node.js ${{ matrix.node }} / OS ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
@@ -97,10 +134,9 @@ jobs:
           npm ci
           npm test || npm test
 
-      # - name: Run integration and browser tests on Deno 2.x only
-      #   if: ${{ matrix.deno == '2.x' }}
-      #   run: |
-      #     npm run test:integration:browser
+      - name: Run integration and browser tests on Deno 2.x only
+        if: ${{ matrix.deno == '2.x' }}
+        run: npm run test:integration:browser
 
       - name: Stop Supabase
         if: always()
@@ -109,6 +145,7 @@ jobs:
   node-integration:
     name: Node Integration
     runs-on: ubuntu-latest
+    needs: build-package
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -142,6 +179,7 @@ jobs:
   next-integration:
     name: Next.js Integration
     runs-on: ubuntu-latest
+    needs: build-package
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -177,6 +215,7 @@ jobs:
   expo-tests:
     name: Expo Tests
     runs-on: ubuntu-latest
+    needs: build-package
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -192,23 +231,63 @@ jobs:
         with:
           version: latest
 
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: supabase-tgz
+          path: ./supabase-pkg
+
       - name: Start Supabase
         run: supabase start
 
-      - name: Install dependencies and build
+      - name: Install dependencies and run tests
         run: |
-          npm ci
-          npm run build
-
-      - name: Build and test expo
-        run: |
-          PKG=$(npm pack)
-          echo "Packed: $PKG"
           cd test/integration/expo
+          cp ../../../supabase-pkg/supabase-supabase-js-0.0.0-automated.tgz .
           npm install
-          npm install "../../../$PKG"
           npm test || npm test
 
       - name: Stop Supabase
         if: always()
         run: supabase stop
+
+  websocket-browser-tests:
+    name: WebSocket Browser Tests
+    runs-on: ubuntu-latest
+    needs: build-package
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: supabase-umd
+          path: ./dist/umd
+
+      - name: Setup Supabase CLI
+        uses: supabase/setup-cli@v1
+        with:
+          version: latest
+
+      - name: Install Playwright browsers and dependencies
+        run: npx playwright install --with-deps
+
+      - name: Start Supabase
+        run: supabase start
+
+      - name: Run WebSocket tests
+        run: |
+          cd test/integration/node-browser
+          npm install
+          cp ../../../dist/umd/supabase.js .
+          npm run test
+
+      - name: Stop Supabase
+        if: always()
+        run: supabase stop

package.json

@@ -36,6 +36,7 @@
     "test:integration": "jest --runInBand --detectOpenHandles test/integration.test.ts",
     "test:integration:browser": "deno test --allow-all test/integration.browser.test.ts",
     "test:watch": "jest --watch --verbose false --silent false",
+    "test:node:playwright": "cd test/integration/node-browser && npm install && cp ../../../dist/umd/supabase.js . && npm run test",
     "test:types": "run-s build:module && tsd --files test/types/*.test-d.ts",
     "docs": "typedoc --entryPoints src/index.ts --out docs/v2 --includes src/**/*.ts",
     "docs:json": "typedoc --entryPoints src/index.ts --includes src/**/*.ts --json docs/v2/spec.json --excludeExternals",

test/integration/expo/package-lock.json

@@ -16,7 +16,7 @@
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
-    "@supabase/supabase-js": "file:../../../supabase-supabase-js-0.0.0-automated.tgz",
+    "@supabase/supabase-js": "file:supabase-supabase-js-0.0.0-automated.tgz",
     "expo": "~53.0.9",
     "expo-blur": "~14.1.4",
     "expo-constants": "~17.1.6",

test/integration/expo/package.json

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <pre id="log" data-testid="log" style="font-family: monospace"></pre>
+    <script src="http://localhost:8004/supabase.js"></script>
+    <script>
+      const log = (msg) => {
+        document.getElementById('log').textContent += msg + '\n'
+        console.log(msg)
+      }
+
+      log('Starting WebSocket test (Playwright)...')
+
+      // Add global error handler
+      window.addEventListener('error', (event) => {
+        log('Global error: ' + event.message)
+        log('Error source: ' + event.filename + ':' + event.lineno)
+      })
+
+      // Add unhandled promise rejection handler
+      window.addEventListener('unhandledrejection', (event) => {
+        log('Unhandled promise rejection: ' + event.reason)
+      })
+
+      try {
+        log('Attempting to access createClient...')
+
+        // Check if supabase is available
+        if (typeof window.supabase === 'undefined') {
+          throw new Error('window.supabase is not defined')
+        }
+        log('Supabase UMD loaded successfully')
+
+        const { createClient } = window.supabase
+        log('createClient function available')
+
+        // Intercept WebSocket constructor
+        const originalWebSocket = window.WebSocket
+        let wsConstructorCalls = []
+
+        window.WebSocket = function (...args) {
+          wsConstructorCalls.push(args.length)
+          log(
+            'WebSocket constructor called with ' +
+              args.length +
+              ' parameters: ' +
+              JSON.stringify(args)
+          )
+          return new originalWebSocket(...args)
+        }
+
+        // Intercept fetch
+        const originalFetch = window.fetch
+        let fetchCalls = []
+
+        window.fetch = function (...args) {
+          fetchCalls.push(args[0])
+          log('Fetch called with URL: ' + args[0])
+          return originalFetch.apply(this, args)
+        }
+
+        // Intercept setTimeout/setInterval for polling
+        const originalSetTimeout = window.setTimeout
+        const originalSetInterval = window.setInterval
+        let timeoutCalls = []
+        let intervalCalls = []
+
+        window.setTimeout = function (fn, delay, ...args) {
+          timeoutCalls.push({ fn: fn.toString().substring(0, 50), delay })
+          log('setTimeout called with delay: ' + delay)
+          return originalSetTimeout.apply(this, [fn, delay, ...args])
+        }
+
+        window.setInterval = function (fn, delay, ...args) {
+          intervalCalls.push({ fn: fn.toString().substring(0, 50), delay })
+          log('setInterval called with delay: ' + delay)
+          return originalSetInterval.apply(this, [fn, delay, ...args])
+        }
+
+        log('Creating Supabase client with WebSocket transport...')
+        const supabase = createClient(
+          'http://127.0.0.1:54321',
+          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0',
+          {
+            realtime: {
+              transport: window.WebSocket,
+              heartbeatIntervalMs: 500,
+            },
+          }
+        )
+
+        log('Creating channel...')
+        const channel = supabase.channel('realtime:public:todos')
+
+        log('Subscribing to channel...')
+        channel.subscribe((status) => {
+          log('WebSocket subscribe callback called with: ' + status)
+        })
+
+        setTimeout(() => {
+          log('WebSocket calls: ' + JSON.stringify(wsConstructorCalls))
+          log('Fetch calls: ' + JSON.stringify(fetchCalls))
+          log('setTimeout calls: ' + JSON.stringify(timeoutCalls))
+          log('setInterval calls: ' + JSON.stringify(intervalCalls))
+        }, 3000)
+      } catch (error) {
+        log('Error in WebSocket test: ' + error.message)
+        log('Error stack: ' + error.stack)
+        log('Error name: ' + error.name)
+      }
+    </script>
+  </body>
+</html>

test/integration/node-browser/index.html

@@ -0,0 +1,13 @@
+{
+  "name": "websocket-playwright-tests",
+  "version": "1.0.0",
+  "description": "WebSocket browser tests using Playwright",
+  "scripts": {
+    "test": "playwright test",
+    "serve:node-browser": "serve . -p 8004"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "serve": "^14.2.1"
+  }
+}

test/integration/node-browser/package.json

@@ -0,0 +1,33 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:8004',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+  webServer: {
+    command: 'cp ../../../dist/umd/supabase.js . && npm run serve:node-browser',
+    url: 'http://localhost:8004',
+    reuseExistingServer: !process.env.CI,
+  },
+})

test/integration/node-browser/playwright.config.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test.describe('WebSocket Browser Tests', () => {
+  test('should test WebSocket transport', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.locator('#log')).toBeVisible()
+    await page.waitForTimeout(5000)
+
+    const logContent = await page.locator('#log').textContent()
+    console.log('WebSocket test log content:', logContent)
+
+    expect(logContent).toContain('WebSocket constructor called')
+    //Try to check fix for https://github.com/supabase/realtime-js/issues/493
+    expect(logContent).not.toContain('WebSocket constructor called with 3 parameters')
+    expect(logContent).not.toContain('CHANNEL_ERROR')
+    expect(logContent).not.toContain('Global error')
+    expect(logContent).not.toContain('Unhandled promise rejection')
+
+    // Verify subscription worked
+    expect(logContent).toContain('WebSocket subscribe callback called with: SUBSCRIBED')
+  })
+})