login and dashboard tests

src/App.test.js

@@ -1,57 +1,6 @@
-import React from "react";
-import renderer from 'react-test-renderer';
-import { Provider } from 'react-redux'
-import configureStore from 'redux-mock-store'
-import { shallow, mount } from "enzyme";
-import App from "./App";
-import Login from "./pages/Login";
-import { Input } from './components/Input';
-
-describe('Login Screen', () => {
-  const initialState = {isLoggedIn:false}
-  const defaultState = {
-    isLoggedIn: false,
-    hasErrors: false,
-    email: "",
-    refreshToken: "",
-    accessToken: "",
-    lcsToken: "",
-    // validUntil: "",
-    director: false,
-    mentor: false,
-    name: "",
-    loadingLogin: false
-  };
-  const notlogin = { auth: defaultState }
-  const mockStore = configureStore()
-  let store
-
+describe('Test', () => {
   //Testcase should always be true
   it('Testing Loaded', () => {
     expect(true).toEqual(true);
   });
-  //App renders without crashing
-  it("Renders Without Crashing", () => {
-    store = mockStore(initialState)
-    shallow(<Provider store={store}><App /></Provider>);
-  });
-  //If not logged in, Login component is rendered
-  it("Renders Login Component", () => {
-    store = mockStore(notlogin)
-    const wrapper = mount(<Provider store={store}><App /></Provider>);
-    expect(wrapper.contains(<Login />)).toEqual(true);
-  });
-  /*it("Calls onSubmit when Logging in", () => {
-    store = mockStore(notlogin)
-    const onSubmitMock = jest.fn();
-    const component = mount(<Provider store={store}><Login /></Provider>);
-    component.find("input").filter({ type: 'email' }).simulate('change', { target: { value: 'myEmail' } })
-    component.find("input").filter({ type: 'password' }).simulate('change', { target: { value: 'myPassword' } })
-    component.find('button').simulate('click');
-  });*/
-  //TEST FAILED Login
-
-  //TEST SUCCESSFUL Login
-
-  //TEST FOR INFINITE LOADING SCREEN
 });

src/components/Login/ErrorMessage.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+
+// Error Message if you provide the wrong credentials to log in 
+const ErrorMessage = () => {
+    return (<Typography variant="h6">
+        <div style={{ color: "white" }}> Invalid Credentials Provided  </div>
+    </Typography>)
+}
+
+export { ErrorMessage }

src/components/Login/SignInButton.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import { Button, } from "@material-ui/core";
+
+const SignInButton = ({ onSubmit }) => {
+    return (
+        <Button
+            id="button"
+            type="submit"
+            variant="contained"
+            color="secondary"
+            onClick={onSubmit}
+        >
+            <div style={{ color: 'white' }}> {">"} </div>
+        </Button>)
+}
+
+export { SignInButton };

src/pages/Dashboard.test.js

@@ -0,0 +1,45 @@
+import React from "react";
+import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux'
+import configureStore from 'redux-mock-store'
+import { shallow, mount } from "enzyme";
+import App from "../App";
+import Dashboard from "./Dashboard";
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
+import { createMuiTheme } from "@material-ui/core";
+import { Input } from '../components/Input';
+import theme from "../design/theme.js"
+import { ThemeProvider } from "styled-components";
+import NewTicket from "../components/NewTicket";
+
+//TEST SUITE TO TEST THAT ALL COMPONENTS RENDER FOR HACKER/MENTOR
+describe('Dashboard View', () => {
+  const defaultState = {
+    isLoggedIn: true,
+    hasErrors: false,
+    email: "",
+    refreshToken: "",
+    accessToken: "",
+    lcsToken: "",
+    // validUntil: "",
+    director: false,
+    mentor: false,
+    name: "",
+    loadingLogin: false
+  };
+  const login = { auth: defaultState }
+  const mockStore = configureStore()
+  let store
+
+  it("Renders Dashboard Component", () => {
+    store = mockStore(login)
+    const wrapper = mount(<Provider store={store} ><App /></Provider>);
+    expect(wrapper.contains(<Dashboard />)).toEqual(true);
+  });
+
+  it("Renders Ticket Form", () => {
+    store = mockStore(login)
+    const wrapper = shallow(<ThemeProvider theme={theme}><Provider store={store}><Dashboard /></Provider></ThemeProvider>);
+    expect(wrapper.contains(<NewTicket />)).toEqual(true);
+  });
+});

src/pages/Login.js

@@ -18,6 +18,8 @@ import {
 import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import { Link } from "react-router-dom";
 import { Input } from '../components/Input';
+import { SignInButton } from '../components/Login/SignInButton';
+import { ErrorMessage } from '../components/Login/ErrorMessage';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -41,11 +43,11 @@ const useStyles = makeStyles((theme) => ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    
+
   },
   title: {
     [theme.breakpoints.down('xs')]: {
-        fontSize: "20px",
+      fontSize: "20px",
     },
     [theme.breakpoints.down('sm')]: {
       fontSize: "30px",
@@ -55,39 +57,38 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.down('xs')]: {
       fontSize: "5px",
     },
-  [theme.breakpoints.down('sm')]: {
-    fontSize: "13px",
+    [theme.breakpoints.down('sm')]: {
+      fontSize: "13px",
     },
   },
   headertexts: {
     [theme.breakpoints.down('xs')]: {
       fontSize: "5px",
     },
     [theme.breakpoints.down('sm')]: {
-    fontSize: "12px",
+      fontSize: "12px",
     },
     [theme.breakpoints.down('md')]: {
       fontSize: "16px",
-      },
+    },
   },
   avatar: {
     margin: theme.spacing(1),
     backgroundColor: theme.palette.secondary.main,
-  },  
+  },
   form: {
     width: "100%",
-    textEmphasisColor:'white',
+    textEmphasisColor: 'white',
     marginTop: theme.spacing(1),
-    backgroundColor:'secondary',
+    backgroundColor: 'secondary',
   },
-  
+
 }));
 
 const Login = () => {
   const classes = useStyles();
-  
+
   const isLoggingIn = useSelector((store) => store.auth.isLoggedIn)
-
   const failedLoginUser = useSelector((store) => store.auth.hasErrors);
   const isLoading = useSelector((store) => store.auth.loadingLogin);
   const [email, setEmail] = useState("");
@@ -99,21 +100,11 @@ const Login = () => {
     dispatch(loginUser({ email, password }));
   };
 
-  // Error Message if you provide the wrong credentials to log in 
-  const errorMessage = (<Typography
-        variant="h6"
-        >
-          <div style = {{color:"white"}}> Invalid Credentials Provided  </div>
-        </Typography>)
-
-
-
   if (isLoading) {
     return (
       <Container component="main" maxWidth="xs" className={classes.loading}>
         <CircularProgress color="secondary" />
       </Container>
-
     );
   }
 
@@ -122,56 +113,48 @@ const Login = () => {
     <Container component="main" maxWidth="xs" className={classes.root} >
       <Paper className={classes.paper} elevation={10}>
         <Typography
-        variant="h1"
-        className={classes.title}>
-              <b style = {{color: "white"}} >MENTOR</b>
-              <b style= {{color: '#f3bb44'}}>Q</b>
+          variant="h1"
+          className={classes.title}>
+          <b style={{ color: "white" }} >MENTOR</b>
+          <b style={{ color: '#f3bb44' }}>Q</b>
         </Typography>
         <Typography
-        variant="h6"
-        className={classes.subheading}
-        style = {{color: 'white '}}
+          variant="h6"
+          className={classes.subheading}
+          style={{ color: 'white ' }}
         >
-            <div className= {classes.headertexts} align = "center"> Have a question? Get matched with a mentor for help! </div>
+          <div className={classes.headertexts} align="center"> Have a question? Get matched with a mentor for help! </div>
         </Typography>
-        
+
         <Typography
-        variant="h6"
+          variant="h6"
         >
-          <div style = {{color:"white"}}> Sign In </div>
+          <div style={{ color: "white" }}> Sign In </div>
         </Typography>
 
         <form className={classes.form}>
-          
-          <Input className={classes.form} 
+
+          <Input className={classes.form}
             label="email"
             type="email"
-            inputProps= {{ style: {color:'white'}}}
+            inputProps={{ style: { color: 'white' } }}
             value={email}
             onChange={({ target }) => setEmail(target.value)}
-            error={failedLoginUser && errorMessage}
+            error={failedLoginUser && ErrorMessage}
           />
 
           <Input className={classes.form}
             label="password"
             type="password"
-            inputProps= {{ style: {color:'white'}}}
+            inputProps={{ style: { color: 'white' } }}
             value={password}
             onChange={({ target }) => setPassword(target.value)}
-            error={failedLoginUser && errorMessage}
+            error={failedLoginUser && ErrorMessage}
           />
 
-          <Button 
-
-            type="submit"
-            variant="contained"
-            color="secondary"
-            onClick={onSubmit}
-          >
-          <div style= {{color: 'white'}}> {">"} </div>
-        </Button>
+          <SignInButton onSubmit={onSubmit} />
         </form>
-          <b>{!failedLoginUser ? "" : errorMessage}</b>
+        <b>{!failedLoginUser ? "" : <ErrorMessage />}</b>
       </Paper>
     </Container>