WIP: CF SDK: Modified SignalWire Client with auth states

.github/workflows/browser-js-production.yml

@@ -27,9 +27,11 @@ jobs:
             demote,
             audience,
             reattach,
-            callfabric,
-            renegotiation,
             videoElement,
+            fabricV3,
+            fabricV4,
+            renegotiationV3,
+            renegotiationV4,
             v2WebRTC,
           ]
     steps:

.github/workflows/browser-js-staging.yml

@@ -26,9 +26,11 @@ jobs:
             # demote,
             # audience,
             # reattach,
-            callfabric,
-            renegotiation,
             videoElement,
+            fabricV3,
+            fabricV4,
+            renegotiationV3,
+            renegotiationV4,
             v2WebRTC,
           ]
     steps:

internal/e2e-js/fixtures.ts

@@ -28,6 +28,7 @@ type CustomFixture = {
     createRelayAppResource: typeof createRelayAppResource
     resources: Resource[]
   }
+  useV4Client: boolean
 }
 
 const test = baseTest.extend<CustomFixture>({
@@ -125,6 +126,11 @@ const test = baseTest.extend<CustomFixture>({
       await Promise.allSettled(deleteResources)
     }
   },
+  useV4Client: async ({}, use, testInfo) => {
+    const val =
+      (testInfo.project.use as { useV4Client: boolean }).useV4Client ?? false
+    await use(val)
+  },
 })
 
 export { test, expect, Page }

internal/e2e-js/playwright.config.ts

@@ -35,13 +35,16 @@ const reattachTests = [
   'roomSessionReattachWrongCallId.spec.ts',
   'roomSessionReattachWrongProtocol.spec.ts',
 ]
