test(calling): add call history e2e flow

docs/samples/calling/app.js

@@ -24,8 +24,8 @@ let line;
 let transferInitiated;
 const numberOfDays = 7;
 const callHistoryLimit = 20;
-const callHistorySort = 'ASC';
-const callHistorySortBy = 'startTime';
+const callHistorySort = 'DESC';
+const callHistorySortBy = 'endTime';
 const voicemailOffset = 0;
 const voicemailOffsetLimit = 20;
 const voicemailSort = 'DESC';
@@ -997,10 +997,11 @@ function createContactsTable(contactsResponse) {
 function definedTable(callHistoryResponse) {
   const callHistoryTable = document.getElementById('callHistoryTableId');
   const callHistoryHeader = document.getElementById('callHistoryHeaderId');
+  const userSessions = callHistoryResponse?.data?.userSessions ?? [];
   const callHistHeaderHtml = `<tr><th>Id</th>
   <th>Name</th>
   <th>Direction</th>
-  <th>Deposition</th>
+  <th>Disposition</th>
   <th>StartTime</th>
   <th>EndTime</th>
   <th>SessionType</th>
@@ -1009,20 +1010,22 @@ function definedTable(callHistoryResponse) {
   <th>Forwarded by</th>
   </tr>`;
 
-  callHistoryHeader.innerHTML += callHistHeaderHtml;
+  callHistoryHeader.innerHTML = callHistHeaderHtml;
+  callHistoryTable.innerHTML = '';
 
-  for (let i = 0; i < callHistoryResponse.data.userSessions.length; i += 1) {
+  for (let i = 0; i < userSessions.length; i += 1) {
+    const session = userSessions[i];
     const callHistoryRow = `<tr>
     <td>${i + 1}</td>
-    <td>${callHistoryResponse.data.userSessions[i].other.name}</td>
-    <td>${callHistoryResponse.data.userSessions[i].direction}</td>
-    <td>${callHistoryResponse.data.userSessions[i].disposition}</td>
-    <td>${callHistoryResponse.data.userSessions[i].startTime}</td>
-    <td>${callHistoryResponse.data.userSessions[i].endTime}</td>
-    <td>${callHistoryResponse.data.userSessions[i].sessionType}</td>
-    <td>${callHistoryResponse.data.userSessions[i].other.callbackAddress}</td>
-    <td>${callHistoryResponse.data.userSessions[i].callingSpecifics?.redirectionDetails?.reason === undefined ? 'NA' : callHistoryResponse.data.userSessions[i].callingSpecifics.redirectionDetails.reason}</td>
-    <td>${callHistoryResponse.data.userSessions[i].callingSpecifics?.redirectionDetails?.name === undefined ? 'NA' : callHistoryResponse.data.userSessions[i].callingSpecifics.redirectionDetails.name}</td>
+    <td>${session.other?.name ?? 'NA'}</td>
+    <td>${session.direction ?? 'NA'}</td>
+    <td>${session.disposition ?? 'NA'}</td>
+    <td>${session.startTime ?? 'NA'}</td>
+    <td>${session.endTime ?? 'NA'}</td>
+    <td>${session.sessionType ?? 'NA'}</td>
+    <td>${session.other?.callbackAddress ?? session.links?.callbackAddress ?? 'NA'}</td>
+    <td>${session.callingSpecifics?.redirectionDetails?.reason ?? 'NA'}</td>
+    <td>${session.callingSpecifics?.redirectionDetails?.name ?? 'NA'}</td>
   </tr>`;
 
     callHistoryTable.innerHTML += callHistoryRow;
@@ -1036,29 +1039,31 @@ function definedTable(callHistoryResponse) {
 async function createCallHistory() {
   try {
     callHistory.on('callHistory:user_recent_sessions', (sessionData) => {
-      console.log('Users recent session data : ', sessionData.data.userSessions.userSessions[0]);
-      userSessionData.innerText = `${JSON.stringify(
-        sessionData.data.userSessions.userSessions[0]
-      )}`;
+      const recentSession =
+        sessionData.data.userSessions?.userSessions?.[0] ?? sessionData.data.userSessions?.[0];
+
+      console.log('Users recent session data : ', recentSession);
+      userSessionData.innerText = `${JSON.stringify(recentSession)}`;
     });
 
+    callHistoryElm.disabled = true;
     const callHistoryResponse = await callHistory.getCallHistoryData(
       numberOfDays,
       callHistoryLimit,
       callHistorySort,
       callHistorySortBy
     );
 
-    callHistoryElm.disabled = false;
     definedTable(callHistoryResponse);
     console.log('Call History response data ', callHistoryResponse.data.userSessions);
-    callHistoryElm.disabled = true;
 
     return callHistoryResponse;
   } catch (err) {
     console.log(`Call history error response ${err}`);
 
     return err;
+  } finally {
+    callHistoryElm.disabled = false;
   }
 }
 

packages/calling/playwright.config.ts

@@ -22,7 +22,7 @@ const chromiumArgs = [
   '--disable-extensions', // Prevent extensions from interfering with tests
   '--disable-plugins', // Prevent plugins from interfering with tests
   '--ignore-certificate-errors', // Accept self-signed certs from local dev server
-  ...(process.env.CI ? [] : ['--auto-open-devtools-for-tabs']), // Open DevTools only in local runs
+  ...(process.env.PW_OPEN_DEVTOOLS === 'true' ? ['--auto-open-devtools-for-tabs'] : []),
 ];
 
 const browserOptions: Record<string, object> = {

packages/calling/playwright/constants/selectors.ts

@@ -51,5 +51,10 @@ export const CALLING_SELECTORS = {
   INCOMING_CALL: '#incoming-call',
   CALL_QUALITY_METRICS: '#call-quality-metrics',
 
+  // Call History
+  CALL_HISTORY_BTN: '#Call-history',
+  CALL_HISTORY_HEADER: '#callHistoryHeaderId',
+  CALL_HISTORY_TABLE_BODY: '#callHistoryTableId',
+
   END_BTN: '#end',
 };

packages/calling/playwright/suites/set-2user.spec.ts

@@ -2,11 +2,13 @@ import {callLifecycleTests, callLifecycleMediaTests} from '../test-groups/call-l
 import {callControlTests, callHoldTests, callHoldErrorTests} from '../test-groups/call-controls';
 import {callErrorTests, callEdgeCaseTests} from '../test-groups/call-errors';
 import {callKeepaliveTests} from '../test-groups/call-keepalive';
+import {callHistoryTests} from '../test-groups/call-history';
 
 // Each group gets its own fresh browser contexts via beforeAll.
 // Account roles resolved from testInfo.project.name → USER_SETS.
 callLifecycleTests();
 callLifecycleMediaTests();
+callHistoryTests();
 callKeepaliveTests();
 callErrorTests();
 callEdgeCaseTests();