Merge pull request #39 from oslabs-beta/raisa-tests

added testing and data-testid attributes to allow for easier testing

Author: fraisai

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

@@ -1,7 +1,8 @@
 /** @jest-environment jsdom */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import VideoCall from '../../src/components/VideoCall';
 
 describe('VideoCall', () => {
@@ -13,13 +14,22 @@ describe('VideoCall', () => {
       height: '480px'
     }
   };
-
   const { container } = render(<VideoCall URL={Url} mediaOptions={options}/>);
 
-  it('Check Submit Username button', () => {
+  it('Check buttons in VideoCall.tsx', () => {
 
     const submitBtn = screen.getByTestId('submit-username-btn');
     expect(submitBtn.innerHTML).toBe('Submit Username');
+
+    const shareBtn = screen.getByTestId('share-screen-btn');
+    expect(shareBtn.innerHTML).toBe('Share Screen');
+
+    const endBtn = screen.getByTestId('end-call-btn');
+    expect(endBtn.innerHTML).toBe('End Call');
+
+    const callBtn = screen.getByTestId('call-btn');
+    expect(callBtn.innerHTML).toBe('Call');
+
     // fireEvent.click(submitBtn);
     // expect()
   });

lib/src/components/VideoCall.tsx

@@ -376,7 +376,10 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
           : ''
       }
 
-      <div className='' style={{display: 'flex', justifyContent: 'space-around', flexDirection:'column', padding:'10px', marginTop: '10%'} }> 
+      <div 
+        className='' 
+        style={{display: 'flex', justifyContent: 'space-around', flexDirection:'column', padding:'10px', marginTop: '10%'} }
+      > 
 
         { 
           username === '' ? 
@@ -439,15 +442,17 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
             >
 
               <button
-                className='share-btn' 
+                className='share-btn'
+                data-testid='share-screen-btn'
                 onClick={() => shareScreen()}
                 style={buttonStyling}
               >
                 Share Screen
               </button>
 
               <button
-                className='end-btn' 
+                className='end-btn'
+                data-testid='end-call-btn'
                 onClick={() => endCall(false)}
                 style={{ ...buttonStyling, backgroundColor:'#ff6961', color:'#28282B' }}
               >
@@ -474,7 +479,8 @@ const VideoCall = ({ URL, mediaOptions }: { URL: string, mediaOptions: { control
             >
 
               <button
-                className='' 
+                className=''
+                data-testid='call-btn'
                 onClick={handleOffer} 
                 style={buttonStyling}
               >