From 0f76df63fbe4dc07a26328308a3c4c93d22c2895 Mon Sep 17 00:00:00 2001 From: olipyskoty <77076398+olipyskoty@users.noreply.github.com> Date: Tue, 13 Apr 2021 15:24:53 -0400 Subject: [PATCH] Video 4673 remove preflight test (#489) --- src/__mocks__/twilio-video.ts | 9 +- .../IntroContainer/IntroContainer.test.tsx | 10 -- .../IntroContainer/IntroContainer.tsx | 7 -- .../PreJoinScreens/PreJoinScreens.test.tsx | 48 +--------- .../PreJoinScreens/PreJoinScreens.tsx | 12 +-- .../PreflightTest/PreflightTest.test.tsx | 69 -------------- .../PreflightTest/PreflightTest.tsx | 93 ------------------- .../ProgressIndicator.test.tsx | 10 -- .../ProgressIndicator/ProgressIndicator.tsx | 52 ----------- .../ProgressIndicator.test.tsx.snap | 25 ----- .../__snapshots__/PreflightTest.test.tsx.snap | 33 ------- .../getNetworkCondition.test.ts | 59 ------------ .../getNetworkCondition.ts | 27 ------ .../useGetPreflightTokens.test.ts | 32 ------- .../useGetPreflightTokens.ts | 30 ------ .../usePreflightTest/usePreflightTest.test.ts | 85 ----------------- .../usePreflightTest/usePreflightTest.ts | 59 ------------ src/types.ts | 49 ---------- 18 files changed, 5 insertions(+), 704 deletions(-) delete mode 100644 src/components/PreJoinScreens/PreflightTest/PreflightTest.test.tsx delete mode 100644 src/components/PreJoinScreens/PreflightTest/PreflightTest.tsx delete mode 100644 src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.test.tsx delete mode 100644 src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.tsx delete mode 100644 src/components/PreJoinScreens/PreflightTest/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap delete mode 100644 src/components/PreJoinScreens/PreflightTest/__snapshots__/PreflightTest.test.tsx.snap delete mode 100644 src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.test.ts delete mode 100644 src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.ts delete mode 100644 src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.test.ts delete mode 100644 src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.ts delete mode 100644 src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.test.ts delete mode 100644 src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.ts diff --git a/src/__mocks__/twilio-video.ts b/src/__mocks__/twilio-video.ts index 050cfc33e..a8c47db16 100644 --- a/src/__mocks__/twilio-video.ts +++ b/src/__mocks__/twilio-video.ts @@ -21,18 +21,11 @@ class MockTrack extends EventEmitter { } } -class MockPreflightTest extends EventEmitter { - stop = jest.fn(); -} - -const mockPreflightTest = new MockPreflightTest(); - const twilioVideo = { connect: jest.fn(() => Promise.resolve(mockRoom)), createLocalTracks: jest.fn(() => Promise.resolve([new MockTrack('video'), new MockTrack('audio')])), createLocalVideoTrack: jest.fn(() => Promise.resolve(new MockTrack('video'))), - testPreflight: jest.fn(() => mockPreflightTest), }; -export { mockRoom, mockPreflightTest }; +export { mockRoom }; export default twilioVideo; diff --git a/src/components/IntroContainer/IntroContainer.test.tsx b/src/components/IntroContainer/IntroContainer.test.tsx index c2c6735d9..5d5e28b24 100644 --- a/src/components/IntroContainer/IntroContainer.test.tsx +++ b/src/components/IntroContainer/IntroContainer.test.tsx @@ -67,14 +67,4 @@ describe('the IntroContainer component', () => { expect(wrapper.find('span').text()).toBe('Test Content'); }); - - it('should render subcontent when provided', () => { - const wrapper = shallow( - Test Sub Content}> - Test Content - - ); - - expect(wrapper.find('h1').text()).toBe('Test Sub Content'); - }); }); diff --git a/src/components/IntroContainer/IntroContainer.tsx b/src/components/IntroContainer/IntroContainer.tsx index 28123eb56..0a2085246 100644 --- a/src/components/IntroContainer/IntroContainer.tsx +++ b/src/components/IntroContainer/IntroContainer.tsx @@ -87,16 +87,10 @@ const useStyles = makeStyles((theme: Theme) => ({ fontSize: '1.1rem', }, }, - subContentContainer: { - position: 'absolute', - marginTop: '1em', - width: '100%', - }, })); interface IntroContainerProps { children: React.ReactNode; - subContent?: React.ReactNode; } const IntroContainer = (props: IntroContainerProps) => { @@ -120,7 +114,6 @@ const IntroContainer = (props: IntroContainerProps) => {
{props.children}
- {props.subContent &&
{props.subContent}
} ); diff --git a/src/components/PreJoinScreens/PreJoinScreens.test.tsx b/src/components/PreJoinScreens/PreJoinScreens.test.tsx index d009c7dca..0c94323b8 100644 --- a/src/components/PreJoinScreens/PreJoinScreens.test.tsx +++ b/src/components/PreJoinScreens/PreJoinScreens.test.tsx @@ -3,13 +3,11 @@ import { act } from 'react-dom/test-utils'; import DeviceSelectionScreen from './DeviceSelectionScreen/DeviceSelectionScreen'; import MediaErrorSnackbar from './MediaErrorSnackbar/MediaErrorSnackbar'; import { mount, shallow } from 'enzyme'; -import PreflightTest from './PreflightTest/PreflightTest'; import PreJoinScreens from './PreJoinScreens'; import RoomNameScreen from './RoomNameScreen/RoomNameScreen'; import { useParams } from 'react-router-dom'; import { useAppState } from '../../state'; import useVideoContext from '../../hooks/useVideoContext/useVideoContext'; -import Video from 'twilio-video'; delete window.location; // @ts-ignore @@ -25,6 +23,7 @@ Object.defineProperty(window.history, 'replaceState', { value: mockReplaceState jest.mock('../../state'); jest.mock('react-router-dom', () => ({ useParams: jest.fn() })); jest.mock('../../hooks/useVideoContext/useVideoContext'); +jest.mock('./MediaErrorSnackbar/MediaErrorSnackbar', () => () => null); const mockUseAppState = useAppState as jest.Mock; const mockUseParams = useParams as jest.Mock; const mockUseVideoContext = useVideoContext as jest.Mock; @@ -80,49 +79,6 @@ describe('the PreJoinScreens component', () => { expect(wrapper.find(DeviceSelectionScreen).exists()).toBe(true); }); - it('should render the PreflightTest component only while on the DeviceSelection step', () => { - const wrapper = shallow(); - - expect(wrapper.prop('subContent')).toBe(false); - expect(wrapper.find(DeviceSelectionScreen).exists()).toBe(false); - - const handleSubmit = wrapper.find(RoomNameScreen).prop('handleSubmit'); - handleSubmit({ preventDefault: () => {} } as any); - - expect(wrapper.prop('subContent')).toEqual( - <> - - - - ); - expect(wrapper.find(DeviceSelectionScreen).exists()).toBe(true); - }); - - it('should not render the PreflightTest component when the Video.testPreflight function does not exist', () => { - // Save the testPreflight function - const testPreflightFunction = Video.testPreflight; - - // @ts-ignore - delete Video.testPreflight; - const wrapper = shallow(); - - expect(wrapper.prop('subContent')).toBe(false); - expect(wrapper.find(DeviceSelectionScreen).exists()).toBe(false); - - const handleSubmit = wrapper.find(RoomNameScreen).prop('handleSubmit'); - handleSubmit({ preventDefault: () => {} } as any); - - expect(wrapper.prop('subContent')).toEqual( - <> - {undefined} - - - ); - - // Restore the testPreflight function to the mock - Video.testPreflight = testPreflightFunction; - }); - it('should populate the room name from the URL and switch to the DeviceSelectionScreen when the displayName is present for the user', () => { const wrapper = mount(); const roomName = wrapper.find(DeviceSelectionScreen).prop('roomName'); @@ -154,7 +110,7 @@ describe('the PreJoinScreens component', () => { wrapper.update(); }); - const error = wrapper.children().prop('subContent').props.children[1].props.error; + const error = wrapper.find(MediaErrorSnackbar).prop('error'); expect(error).toBe('testError'); expect(mockGetAudioAndVideoTracks).toHaveBeenCalledTimes(1); // This makes sure that 'getAudioAndVideoTracks' isn't called repeatedly }); diff --git a/src/components/PreJoinScreens/PreJoinScreens.tsx b/src/components/PreJoinScreens/PreJoinScreens.tsx index 0967992e2..98e8e488b 100644 --- a/src/components/PreJoinScreens/PreJoinScreens.tsx +++ b/src/components/PreJoinScreens/PreJoinScreens.tsx @@ -2,12 +2,10 @@ import React, { useState, useEffect, FormEvent } from 'react'; import DeviceSelectionScreen from './DeviceSelectionScreen/DeviceSelectionScreen'; import IntroContainer from '../IntroContainer/IntroContainer'; import MediaErrorSnackbar from './MediaErrorSnackbar/MediaErrorSnackbar'; -import PreflightTest from './PreflightTest/PreflightTest'; import RoomNameScreen from './RoomNameScreen/RoomNameScreen'; import { useAppState } from '../../state'; import { useParams } from 'react-router-dom'; import useVideoContext from '../../hooks/useVideoContext/useVideoContext'; -import Video from 'twilio-video'; export enum Steps { roomNameStep, @@ -53,15 +51,9 @@ export default function PreJoinScreens() { setStep(Steps.deviceSelectionStep); }; - const SubContent = ( - <> - {Video.testPreflight && } - - - ); - return ( - + + {step === Steps.roomNameStep && ( ; -const mockUsePreflightTest = usePreflightTest as jest.Mock; -const mockGetNetworkCondition = getNetworkCondition as jest.Mock; - -mockUseGetPreflightTokens.mockImplementation(() => ({ tokens: ['mockTokenA', 'mockTokenB'], tokenError: undefined })); -mockGetNetworkCondition.mockImplementation(() => NetworkCondition.Green); - -describe('the PreflightTest component', () => { - it('should render correctly when the test is in progress', () => { - mockUsePreflightTest.mockImplementation(() => ({})); - const wrapper = shallow(); - expect(wrapper.text()).toContain('Checking your network connection'); - expect(wrapper.find(ProgressIndicator).exists()).toBe(true); - expect(wrapper.find(Result).exists()).toBe(false); - }); - - it('should render correctly when there is a report', () => { - mockUsePreflightTest.mockImplementation(() => ({ testReport: 'mockTestReport' })); - const wrapper = shallow(); - expect(wrapper.find(ProgressIndicator).exists()).toBe(false); - expect(wrapper.find(Result).exists()).toBe(true); - }); - - it('should render correctly when there is a failure', () => { - mockUsePreflightTest.mockImplementation(() => ({ testFailure: 'mockTestFailure' })); - const wrapper = shallow(); - expect(wrapper.find(ProgressIndicator).exists()).toBe(false); - expect(wrapper.find(Result).exists()).toBe(true); - }); -}); - -describe('the Result component', () => { - it('should render correctly when the network condition is green', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render correctly when the network condition is yellow', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render correctly when the network condition is red', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render correctly when there is an error', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should not render anything when there are no props', () => { - const wrapper = shallow(); - expect(wrapper.isEmptyRender()).toBe(true); - }); -}); diff --git a/src/components/PreJoinScreens/PreflightTest/PreflightTest.tsx b/src/components/PreJoinScreens/PreflightTest/PreflightTest.tsx deleted file mode 100644 index df4cfcab4..000000000 --- a/src/components/PreJoinScreens/PreflightTest/PreflightTest.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import React from 'react'; -import usePreflightTest from './usePreflightTest/usePreflightTest'; -import { makeStyles, Typography, Grid } from '@material-ui/core'; -import useGetPreflightTokens from './useGetPreflightTokens/useGetPreflightTokens'; -import getNetworkCondition from './getNetworkCondition/getNetworkCondition'; -import ProgressIndicator from './ProgressIndicator/ProgressIndicator'; -import { SuccessIcon } from '../../../icons/SuccessIcon'; -import WarningIcon from '../../../icons/WarningIcon'; -import ErrorIcon from '../../../icons/ErrorIcon'; - -export const TEST_DURATION = 10000; - -export enum NetworkCondition { - Red, - Yellow, - Green, -} - -const useStyles = makeStyles({ - iconContainer: { - display: 'flex', - alignItems: 'center', - marginRight: '0.4em', - }, - result: { - color: 'white', - }, -}); - -function ResultItem({ children, icon }: { children: React.ReactNode; icon: React.ReactNode }) { - const classes = useStyles(); - - return ( - <> -
{icon}
- - {children} - - - ); -} - -export function Result({ networkCondition, error }: { networkCondition?: NetworkCondition; error?: Error }) { - if (error) { - return }>There was a problem connecting to the network; - } - - if (networkCondition === NetworkCondition.Red) { - return ( - }> - Poor network conditions. You may experience poor call quality and reliability. - - ); - } - - if (networkCondition === NetworkCondition.Yellow) { - return ( - }> - Poor network conditions. You may experience degraded video performance. - - ); - } - - if (networkCondition === NetworkCondition.Green) { - return }>Your network connection is stable; - } - - return null; -} - -export default function PreflightTest() { - const classes = useStyles(); - - const { tokens, tokenError } = useGetPreflightTokens(); - const { testFailure, testReport } = usePreflightTest(tokens?.[0], tokens?.[1]); - - const networkCondition = getNetworkCondition(testReport); - - return ( - - {!testFailure && !testReport ? ( - <> - - - Checking your network connection - - - ) : ( - - )} - - ); -} diff --git a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.test.tsx b/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.test.tsx deleted file mode 100644 index 79e895a4c..000000000 --- a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.test.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import renderer from 'react-test-renderer'; -import ProgressIndicator from './ProgressIndicator'; - -describe('the ProgressIndicator component', () => { - it('should render correctly', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); - }); -}); diff --git a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.tsx b/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.tsx deleted file mode 100644 index f02418e0c..000000000 --- a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/ProgressIndicator.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import React from 'react'; -import { makeStyles } from '@material-ui/core'; -import { TEST_DURATION } from '../PreflightTest'; - -const SIZE = 24; -const THICKNESS = 3; -const OUTER_RADIUS = SIZE / 2; -const INNER_RADIUS = OUTER_RADIUS - THICKNESS; -const INNER_CIRCUMFERENCE = 2 * Math.PI * INNER_RADIUS; - -const useStyles = makeStyles(() => ({ - svg: { - transform: 'rotate(-90deg)', - marginRight: '0.6em', - fill: 'none', - }, - innerCircle: { - stroke: 'rgb(200, 204, 207)', - }, - circle: { - stroke: '#027AC5', - strokeDasharray: INNER_CIRCUMFERENCE, - strokeDashoffset: '0px', - animation: `${TEST_DURATION / 1000 + 1}s $progress linear`, - }, - '@keyframes progress': { - '0%': { - strokeDashoffset: `${INNER_CIRCUMFERENCE}px`, - }, - '100%': { - strokeDashoffset: '0px', - }, - }, -})); - -export default function ProgressIndicator() { - const classes = useStyles(); - - return ( - - - - - ); -} diff --git a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap b/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap deleted file mode 100644 index 75658d1a4..000000000 --- a/src/components/PreJoinScreens/PreflightTest/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`the ProgressIndicator component should render correctly 1`] = ` - - - - -`; diff --git a/src/components/PreJoinScreens/PreflightTest/__snapshots__/PreflightTest.test.tsx.snap b/src/components/PreJoinScreens/PreflightTest/__snapshots__/PreflightTest.test.tsx.snap deleted file mode 100644 index 2e0cbbdc4..000000000 --- a/src/components/PreJoinScreens/PreflightTest/__snapshots__/PreflightTest.test.tsx.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`the Result component should render correctly when the network condition is green 1`] = ` -} -> - Your network connection is stable - -`; - -exports[`the Result component should render correctly when the network condition is red 1`] = ` -} -> - Poor network conditions. You may experience poor call quality and reliability. - -`; - -exports[`the Result component should render correctly when the network condition is yellow 1`] = ` -} -> - Poor network conditions. You may experience degraded video performance. - -`; - -exports[`the Result component should render correctly when there is an error 1`] = ` -} -> - There was a problem connecting to the network - -`; diff --git a/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.test.ts b/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.test.ts deleted file mode 100644 index fe0b43906..000000000 --- a/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.test.ts +++ /dev/null @@ -1,59 +0,0 @@ -import getNetworkCondition, { getSingleNetworkCondition } from './getNetworkCondition'; -import { NetworkCondition } from '../PreflightTest'; -import { PreflightTestReport } from '../../../../types'; - -describe('the getSingleNetworkCondition function', () => { - it('should return NetworkCondition.Green when the provided stat is undefined', () => { - expect(getSingleNetworkCondition(undefined, 10, 100)).toBe(NetworkCondition.Green); - }); - - it('should return NetworkCondition.Green when the provided stat is below the Yellow threshold', () => { - expect(getSingleNetworkCondition(1, 10, 100)).toBe(NetworkCondition.Green); - }); - - it('should return NetworkCondition.Yellow when the provided stat is below the Red thresold and above the Yellow threshold', () => { - expect(getSingleNetworkCondition(50, 10, 100)).toBe(NetworkCondition.Yellow); - }); - - it('should return NetworkCondition.Red when the provided stat is above the Red threshold', () => { - expect(getSingleNetworkCondition(200, 10, 100)).toBe(NetworkCondition.Red); - }); -}); - -describe('the getNetworkCondition function', () => { - it('should return NetworkCondition.Green when all stats in the report are Green', () => { - const mockReport = { - stats: { - rtt: { average: 10 }, // Green - jitter: { average: 10 }, // Green - packetLoss: { average: 1 }, // Green - }, - } as PreflightTestReport; - - expect(getNetworkCondition(mockReport)).toBe(NetworkCondition.Green); - }); - - it('should return NetworkCondition.Yellow when one stat in the report is Yellow', () => { - const mockReport = { - stats: { - rtt: { average: 10 }, // Green - jitter: { average: 10 }, // Green - packetLoss: { average: 3 }, // Yellow - }, - } as PreflightTestReport; - - expect(getNetworkCondition(mockReport)).toBe(NetworkCondition.Yellow); - }); - - it('should return NetworkCondition.Red when one stat in the report is Red', () => { - const mockReport = { - stats: { - rtt: { average: 1000 }, // Red - jitter: { average: 10 }, // Green - packetLoss: { average: 1 }, // Green - }, - } as PreflightTestReport; - - expect(getNetworkCondition(mockReport)).toBe(NetworkCondition.Red); - }); -}); diff --git a/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.ts b/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.ts deleted file mode 100644 index d559c58f3..000000000 --- a/src/components/PreJoinScreens/PreflightTest/getNetworkCondition/getNetworkCondition.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { NetworkCondition } from '../PreflightTest'; -import { PreflightTestReport } from '../../../../types'; - -export function getSingleNetworkCondition(stat: number | undefined, yellowThreshold: number, redThreshold: number) { - if (typeof stat === 'undefined') { - // We ignore values that are missing - return NetworkCondition.Green; - } - - if (stat >= redThreshold) return NetworkCondition.Red; - if (stat >= yellowThreshold) return NetworkCondition.Yellow; - return NetworkCondition.Green; -} - -export default function getNetworkCondition(testReport?: PreflightTestReport) { - if (!testReport) return undefined; - - const latency = testReport.stats.rtt?.average; - const jitter = testReport.stats.jitter.average; - const packetLoss = testReport.stats.packetLoss.average; - - return Math.min( - getSingleNetworkCondition(latency, 200, 400), - getSingleNetworkCondition(jitter, 30, 100), - getSingleNetworkCondition(packetLoss, 3, 7) - ) as NetworkCondition; -} diff --git a/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.test.ts b/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.test.ts deleted file mode 100644 index b85cbb4d1..000000000 --- a/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.test.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { useAppState } from '../../../../state'; -import useGetPreflightTokens from './useGetPreflightTokens'; - -jest.mock('../../../../state'); -const mockUseAppState = useAppState as jest.Mock; - -const mockGetToken = jest.fn(() => Promise.resolve('mockToken')); -mockUseAppState.mockImplementation(() => ({ getToken: mockGetToken })); - -describe('the useGetPreflightTokens hook', () => { - it('should return two tokens', async () => { - const { result, waitForNextUpdate } = renderHook(useGetPreflightTokens); - await waitForNextUpdate(); - expect(result.current).toEqual({ tokens: ['mockToken', 'mockToken'], tokenError: undefined }); - }); - - it('should ignore a rerender that occurs before the tokens have been fetched', async () => { - const { result, rerender, waitForNextUpdate } = renderHook(useGetPreflightTokens); - rerender(); - await waitForNextUpdate(); - expect(result.current).toEqual({ tokens: ['mockToken', 'mockToken'], tokenError: undefined }); - }); - - it('should return the tokenError property when there is an error', async () => { - const mockGetTokenFn = jest.fn(() => Promise.reject('mockError')); - mockUseAppState.mockImplementationOnce(() => ({ getToken: mockGetTokenFn })); - const { result, waitForNextUpdate } = renderHook(useGetPreflightTokens); - await waitForNextUpdate(); - expect(result.current).toEqual({ tokens: undefined, tokenError: 'mockError' }); - }); -}); diff --git a/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.ts b/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.ts deleted file mode 100644 index 42e5ca577..000000000 --- a/src/components/PreJoinScreens/PreflightTest/useGetPreflightTokens/useGetPreflightTokens.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { nanoid } from 'nanoid'; -import { useAppState } from '../../../../state'; -import { useState, useEffect } from 'react'; - -export default function useGetPreflightTokens() { - const { getToken } = useAppState(); - const [tokens, setTokens] = useState<[string, string]>(); - const [tokenError, setTokenError] = useState(); - const [isFetching, setIsFetching] = useState(false); - - useEffect(() => { - if (!isFetching && !tokens) { - const roomName = 'preflight-network-test-' + nanoid(); - - setIsFetching(true); - - const publisherIdentity = 'participant-' + nanoid(); - const subscriberIdentity = 'participant-' + nanoid(); - - Promise.all([getToken(publisherIdentity, roomName), getToken(subscriberIdentity, roomName)]) - .then(newTokens => { - setTokens(newTokens); - setIsFetching(false); - }) - .catch(error => setTokenError(error)); - } - }, [getToken, isFetching, tokens]); - - return { tokens, tokenError }; -} diff --git a/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.test.ts b/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.test.ts deleted file mode 100644 index e7fa232c9..000000000 --- a/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.test.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { act, renderHook } from '@testing-library/react-hooks'; -import { mockPreflightTest } from '../../../../__mocks__/twilio-video'; -import usePreflightTest from './usePreflightTest'; -import useVideoContext from '../../../../hooks/useVideoContext/useVideoContext'; - -jest.mock('../../../../hooks/useVideoContext/useVideoContext'); -const mockUseVideoContext = useVideoContext as jest.Mock; - -mockUseVideoContext.mockImplementation(() => ({ - isConnecting: false, -})); - -describe('the usePreflightTest hook', () => { - beforeEach(jest.clearAllMocks); - - it('should return a testReport when the test succeeds', () => { - const { result } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - act(() => { - mockPreflightTest.emit('completed', 'mockReport'); - }); - expect(result.current.testReport).toBe('mockReport'); - expect(result.current.testFailure).toBe(undefined); - }); - - it('should set isTestRunning to true when the test is running', () => { - const { result } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - expect(result.current.isTestRunning).toBe(true); - act(() => { - mockPreflightTest.emit('completed', 'mockReport'); - }); - expect(result.current.isTestRunning).toBe(false); - }); - - it('should ignore a rerender when the test is in progress', () => { - const { result, rerender } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - rerender(); - act(() => { - mockPreflightTest.emit('completed', 'mockReport'); - }); - expect(result.current.testReport).toBe('mockReport'); - }); - - it('should return a testFailure when there is an error', () => { - const { result } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - expect(result.current.isTestRunning).toBe(true); - act(() => { - mockPreflightTest.emit('failed', 'mockError'); - }); - expect(result.current.isTestRunning).toBe(false); - expect(result.current.testReport).toBe(undefined); - expect(result.current.testFailure).toBe('mockError'); - }); - - it('should stop the test when the hook is unmounted', () => { - const { unmount } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - - act(() => { - mockPreflightTest.emit('completed', 'mockReport'); - }); - - unmount(); - - expect(mockPreflightTest.stop).toHaveBeenCalled(); - expect(mockPreflightTest.listenerCount('completed')).toBe(0); - expect(mockPreflightTest.listenerCount('failed')).toBe(0); - }); - - it('should stop the test when connecting to a room', () => { - const { rerender } = renderHook(() => usePreflightTest('tokenA', 'tokenB')); - - act(() => { - mockPreflightTest.emit('completed', 'mockReport'); - }); - - mockUseVideoContext.mockImplementationOnce(() => ({ - isConnecting: true, - })); - - rerender(); - - expect(mockPreflightTest.stop).toHaveBeenCalled(); - expect(mockPreflightTest.listenerCount('completed')).toBe(0); - expect(mockPreflightTest.listenerCount('failed')).toBe(0); - }); -}); diff --git a/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.ts b/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.ts deleted file mode 100644 index 115e6f6e5..000000000 --- a/src/components/PreJoinScreens/PreflightTest/usePreflightTest/usePreflightTest.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { PreflightTestReport, PreflightTest } from '../../../../types'; -import { TEST_DURATION } from '../PreflightTest'; -import Video from 'twilio-video'; -import { useEffect, useState, useRef } from 'react'; -import useVideoContext from '../../../../hooks/useVideoContext/useVideoContext'; - -export default function usePreflightTest(publisherToken?: string, subscriberToken?: string) { - const { isConnecting } = useVideoContext(); - const [testReport, setTestReport] = useState(); - const [testFailure, setTestFailure] = useState(); - const [isTestRunning, setIsTestRunning] = useState(false); - const preflightTestRef = useRef(); - - // This will stop the preflight test when the user connects to a room - useEffect(() => { - if (isConnecting) { - preflightTestRef.current?.stop(); - preflightTestRef.current?.removeAllListeners('completed'); - preflightTestRef.current?.removeAllListeners('failed'); - } - }, [isConnecting]); - - // This will stop the preflight test when the component is unmounted. - useEffect(() => { - return () => { - preflightTestRef.current?.stop(); - preflightTestRef.current?.removeAllListeners('completed'); - preflightTestRef.current?.removeAllListeners('failed'); - }; - }, []); - - useEffect(() => { - if (publisherToken && subscriberToken && !testReport && !testFailure && !isTestRunning) { - setIsTestRunning(true); - - preflightTestRef.current = Video.testPreflight(publisherToken, subscriberToken, { duration: TEST_DURATION }); - - preflightTestRef - .current!.on('completed', (report: any) => { - setTestReport(report); - setIsTestRunning(false); - console.log('Preflight network test completed. See test report below:'); - console.log(report); - }) - .on('failed', (error: any) => { - setTestFailure(error); - setIsTestRunning(false); - console.log('Preflight network test failed. See error below:'); - console.log(error); - }); - } - }, [publisherToken, subscriberToken, testReport, testFailure, isTestRunning]); - - return { - testReport, - testFailure, - isTestRunning, - }; -} diff --git a/src/types.ts b/src/types.ts index 42814a8e6..e4fc078da 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,4 @@ import { LocalVideoTrack, RemoteVideoTrack, TwilioError } from 'twilio-video'; -import { EventEmitter } from 'events'; declare module 'twilio-video' { // These help to create union types between Local and Remote VideoTracks @@ -7,12 +6,6 @@ declare module 'twilio-video' { isSwitchedOff: undefined; setPriority: undefined; } - - function testPreflight( - subscriberToken: string, - publisherToken: string, - options?: { duration?: number } - ): PreflightTest; } declare global { @@ -43,45 +36,3 @@ export type ErrorCallback = (error: TwilioError | Error) => void; export type IVideoTrack = LocalVideoTrack | RemoteVideoTrack; export type RoomType = 'group' | 'group-small' | 'peer-to-peer' | 'go'; - -export interface PreflightTestReport { - isTurnRequired: boolean; - stats: { - jitter: { - min: number; - max: number; - average: number; - }; - rtt?: { - min: number; - max: number; - average: number; - }; - outgoingBitrate?: { - min: number; - max: number; - average: number; - }; - incomingBitrate?: { - min: number; - max: number; - average: number; - }; - packetLoss: { - min: number; - max: number; - average: number; - }; - networkQuality: { - min: number; - max: number; - average: number; - }; - }; -} - -export declare interface PreflightTest extends EventEmitter { - on(event: 'completed', listener: (report: PreflightTestReport) => void): this; - on(event: 'failed', listener: (error: Error) => void): this; - stop: () => void; -}