Finalized front end testing after feature merges

Co-authored-by: Mark Teets <markteets@gmail.com>
Co-authored-by: Minzo Kim <minzo-kim@users.noreply.github.com>
Co-authored-by: Jackie Yuan <yuanjackie1@users.noreply.github.com>

Author: 4 people

demo-app/src/client/Router.tsx

@@ -6,27 +6,26 @@ import Nav from './Components/Nav';
 import Board from './Components/Board';
 import Home from './Components/Home';
 import Buttons from './Components/Buttons';
-import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
+// import ButtonsWithMoreHooks from './Components/ButtonsWithMoreHooks';
 
 const domNode = document.getElementById('root');
 const root = createRoot(domNode);
 
 root.render(
   <BrowserRouter key='BrowserRouter'>
-    <Nav key='Nav'/>
+    <Nav key='Nav' />
     <Routes key='Routes'>
-      <Route path='/' element={<Home key='Home'/>} />
+      <Route path='/' element={<Home key='Home' />} />
       <Route path='/tictactoe' element={<Board key='Board' />} />
       {/* Switch between the two "buttons" paths below via commenting/uncommenting to alternate between
           the public facing Buttons page and the fiber node hooks research page "ButtonsWithMoreHooks" */}
-      <Route path='/buttons' element={<Buttons key='Buttons'/>} />
+      <Route path='/buttons' element={<Buttons key='Buttons' />} />
       {/* <Route path='/buttons' element={<ButtonsWithMoreHooks key='ButtonsWithMoreHooks'/>} /> */}
     </Routes>
-  </BrowserRouter>
+  </BrowserRouter>,
 
-  /** Comment out everything above this and uncomment the line below to skip all of the
+  /** Comment out everything above this and uncomment the line below as ButtonsWithMoreHooks import statement to skip all of the
    *  router components and make fiber node hooks research easier */
 
-  // <ButtonsWithMoreHooks/> 
-  
+  // <ButtonsWithMoreHooks/>
 );

src/app/__tests__/ButtonContainer.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect'; // needed this to extend the jest-dom assertions  (ex toHaveTextContent)
+import '@testing-library/jest-dom/extend-expect';
 import { TextEncoder } from 'util';
 global.TextEncoder = TextEncoder;
 import ButtonsContainer from '../containers/ButtonsContainer';
@@ -55,18 +55,18 @@ describe('Unit testing for ButtonContainer', () => {
     test('should have 4 buttons ', () => {
       render(<ButtonsContainer />);
       expect(screen.getAllByRole('button')).toHaveLength(4);
-      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Lock');
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlocked');
       expect(screen.getAllByRole('button')[1]).toHaveTextContent('Download');
       expect(screen.getAllByRole('button')[2]).toHaveTextContent('Upload');
-      expect(screen.getAllByRole('button')[3]).toHaveTextContent('How to use');
+      expect(screen.getAllByRole('button')[3]).toHaveTextContent('Tutorial');
     });
   });
 
   describe('When view is unlock', () => {
     test('Button should show as unlocked', () => {
       state.tabs['87'].mode.paused = true;
       render(<ButtonsContainer />);
-      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Unlock');
+      expect(screen.getAllByRole('button')[0]).toHaveTextContent('Locked');
     });
   });
 

src/app/__tests__/Tutorial.test.tsx

@@ -18,7 +18,7 @@ let currentStepIndex = 5;
 describe('Before Tutorial is entered', () => {
   test('How to use button exists', () => {
     render(<Tutorial {...props} />);
-    expect(screen.getByText('How to use')).toBeInTheDocument();
+    expect(screen.getByText('Tutorial')).toBeInTheDocument();
   });
 
   test('User clicking "How to use" while on map tab button starts map tutorial ', () => {