VIDSOL-248: Add PreCall Test page

customWordList.txt

@@ -9,3 +9,4 @@ NOSONAR
 jiraiOSComponentId
 supportedLngs
 applinks
+precall

frontend/package.json

@@ -40,6 +40,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "lodash": "^4.17.21",
     "opentok-layout-js": "^5.4.0",
+    "@vonage/video-client-network-test": "^3.1.6",
     "opentok-solutions-logging": "^1.1.5",
     "postcss": "^8.4.38",
     "react": "^19.1.0",

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import WaitingRoom from './pages/WaitingRoom';
 import SessionProvider from './Context/SessionProvider/session';
 import { PreviewPublisherProvider } from './Context/PreviewPublisherProvider';
 import LandingPage from './pages/LandingPage';
+import PreCallTest from './pages/PreCallTest';
 import { PublisherProvider } from './Context/PublisherProvider';
 import RedirectToWaitingRoom from './components/RedirectToWaitingRoom';
 import UnsupportedBrowserPage from './pages/UnsupportedBrowserPage';
@@ -39,6 +40,7 @@ const App = () => {
           />
         </Route>
         <Route path="/goodbye" element={<GoodBye />} />
+        <Route path="/precall/:roomName" element={<PreCallTest />} />
         <Route path="*" element={<LandingPage />} />
         <Route path="/unsupported-browser" element={<UnsupportedBrowserPage />} />
       </Routes>

frontend/src/components/JoinButton/JoinButton.spec.tsx

@@ -24,7 +24,7 @@ describe('JoinButtonComponent', () => {
 
     fireEvent.click(screen.getByRole('button'));
 
-    expect(mockNavigate).toHaveBeenCalledWith('/waiting-room/test-room');
+    expect(mockNavigate).toHaveBeenCalledWith('/precall/test-room');
   });
 
   it('should not navigate to the waiting room if the room name is empty', () => {

frontend/src/components/JoinButton/JoinButton.tsx

@@ -22,7 +22,7 @@ const JoinButton = ({ roomName, isDisabled }: JoinButtonProps): ReactElement =>
 
   const handleJoin = (event: MouseEvent) => {
     event.preventDefault();
-    navigate(`/waiting-room/${roomName}`);
+    navigate(`/precall/${roomName}`);
   };
 
   return (

frontend/src/components/PreCall/ConnectivityResults/ConnectivityResults.spec.tsx

@@ -0,0 +1,203 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import ConnectivityResults from './ConnectivityResults';
+import { ConnectivityResults as ConnectivityResultsType } from '../../../hooks/useNetworkTest';
+import enTranslations from '../../../locales/en.json';
+
+// Mock react-i18next
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'precallTest.connectivityResults': enTranslations['precallTest.connectivityResults'],
+        'precallTest.status': enTranslations['precallTest.status'],
+        'precallTest.success': enTranslations['precallTest.success'],
+        'precallTest.failed': enTranslations['precallTest.failed'],
+        'precallTest.issues': enTranslations['precallTest.issues'],
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe('ConnectivityResults', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the connectivity results title', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: true,
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(screen.getByText(enTranslations['precallTest.connectivityResults'])).toBeInTheDocument();
+  });
+
+  it('displays success status when connectivity test passes', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: true,
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.status']))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.success']))
+    ).toBeInTheDocument();
+  });
+
+  it('displays failed status when connectivity test fails', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.status']))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.failed']))
+    ).toBeInTheDocument();
+  });
+
+  it('displays failed tests when failedTests array is provided', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+      failedTests: [
+        {
+          type: 'ConnectToSession',
+          error: {
+            message: 'Failed to connect to session',
+            name: 'CONNECTION_ERROR',
+          },
+        },
+        {
+          type: 'PublishToSession',
+          error: {
+            message: 'Failed to publish stream',
+            name: 'PUBLISH_ERROR',
+          },
+        },
+      ],
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.issues']))
+    ).toBeInTheDocument();
+    expect(screen.getByText('ConnectToSession: Failed to connect to session')).toBeInTheDocument();
+    expect(screen.getByText('PublishToSession: Failed to publish stream')).toBeInTheDocument();
+  });
+
+  it('does not display issues section when test is successful', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: true,
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(screen.queryByText(enTranslations['precallTest.issues'])).not.toBeInTheDocument();
+  });
+
+  it('does not display issues section when failedTests array is empty', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+      failedTests: [],
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(screen.queryByText(enTranslations['precallTest.issues'])).not.toBeInTheDocument();
+  });
+
+  it('handles single failed test correctly', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+      failedTests: [
+        {
+          type: 'MediaAccess',
+          error: {
+            message: 'Camera access denied',
+            name: 'MEDIA_ACCESS_DENIED',
+          },
+        },
+      ],
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.issues']))
+    ).toBeInTheDocument();
+    expect(screen.getByText('MediaAccess: Camera access denied')).toBeInTheDocument();
+  });
+
+  it('handles multiple failed tests with different error types', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+      failedTests: [
+        {
+          type: 'NetworkLatency',
+          error: {
+            message: 'High network latency detected',
+            name: 'LATENCY_ERROR',
+          },
+        },
+        {
+          type: 'Bandwidth',
+          error: {
+            message: 'Insufficient bandwidth',
+            name: 'BANDWIDTH_ERROR',
+          },
+        },
+        {
+          type: 'FirewallBlocking',
+          error: {
+            message: 'Firewall blocking connection',
+            name: 'FIREWALL_ERROR',
+          },
+        },
+      ],
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.issues']))
+    ).toBeInTheDocument();
+    expect(screen.getByText('NetworkLatency: High network latency detected')).toBeInTheDocument();
+    expect(screen.getByText('Bandwidth: Insufficient bandwidth')).toBeInTheDocument();
+    expect(screen.getByText('FirewallBlocking: Firewall blocking connection')).toBeInTheDocument();
+  });
+
+  it('renders failed status with issues when both conditions are met', () => {
+    const mockResults: ConnectivityResultsType = {
+      success: false,
+      failedTests: [
+        {
+          type: 'TestType',
+          error: {
+            message: 'Test error message',
+            name: 'TEST_ERROR',
+          },
+        },
+      ],
+    };
+
+    render(<ConnectivityResults results={mockResults} />);
+
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.issues']))
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.includes(enTranslations['precallTest.failed']))
+    ).toBeInTheDocument();
+    expect(screen.getByText('TestType: Test error message')).toBeInTheDocument();
+  });
+});

