chore(supabase): update expo tests

Author: edgurgel

packages/core/supabase-js/test/integration/expo/__tests__/Index.test.tsx

@@ -6,31 +6,77 @@ describe('Index', () => {
     cleanup()
   })
 
-  it('should display SUBSCRIBED status when realtime connection is established', async () => {
-    const { getByTestId, unmount } = render(<Index />)
-
-    // Initially, the text should be empty
-    expect(getByTestId('realtime_status')).toHaveTextContent('')
-
-    // Wait for the subscription status to be updated
-    await waitFor(
-      () => {
-        const status = getByTestId('realtime_status').props.children
-        expect(status).toBe('SUBSCRIBED')
-      },
-      {
-        timeout: 30000, // 30 seconds timeout for waitFor
-        interval: 1000, // Check every second
-        onTimeout: (error) => {
-          const currentStatus = getByTestId('realtime_status').props.children
-          throw new Error(
-            `Timeout waiting for SUBSCRIBED status. Current status: ${currentStatus}. ${error.message}`
-          )
-        },
-      }
-    )
-
-    // Unmount the component to trigger cleanup.
-    unmount()
-  }, 35000) // 35 seconds timeout for the entire test
+  const versions = [{ vsn: '1.0.0' }, { vsn: '2.0.0' }]
+
+  versions.forEach(({ vsn }) => {
+    describe(`Realtime with vsn: ${vsn}`, () => {
+      it('should display SUBSCRIBED status when realtime connection is established', async () => {
+        const { getByTestId, unmount } = render(<Index vsn={vsn} />)
+
+        // Verify correct version is being used
+        expect(getByTestId('vsn')).toHaveTextContent(vsn)
+
+        // Initially, the status should be empty
+        expect(getByTestId('realtime_status')).toHaveTextContent('')
+
+        // Wait for the subscription status to be updated
+        await waitFor(
+          () => {
+            const status = getByTestId('realtime_status').props.children
+            expect(status).toBe('SUBSCRIBED')
+          },
+          {
+            timeout: 30000, // 30 seconds timeout for waitFor
+            interval: 1000, // Check every second
+            onTimeout: (error) => {
+              const currentStatus = getByTestId('realtime_status').props.children
+              throw new Error(
+                `Timeout waiting for SUBSCRIBED status with vsn ${vsn}. Current status: ${currentStatus}. ${error.message}`
+              )
+            },
+          }
+        )
+
+        // Unmount the component to trigger cleanup
+        unmount()
+      }, 35000) // 35 seconds timeout for the entire test
+
+      it('can broadcast and receive messages', async () => {
+        const { getByTestId, unmount } = render(<Index vsn={vsn} />)
+
+        // Wait for subscription
+        await waitFor(
+          () => {
+            const status = getByTestId('realtime_status').props.children
+            expect(status).toBe('SUBSCRIBED')
+          },
+          {
+            timeout: 30000,
+            interval: 1000,
+          }
+        )
+
+        // Wait for broadcast message to be received
+        await waitFor(
+          () => {
+            const message = getByTestId('received_message').props.children
+            expect(message).toBe('Hello from Expo!')
+          },
+          {
+            timeout: 30000,
+            interval: 1000,
+            onTimeout: (error) => {
+              const currentMessage = getByTestId('received_message').props.children
+              throw new Error(
+                `Timeout waiting for broadcast message with vsn ${vsn}. Current message: ${currentMessage}. ${error.message}`
+              )
+            },
+          }
+        )
+
+        // Unmount the component to trigger cleanup
+        unmount()
+      }, 35000) // 35 seconds timeout for the entire test
+    })
+  })
 })

packages/core/supabase-js/test/integration/expo/app/index.tsx

@@ -6,24 +6,51 @@ const SUPABASE_URL = 'http://127.0.0.1:54321'
 const TEST_ANON_KEY =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
 
-const supabase = createClient(SUPABASE_URL, TEST_ANON_KEY)
+interface IndexProps {
+  vsn?: string
+}
 
-export default function Index() {
+export default function Index({ vsn = '1.0.0' }: IndexProps) {
   const [realtimeStatus, setRealtimeStatus] = useState<string | null>(null)
-  const channel = supabase.channel('realtime:public:todos')
+  const [receivedMessage, setReceivedMessage] = useState<string | null>(null)
 
   useEffect(() => {
+    const supabase = createClient(SUPABASE_URL, TEST_ANON_KEY, {
+      realtime: {
+        heartbeatIntervalMs: 500,
+        vsn: vsn,
+      }
+    })
+
+    const channel = supabase.channel(`realtime:public:todos-${vsn}`, {
+      config: { broadcast: { ack: true, self: true } }
+    })
+
+    // Listen for broadcast messages
+    channel.on('broadcast', { event: 'test-event' }, (payload) => {
+      setReceivedMessage(payload.payload.message)
+    })
+
+    // Subscribe to the channel
     if (channel.state === 'closed') {
-      channel.subscribe((status) => {
-        if (status === 'SUBSCRIBED') setRealtimeStatus(status)
+      channel.subscribe(async (status) => {
+        if (status === 'SUBSCRIBED') {
+          setRealtimeStatus(status)
+
+          await channel.send({
+            type: 'broadcast',
+            event: 'test-event',
+            payload: { message: 'Hello from Expo!' }
+          })
+        }
       })
     }
 
     return () => {
       channel.unsubscribe()
       supabase.realtime.disconnect()
     }
-  }, [])
+  }, [vsn])
 
   return (
     <View
@@ -34,7 +61,9 @@ export default function Index() {
         backgroundColor: '#fff',
       }}
     >
+      <Text testID="vsn">{vsn}</Text>
       <Text testID="realtime_status">{realtimeStatus || ''}</Text>
+      <Text testID="received_message">{receivedMessage || ''}</Text>
     </View>
   )
 }