stub frontend requests to auth endpoints
This commit is contained in:
parent
1e706fe20f
commit
36c75e9126
14 changed files with 464 additions and 178 deletions
|
@ -7,18 +7,23 @@
|
|||
.*/server/test/.*
|
||||
.*/server/knexfile\.js
|
||||
.*/public/.*
|
||||
.*\.scss
|
||||
.*\.css
|
||||
.+\.s?css
|
||||
|
||||
[include]
|
||||
.*/src/components/
|
||||
.*/src/pages/.*
|
||||
.*/src/reducers/.*
|
||||
.*/src/utils/.*
|
||||
.*/App.js
|
||||
|
||||
[libs]
|
||||
|
||||
[lints]
|
||||
|
||||
[options]
|
||||
; all=true
|
||||
|
||||
[strict]
|
||||
|
||||
[untyped]
|
||||
.*\.scss
|
||||
.*\.css
|
File diff suppressed because it is too large
Load diff
|
@ -5,6 +5,7 @@
|
|||
"dependencies": {
|
||||
"@mars/heroku-js-runtime-env": "^3.0.2",
|
||||
"@testing-library/user-event": "^7.1.2",
|
||||
"axios": "^0.19.1",
|
||||
"flow-bin": "^0.114.0",
|
||||
"node-sass": "^4.13.0",
|
||||
"react": "^16.12.0",
|
||||
|
@ -18,7 +19,7 @@
|
|||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"flow": "./node_modules/.bin/flow flow",
|
||||
"flow": "./node_modules/.bin/flow",
|
||||
"predeploy": "REACT_APP_ENVIRONMENT=production npm run build",
|
||||
"postinstall": "react-scripts build"
|
||||
},
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React, {useState} from 'react';
|
||||
import React, {useState, useEffect, useReducer} from 'react';
|
||||
import './App.scss';
|
||||
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';
|
||||
|
||||
|
@ -17,39 +17,56 @@ export const socket = socketIOClient(config.apiAddress);
|
|||
function App() {
|
||||
const [fetchData, setFetchData] = useState();
|
||||
const [socketData, setSocketData] = useState();
|
||||
fetch(config.apiAddress).then(res => res.text()).then(data => setFetchData(data));
|
||||
socket.emit('connect');
|
||||
socket.on('connected', data => setSocketData(data.message));
|
||||
const [error, setError] = useState([]);
|
||||
|
||||
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 (
|
||||
<div className="App">
|
||||
<h1>React Boilerplate</h1>
|
||||
{fetchData ? <p>{fetchData}</p> : <></>}
|
||||
{socketData ? <p>{socketData}</p> : <></>}
|
||||
<Switch>
|
||||
|
||||
<Route path="/account">
|
||||
<Account />
|
||||
</Route>
|
||||
|
||||
<Route path="/rooms">
|
||||
<Room />
|
||||
</Route>
|
||||
|
||||
<Route path="/games">
|
||||
<Game />
|
||||
</Route>
|
||||
<Router>
|
||||
|
||||
<Route path="/news">
|
||||
<News />
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
{/* Add ternary for login */}
|
||||
<Home />
|
||||
</Route>
|
||||
<div data-testid="App" className="App">
|
||||
<h1>React Boilerplate</h1>
|
||||
{fetchData ? <p>{fetchData}</p> : <></>}
|
||||
{socketData ? <p>{socketData}</p> : <></>}
|
||||
{error ? error.map(err => <p>{err}</p>): <></>}
|
||||
<Switch>
|
||||
|
||||
</Switch>
|
||||
</div>
|
||||
<Route path="/account">
|
||||
<Account />
|
||||
</Route>
|
||||
|
||||
<Route path="/rooms">
|
||||
<Room />
|
||||
</Route>
|
||||
|
||||
<Route path="/games">
|
||||
<Game />
|
||||
</Route>
|
||||
|
||||
<Route path="/news">
|
||||
<News />
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
{/* Add ternary for login */}
|
||||
<Home />
|
||||
</Route>
|
||||
|
||||
</Switch>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
|||
import { render } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
const { getByText } = render(<App />);
|
||||
const linkElement = getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
test('renders app without crashing', () => {
|
||||
const { getByTestId } = render(<App />);
|
||||
const AppDiv = getByTestId('App');
|
||||
expect(AppDiv).toBeInTheDocument();
|
||||
});
|
||||
|
|
|
@ -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;
|
|
@ -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();
|
||||
});
|
|
@ -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;
|
|
@ -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();
|
||||
});
|
|
@ -3,12 +3,9 @@ import ReactDOM from 'react-dom';
|
|||
import './index.scss';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
ReactDOM.render(
|
||||
<Router>
|
||||
<App />
|
||||
</Router>
|
||||
<App />
|
||||
, document.getElementById('root')
|
||||
);
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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('', () => {
|
||||
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue