diff --git a/src/App.test.js b/src/App.test.js index 7f77f56..a0b324c 100644 --- a/src/App.test.js +++ b/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(); - }); - //If not logged in, Login component is rendered - it("Renders Login Component", () => { - store = mockStore(notlogin) - const wrapper = mount(); - expect(wrapper.contains()).toEqual(true); - }); - /*it("Calls onSubmit when Logging in", () => { - store = mockStore(notlogin) - const onSubmitMock = jest.fn(); - const component = mount(); - 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 }); diff --git a/src/Dashboard.test.js b/src/Dashboard.test.js deleted file mode 100644 index d68b798..0000000 --- a/src/Dashboard.test.js +++ /dev/null @@ -1,70 +0,0 @@ -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 Dashboard from "./pages/Dashboard"; -import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider"; -import { createMuiTheme } from "@material-ui/core"; -import { Input } from './components/Input'; - -//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(); - expect(wrapper.contains()).toEqual(true); - }); - - /*it("Renders Ticket Form", () => { - store = mockStore(login) - const wrapper = mount( - - - ); - - expect(wrapper.contains()).toEqual(true); - });*/ -}); diff --git a/src/components/Login/ErrorMessage.js b/src/components/Login/ErrorMessage.js new file mode 100644 index 0000000..9d6b1a8 --- /dev/null +++ b/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 ( +
Invalid Credentials Provided
+ ) +} + +export { ErrorMessage } \ No newline at end of file diff --git a/src/components/Login/SignInButton.js b/src/components/Login/SignInButton.js new file mode 100644 index 0000000..9999438 --- /dev/null +++ b/src/components/Login/SignInButton.js @@ -0,0 +1,17 @@ +import React, { useState } from "react"; +import { Button, } from "@material-ui/core"; + +const SignInButton = ({ onSubmit }) => { + return ( + ) +} + +export { SignInButton }; \ No newline at end of file diff --git a/src/pages/Dashboard.test.js b/src/pages/Dashboard.test.js new file mode 100644 index 0000000..9aee94d --- /dev/null +++ b/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(); + expect(wrapper.contains()).toEqual(true); + }); + + it("Renders Ticket Form", () => { + store = mockStore(login) + const wrapper = shallow(); + expect(wrapper.contains()).toEqual(true); + }); +}); diff --git a/src/pages/Login.js b/src/pages/Login.js index d060954..eab8c00 100644 --- a/src/pages/Login.js +++ b/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,8 +57,8 @@ const useStyles = makeStyles((theme) => ({ [theme.breakpoints.down('xs')]: { fontSize: "5px", }, - [theme.breakpoints.down('sm')]: { - fontSize: "13px", + [theme.breakpoints.down('sm')]: { + fontSize: "13px", }, }, headertexts: { @@ -64,30 +66,29 @@ const useStyles = makeStyles((theme) => ({ 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 = ( -
Invalid Credentials Provided
- ) - - - if (isLoading) { return ( - ); } @@ -122,56 +113,48 @@ const Login = () => { - MENTOR - Q + variant="h1" + className={classes.title}> + MENTOR + Q -
Have a question? Get matched with a mentor for help!
+
Have a question? Get matched with a mentor for help!
- + -
Sign In
+
Sign In
- - setEmail(target.value)} - error={failedLoginUser && errorMessage} + error={failedLoginUser && ErrorMessage} /> setPassword(target.value)} - error={failedLoginUser && errorMessage} + error={failedLoginUser && ErrorMessage} /> - + - {!failedLoginUser ? "" : errorMessage} + {!failedLoginUser ? "" : }
diff --git a/src/pages/Login.test.js b/src/pages/Login.test.js new file mode 100644 index 0000000..e6a6f58 --- /dev/null +++ b/src/pages/Login.test.js @@ -0,0 +1,82 @@ +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 "./Login"; +import { Input } from '../components/Input'; +import { SignInButton } from '../components/Login/SignInButton'; +import { ErrorMessage } from '../components/Login/ErrorMessage'; + +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 errorState = { + isLoggedIn: false, + hasErrors: true, + email: "", + refreshToken: "", + accessToken: "", + lcsToken: "", + // validUntil: "", + director: false, + mentor: false, + name: "", + loadingLogin: false + } + const notlogin = { auth: defaultState } + const errorlogin = { auth: errorState } + const mockStore = configureStore() + const mockErrorStore = configureStore() + let errorStore + let store + + //App renders without crashing + it("Renders Without Crashing", () => { + store = mockStore(initialState) + shallow(); + }); + //If not logged in, Login component is rendered + it("Renders Login Component", () => { + store = mockStore(notlogin) + const wrapper = mount(); + expect(wrapper.contains()).toEqual(true); + }); + //OnSubmit called when sign in button clicked + it("Calls onSubmit when Logging in", () => { + store = mockStore(notlogin) + const onSubmitMock = jest.fn(); + //const component = mount(); + const button = shallow(); + //component.find("input").filter({ type: 'email' }).simulate('change', { target: { value: 'myEmail' } }) + //component.find("input").filter({ type: 'password' }).simulate('change', { target: { value: 'myPassword' } }) + button.find('#button').simulate('click'); + expect(onSubmitMock.mock.calls.length).toEqual(1); + }); + //TEST FAILED Login + it("Shows error if wrong credentials", () => { + errorStore = mockErrorStore(errorlogin); + const wrapper = mount(); + expect(wrapper.contains()).toBeTruthy(); + }); + //TEST SUCCESSFUL Login + it("Shows no error if credentials have no errors", () => { + store = mockStore(notlogin); + const wrapper = mount(); + expect(wrapper.contains()).toBe(false); + }); + //TEST FOR INFINITE LOADING SCREEN +});