Fix layout margin with material-ui CssBaseline

- Abstract components from App to files
- Add tests for components

src/components/About.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+const About = () => (
+  <React.Fragment>
+    <CssBaseline />
+    <h2>About</h2>
+  </React.Fragment>
+);
+
+export default About;

src/components/App.js

@@ -5,6 +5,10 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Button from '@material-ui/core/Button';
 import styled from 'styled-components';
 import SignIn from './SignIn';
+import SignUp from './SignUp';
+import Home from './Home';
+import About from './About';
+import Users from './Users';
 
 const Base = styled.div`
   flex-grow: 1;
@@ -14,11 +18,6 @@ const Grow = styled.div`
   flex-grow: 1
 `;
 
-const Index = () => <h2>Home</h2>;
-const About = () => <h2>About</h2>;
-const Users = () => <h2>Users</h2>;
-const SignUp = () => <h2>Sign up</h2>;
-
 class App extends React.Component {
   constructor() {
     super();
@@ -57,7 +56,7 @@ class App extends React.Component {
             </Button>
           </Toolbar>
         </AppBar>
-        <Route path="/" exact component={Index} />
+        <Route path="/" exact component={Home} />
         <Route path="/about/" component={About} />
         <Route path="/users/" component={Users} />
         <Route path="/signup/" component={SignUp} />

src/components/Home.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+
+const Home = () => (
+  <React.Fragment>
+    <CssBaseline />
+    <h2>Home</h2>
+  </React.Fragment>
+);
+
+export default Home;

src/components/SignUp.js

@@ -0,0 +1,92 @@
+
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import FormControl from '@material-ui/core/FormControl';
+import Input from '@material-ui/core/Input';
+import InputLabel from '@material-ui/core/InputLabel';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import { withTheme } from '@material-ui/core/styles';
+import styled from 'styled-components';
+
+const Base = styled.main` 
+    width: auto;
+    display: block;
+    margin-left: ${theme => theme.spacing.unit * 3}px;
+    margin-right: ${theme => theme.spacing.unit * 3}px;
+    ${theme => theme.breakpoints.up('md')} {
+      width: 400;
+      margin-left: auto;
+      margin-right: auto;
+    }
+;`;
+
+const PaperStyled = styled(Paper)`
+    margin-top: ${theme => theme.spacing.unit * 8}px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: ${theme => theme.spacing.unit * 2}px ${theme => theme.spacing.unit * 3}px ${theme => theme.spacing.unit * 3}px;
+  }}
+`;
+
+const AvatarStyled = styled(Avatar)`
+    margin: ${theme => theme.spacing.unit}px;
+    background-color: ${theme => theme.palette.secondary.main};
+`;
+
+const Form = styled.form`
+    width: 100%;
+    margin-top: ${theme => theme.spacing.unit}px;
+`;
+
+const SubmitButtonStyled = styled(Button)`
+    margin-top: ${theme => theme.spacing.unit * 3}px;
+`;
+
+const SignUp = (props) => {
+  // eslint-disable-next-line react/prop-types
+  const { theme } = props;
+  const { zIndex, ...rest } = theme;
+  return (
+    <Base {...rest}>
+      <CssBaseline />
+      <PaperStyled {...rest}>
+        <AvatarStyled {...rest}>
+          <LockOutlinedIcon />
+        </AvatarStyled>
+        <Typography component="h1" variant="h5">
+          Sign up
+        </Typography>
+        <Form {...rest}>
+          <FormControl margin="normal" required fullWidth>
+            <InputLabel htmlFor="email">Email Address</InputLabel>
+            <Input id="email" name="email" autoComplete="email" autoFocus />
+          </FormControl>
+          <FormControl margin="normal" required fullWidth>
+            <InputLabel htmlFor="password">Password</InputLabel>
+            <Input name="password" type="password" id="password" autoComplete="current-password" />
+          </FormControl>
+          <FormControl margin="normal" required fullWidth>
+            <InputLabel htmlFor="confirm-password">Password</InputLabel>
+            <Input name="confirm-password" type="password" id="confirm-password" autoComplete="current-password" />
+          </FormControl>
+          <SubmitButtonStyled
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            {...rest}
+          >
+            Sign up
+          </SubmitButtonStyled>
+        </Form>
+      </PaperStyled>
+    </Base>
+  );
+};
+
+export default withTheme()(SignUp);

src/components/Users.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import CssBaseline from '@material-ui/core/CssBaseline';
+
+const Users = () => (
+  <React.Fragment>
+    <CssBaseline />
+    <h2>Users</h2>
+  </React.Fragment>
+);
+
+export default Users;

src/components/__tests__/About.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, waitForElement } from 'react-testing-library';
+import {
+  Router,
+} from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import About from '../About';
+
+const renderWithRouter = (
+  ui,
+  { route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {},
+) => ({
+  ...render(<Router history={history}>{ui}</Router>),
+  history,
+});
+
+const renderComponent = () => renderWithRouter(
+  <About />,
+);
+
+describe('Test About', () => {
+  test('it renders About text', async () => {
+    const { getByText } = renderComponent();
+    await waitForElement(() => getByText(/About/i));
+  });
+});

src/components/App.test.js → src/components/__tests__/App.test.js

@@ -5,7 +5,7 @@ import {
   Router,
 } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import App from './App';
+import App from '../App';
 
 const renderWithRouter = (
   ui,

src/components/__tests__/Home.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, waitForElement } from 'react-testing-library';
+import {
+  Router,
+} from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import Home from '../Home';
+
+const renderWithRouter = (
+  ui,
+  { route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {},
+) => ({
+  ...render(<Router history={history}>{ui}</Router>),
+  history,
+});
+
+const renderComponent = () => renderWithRouter(
+  <Home />,
+);
+
+describe('Test Home', () => {
+  test('it renders Home text', async () => {
+    const { getByText } = renderComponent();
+    await waitForElement(() => getByText(/Home/i));
+  });
+});

src/components/SignIn.test.js → src/components/__tests__/SignIn.test.js

@@ -4,7 +4,7 @@ import {
   Router,
 } from 'react-router-dom';
 import { createMemoryHistory } from 'history';
-import SignIn from './SignIn';
+import SignIn from '../SignIn';
 
 const renderWithRouter = (
   ui,

src/components/__tests__/SignUp.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, waitForElement } from 'react-testing-library';
+import {
+  Router,
+} from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import SignUp from '../SignUp';
+
+const renderWithRouter = (
+  ui,
+  { route = '/', history = createMemoryHistory({ initialEntries: [route] }) } = {},
+) => ({
+  ...render(<Router history={history}>{ui}</Router>),
+  history,
+});
+
+const renderComponent = () => renderWithRouter(
+  <SignUp />,
+);
+
+describe('Test SignUp', () => {
+  test('it renders Sign up text', async () => {
+    const { getByText } = renderComponent();
+    await waitForElement(() => getByText(/Sign up/i));
+  });
+});