-const callfabricTests = [
+const videoElementTests = ['buildVideoWithVideoSDK.spec.ts']
+const fabricV3Tests = ['reattach.spec.ts']
+const fabricV4Tests = ['reattachV4.spec.ts']
+const fabricBaseTests = [
   'address.spec.ts',
+  'buildVideoWithFabricSDK.spec.ts',
   'cleanup.spec.ts',
   'conversation.spec.ts',
   'holdunhold.spec.ts',
   'raiseHand.spec.ts',
-  'reattach.spec.ts',
   'relayApp.spec.ts',
   'swml.spec.ts',
   'videoRoom.spec.ts',
@@ -52,10 +55,6 @@ const renegotiationTests = [
   'renegotiateAudio.spec.ts',
   'renegotiateVideo.spec.ts',
 ]
-const videoElementTests = [
-  'buildVideoWithVideoSDK.spec.ts',
-  'buildVideoWithFabricSDK.spec.ts',
-]
 const v2WebRTC = ['v2WebrtcFromRest.spec.ts', 'webrtcCalling.spec.ts']
 
 const useDesktopChrome = {
@@ -70,6 +69,16 @@ const useDesktopChrome = {
   },
 }
 
+const useFabricV3Client = {
+  ...useDesktopChrome,
+  useV4Client: false,
+}
+
+const useFabricV4Client = {
+  ...useDesktopChrome,
+  useV4Client: true,
+}
+
 const config: PlaywrightTestConfig = {
   testDir: 'tests',
   reporter: process.env.CI ? 'github' : 'list',
@@ -95,9 +104,11 @@ const config: PlaywrightTestConfig = {
         ...demoteTests,
         ...audienceTests,
         ...reattachTests,
-        ...callfabricTests,
-        ...renegotiationTests,
         ...videoElementTests,
+        ...fabricBaseTests,
+        ...fabricV3Tests,
+        ...fabricV4Tests,
+        ...renegotiationTests,
         ...v2WebRTC,
       ],
     },
@@ -132,19 +143,29 @@ const config: PlaywrightTestConfig = {
       testMatch: reattachTests,
     },
     {
-      name: 'callfabric',
+      name: 'videoElement',
       use: useDesktopChrome,
-      testMatch: callfabricTests,
+      testMatch: videoElementTests,
     },
     {
-      name: 'renegotiation',
-      use: useDesktopChrome,
+      name: 'fabricV3',
+      use: useFabricV3Client,
+      testMatch: [...fabricBaseTests, ...fabricV3Tests],
+    },
+    {
+      name: 'fabricV4',
+      use: useFabricV4Client,
+      testMatch: [...fabricBaseTests, ...fabricV4Tests],
+    },
+    {
+      name: 'renegotiationV3',
+      use: useFabricV3Client,
       testMatch: renegotiationTests,
     },
     {
-      name: 'videoElement',
-      use: useDesktopChrome,
-      testMatch: videoElementTests,
+      name: 'renegotiationV4',
+      use: useFabricV4Client,
+      testMatch: renegotiationTests,
     },
     {
       name: 'v2WebRTC',
@@ -153,4 +174,5 @@ const config: PlaywrightTestConfig = {
     },
   ],
 }
+
 export default config

internal/e2e-js/tests/buildVideoWithFabricSDK.spec.ts

@@ -33,14 +33,15 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should not render any video if rootElement is not passed', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     // Dial an address and join a video room without passing the rootElement
     await dialAddress(page, {
@@ -56,14 +57,15 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should return the rootElement', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     // Dial an address and join a video room without passing the rootElement
     await dialAddress(page, {
@@ -116,14 +118,15 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should render multiple video elements', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     // Dial and expect both video and member overlays
     await dialAddress(page, {
@@ -255,14 +258,15 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should render the video even if the function is called before call.start', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     // Create and expect 1 video elements
     await page.evaluate(
@@ -307,14 +311,15 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should not create a new element if the elements are same', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     // Dial an address and join a video room with rootElement
     await dialAddress(page, {
@@ -345,6 +350,7 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
 
   test('should handle the element for multiple users', async ({
     createCustomPage,
+    useV4Client,
     resource,
   }) => {
     const pageOne = await createCustomPage({ name: '[pageOne]' })
@@ -355,7 +361,10 @@ test.describe('buildVideoElement with CallFabric SDK', () => {
     const roomName = randomizeRoomName('build-video-element')
     await resource.createVideoRoomResource(roomName)
 
-    await Promise.all([createCFClient(pageOne), createCFClient(pageTwo)])
+    await Promise.all([
+      createCFClient(pageOne, { useV4Client }),
+      createCFClient(pageTwo, { useV4Client }),
+    ])
 
     // Dial an address and join a video room from pageOne
     await dialAddress(pageOne, {

internal/e2e-js/tests/callfabric/address.spec.ts

@@ -5,11 +5,12 @@ import { SERVER_URL, createCFClient } from '../../utils'
 test.describe('Addresses', () => {
   test('query multiple addresses and single address', async ({
     createCustomPage,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     const { addressById, addressByName, addressToCompare } =
       await page.evaluate(async () => {
@@ -35,11 +36,12 @@ test.describe('Addresses', () => {
 
   test('Should return only type rooms in ASC order by name', async ({
     createCustomPage,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     const isCorrectlySorted = await page.evaluate(async () => {
       // @ts-expect-error
@@ -95,11 +97,12 @@ test.describe('Addresses', () => {
   */
   test.skip('Should return only type rooms in DESC order by name', async ({
     createCustomPage,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     const isCorrectlySorted = await page.evaluate(async () => {
       // @ts-expect-error

internal/e2e-js/tests/callfabric/cleanup.spec.ts

@@ -9,7 +9,10 @@ import {
 } from '../../utils'
 
 test.describe('Clean up', () => {
-  test('it should create a webscoket client', async ({ createCustomPage }) => {
+  test('it should create a webscoket client', async ({
+    createCustomPage,
+    useV4Client,
+  }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
@@ -30,7 +33,7 @@ test.describe('Clean up', () => {
 
     expect(websocketUrl).toBe(null)
 
-    await createCFClient(page)
+    await createCFClient(page, { useV4Client })
 
     await disconnectClient(page)
 
@@ -42,11 +45,12 @@ test.describe('Clean up', () => {
 
   test('it should cleanup session emitter and workers', async ({
     createCustomPage,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
-    await createCFClient(page, { attachSagaMonitor: true })
+    await createCFClient(page, { attachSagaMonitor: true, useV4Client })
 
     await test.step('the client should have workers and listeners attached', async () => {
       const watchers: Record<string, number> = await page.evaluate(() => {
@@ -91,14 +95,15 @@ test.describe('Clean up', () => {
   test('it should cleanup call emitter and workers without affecting the client', async ({
     createCustomPage,
     resource,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     await page.goto(SERVER_URL)
 
     const roomName = `e2e-cleanup_${uuid()}`
     await resource.createVideoRoomResource(roomName)
 
-    await createCFClient(page, { attachSagaMonitor: true })
+    await createCFClient(page, { attachSagaMonitor: true, useV4Client })
 
     // Dial an address and join a video room
     await dialAddress(page, {

internal/e2e-js/tests/callfabric/conversation.spec.ts

@@ -10,6 +10,7 @@
   test('send message in a room conversation', async ({
     createCustomPage,
     resource,
+    useV4Client,
   }) => {
     const page = await createCustomPage({ name: '[page]' })
     const page2 = await createCustomPage({
@@ -18,8 +19,8 @@
     await page.goto(SERVER_URL)
     await page2.goto(SERVER_URL)
 
-    await createCFClient(page)
-    await createCFClient(page2)
+    await createCFClient(page, { useV4Client })
+    await createCFClient(page2, { useV4Client })
 
     const roomName = `e2e-js-convo-room_${uuid()}`
     await resource.createVideoRoomResource(roomName)
@@ -94,7 +95,7 @@
 
     expect(messages).not.toBeUndefined()
 
     expect(messages.data.length).toEqual(2)
     expect(messages.data[0]).toMatchObject({
       conversation_id: addressId,
       details: {},

internal/e2e-js/tests/callfabric/holdunhold.spec.ts

@@ -15,6 +15,7 @@ test.describe('CallFabric Hold/Unhold Call', () => {
   test('should dial a call and be able to hold/unhold the call', async ({
     createCustomPage,
     resource,
+    useV4Client,
   }) => {
     const pageOne = await createCustomPage({ name: '[page-one]' })
     const pageTwo = await createCustomPage({ name: '[page-two]' })
@@ -25,15 +26,15 @@ test.describe('CallFabric Hold/Unhold Call', () => {
     await resource.createVideoRoomResource(roomName)
 
     await test.step('[page-one] should create a client and dial a call', async () => {
-      await createCFClient(pageOne)
+      await createCFClient(pageOne, { useV4Client })
       await dialAddress(pageOne, {
         address: `/public/${roomName}?channel=video`,
       })
       await expectMCUVisible(pageOne)
     })
 
     await test.step('[page-two] should create a client and dial a call', async () => {
-      await createCFClient(pageTwo)
+      await createCFClient(pageTwo, { useV4Client })
       await dialAddress(pageTwo, {
         address: `/public/${roomName}?channel=video`,
       })