frontend/src/components/PreCall/ConnectivityResults/ConnectivityResults.tsx

@@ -0,0 +1,43 @@
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConnectivityResults as ConnectivityResultsType } from '../../../hooks/useNetworkTest';
+
+export type ConnectivityResultsProps = {
+  results: ConnectivityResultsType;
+};
+
+/**
+ * ConnectivityResults Component
+ *
+ * This component displays the results of the connectivity test.
+ * @param {ConnectivityResultsProps} props - The props for the component.
+ * @property {ConnectivityResultsType} results - The connectivity test results to display.
+ * @returns {ReactElement} The connectivity results component.
+ */
+const ConnectivityResults = ({ results }: ConnectivityResultsProps): ReactElement => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="mb-6 rounded-lg border bg-white p-4 text-left">
+      <h3 className="mb-2 font-bold">{t('precallTest.connectivityResults')}</h3>
+      <p>
+        {t('precallTest.status')}:{' '}
+        {results.success ? `✅ ${t('precallTest.success')}` : `❌ ${t('precallTest.failed')}`}
+      </p>
+      {results.failedTests && results.failedTests.length > 0 && (
+        <div className="mt-2">
+          <h4 className="font-semibold">{t('precallTest.issues')}:</h4>
+          {results.failedTests.map((test) => (
+            <div key={test.type} className="ml-4 text-sm">
+              <p>
+                {test.type}: {test.error.message}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ConnectivityResults;

frontend/src/components/PreCall/ConnectivityResults/index.tsx

@@ -0,0 +1,3 @@
+import ConnectivityResults from './ConnectivityResults';
+
+export default ConnectivityResults;