Authentication

.babelrc

@@ -0,0 +1,3 @@
+{
+    presets: ["@babel/preset-env", "@babel/preset-react"]
+  }

.gitignore

@@ -3,3 +3,4 @@ build/*.js
 build
 npm-debug.log
 .DS_Store
+package-lock.json

__tests__/__snapshots__/enzyme.js.snap

@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Board /> check snapshot 1`] = `
+<div
+  className="board-component"
+>
+  <Link
+    activeclassname="current"
+    className="board-component-link"
+    to="/board/Scrum Board"
+  >
+    Scrum Board
+  </Link>
+</div>
+`;
+
+exports[`<Card /> check snapshot 1`] = `
+<div
+  className="card-component"
+>
+  Card1
+  <select
+    className="card-component-dropdown"
+    name="column"
+  >
+    <option
+      defaultValue={true}
+      value="Story"
+    >
+      Story
+    </option>
+    <option
+      value="To-Do"
+    >
+      To-Do
+    </option>
+    <option
+      value="In-Progress"
+    >
+      In-Progress
+    </option>
+    <option
+      value="To-Verify"
+    >
+      To-Verify
+    </option>
+    <option
+      value="Completed"
+    >
+      Completed
+    </option>
+  </select>
+  <button
+    className="move-button"
+  >
+    Move
+  </button>
+</div>
+`;
+
+exports[`<Column /> check snapshot 1`] = `
+<div
+  className="card-component"
+>
+  <select
+    className="card-component-dropdown"
+    name="column"
+  >
+    <option
+      defaultValue={true}
+      value="Story"
+    >
+      Story
+    </option>
+    <option
+      value="To-Do"
+    >
+      To-Do
+    </option>
+    <option
+      value="In-Progress"
+    >
+      In-Progress
+    </option>
+    <option
+      value="To-Verify"
+    >
+      To-Verify
+    </option>
+    <option
+      value="Completed"
+    >
+      Completed
+    </option>
+  </select>
+  <button
+    className="move-button"
+  >
+    Move
+  </button>
+</div>
+`;

__tests__/enzyme.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import toJson from 'enzyme-to-json';
+import Card from '../client/components/Card';
+import Column from '../client/components/Column';
+import Board from '../client/components/Board';
+
+configure({ adapter: new Adapter() });
+
+
+describe('<Card />', () => {
+  const defaultProps = {
+    title: 'Card1'
+  }
+  it('renders the title and all text', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />);
+    //check for all text
+    expect(CardComponent.text()).toEqual(`${defaultProps.title}StoryTo-DoIn-ProgressTo-VerifyCompletedMove`);
+  });
+
+  it('has a move button, className move-button', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />).find('button');
+    // check for one button with class
+    expect(CardComponent.hasClass('move-button')).toEqual(true);
+    expect(CardComponent).toHaveLength(1);
+  });
+
+  it('has a selector called "column"', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />).find('select');
+    // check for one button with class
+    expect(CardComponent.hasClass('card-component-dropdown')).toEqual(true)
+    expect(CardComponent.prop('name')).toEqual('column')
+  });
+
+  it('5 select options', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />).find('option');
+    expect(CardComponent).toHaveLength(5);
+  });
+
+  it('check snapshot', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />);
+    expect(toJson(CardComponent)).toMatchSnapshot();
+  });
+});
+
+
+describe('<Column />', () => {
+  const defaultProps = {
+    column: [
+      { title: "Scrum Board Card", column: "Story" },
+      { title: "styling with css", column: "Story" }
+    ],
+    header: 'Story'
+  }
+  it('renders the column title', () => {
+    const ColumnComponent = shallow(<Column {...defaultProps} />).find('h1');
+    expect(ColumnComponent.text()).toEqual('Story');
+  });
+  it('renders multiple cards', () => {
+    const ColumnComponent = shallow(<Column {...defaultProps} />).find('Card');
+    expect(ColumnComponent).toHaveLength(2);
+  });
+  it('check snapshot', () => {
+    const CardComponent = shallow(<Card {...defaultProps} />);
+    expect(toJson(CardComponent)).toMatchSnapshot();
+  });
+});
+
+
+describe('<Board />', () => {
+  const defaultProps = {
+    title: "Scrum Board",
+    board: "Scrum Board"
+  }
+  it('renders in a div called board-component', () => {
+    const BoardComponent = shallow(<Board {...defaultProps} />).find('div');
+    expect(BoardComponent.hasClass('board-component')).toBe(true);
+  });
+
+  it('renders a link component', () => {
+    const BoardComponent = shallow(<Board {...defaultProps} />).find('Link');
+    expect(BoardComponent.hasClass('board-component-link')).toBe(true);
+    expect(BoardComponent.prop('to')).toEqual('/board/Scrum Board');
+    expect(BoardComponent.prop('activeclassname')).toEqual('current');
+    expect(BoardComponent.text()).toEqual('Scrum Board');
+
+  })
+
+  it('check snapshot', () => {
+    const BoardComponent = shallow(<Board {...defaultProps} />);
+    expect(toJson(BoardComponent)).toMatchSnapshot();
+  });
+});

client/App.js

@@ -1,53 +1,101 @@
 import React, { Component } from 'react';
 import HomePage from './pages/HomePage';
 import BoardPage from './pages/BoardPage';
+import Navigation from './Navigation'
 import TestPage from './pages/TestPage';
+import LandingPage from './pages/LandingPage';
 import { BrowserRouter as Router , Switch, Route, Link,
     NavLink} from 'react-router-dom';
 
+// function Navigation(props) {
+//     return (
+//         <nav className="navbar">
+//         {/* <Link className="navbar-brand" to="/">Sets & Reps</Link> */}
+//         <ul>
+//         <li>
+//             <NavLink exact to="/signout">
+//                 Sign Out
+//             </NavLink>
+//             </li>
+//         <li>
+//             <NavLink exact to="/board">
+//                 Boards
+//             </NavLink>
+//             </li>
+//             <li>
+//             <NavLink exact to="/">
+//                 Home
+//             </NavLink>
+//             </li>
+//         </ul>
+//         </nav>
+//     );
+// }
+    // const App = props => {
+    //     return(
+    //         <div>           
+    //             <Router>
+    //             <Navigation />
+    //                 <Switch>
+    //                     <Route path="/" exact component ={HomePage} /> 
+    //                     <Route path="/board/:board" exact component ={BoardPage} />
+    //                     <Route path="/test">
+    //                       <TestPage/>
+    //                       </Route>
+
+    //                 </Switch>
+    //             </Router>
+    //         </div>
+
+    //     );
+    // };
 
