chore(supabase): update supabase realtime integration tests to test on vsn=2.0.0 (#1925)

Author: edgurgel

packages/core/supabase-js/test/deno/integration.test.ts

@@ -16,9 +16,7 @@ Deno.test(
     const ANON_KEY =
       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
 
-    const supabase = createClient(SUPABASE_URL, ANON_KEY, {
-      realtime: { heartbeatIntervalMs: 500 },
-    })
+    const supabase = createClient(SUPABASE_URL, ANON_KEY)
 
     // Cleanup function to be called after all tests
     const cleanup = async () => {
@@ -147,56 +145,61 @@ Deno.test(
         assertEquals(data.user, null)
       })
 
-      await t.step('Realtime - is able to connect and broadcast', async () => {
-        const channelName = `channel-${crypto.randomUUID()}`
-        let channel: RealtimeChannel
-        const email = `test-${Date.now()}@example.com`
-        const password = 'password123'
-
-        // Sign up and create channel
-        await supabase.auth.signUp({ email, password })
-        const config = { broadcast: { self: true }, private: true }
-        channel = supabase.channel(channelName, { config })
-
-        const testMessage = { message: 'test' }
-        let receivedMessage: any
-        let subscribed = false
-        let attempts = 0
-
-        channel
-          .on('broadcast', { event: '*' }, (payload: unknown) => (receivedMessage = payload))
-          .subscribe((status: string) => {
-            if (status == 'SUBSCRIBED') subscribed = true
+      // Run realtime tests for both versions
+      const versions = ['1.0.0', '2.0.0']
+      for (const vsn of versions) {
+        await t.step(`Realtime v${vsn} - is able to connect and broadcast`, async () => {
+          const supabaseRealtime = createClient(SUPABASE_URL, ANON_KEY, {
+            realtime: { heartbeatIntervalMs: 500, vsn },
           })
 
-        // Wait for subscription
-        while (!subscribed) {
-          if (attempts > 50) throw new Error('Timeout waiting for subscription')
-          await new Promise((resolve) => setTimeout(resolve, 100))
-          attempts++
-        }
-
-        attempts = 0
-
-        channel.send({
-          type: 'broadcast',
-          event: 'test-event',
-          payload: testMessage,
+          const channelName = `channel-${crypto.randomUUID()}`
+          let channel: RealtimeChannel
+          const email = `test-${Date.now()}@example.com`
+          const password = 'password123'
+
+          // Sign up and create channel
+          await supabaseRealtime.auth.signUp({ email, password })
+          const config = { broadcast: { self: true, ack: true }, private: true }
+          channel = supabaseRealtime.channel(channelName, { config })
+
+          const testMessage = { message: 'test' }
+          let receivedMessage: any
+          let subscribed = false
+          let attempts = 0
+
+          channel
+            .on('broadcast', { event: 'test-event' }, (payload: unknown) => (receivedMessage = payload))
+            .subscribe((status: string) => {
+              if (status == 'SUBSCRIBED') subscribed = true
+            })
+
+          // Wait for subscription
+          while (!subscribed) {
+            if (attempts > 50) throw new Error('Timeout waiting for subscription')
+            await new Promise((resolve) => setTimeout(resolve, 100))
+            attempts++
+          }
+
+          attempts = 0
+
+          await channel.send({ type: 'broadcast', event: 'test-event', payload: testMessage })
+
+          // Wait on message
+          while (!receivedMessage) {
+            if (attempts > 50) throw new Error('Timeout waiting for message')
+            await new Promise((resolve) => setTimeout(resolve, 100))
+            attempts++
+          }
+
+          assertExists(receivedMessage)
+          assertEquals(supabaseRealtime.realtime.getChannels().length, 1)
+
+          // Cleanup channel
+          await channel.unsubscribe()
+          await supabaseRealtime.removeAllChannels()
         })
-
-        // Wait on message
-        while (!receivedMessage) {
-          if (attempts > 50) throw new Error('Timeout waiting for message')
-          await new Promise((resolve) => setTimeout(resolve, 100))
-          attempts++
-        }
-
-        assertExists(receivedMessage)
-        assertEquals(supabase.realtime.getChannels().length, 1)
-
-        // Cleanup channel
-        await channel.unsubscribe()
-      })
+      }
 
       await t.step('Storage - should upload and list file in bucket', async () => {
         const bucket = 'test-bucket'

packages/core/supabase-js/test/integration.browser.test.ts

@@ -3,12 +3,11 @@ import { assertEquals } from 'https://deno.land/[email protected]/testing/asserts.ts'
 import { describe, it, beforeAll, afterAll } from 'https://deno.land/[email protected]/testing/bdd.ts'
 import { Browser, Page, launch } from 'npm:[email protected]'
 import { sleep } from 'https://deno.land/x/sleep/mod.ts'
-// Run the UMD build before serving the page
+
 const stderr = 'inherit'
 const ac = new AbortController()
 
 let browser: Browser
-let page: Page
 
 const port = 8000
 const content = `<html>
@@ -22,23 +21,68 @@ const content = `<html>
     <script type="text/babel" data-presets="env,react">
         const SUPABASE_URL = 'http://127.0.0.1:54321'
         const ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
-        const supabase = supabase.createClient(SUPABASE_URL, ANON_KEY)
-        const App = (props) => {
+
+        // Get vsn from query params
+        const urlParams = new URLSearchParams(window.location.search)
+        const vsn = urlParams.get('vsn') || '1.0.0'
+
+        const supabase = window.supabase.createClient(SUPABASE_URL, ANON_KEY, {
+            realtime: {
+                heartbeatIntervalMs: 500,
+                vsn: vsn
+            }
+        })
+
+        const App = () => {
             const [realtimeStatus, setRealtimeStatus] = React.useState(null)
-            const channel = supabase.channel('realtime:public:todos')
+            const [receivedMessage, setReceivedMessage] = React.useState(null)
+            const channelRef = React.useRef(null)
+
             React.useEffect(() => {
-                channel.subscribe((status) => { if (status === 'SUBSCRIBED') setRealtimeStatus(status) })
+                const channelName = \`test-broadcast-channel-\${vsn}\`
+                const channel = supabase.channel(channelName, {
+                    config: { broadcast: { ack: true, self: true } }
+                })
+
+                channelRef.current = channel
+
+                // Listen for broadcast messages
+                channel.on('broadcast', { event: 'test-event' }, (payload) => {
+                    setReceivedMessage(payload.payload)
+                })
+
+                // Subscribe to the channel
+                channel.subscribe(async (status) => {
+                    if (status === 'SUBSCRIBED') {
+                        setRealtimeStatus(status)
+
+                        // Send a test message after subscribing
+                        await channel.send({
+                            type: 'broadcast',
+                            event: 'test-event',
+                            payload: { message: 'Hello from browser!' }
+                        })
+                    }
+                })
 
                 return () => {
                     channel.unsubscribe()
                 }
             }, [])
-            if (realtimeStatus) {
-                return <div id='realtime_status'>{realtimeStatus}</div>
-            } else {
-                return <div></div>
-            }
+
+            return (
+                <div>
+                    <div id='vsn'>{vsn}</div>
+                    {realtimeStatus && (
+                        <div id='realtime_status'>{realtimeStatus}</div>
+                    )}
+                    {receivedMessage && (
+                        <div id='received_message'>{receivedMessage.message}</div>
+                    )}
+                </div>
+            )
         }
+
         ReactDOM.render(<App />, document.getElementById('output'));
     </script>
 </body>
@@ -80,8 +124,6 @@ beforeAll(async () => {
 
 afterAll(async () => {
   await ac.abort()
-  await page.close()
-  await browser.close()
   await sleep(1)
 })
 
@@ -90,13 +132,49 @@ describe('Realtime integration test', () => {
     browser = await launch({
       args: ['--no-sandbox', '--disable-setuid-sandbox'],
     })
-    page = await browser.newPage()
   })
 
-  it('connects to realtime', async () => {
-    await page.goto('http://localhost:8000')
-    await page.waitForSelector('#realtime_status', { timeout: 2000 })
-    const realtimeStatus = await page.$eval('#realtime_status', (el) => el.innerHTML)
-    assertEquals(realtimeStatus, 'SUBSCRIBED')
+  afterAll(async () => {
+    await browser.close()
+  })
+
+  const versions = [{ vsn: '1.0.0' }, { vsn: '2.0.0' }]
+
+  versions.forEach(({ vsn }) => {
+    describe(`Realtime with vsn: ${vsn}`, () => {
+      let page: Page
+
+      beforeAll(async () => {
+        page = await browser.newPage()
+      })
+
+      afterAll(async () => {
+        await page.close()
+      })
+
+      it('connects to realtime', async () => {
+        await page.goto(`http://localhost:${port}?vsn=${vsn}`)
+        await page.waitForSelector('#realtime_status', { timeout: 2000 })
+        const realtimeStatus = await page.$eval('#realtime_status', (el) => el.innerHTML)
+        assertEquals(realtimeStatus, 'SUBSCRIBED')
+
+        // Verify correct version is being used
+        const displayedVsn = await page.$eval('#vsn', (el) => el.innerHTML)
+        assertEquals(displayedVsn, vsn)
+      })
+
+      it('can broadcast and receive messages', async () => {
+        await page.goto(`http://localhost:${port}?vsn=${vsn}`)
+
+        // Wait for subscription
+        await page.waitForSelector('#realtime_status', { timeout: 2000 })
+
+        // Wait for the broadcast message to be received
+        await page.waitForSelector('#received_message', { timeout: 5000 })
+        const receivedMessage = await page.$eval('#received_message', (el) => el.innerHTML)
+
+        assertEquals(receivedMessage, 'Hello from browser!')
+      })
+    })
   })
 })

packages/core/supabase-js/test/integration.test.ts

@@ -265,19 +265,29 @@ describe('Supabase Integration Tests', () => {
     })
   })
 
-  describe('Realtime', () => {
+  describe.each([{ vsn: '1.0.0' }, { vsn: '2.0.0' }])('Realtime with vsn: $vsn', ({ vsn }) => {
     const channelName = `channel-${crypto.randomUUID()}`
     let channel: RealtimeChannel
     let email: string
     let password: string
+    let supabase: SupabaseClient
 
     beforeEach(async () => {
+      // Create client with specific version
+      supabase = createClient(SUPABASE_URL, ANON_KEY, {
+        realtime: {
+          heartbeatIntervalMs: 500,
+          vsn,
+          ...(wsTransport && { transport: wsTransport }),
+        },
+      })
+
       await supabase.auth.signOut()
       email = `test-${Date.now()}@example.com`
       password = 'password123'
       await supabase.auth.signUp({ email, password })
 
-      const config = { broadcast: { self: true }, private: true }
+      const config = { broadcast: { ack: true, self: true }, private: true }
       channel = supabase.channel(channelName, { config })
     })
 
@@ -292,8 +302,8 @@ describe('Supabase Integration Tests', () => {
       let attempts = 0
 
       channel
-        .on('broadcast', { event: '*' }, (payload) => (receivedMessage = payload))
-        .subscribe((status, err) => {
+        .on('broadcast', { event: 'test-event' }, (payload) => (receivedMessage = payload))
+        .subscribe((status) => {
           if (status == 'SUBSCRIBED') subscribed = true
         })
 
@@ -306,7 +316,7 @@ describe('Supabase Integration Tests', () => {
 
       attempts = 0
 
-      channel.send({ type: 'broadcast', event: 'test-event', payload: testMessage })
+      await channel.send({ type: 'broadcast', event: 'test-event', payload: testMessage })
 
       // Wait on message
       while (!receivedMessage) {