Rename region (#22)

* Change most instances of region to edge * Fix tests * Change more instances to edge * Add missing tests

Author: timmydoza

src/NetworkTestWidget/RegionResult/RegionResult.test.tsx renamed to src/NetworkTestWidget/EdgeResult/EdgeResult.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import RegionResult from './RegionResult';
+import EdgeResult from './EdgeResult';
 import ProgressBar from '../ProgressBar/ProgressBar';
 import { Tooltip } from '@material-ui/core';
 
@@ -13,37 +13,37 @@ const testResult: any = {
  results: { preflight: { warnings: [], samples: [{ bytesReceived: 1000 }] } },
 } as any;
 
-describe('the RegionResult component', () => {
+describe('the EdgeResult component', () => {
  describe('child ProgressBar component', () => {
  it('should have the correct props with no active test', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={true} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={true} />);
  expect(wrapper.find(ProgressBar).props()).toEqual({ duration: 0, position: 0 });
  });
 
  it('should have the correct props when the active test is Preflight', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={true} activeTest="Preflight Test" />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={true} activeTest="Preflight Test" />);
  expect(wrapper.find(ProgressBar).props()).toEqual({ duration: 25, position: 62.5 });
  });
 
  it('should have the correct props when the active test is Bitrate', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={true} activeTest="Bitrate Test" />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={true} activeTest="Bitrate Test" />);
  expect(wrapper.find(ProgressBar).props()).toEqual({ duration: 15, position: 100 });
  });
  });
 
  it('should not render a Tooltip or Progress bar when it is not active and there are no results', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={false} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={false} />);
  expect(wrapper.find(ProgressBar).exists()).toBe(false);
  expect(wrapper.find(Tooltip).exists()).toBe(false);
  });
 
  it('should render a Tooltip when results are present', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={false} result={testResult} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={false} result={testResult} />);
  expect(wrapper.find(Tooltip).exists()).toBe(true);
  });
 
  it('should render a CheckIcon when the results have no warnings or errors', () => {
- const wrapper = mount(<RegionResult region="ashburn" isActive={false} result={testResult} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={false} result={testResult} />);
  expect(wrapper.find(CheckIcon).exists()).toBe(true);
  });
 
@@ -52,7 +52,7 @@ describe('the RegionResult component', () => {
  errors: {},
  results: { preflight: { warnings: [{ name: 'high-rtt' }], samples: [{ bytesReceived: 1000 }] } },
  } as any;
- const wrapper = mount(<RegionResult region="ashburn" isActive={false} result={testResult} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={false} result={testResult} />);
  expect(wrapper.find(WarningIcon).exists()).toBe(true);
  });
 
@@ -61,7 +61,7 @@ describe('the RegionResult component', () => {
  errors: { testError: 'error' },
  results: {},
  } as any;
- const wrapper = mount(<RegionResult region="ashburn" isActive={false} result={testResult} />);
+ const wrapper = mount(<EdgeResult edge="ashburn" isActive={false} result={testResult} />);
  expect(wrapper.find(CloseIcon).exists()).toBe(true);
  });
 });

src/NetworkTestWidget/RegionResult/RegionResult.tsx renamed to src/NetworkTestWidget/EdgeResult/EdgeResult.tsx

@@ -7,11 +7,11 @@ import CloseIcon from '@material-ui/icons/Close';
 import CheckIcon from '@material-ui/icons/Check';
 import WarningIcon from '@material-ui/icons/Warning';
 import ProgressBar from '../ProgressBar/ProgressBar';
-import { regionNameMap } from '../../utils';
+import { edgeNameMap } from '../../utils';
 
 import { BITRATE_TEST_DURATION } from '../Tests/Tests';
 import getTooltipContent from './getTooltipContent';
-import { NetworkTestName, Region, TestResults } from '../../types';
+import { NetworkTestName, Edge, TestResults } from '../../types';
 
 import { rows } from '../../ResultWidget/rows';
 
