Merge pull request learn-co-students#12 from learn-co-curriculum/mast…

…er-fix

Master fix

.gitignore

@@ -12,4 +12,5 @@ build
 # misc
 .DS_Store
 .env
-npm-debug.log
+npm-debug.log
+*yarn.lock

README.md

@@ -30,10 +30,10 @@ Our `src` folder contains the following:
 src/
 ├── data.js
 ├── index.js
-├── routes.js
+|-- containers/
+| |-- App.js
 └── components/
  ├── Actors.js
- ├── App.js
  ├── Directors.js
  ├── Home.js
  ├── Movies.js
@@ -44,39 +44,41 @@ All of the file and module imports are done for you, so you just need to focus o
 
 #### `Index.js`
 
-Our `index.js` file is partially completed for us. It loads in the `Router` and `browserHistory` from __React Router__. You will need to move the route, inside the react-dom render method, to the __./routes.js__ file. Then you need pass the routes as props to the __Router__ (i.e. `<Router history={browserHistory} routes={routes}>`).
+Our `index.js` file is partially completed for us. It loads in the `BrowserRouter as Router` from __React Router__.
 
 #### `data.js`
 
 This file contains seed data for __Actors, Movies, and Directors__
 
-#### `<App />`
+## Component Info
 
-This component should render our `<NavBar />` and display the content of our individual route components below. When a user visits the root url, he should see the App component.
+#### `App`
 
-#### `<NavBar />`
+This component should render our `Navbar` and 4 __React Router__ `Route` components with paths to __/, /movies, /directors, /actors__ and has a props of the corresponding component. When a user visits the root url, they should see the Home component.
 
-This component needs to render an `<ul />` with links for __/, /movies, /directors, /actors__ <-- in this order(test checks for this).
+#### `Navbar`
 
-#### `<Home />`
+This component needs to render 4 `<NavLink>` components. They will be for __/, /movies, /directors, /actors__ <-- in this order(test checks for this).
+
+#### `Home`
 
 This component should render the text `Home Page`.
 
-#### `<Movies />`
+#### `Movies`
 
-This component should render the text `Movies Page`, and make a new `<div />` for each movie. The `<div />` should contain the movie's title, time and an `<ul />` for each genre.
+This component should render the text `Movies Page`, and make a new `<div>` for each movie. The `<div>` should contain the movie's title, time and an `<ul>` for each genre.
 
-#### `<Directors />`
+#### `Directors`
 
-This component should render the text `Directors Page`, and make a new `<div />` for each director. The `<div />` should contain the director's name and an `<ul />` for each of their movies.
+This component should render the text `Directors Page`, and make a new `<div>` for each director. The `<div>` should contain the director's name and an `<ul>` for each of their movies.
 
-#### `<Actors />`
+#### `Actors`
 
