front end tests

README.md

@@ -19,42 +19,33 @@
 1. [Development](#development)
     1. [Installing Dependencies](#installing-dependencies)
     1. [Roadmap](#roadmap)
-    1. [Testing](#testing)
 1. [Contributing](#contributing)
 
 ## Usage
 
 1. Fork and clone repo.
 2. Install dependencies.
-3. Run <code> npm run start </code> to start the server.
-4. Run <code> npm run dev-client </code> to compile React files.
-5. Run <code> mongod </code> to boot up database server.
+3. Run <code> npm run deploy </code> to start the server.
 6. Navigate to localhost:8081.
 
 ## Requirements
 - Node 4.1.1
-- React 15.4.2
-- Redux 3.1.4
-- React Router 4.0.0
-- MongoDB 3.4.3
+- Node Package Manager 3.10.10
+- MongoDB 3.4.3 (if you're interested in having the application run locally)
+- Webpack 2.3.3
 
 ## Development
 
 ### Installing Dependencies
+From the root directory,
 <pre><code>
 $ npm install
+$ npm install webpack -g
+$ touch .env
+$ echo "MONGODB_URI='<MONGO URI>'" >> .env
 $ mongod
-$ npm run start
-$ npm run dev-client
 </code></pre>
 
-### Testing
-
-- For client-side testing, run <code> npm run test </code>
-- For server-side testing, run <code> mocha server/tests/server-spec.js </code>
-- To see test coverage, run <code> npm run report-coverage </code>
-
-
 ### Roadmap
 
 View the project roadmap [here](https://github.com/captivators/feedpile/issues)

_PRESS-RELEASE.md

@@ -30,7 +30,7 @@ Too much time is spent scouring the web for headlines and jumping between scores
  Far too many of us consume news by social media, which is designed to provide only the stories that conform to a reader's biases. No single news outlet can cover all the news. And few light weight news aggregator platform are on the market today.
 
 ## Solution ##
-  Finally a news aggregator that gives you the control to find the truth.
+  Finally a news aggregator that gives you the control.
 
 ## Quote from You ##
   "With customizable feeds and categories, Feedpile automatically receives updates from news sources without inundating users."

client/components/AddFeed/AddFeed.spec.js

@@ -11,3 +11,4 @@ test('AddFeed take a snapshot', () => {
   const tree = shallowToJson(component);
   expect(tree).toMatchSnapshot();
 });
+

client/components/DeleteFeed/DeleteFeed.js

@@ -60,7 +60,7 @@ class DeleteFeed extends React.Component {
                 this.props.toggleDeleteModal(false);
               }}
           >
-            <div className="radio-buttons">
+            <div className="checkboxes">
               {this.props.userFeeds.map((feed, i) => {
 
                 return (<Checkbox

client/components/DeleteFeed/DeleteFeed.spec.js

@@ -0,0 +1,34 @@
+import '../../../__mocks__/localStorageMock'
+import { Provider } from 'react-redux';
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
+import store from '../../store';
+import { Unwrapped as UnwrappedDeleteFeed } from './DeleteFeed'
+import getMuiTheme from '../../../node_modules/material-ui/styles/getMuiTheme';
+
+
+
+test('DeleteFeed take a snapshot', () => {
+  const muiTheme = getMuiTheme();
+  const shallowWithContext = (node) => shallow(node, {context: {muiTheme}});
+  const component = shallowWithContext(<UnwrappedDeleteFeed userFeeds={[]} store={ store }/>);
+  const tree = shallowToJson(component);
+  expect(tree).toMatchSnapshot();
+});
+
+// test('DeleteFeed renders modal dialog with checkboxes', () =>{
+//   const feeds = [
+//     {
+//       _id: 'test id',
+//       name: 'test name'
+//     }
+//   ]
+//
+//
+//   const component = render(<MuiThemeProvider><UnwrappedDeleteFeed open={true} store={ store }
+//                                                                    openDeleteFeedModal={false}
+//                                                                   userFeeds={feeds}/></MuiThemeProvider>);
+//   expect(component.find('Dialog').hasClass('.checkboxes')).toBe(true)
+// })

client/components/DeleteFeed/__snapshots__/DeleteFeed.spec.js.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DeleteFeed take a snapshot 1`] = `
+<div>
+  <Dialog
+    actions={
+      Array [
+        <FlatButton
+          disabled={false}
+          label="Cancel"
+          labelPosition="after"
+          labelStyle={Object {}}
+          onKeyboardFocus={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onTouchStart={[Function]}
+          onTouchTap={[Function]}
+          primary={true}
+          secondary={false}
+      />,
+        <RaisedButton
+          disabled={false}
+          fullWidth={false}
+          label="Delete"
+          labelPosition="after"
+          onTouchTap={[Function]}
+          primary={false}
+          secondary={true}
+      />,
+      ]
+    }
+    autoDetectWindowHeight={true}
+    autoScrollBodyContent={false}
+    contentStyle={
+      Object {
+        "maxWidth": "600px",
+        "width": "75%",
+      }
+    }
+    modal={false}
+    onRequestClose={[Function]}
+    repositionOnUpdate={true}
+    title="Choose the feeds you would like to delete."
+  >
+    <div
+      className="checkboxes"
+    />
+  </Dialog>
+</div>
+`;

client/components/Home/FeatureList/FeatureList.css

@@ -9,17 +9,6 @@
   color: #000;
 }
 
-.h3 {
-  font-size: 3em;
-  line-height: 1;
-  display: block;
-  margin: .5em 0;
-  }
-
-* {
-
-}
-
 .description {
   flex-grow: 1;
   text-align: justify;

client/components/Home/FeatureList/FeatureList.js

@@ -35,64 +35,62 @@ const featureList = [
       marginTop: '50px'
     }}/>,
   },
-  {
-
-  }
+  {}
 ]
 
 const FeatureList = (props) => {
   return (
-    <div className="features">
-      <ul className="features-list">
-        <li>
-          <div className="feature-item">
-            <div className="icon-a">
-              <i>{featureList[0].icon}</i>
-            </div>
-            <div className="info-a">
-              <ul >
-                <li style={{fontSize: "24px"}}>{featureList[0].name}</li>
-                <br/>
-                <li className="description">{featureList[0].description}</li>
-              </ul>
+      <div className="features">
+        <ul className="features-list">
+          <li>
+            <div className="feature-item">
+              <div className="icon-a">
+                <i>{featureList[0].icon}</i>
+              </div>
+              <div className="info-a">
+                <ul >
+                  <li style={{fontSize: "24px"}}>{featureList[0].name}</li>
+                  <br/>
+                  <li className="description">{featureList[0].description}</li>
+                </ul>
+              </div>
             </div>
-          </div>
-        </li>
-        <li>
-          <div className="feature-item">
-            <div className="icon-b">
-            <i>{featureList[1].icon}</i>
-            </div>
-          <div className="info-b">
-          <ul >
-          <li style={{fontSize: "24px"}}>{featureList[1].name}</li>
-          <br/>
-          <li className="description">{featureList[1].description}</li>
-          </ul>
-          </div>
+          </li>
+          <li>
+            <div className="feature-item">
+              <div className="icon-b">
+                <i>{featureList[1].icon}</i>
+              </div>
+              <div className="info-b">
+                <ul >
+                  <li style={{fontSize: "24px"}}>{featureList[1].name}</li>
+                  <br/>
+                  <li className="description">{featureList[1].description}</li>
+                </ul>
+              </div>
 
-        </div>
-        </li>
+            </div>
+          </li>
 
-        <li>
-          <div className="feature-item">
-          <div className="icon-a">
-          <i>{featureList[2].icon}</i>
-          </div>
-          <div className="info-a">
-          <ul >
-          <li style={{fontSize: "24px"}}>{featureList[2].name}</li>
-          <br/>
-          <li className="description">{featureList[2].description}</li>
-          </ul>
-          </div>
+          <li>
+            <div className="feature-item">
+              <div className="icon-a">
+                <i>{featureList[2].icon}</i>
+              </div>
+              <div className="info-a">
+                <ul >
+                  <li style={{fontSize: "24px"}}>{featureList[2].name}</li>
+                  <br/>
+                  <li className="description">{featureList[2].description}</li>
+                </ul>
+              </div>
 
-        </div>
-        </li>
+            </div>
+          </li>
 
-      </ul>
-    </div>
-    )
+        </ul>
+      </div>
+  )
 }
 
 export default FeatureList;

client/components/Home/Home/Home.spec.js

@@ -21,5 +21,5 @@ test ('Landingpage: should render teammate info, featurelist, and techlist compo
   expect(component.find('.feature-item').length).toEqual(3);
   expect(component.find('.team').length).toEqual(1);
   expect(component.find('.team-mate').length).toEqual(4);
-  expect(component.find('.tech-logo').length).toEqual(15);
+  expect(component.find('.tech-logo').length).toEqual(16);
 })

client/components/Home/Teammate/Teammate.js

@@ -22,7 +22,7 @@ const style = {
 const Teammate = (props) => {
   return (
     <div className="team-mate" style={style.gridList}>
-      <img className="teammate-image" src={ props.info.image } style={style.porthole} alt=""/><br/>
+      <img className="teammate-image" src={ props.info.image } style={style.porthole} /><br/>
       { props.info.name } <br />
       { props.info.job } <br />
     </div>

client/components/Home/Teammate/Teammate.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import Teammate from './Teammate'
+
+test('Landingpage: Teammate take a snapshot', () => {
+  const teammate= {
+    info : {
+      name: 'Faiz Mohammad',
+      job: 'Software Engineer',
+      image: 'https://s15.postimg.org/mnsiyo6ob/19718788.png'
+    }
+  }
+
+  const component = shallow(
+      <Teammate info={ teammate } />);
+  const tree = shallowToJson(component);
+  expect(tree).toMatchSnapshot();
+});

client/components/Home/Teammate/__snapshots__/Teammate.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Landingpage: Teammate take a snapshot 1`] = `
+<div
+  className="team-mate"
+  style={
+    Object {
+      "fontFamily": "Roboto",
+      "marginBottom": "24px",
+      "overflowY": "hidden",
+      "textAlign": "center",
+      "width": "25%",
+    }
+  }
+>
+  <img
+    className="teammate-image"
+    style={
+      Object {
+        "borderRadius": "100%",
+        "imageAlign": "center",
+        "margin": "15px auto",
+        "maxWidth": "150px",
+        "width": "75%",
+      }
+    }
+  />
+  <br />
+
+  <br />
+
+  <br />
+</div>
+`;

client/components/Home/TechItem/TechItem.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { shallow, render } from 'enzyme';
+import { shallowToJson } from 'enzyme-to-json';
+import TechItem from './TechItem'
+
+test('Landingpage: TechItem take a snapshot', () => {
+  const techItem = {
+    name: "React",
+    link: "https://facebook.github.io/react/",
+    image: "https://s27.postimg.org/ud14uv8v7/logo-578x270.png"
+  }
+
+  const component = shallow(
+      <TechItem tech={ techItem } />);
+  const tree = shallowToJson(component);
+  expect(tree).toMatchSnapshot();
+});