testing

.theia/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.autoSave": "off"
+}

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.10.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
@@ -13,8 +15,11 @@
     "react": "^16.13.1",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
+    "react-re-super-tabs": "^1.1.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "react-web-tabs": "^1.0.1",
+    "styled-components": "^5.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -36,5 +41,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2"
   }
 }

public/index.html

@@ -22,7 +22,8 @@
   integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
   crossorigin="anonymous"
 />
-
+<!-- Including Font Awesome -->
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 
 
     <!--

src/App.js

@@ -17,7 +17,7 @@ import Menu from './components/MenuContainer/Menu.js';
 import ForgotPassword from "./components/ForgotPasswordContainer/ForgotPassword.js";
 import EnglishInstructions from './components/InstructionContainer/EnglishInstructions.js';
 import SpanishInstructions from './components/InstructionContainer/SpanishInstructions.js';
-
+import SimpleBottomNavigation from './components/TabBarContainer/TabBar.js';
 
 
 
@@ -26,7 +26,7 @@ import SpanishInstructions from './components/InstructionContainer/SpanishInstru
 function App() {
   return (
      <Container>   
-
+   <SimpleBottomNavigation/>
         <Router>
           <div className="App">
 

src/App.test.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
+import {shallow} from 'enzyme';
+
+describe('test for our app', () => {
+  it ('knows that 2 and 2 make 4', () => {
+      expect(2+2).toEqual(4);
+  })
+})
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/components/SignUpContainer/SignUp.js

@@ -14,35 +14,35 @@ export default class SignUp extends Component {
 
                 <div className="form-group">
                     <label>First name</label>
-                    <input type="text" className="form-control" placeholder="First name" />
+                    <input type="text" className="form-control firstName"name="first_name" placeholder="First name" />
                 </div>
 
                 <div className="form-group">
                     <label>Last name</label>
-                    <input type="text" className="form-control" placeholder="Last name" />
+                    <input type="text" className="form-control lastName" placeholder="Last name" />
                 </div>
 
                 <div className="form-group">
                     <label>Email address</label>
-                    <input type="email" className="form-control" placeholder="Enter email" />
+                    <input type="email" className="form-control emailAddress" placeholder="Enter email" />
                 </div>
 
                 <div className="form-group">
                     <label>Username</label>
-                    <input type="text" className="form-control" placeholder="Enter username" />
+                    <input type="text" className="form-control userName" placeholder="Enter username" />
                 </div>
 
                 <div className="form-group">
                     <label>Password</label>
-                    <input type="password" className="form-control" placeholder="Enter password" />
+                    <input type="password" className="form-control passWord" placeholder="Enter password" />
                 </div>
 
                 <button type="submit" className="user-direct ">Submit</button>
                 <p className="forgot-password text-right">
                     Already registered? <a href="/sign-in">Click Here!</a>
                 </p>
             </form>
-            </Col>
+            </Col> 
         );
     }
 }

src/components/TabBarContainer/TabBar.css

@@ -0,0 +1,7 @@
+.tab {
+  overflow: hidden;
+  background-color: #333;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}

src/components/TabBarContainer/TabBar.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import BottomNavigation from '@material-ui/core/BottomNavigation';
+import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
+import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
+import HomeIcon from '@material-ui/icons/Home';
+import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
+import { Link } from 'react-router-dom';
+import './TabBar.css';
+
+const useStyles = makeStyles({
+  root: {
+  width: 500,
+  },
+});
+
+export default function SimpleBottomNavigation() {
+  const classes = useStyles();
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <BottomNavigation className="tab"
+      value={value}
+      onChange={(event, newValue) => {
+        setValue(newValue);
+      }}
+      showLabels
+    //   className={classes.root}
+    >
+      <BottomNavigationAction label="Welcome" icon={<EmojiPeopleIcon />} to='/' component={Link} />
+      <BottomNavigationAction label="Home" icon={<HomeIcon />} to='/userhome' component={Link} />
+      <BottomNavigationAction label="Game" icon={<VideogameAssetIcon />} to='/game' component={Link} />
+    </BottomNavigation>
+  );
+}

src/setupTests.js

@@ -3,3 +3,6 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect';
+import {configure} from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+configure ({adapter: new Adapter()});

src/signup.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import SignUp from "./components/SignUpContainer/SignUp.js";
+import { mount } from 'enzyme';
+import { ExpansionPanelActions } from '@material-ui/core';
+
+
+describe('signup Component',()=> {
+    it('only has 1 h3 in SignUp',()=>{
+        const wrapper = shallow(<SignUp/>);
+        const text = wrapper.find('h3');
+        expect(test).toHaveLength(0);
+
+    })
+})
+
+it('check if Signup message is visible',()=>{
+    const wrapper = shallow(<SignUp/>);
+    const text = wrapper.find('h3').text();
+    expect(text).toEqual('Sign Up')
+})
+
+it('check if First Name input is present', ()=>{
+    const wrapper = shallow(<SignUp/>);
+    const firstNameinput = wrapper.find('input.firstName');
+
+  expect(firstNameinput).toHaveLength(1);
+});
+
+it('check if Last Name input is present', ()=>{
+    const wrapper = shallow(<SignUp/>);
+    const lastNameinput = wrapper.find('input.lastName');
+
+  expect(lastNameinput).toHaveLength(1);
+});
+
+it('check if Email Address input is present', ()=>{
+    const wrapper = shallow(<SignUp/>);
+    const emailAddressinput = wrapper.find('input.emailAddress');
+
+  expect(emailAddressinput).toHaveLength(1);
+});
+
+it('check if Username input is present', ()=>{
+    const wrapper = shallow(<SignUp/>);
+    const userNameinput = wrapper.find('input.userName');
+
+  expect(userNameinput).toHaveLength(1);
+});
+
+it('check if Password input is present', ()=>{
+    const wrapper = shallow(<SignUp/>);
+    const passWordinput = wrapper.find('input.passWord');
+
+  expect(passWordinput).toHaveLength(1);
+});
+
+it('submit button is clicked', ()=>{
+    const wrapper= shallow (<SignUp/>);
+    const button = wrapper.find('button');
+    button.simulate('click')
+})
+
+it('href links to signin', ()=>{
+const wrapper= shallow (<SignUp/>);
+const signinLink = wrapper.find('a');
+expect (signinLink.find('[href="sign-in"]')).toBeTruthy();
+})
+