-This component should render the text `Actors Page`, and make a new `<div />` for each actor. The `<div />` should contain the actor's name and an `<ul />` for each of their movies.
+This component should render the text `Actors Page`, and make a new `<div>` for each actor. The `<div>` should contain the actor's name and an `<ul>` for each of their movies.
 
 ## Resources
 
 [React Router](https://github.com/ReactTraining/react-router)
-[React Router Tutorial](https://github.com/reactjs/react-router-tutorial)
+[React Router Tutorial](https://reacttraining.com/react-router/web/guides/quick-start)
 
 <p class='util--hide'>View <a href='https://learn.co/lessons/react-components-as-routes-lab'>React Components As Routes Lab</a> on Learn.co and start learning to code for free.</p>

package.json

@@ -26,14 +26,14 @@
  "react": "^15.4.2",
  "react-addons-test-utils": "^15.4.2",
  "react-dom": "^15.4.2",
- "react-router": "^3.0.2",
+ "react-router-dom": "^4.0.0",
  "sinon": "^1.17.7",
  "superagent": "^3.3.2"
  },
  "scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
- "test": "mocha test/helpers/browser.js test/*.js",
+ "test": "mocha test/root.js test/*.js",
  "dev:hot": "webpack-dev-server --hot --inline --progress --colors --watch --display-error-details --display-cached --content-base ./",
  "test:watch": "npm run test -- --watch",
  "eject": "react-scripts eject"

src/components/Actors.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { actors } from '../data';
 
 const Actors = () => {
- return (<div />);
+ return (
+ <div>
+ {/*{code here}*/}
+ </div>
+ );
 };
 
 export default Actors;

src/components/Directors.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { directors } from '../data';
 
 const Directors = () => {
- return (<div />);
+ return (
+ <div>
+ {/*{code here}*/}
+ </div>
+ );
 }
 
 export default Directors

src/components/Home.js

@@ -1,7 +1,11 @@
 import React from 'react';
 
 const Home = () => {
- return (<div />);
+ return (
+ <div>
+ {/*{code here}*/}
+ </div>
+ );
 };
 
 export default Home;

src/components/Movies.js

@@ -2,7 +2,11 @@ import React from 'react';
 import { movies } from '../data';
 
 const Movies = () => {
- return (<div />);
+ return (
+ <div>
+ {/*{code here}*/}
+ </div>
+ );
 };
 
 export default Movies;

src/components/NavBar.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 const NavBar = () => {
- return (<div />);
+ return (
+ <div>
+ {/*{code here}*/}
+ </div>
+ );
 };
 
 export default NavBar;

src/containers/App.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { 
+ BrowserRouter as Router, 
+ Route
+} from 'react-router-dom';
+import NavBar from '../components/NavBar';
+import Home from '../components/Home';
+import Actors from '../components/Actors';
+import Directors from '../components/Directors';
+import Movies from '../components/Movies';
+
+
+const App = (props) => {
+ return (
+ <Router>
+ {/*{code here}*/}
+ </Router>
+ );
+};
+
+export default App

src/index.js

@@ -1,21 +1,8 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { Router, browserHistory } from 'react-router';
+import App from './containers/App';
 
-// routes
-import routes from './Routes';
-
-/**
- TODO: move all Route tags to ./Routes.js
-*/
 render (
- <Router history={browserHistory}>
- <Route path="/" component={App} >
- <IndexRoute component={Home} />
- <Route path="/movies" component={Movies} />
- <Route path="/actors" component={Actors} />
- <Route path="/directors" component={Directors} />
- </Route>
- </Router>,
+ <App />,
  document.getElementById('root')
 );

test/ActorsTest.js

@@ -10,25 +10,26 @@ import Actors from '../src/components/Actors'
 import { actors } from '../src/data'
 
 
-describe('<Actors />', () => {
+describe('Actors', () => {
+ let wrapper; 
+
+ beforeEach(() => {
+ wrapper = shallow(<Actors />);
+ }) 
 
  it('should render one <h1 />, inside of a <div />', () => {
- const wrapper = shallow(<Actors />);
  expect(wrapper.children().first().type()).to.equal('h1');
  });
 
  it("should render 'Actors Page' inside of the <h1 />", () => {
- const wrapper = shallow(<Actors />);
  expect(wrapper.children().first().text()).to.contain('Actors Page');
  });
 
  it("should render a <div /> for each actor", () => {
- const wrapper = shallow(<Actors />);
  expect(wrapper.children().find('div').length).to.equal(4);
  });
 
  it("should render the right content for each actor with a className of 'actor'", () => {
- const wrapper = shallow(<Actors />);
  const actorContainers = wrapper.children().find('div');
  expect(actorContainers.length).to.equal(4);
  actorContainers.forEach((node, i) => {

test/AppTest.js

@@ -4,12 +4,40 @@ import { expect } from 'chai';
 import { shallow } from 'enzyme';
 
 // Components
-import App from '../src/components/App';
-import NavBar from '../src/components/NavBar';
+import App from '../src/containers/App';
 
-describe('<App />', () => {
- it('should contain a <NavBar /> component', () => {
- const wrapper = shallow(<App />);
- expect(wrapper.find(NavBar).length).to.equal(1);
+describe('App', () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(<App />);
+ })
+
+ it('contains a <NavBar /> component', () => {
+ expect(wrapper.find('NavBar').length).to.equal(1);
  });
+
+ it('contains a <Route path="/">', () => {
+ const route = wrapper.findWhere(n => n.props().path === '/')
+ expect(route).to.not.be.undefined;
+ expect(route.props().path).to.equal('/');
+ })
+
+ it('contains a <Route path="/actors">', () => {
+ const route = wrapper.findWhere(n => n.props().path === '/actors')
+ expect(route).to.not.be.undefined;
+ expect(route.props().path).to.equal('/actors');
+ })
+
+ it('contains a <Route path="/directors">', () => {
+ const route = wrapper.findWhere(n => n.props().path === '/directors')
+ expect(route).to.not.be.undefined;
+ expect(route.props().path).to.equal('/directors');
+ })
+
+ it('contains a <Route path="/movies">', () => {
+ const route = wrapper.findWhere(n => n.props().path === '/movies')
+ expect(route).to.not.be.undefined;
+ expect(route.props().path).to.equal('/movies');
+ })
 });

test/DirectorsTest.js

@@ -9,25 +9,26 @@ import Directors from '../src/components/Directors'
 // data
 import { directors } from '../src/data'
 
-describe('<Directors />', () => {
+describe('Directors', () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(<Directors />);
+ })
 
  it('should render one <h1 /> first, inside of the <div />', () => {
- const wrapper = shallow(<Directors />);
  expect(wrapper.children().first().type()).to.equal('h1');
  });
 
  it("should render 'Directors Page' inside of the <h1 />", () => {
- const wrapper = shallow(<Directors />);
  expect(wrapper.children().first().text()).to.contain('Directors Page');
  });
 
  it("should render a <div /> for each director", () => {
- const wrapper = shallow(<Directors />);
  expect(wrapper.children().find('div').length).to.equal(3);
  });
 
  it("should render the right content for each director", () => {
- const wrapper = shallow(<Directors />);
  const directorContainers = wrapper.children().find('div');
  expect(directorContainers.length).to.equal(3);
  directorContainers.forEach((node, i) => {

test/HomeTest.js

@@ -3,19 +3,21 @@ import sinon from 'sinon';
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
 
-// components
 import Home from '../src/components/Home';
 
 
-describe('<Home />', () => {
+describe('Home', () => {
+ let wrapper; 
+
+ beforeEach(() => {
+ wrapper = shallow(<Home />);
+ })
 
  it('should only render one <h1 /> inside of the <div />', () => {
- const wrapper = shallow(<Home />);
  expect(wrapper.children().first().type()).to.equal('h1');
  });
 
  it("should render 'Home Page' inside of the <h1 />", () => {
- const wrapper = shallow(<Home />);
  expect(wrapper.children().first().text()).to.contain('Home Page');
  });
 });