implemented testing for VideoCall & added ngrok instructions

Author: fraisai

README.md

@@ -40,7 +40,6 @@ That is where RTConnect comes in - we take care of signaling and implementing We
 RTConnect is available as an [npm package](https://www.npmjs.com/package/rtconnect).
 
 **npm:**
-
 ```
 npm install rtconnect
 ```
@@ -62,13 +61,14 @@ npm install rtconnect
 
 const path = require('path');
 const express = require('express');
-const app = express();
+app.use(bodyParser.urlencoded({ extended: true }));
 const PORT = 3000;
-
+const app = express();
 const { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class
 
+
 app.use(express.json());
-app.use(express.urlencoded({extended : true}));
+app.use(bodyParser.urlencoded({extended : true}));
 app.use('/build', express.static(path.join(__dirname, '../build')));
 
 app.get('/', (req, res) => {
@@ -88,7 +88,7 @@ SignalChannel.initializeConnection(); // invoke initializeConnection() method
 
 6. Finally use the RTConnect VideoCall component as you would any other React component by passing in `‘ws://localhost:PORT’` as the URL prop as well as the optional mediaOptions prop
 
-- `URL={ ‘ws://localhost:PORT’}` (Note: the PORT whatever you specified when you set up your server)
+- `URL={ ‘ws://localhost:PORT’}` (Note: the PORT whatever you specified when you set up your server so based on the server above, the port is 3000)
 - `mediaOptions={{ controls: true, style: { width: ‘640px’, height: ‘480px’ }}`
 
 (Note: If you are using an https server, then pass in `‘wss://localhost:PORT’` as the URL prop).
@@ -112,30 +112,27 @@ const App = () => {
 export default App;
 ```
 
-## Setting Up a Secure Public Endpoint/URL
+## Setting Up Public Endpoint/URL Using a Secure Tunnel Service
 In order to create a publicly accessible URL that will allow you to share access to your localhost server, you have a number of different options but a simple option is to use a secure tunnel service. One such free, secure tunnel service that you can use to create a secure, encrypted, publicly accessible endpoint/URL that other users can access over the Internet is ngrok. 
 
 ngrok Secure Tunnels operate by using a locally installed ngrok agent to establish a private connection to the ngrok service. Your localhost development server is mapped to an ngrok.io sub-domain, which a remote user can then access. Once the connection is established, you get a public endpoint that you or others can use to access your local port. When a user hits the public ngrok endpoint, the ngrok edge figures out where to route the request and forwards the request over an encrypted connection to the locally running ngrok agent.
 
 Thus, you do not need to expose ports, set up forwarding, or make any other network changes. You can simply install [ngrok npm package](https://www.npmjs.com/package/ngrok) and run it.
 
-You have 2 options - you can install ngrok globally or you can install ngrok locally and then implement the ngrok.connect() method in your `server.js` file to open a tunnel.
-
-1. Sign up for a free ngrok account, verify your email address, and get your authorization token.
+### Instructions for Using ngrok With RTConnect
+1. Sign up for a free ngrok account, verify your email address, and copy your authorization token.
 
 2. Run the following command and replace with add your own authorization token:
 ```
 config authtoken <your authorization token>
 ```
 
-### Install ngrok Globally
-
-1. Install the ngrok npm package globally: 
+3. Install the ngrok npm package globally: 
 ```
 npm install ngrok -g
 ```
 
-2. Start your app - make sure your server is running before you initiate the ngrok tunnel. 
+4. Start your app - make sure your server is running before you initiate the ngrok tunnel. 
 
 * The following is a a basic example of what your App.jsx and server.js files might look like at this point if you used `npx create-react-app`. If you're using a proxy server, then the default port when you run `npm start` is 3000 so set your server port to something else such as 8080.
 
@@ -164,14 +161,14 @@ export default App;
 
 const path = require('path');
 const express = require('express');
+const bodyParser = require('body-parser');
 const ngrok = require('ngrok');
-const app = express();
 const PORT = 8080;
 const { SignalingChannel } = require('rtconnect'); // import the RTConnect Signaling Channel class
+const app = express();
 
 app.use(express.json());
-app.use(express.urlencoded({extended : true}));
-app.use('/build', express.static(path.join(__dirname, '../build')));
+app.use(bodyParser.urlencoded({ extended: true }));
 
 app.get('/', (req, res) => {
   res.status(200).sendFile(path.resolve(__dirname, '../index.html'));
@@ -186,7 +183,7 @@ const SignalChannel = new SignalingChannel(server); // instantiate the RTConnect
 SignalChannel.initializeConnection(); // invoke initializeConnection() method
 ```
 
-3. To start your ngrok Secure Tunnel, run the following command in your terminal:
+5. To start your ngrok Secure Tunnel, run the following command in your terminal:
 ```
 ngrok http 3000 --host-header="localhost:3000"
 ```
@@ -196,7 +193,7 @@ ngrok http 3000 --host-header="localhost:3000"
 ngrok http 3000 --host-header="localhost:3000" --auth='<username>:<a password>`
 ```
 
-4. Copy the https forwarding URL from the terminal and paste it into a new browser tab or send the link to a remote user.
+6. Copy the https forwarding URL from the terminal and paste it into a new browser tab or send the link to a remote user.
 
 
 ## <a name="errors" /> Polyfill Errors
@@ -281,7 +278,6 @@ Yoojin Chang | [GitHub](https://github.com/ychang49265) | [LinkedIn](https://www
 Louis Disen | [GitHub](https://github.com/LouisDisen) | [LinkedIn](https://www.linkedin.com/in/louis-disen/)
 <br>
 
----
 
-## <a name="support"/> ## A big shoutout to all of RTConnect's stargazers! Thank you!
-  [![Thanks to all stargazers](https://git-lister.onrender.com/api/stars/oslabs-beta/RTConnect)](https://github.com/oslabs-beta/RTConnect/stargazers)
+## <a name="support"/>A big shoutout to all of RTConnect's stargazers! Thank you!
+[![Thank you to all of RTConnect's stargazers](https://git-lister.onrender.com/api/stars/oslabs-beta/RTConnect)](https://github.com/oslabs-beta/RTConnect/stargazers)

lib/__tests__/react-test/VideoCall.unit.test.tsx

@@ -14,9 +14,10 @@ describe('VideoCall', () => {
     }
   };
 
-  it('Check Submit Username button - click event fired', () => {
+  const { container } = render(<VideoCall URL={Url} mediaOptions={options}/>);
+
+  it('Check Submit Username button', () => {
 
-    const { container } = render(<VideoCall URL={Url} mediaOptions={options}/>);
     const submitBtn = screen.getByTestId('submit-username-btn');
     expect(submitBtn.innerHTML).toBe('Submit Username');
     // fireEvent.click(submitBtn);