stub frontend requests to auth endpoints

This commit is contained in:
Sorrel Bri 2020-01-15 18:13:42 -08:00 committed by sorrelbri
parent 1e706fe20f
commit 36c75e9126
14 changed files with 464 additions and 178 deletions

View file

@ -7,18 +7,23 @@
.*/server/test/.* .*/server/test/.*
.*/server/knexfile\.js .*/server/knexfile\.js
.*/public/.* .*/public/.*
.*\.scss
.*\.css
.+\.s?css
[include] [include]
.*/src/components/
.*/src/pages/.*
.*/src/reducers/.*
.*/src/utils/.*
.*/App.js
[libs] [libs]
[lints] [lints]
[options] [options]
; all=true
[strict] [strict]
[untyped] [untyped]
.*\.scss
.*\.css

File diff suppressed because it is too large Load diff

View file

@ -5,6 +5,7 @@
"dependencies": { "dependencies": {
"@mars/heroku-js-runtime-env": "^3.0.2", "@mars/heroku-js-runtime-env": "^3.0.2",
"@testing-library/user-event": "^7.1.2", "@testing-library/user-event": "^7.1.2",
"axios": "^0.19.1",
"flow-bin": "^0.114.0", "flow-bin": "^0.114.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"react": "^16.12.0", "react": "^16.12.0",
@ -18,7 +19,7 @@
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"flow": "./node_modules/.bin/flow flow", "flow": "./node_modules/.bin/flow",
"predeploy": "REACT_APP_ENVIRONMENT=production npm run build", "predeploy": "REACT_APP_ENVIRONMENT=production npm run build",
"postinstall": "react-scripts build" "postinstall": "react-scripts build"
}, },

View file

@ -1,8 +1,8 @@
import React, {useState} from 'react'; import React, {useState, useEffect, useReducer} from 'react';
import './App.scss'; import './App.scss';
import config from './config'; import config from './config';
import { Switch, Route } from 'react-router-dom'; import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import socketIOClient from 'socket.io-client'; import socketIOClient from 'socket.io-client';
@ -17,39 +17,56 @@ export const socket = socketIOClient(config.apiAddress);
function App() { function App() {
const [fetchData, setFetchData] = useState(); const [fetchData, setFetchData] = useState();
const [socketData, setSocketData] = useState(); const [socketData, setSocketData] = useState();
fetch(config.apiAddress).then(res => res.text()).then(data => setFetchData(data)); const [error, setError] = useState([]);
socket.emit('connect');
socket.on('connected', data => setSocketData(data.message)); useEffect(() => {
fetch(config.apiAddress)
.then(res => res.text())
.catch(err => setError([...error, err]))
.then(data => setFetchData(data))
})
useEffect(() => {
socket.emit('connect');
socket.on('connect', data => setSocketData('socket connected'));
socket.on('connect_error', err => setError([...error, err]));
socket.on('error', err => setError([...error, err]))
})
return ( return (
<div className="App"> <Router>
<h1>React Boilerplate</h1>
{fetchData ? <p>{fetchData}</p> : <></>}
{socketData ? <p>{socketData}</p> : <></>}
<Switch>
<Route path="/account"> <div data-testid="App" className="App">
<Account /> <h1>React Boilerplate</h1>
</Route> {fetchData ? <p>{fetchData}</p> : <></>}
{socketData ? <p>{socketData}</p> : <></>}
{error ? error.map(err => <p>{err}</p>): <></>}
<Switch>
<Route path="/rooms"> <Route path="/account">
<Room /> <Account />
</Route> </Route>
<Route path="/games"> <Route path="/rooms">
<Game /> <Room />
</Route> </Route>
<Route path="/news"> <Route path="/games">
<News /> <Game />
</Route> </Route>
<Route path="/"> <Route path="/news">
{/* Add ternary for login */} <News />
<Home /> </Route>
</Route>
</Switch> <Route path="/">
</div> {/* Add ternary for login */}
<Home />
</Route>
</Switch>
</div>
</Router>
); );
} }

View file

@ -2,8 +2,8 @@ import React from 'react';
import { render } from '@testing-library/react'; import { render } from '@testing-library/react';
import App from './App'; import App from './App';
test('renders learn react link', () => { test('renders app without crashing', () => {
const { getByText } = render(<App />); const { getByTestId } = render(<App />);
const linkElement = getByText(/learn react/i); const AppDiv = getByTestId('App');
expect(linkElement).toBeInTheDocument(); expect(AppDiv).toBeInTheDocument();
}); });

View file

@ -0,0 +1,15 @@
import React, { useState } from 'react';
import './Login.scss';
const Login = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
return (
<div className="Login" data-testid="Login">
</div>
);
}
export default Login;

View file

@ -0,0 +1,9 @@
import React from 'react';
import { render } from '@testing-library/react';
import Login from './Login';
test('renders app without crashing', () => {
const { getByTestId } = render(<Login />);
const LoginDiv = getByTestId('Login');
expect(LoginDiv).toBeInTheDocument();
});

View file

@ -0,0 +1,16 @@
import React, { useState } from 'react';
import './Signup.scss';
const Signup = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [passwordConfirm, setPasswordConfirm] = useState('');
return (
<div className="Signup" data-testid="Signup">
</div>
);
}
export default Signup;

View file

@ -0,0 +1,9 @@
import React from 'react';
import { render } from '@testing-library/react';
import Signup from './Signup';
test('renders app without crashing', () => {
const { getByTestId } = render(<Signup />);
const SignupDiv = getByTestId('Signup');
expect(SignupDiv).toBeInTheDocument();
});

View file

@ -3,12 +3,9 @@ import ReactDOM from 'react-dom';
import './index.scss'; import './index.scss';
import App from './App'; import App from './App';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render( ReactDOM.render(
<Router> <App />
<App />
</Router>
, document.getElementById('root') , document.getElementById('root')
); );

View file

@ -0,0 +1,27 @@
import config from '../config';
import Axios from 'axios';
const authEndpoint = `${config.apiAddress}/auth`;
const signupEndpoint = `${authEndpoint}/signup`
const loginEndpoint = `${authEndpoint}/login`
const loginService = () => {
}
const signupService = async (formData) => {
const response = await Axios.post(signupEndpoint, {
...formData
}).then(res => {
return res;
}).catch(err => {
return err;
});
console.log(response)
return response;
}
module.exports = {
loginService,
signupService
}

View file

@ -0,0 +1,25 @@
import authServices from './authServices';
const signupService = authServices.signupService;
const loginService = authServices.loginService;
const newUserFormData = {
username:'newUser',
password:'password',
passwordConfirm:'password',
email:'user@example.com'
}
describe('signupService', () => {
it('signup returns 200', async () => {
const response = await signupService(newUserFormData);
console.log(response)
expect(response.status).equal('200');
});
});
describe('loginService', () => {
it('', () => {
});
});