@@ -30,7 +30,7 @@ const useStyles = makeStyles({
  flex: 1,
  padding: '0 1em',
  },
- regionName: {
+ edgeName: {
  width: '15%',
  },
  iconContainer: {
@@ -46,12 +46,13 @@ const useStyles = makeStyles({
  },
 });
 
-interface RegionResultProps {
- region: Region;
+interface EdgeResultProps {
+ edge: Edge;
  isActive: boolean;
  result?: TestResults;
  activeTest?: NetworkTestName;
 }
+
 const progressBarTimings = {
  'Preflight Test': {
  position: 62.5,
@@ -63,8 +64,8 @@ const progressBarTimings = {
  },
 };
 
-export default function RegionResult(props: RegionResultProps) {
- const { region, isActive, result, activeTest } = props;
+export default function EdgeResult(props: EdgeResultProps) {
+ const { edge, isActive, result, activeTest } = props;
  const classes = useStyles();
 
  const hasError = Object.values(result?.errors ?? {}).length > 0;
@@ -75,7 +76,7 @@ export default function RegionResult(props: RegionResultProps) {
 
  return (
  <div className={clsx(classes.container, { [classes.pendingTest]: !isActive && !result })}>
- <Typography className={classes.regionName}>{regionNameMap[region]}</Typography>
+ <Typography className={classes.edgeName}>{edgeNameMap[edge]}</Typography>
  <div className={classes.progressContainer}>
  {isActive && <ProgressBar position={progressPosition} duration={progressDuration} />}
  </div>

src/NetworkTestWidget/RegionResult/getTooltipContent.test.tsx renamed to src/NetworkTestWidget/EdgeResult/getTooltipContent.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
 import NetworkTestWidget from './NetworkTestWidget';
-import RegionResult from './RegionResult/RegionResult';
+import EdgeResult from './EdgeResult/EdgeResult';
 import { shallow } from 'enzyme';
 import useTestRunner from './useTestRunner/useTestRunner';
 
@@ -10,15 +10,15 @@ const mockUseTestRunner = useTestRunner as jest.Mock<any>;
 
 jest.mock('../constants', () => ({
  DEFAULT_CODEC_PREFERENCES: ['opus'],
- DEFAULT_REGIONS: ['ashburn', 'dublin', 'roaming'],
+ DEFAULT_EDGES: ['ashburn', 'dublin', 'roaming'],
 }));
 
 describe('the NetworkTestWidget component', () => {
- it('should not render RegionResult components when there are no results', () => {
+ it('should not render EdgeResult components when there are no results', () => {
  mockUseTestRunner.mockImplementation(() => ({
  isRunning: false,
  results: [],
- activeRegion: undefined,
+ activeEdge: undefined,
  activeTest: undefined,
  runTests: jest.fn(),
  }));
@@ -31,15 +31,15 @@ describe('the NetworkTestWidget component', () => {
  />
  );
 
- expect(wrapper.find(RegionResult).exists()).toBe(false);
+ expect(wrapper.find(EdgeResult).exists()).toBe(false);
  expect(wrapper.find(Button).find({ disabled: false }).length).toBe(2);
  });
 
- it('should correctly render RegionResult components while tests are active', () => {
+ it('should correctly render EdgeResult components while tests are active', () => {
  mockUseTestRunner.mockImplementation(() => ({
  isRunning: true,
  results: [],
- activeRegion: 'ashburn',
+ activeEdge: 'ashburn',
  activeTest: 'bitrate',
  runTests: jest.fn(),
  }));
@@ -52,20 +52,20 @@ describe('the NetworkTestWidget component', () => {
  />
  );
 
- expect(wrapper.find(RegionResult).find({ region: 'ashburn' }).props()).toEqual({
+ expect(wrapper.find(EdgeResult).find({ edge: 'ashburn' }).props()).toEqual({
  activeTest: 'bitrate',
  isActive: true,
- region: 'ashburn',
+ edge: 'ashburn',
  result: undefined,
  });
  expect(wrapper.find(Button).find({ disabled: true }).length).toBe(2);
  });
 
- it('should correctly render RegionResult components when there are results', () => {
+ it('should correctly render EdgeResult components when there are results', () => {
  mockUseTestRunner.mockImplementation(() => ({
  isRunning: false,
  results: ['mockResults'],
- activeRegion: undefined,
+ activeEdge: undefined,
  activeTest: undefined,
  runTests: jest.fn(),
  }));
@@ -78,10 +78,10 @@ describe('the NetworkTestWidget component', () => {
  />
  );
 
- expect(wrapper.find(RegionResult).at(0).props()).toEqual({
+ expect(wrapper.find(EdgeResult).at(0).props()).toEqual({
  activeTest: undefined,
  isActive: false,
- region: 'ashburn',
+ edge: 'ashburn',
  result: 'mockResults',
  });
  });
@@ -90,7 +90,7 @@ describe('the NetworkTestWidget component', () => {
  mockUseTestRunner.mockImplementation(() => ({
  isRunning: false,
  results: [],
- activeRegion: undefined,
+ activeEdge: undefined,
  activeTest: undefined,
  runTests: jest.fn(() => Promise.resolve('mockResults')),
  }));

src/NetworkTestWidget/RegionResult/getTooltipContent.tsx renamed to src/NetworkTestWidget/EdgeResult/getTooltipContent.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { Button, Typography } from '@material-ui/core';
 import useTestRunner from './useTestRunner/useTestRunner';
-import RegionResult from './RegionResult/RegionResult';
+import EdgeResult from './EdgeResult/EdgeResult';
 import SettingsModal from './SettingsModal/SettingsModal';
 import SettingsIcon from '@material-ui/icons/Settings';
-import { DEFAULT_REGIONS, DEFAULT_CODEC_PREFERENCES } from '../constants';
+import { DEFAULT_EDGES, DEFAULT_CODEC_PREFERENCES } from '../constants';
 
 interface NetworkTestWidgetProps {
  getTURNCredentials: () => Promise<RTCIceServer[]>;
@@ -15,17 +15,17 @@ interface NetworkTestWidgetProps {
 }
 
 const initialSettings = {
- regions: DEFAULT_REGIONS,
+ edges: DEFAULT_EDGES,
  codecPreferences: DEFAULT_CODEC_PREFERENCES,
 };
 
 export default function NetworkTestWidget({ getTURNCredentials, getVoiceToken, onComplete }: NetworkTestWidgetProps) {
- const { isRunning, results, activeRegion, runTests, activeTest } = useTestRunner();
+ const { isRunning, results, activeEdge, runTests, activeTest } = useTestRunner();
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [settings, setSettings] = useState(initialSettings);
 
  async function startTest() {
- const testResults = await runTests(getVoiceToken, getTURNCredentials, settings.regions, settings.codecPreferences);
+ const testResults = await runTests(getVoiceToken, getTURNCredentials, settings.edges, settings.codecPreferences);
  onComplete(testResults);
  }
 
@@ -36,11 +36,11 @@ export default function NetworkTestWidget({ getTURNCredentials, getVoiceToken, o
  </Typography>
  {(isRunning || results.length > 0) && (
  <div>
- {settings.regions.map((region, i) => (
- <RegionResult
- key={region}
- region={region}
- isActive={activeRegion === region}
+ {settings.edges.map((edge, i) => (
+ <EdgeResult
+ key={edge}
+ edge={edge}
+ isActive={activeEdge === edge}
  result={results[i]}
  activeTest={activeTest}
  />

src/NetworkTestWidget/NetworkTestWidget.test.tsx

@@ -2,47 +2,47 @@ import React from 'react';
 import { Button } from '@material-ui/core';
 import { Connection } from 'twilio-client';
 import { mount, ReactWrapper } from 'enzyme';
-import { Region } from '../../types';
+import { Edge } from '../../types';
 import SettingsModal from './SettingsModal';
 
 jest.mock('../../constants', () => ({
  DEFAULT_CODEC_PREFERENCES: ['opus'],
- DEFAULT_REGIONS: ['ashburn', 'dublin', 'roaming'],
+ DEFAULT_EDGES: ['ashburn', 'dublin', 'roaming'],
 }));
 
 const { PCMU, Opus } = Connection.Codec;
 
-const changeCheckbox = (wrapper: ReactWrapper, region: Region, checked: boolean) =>
+const changeCheckbox = (wrapper: ReactWrapper, edge: Edge, checked: boolean) =>
  wrapper
  .find('input')
- .find({ name: region, type: 'checkbox' })
- .simulate('change', { target: { checked, name: region } });
+ .find({ name: edge, type: 'checkbox' })
+ .simulate('change', { target: { checked, name: edge } });
 
 describe('the SettingsModal component', () => {
  const handleSettingsChange = jest.fn();
  beforeEach(jest.clearAllMocks);
 
- it('should remove regions', () => {
+ it('should remove edges', () => {
  const wrapper = mount(<SettingsModal isOpen={true} onSettingsChange={handleSettingsChange} />);
  changeCheckbox(wrapper, 'ashburn', false);
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [Opus],
- regions: ['dublin', 'roaming'],
+ edges: ['dublin', 'roaming'],
  });
  });
 
- it('should add regions', () => {
+ it('should add edges', () => {
  const wrapper = mount(<SettingsModal isOpen={true} onSettingsChange={handleSettingsChange} />);
  changeCheckbox(wrapper, 'tokyo', true);
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [Opus],
- regions: ['ashburn', 'dublin', 'roaming', 'tokyo'],
+ edges: ['ashburn', 'dublin', 'roaming', 'tokyo'],
  });
  });
 
- it('should not add more than six regions', () => {
+ it('should not add more than six edges', () => {
  const wrapper = mount(<SettingsModal isOpen={true} onSettingsChange={handleSettingsChange} />);
  changeCheckbox(wrapper, 'tokyo', true);
  changeCheckbox(wrapper, 'frankfurt-ix', true);
@@ -52,19 +52,19 @@ describe('the SettingsModal component', () => {
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [Opus],
- regions: ['ashburn', 'dublin', 'roaming', 'sydney', 'tokyo', 'frankfurt-ix'],
+ edges: ['ashburn', 'dublin', 'roaming', 'sydney', 'tokyo', 'frankfurt-ix'],
  });
  });
 
- it('should not remove the last region', () => {
+ it('should not remove the last edge', () => {
  const wrapper = mount(<SettingsModal isOpen={true} onSettingsChange={handleSettingsChange} />);
  changeCheckbox(wrapper, 'ashburn', false);
  changeCheckbox(wrapper, 'roaming', false);
  changeCheckbox(wrapper, 'dublin', false); // ignored
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [Opus],
- regions: ['dublin'],
+ edges: ['dublin'],
  });
  });
 
@@ -77,7 +77,7 @@ describe('the SettingsModal component', () => {
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [PCMU, Opus],
- regions: ['ashburn', 'dublin', 'roaming'],
+ edges: ['ashburn', 'dublin', 'roaming'],
  });
  });
 
@@ -90,7 +90,7 @@ describe('the SettingsModal component', () => {
  wrapper.find(Button).simulate('click');
  expect(handleSettingsChange).toHaveBeenCalledWith({
  codecPreferences: [PCMU, Opus],
- regions: ['ashburn', 'dublin', 'roaming'],
+ edges: ['ashburn', 'dublin', 'roaming'],
  });
  });
 });