-function Navigation(props) {
-    return (
-      <nav className="navbar">
-        {/* <Link className="navbar-brand" to="/">Sets & Reps</Link> */}
-        <ul>
-        <li>
-            <NavLink exact to="/signout">
-              Sign Out
-            </NavLink>
-          </li>
-        <li>
-            <NavLink exact to="/board">
-              Boards
-            </NavLink>
-          </li>
-          <li>
-            <NavLink exact to="/">
-                Home
-            </NavLink>
-          </li>
-        </ul>
-      </nav>
-    );
-  }
 
 const App = props => {
     return(
         <div>           
             <Router>
-            <Navigation />
                 <Switch>
-                    <Route path="/" exact component ={HomePage} /> 
-                    <Route path="/board/:board" component ={BoardPage} />
-                    <Route path="/test">
-                      <TestPage/>
-                      </Route>
-
+                <Route exact path="/">
+                <Navigation />
+                   <HomePage/>
+                </Route> 
+                <Route exact path="/landing">
+                <Navigation />
+                       <LandingPage/>
+
+                </Route>  
+
+                <Route exact path="/board/:board">
+                <Navigation/>
+                    <BoardPage/>
+
+                </Route>
                 </Switch>
             </Router>
         </div>
 
     );
 };
 
+
+
+// <Router>
+// <Navigation />
+//     <Switch>
+//     <Route exact path="/landing">
+//            <LandingPage/>
+//           </Route>  
+//         <Route path="/" exact component ={HomePage} /> 
+//         <Route path="/board/:board" component ={BoardPage} />
+
+
+//         <Route path="/test">
+
+//           <TestPage/>
+//           </Route>
+
+//     </Switch>
+// </Router>
+
 export default App;

client/Navigation.js

@@ -0,0 +1,30 @@
+import { NavLink } from "react-router-dom";
+import React from 'react';
+import Board from './components/Board'
+
+function Navigation(props) {
+  return (
+    <nav className="navbar">
+      {/* <Link className="navbar-brand" to="/">Sets & Reps</Link> */}
+      <ul>
+      <li>
+          <NavLink exact to="/signout">
+            Sign Out
+          </NavLink>
+        </li>
+      <li>
+          <NavLink exact to="/board">
+            Boards
+          </NavLink>
+        </li>
+        <li>
+          <NavLink exact to="/">
+              Home
+          </NavLink>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Navigation;

client/components/Column.jsx

@@ -19,4 +19,5 @@ const Column = ({column, header}) =>{
   );
 };
 
-export default Column;
+export default Column;
+