AHOYAPPS-649-650 | Audio device tests (#36)

* AHOYAPPS-649-650 | Audio device tests

* Fixing tests

* Adding tests

* Adding more tests

* Update readme

* Update usage of clsx utility

Co-authored-by: timmydoza <tmendoza@twilio.com>

* Move ProgressBar to common

* Moving styles inside AudioDevice component

* Use warning when Low audio levels are detected

* Make test more readable

* Update test names to make it more clear.

Co-authored-by: timmydoza <tmendoza@twilio.com>

* Fix test

* Adding margin bottom for mobile

* Adding onDeviceChange tests

* Fixing lint

* Update test

* Fixing lint

* Cleanup

Co-authored-by: timmydoza <tmendoza@twilio.com>

Author: charliesantos

README.md

@@ -1,5 +1,3 @@
-⚠️ **Please note, this application is currently in beta. We welcome all feedback through Github issues**
-
 # Voice Diagnostics Tool
 
 [![CircleCI](https://circleci.com/gh/twilio/rtc-diagnostics-react-app.svg?style=svg)](https://circleci.com/gh/twilio/rtc-diagnostics-react-app)
@@ -16,8 +14,8 @@ This application uses Programmable Voice and Twilio NTS to perform the tests and
 - Side by side comparison of Edge locations connection results
 - JSON formatted report
 - Easy Copy of report to clipboard
-- Interactive Mic testing (coming soon)
-- Interactive Speaker tests (coming soon)
+- Interactive Mic testing
+- Interactive Speaker tests
 
 ## Prerequisites
 

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  restoreMocks: true,
   roots: ['<rootDir>/src'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',

src/App.test.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import App from './App';
 import BrowserCompatibilityWidget from './BrowserCompatibilityWidget/BrowserCompatibilityWidget';
+import AudioDeviceTestWidget from './AudioDeviceTestWidget/AudioDeviceTestWidget';
 import NetworkTestWidget from './NetworkTestWidget/NetworkTestWidget';
 import { shallow } from 'enzyme';
 
 let mockDevice = { isSupported: true };
 jest.mock('twilio-client', () => ({
-  // This is a getter to avoid the "Cannot access 'mockDevice' before initialization error"
+  get Connection() {
+    return { Codec: {PCMU: 'pcmu', Opus: 'opus'} }
+  },
   get Device() {
     return mockDevice;
   },
@@ -31,6 +34,11 @@ describe('the App component', () => {
       const wrapper = shallow(<App />);
       expect(wrapper.find(NetworkTestWidget).exists()).toBe(true);
     });
+
+    it('should render the AudioDeviceTestWidget component', () => {
+      const wrapper = shallow(<App />);
+      expect(wrapper.find(AudioDeviceTestWidget).exists()).toBe(true);
+    });
   });
 
   describe('when the browser is not supported', () => {
@@ -45,5 +53,10 @@ describe('the App component', () => {
       const wrapper = shallow(<App />);
       expect(wrapper.find(NetworkTestWidget).exists()).toBe(false);
     });
+
+    it('should not render the AudioDeviceTestWidget component', () => {
+      const wrapper = shallow(<App />);
+      expect(wrapper.find(AudioDeviceTestWidget).exists()).toBe(false);
+    });
   });
 });

src/App.tsx

@@ -1,13 +1,19 @@
 import React, { useState } from 'react';
+import { getLogger } from 'loglevel';
 import { AppBar, Container, Toolbar, Grid, Paper, CssBaseline, makeStyles, Typography } from '@material-ui/core';
+import AudioDeviceTestWidget from './AudioDeviceTestWidget/AudioDeviceTestWidget';
 import BrowserCompatibilityWidget from './BrowserCompatibilityWidget/BrowserCompatibilityWidget';
 import CopyResultsWidget from './CopyResultsWidget/CopyResultsWidget';
 import { Device } from 'twilio-client';
 import { getJSON } from './utils';
+import { APP_NAME, LOG_LEVEL } from './constants';
 import NetworkTestWidget from './NetworkTestWidget/NetworkTestWidget';
 import ResultWidget from './ResultWidget/ResultWidget';
 import SummaryWidget from './SummaryWidget/SummaryWidget';
 
+const log = getLogger(APP_NAME);
+log.setLevel(LOG_LEVEL);
+
 const useStyles = makeStyles({
   container: {
     marginTop: '2em',
@@ -52,6 +58,11 @@ function App() {
           )}
           {Device.isSupported && (
             <>
+              <Grid item xs={12}>
+                <Paper className={classes.paper} elevation={3}>
+                  <AudioDeviceTestWidget/>
+                </Paper>
+              </Grid>
               <Grid item xs={12}>
                 <Paper className={classes.paper} elevation={3}>
                   <NetworkTestWidget

src/AudioDeviceTestWidget/AudioDevice/AudioDevice.test.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Select, Typography } from '@material-ui/core';
+import { render } from '@testing-library/react';
+import { mount, shallow } from 'enzyme';
+
+import AudioDevice from './AudioDevice';
+import ProgressBar from '../../common/ProgressBar/ProgressBar';
+
+const mediaInfoProps = { groupId: 'foo', toJSON: () => {} };
+const mockDevices = [{
+  deviceId: 'input1',
+  label: 'deviceinput1',
+  kind: 'audioinput',
+  ...mediaInfoProps,
+},{
+  deviceId: 'output1',
+  label: 'deviceoutput1',
+  kind: 'audiooutput',
+  ...mediaInfoProps,
+}];
+
+jest.mock('../useDevices/useDevices', () => ({
+  useDevices: () => mockDevices,
+}));
+
+describe('the AudioDevice component', () => {
+  const noop = () => {};
+  let originalAudio: any;
+  let mockAudio: any;
+
+  beforeEach(() => {
+    mockAudio = {
+      prototype: {
+        setSinkId: true
+      }
+    };
+    originalAudio = global.Audio;
+    global.Audio = mockAudio;
+  });
+
+  afterEach(() => {
+    global.Audio = originalAudio;
+  });
+
+  it('should render default audio output if audio redirect is not supported', () => {
+    mockAudio.prototype.setSinkId = false;
+    const wrapper = shallow(<AudioDevice disabled={false} level={1} kind="audiooutput" onDeviceChange={noop} />);
+    expect(wrapper.find(Select).exists()).toBeFalsy();
+    expect(wrapper.find(Typography).at(2).text()).toEqual('System Default Audio Output');
+  });
+
+  describe('props.disabled', () => {
+    it('should disable dropdown if disabled=true', () => {
+      const { container } = render(<AudioDevice disabled={true} level={1} kind="audioinput" onDeviceChange={noop} />);
+      const el = container.querySelector('.MuiInputBase-root') as HTMLDivElement;
+      expect(el.className.includes('Mui-disabled')).toBeTruthy();
+    });
+    it('should not disable dropdown if disabled=false', () => {
+      const { container } = render(<AudioDevice disabled={false} level={1} kind="audioinput" onDeviceChange={noop} />);
+      const el = container.querySelector('.MuiInputBase-root') as HTMLDivElement;
+      expect(el.className.includes('Mui-disabled')).toBeFalsy();
+    });
+  });
+
+  describe('props.level', () => {
+    it('should set progress to 0 if level is 0', () => {
+      const wrapper = shallow(<AudioDevice disabled={false} level={1} kind="audioinput" onDeviceChange={noop} />);
+      expect(wrapper.find(ProgressBar).prop('position')).toEqual(1);
+    });
+    it('should set progress to 20 if level is 20', () => {
+      const wrapper = shallow(<AudioDevice disabled={false} level={20} kind="audioinput" onDeviceChange={noop} />);
+      expect(wrapper.find(ProgressBar).prop('position')).toEqual(20);
+    });
+  });
+
+  describe('props.kind', () => {
+    it('should render input devices if kind is audioinput', () => {
+      const wrapper = shallow(<AudioDevice disabled={false} level={1} kind="audioinput" onDeviceChange={noop} />);
+      expect(wrapper.find(Select).at(0).text()).toEqual('deviceinput1');
+    });
+    it('should render output devices if kind is audiooutput', () => {
+      const wrapper = shallow(<AudioDevice disabled={false} level={1} kind="audiooutput" onDeviceChange={noop} />);
+      expect(wrapper.find(Select).at(0).text()).toEqual('deviceoutput1');
+    });
+  });
+
+  describe('props.onDeviceChange', () => {
+    let onDeviceChange: () => any;
+
+    beforeEach(() => {
+      onDeviceChange = jest.fn();
+    });
+
+    it('should trigger onDeviceChange when devices are present', () => {
+      mount(<AudioDevice disabled={false} level={1} kind="audioinput" onDeviceChange={onDeviceChange} />);
+      expect(onDeviceChange).toHaveBeenCalled();
+    });
+
+    it('should trigger onDeviceChange when a new device is selected', () => {
+      const wrapper = mount(<AudioDevice disabled={false} level={1} kind="audioinput" onDeviceChange={onDeviceChange} />);
+      const selectEl = wrapper.find(Select);
+      selectEl.simulate('change', 'input1');
+      expect(onDeviceChange).toHaveBeenCalledWith('input1');
+    });
+  });
+});

src/AudioDeviceTestWidget/AudioDevice/AudioDevice.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { FormControl, InputLabel, MenuItem, Select, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+import ProgressBar from '../../common/ProgressBar/ProgressBar';
+import { useDevices } from '../useDevices/useDevices';
+
+const labels = {
+  audioinput: {
+    audioLevelText: 'Input level',
+    deviceLabelHeader: 'Input device',
+    headerText: 'Microphone',
+  },
+  audiooutput: {
+    audioLevelText: 'Output level',
+    deviceLabelHeader: 'Output device',
+    headerText: 'Speaker',
+  }
+};
+
+const useStyles = makeStyles(() => ({
+  audioLevelContainer: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  form: {
+    margin: '1em 0',
+    minWidth: 200,
+  },
+  deviceLabelContainer: {
+    margin: '1em 0',
+    '&> *': {
+      marginBottom: '0.3em'
+    }
+  }
+}));
+
+interface AudioDeviceProps {
+  disabled: boolean;
+  level: number;
+  kind: 'audioinput' | 'audiooutput';
+  onDeviceChange: (value: string) => void;
+}
+
+export default function AudioDevice({ disabled, level, kind, onDeviceChange }: AudioDeviceProps) {
+  const classes = useStyles();
+  const devices = useDevices().filter(device => device.kind === kind);
+  const [selectedDevice, setSelectedDevice] = useState('');
+
+  const { audioLevelText, deviceLabelHeader, headerText } = labels[kind];
+  const noAudioRedirect = !Audio.prototype.setSinkId && kind === 'audiooutput';
+
+  const updateSelectedDevice = useCallback((value: string) => {
+    onDeviceChange(value);
+    setSelectedDevice(value);
+  }, [onDeviceChange, setSelectedDevice]);
+
+  useEffect(() => {
+    const hasSelectedDevice = devices.some((device) => device.deviceId === selectedDevice);
+    if (devices.length && !hasSelectedDevice) {
+      updateSelectedDevice(devices[0].deviceId);
+    }
+  }, [devices, selectedDevice, updateSelectedDevice]);
+
+  return (
+    <div style={{ width: 'calc(50% - 1em)', minWidth: '300px', marginBottom: '30px' }}>
+      <Typography variant="h5">{headerText}</Typography>
+
+      {noAudioRedirect && (
+        <div className={classes.deviceLabelContainer}>
+          <Typography variant="subtitle2">{deviceLabelHeader}</Typography>
+          <Typography>System Default Audio Output</Typography>
+        </div>
+      )}
+
+      {!noAudioRedirect && (
+        <FormControl disabled={disabled} variant="outlined" className={classes.form} fullWidth>
+          <InputLabel>{deviceLabelHeader}</InputLabel>
+          <Select
+            label={deviceLabelHeader}
+            value={selectedDevice}
+            onChange={e => updateSelectedDevice(e.target.value as string)}
+          >
+            {devices.map((device) => (
+              <MenuItem value={device.deviceId} key={device.deviceId}>
+                {device.label}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+
+      <div className={classes.audioLevelContainer}>
+        <Typography variant="subtitle2" style={{ marginRight: '1em' }}>
+          {audioLevelText}:
+        </Typography>
+        <ProgressBar
+          position={level}
+          duration={0.1}
+          style={{ flex: '1', margin: '0' }}
+        />
+      </div>
+    </div>
+  );
+}