Iteration Zero

package.json

@@ -2,17 +2,25 @@
   "name": "headcount",
   "version": "0.1.0",
   "private": true,
+  "homepage": "https://saraebbers.github.io/headcount2.0",
   "devDependencies": {
+    "enzyme-adapter-react-16": "^1.7.0",
     "react-scripts": "1.1.0"
   },
   "dependencies": {
+    "enzyme": "^3.7.0",
+    "gh-pages": "^2.0.1",
+    "prop-types": "^15.6.2",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.2.0",
+    "save-dev": "^2.0.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
+    "deploy": "gh-pages -d build",
+    "predeploy": "npm run build",
     "eject": "react-scripts eject"
   }
 }

src/App.css

@@ -1 +1,10 @@
-/*APP COMPONENT RELATED CSS GOES HERE*/
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+.app {
+  text-align: center;
+  color: cornflowerblue;
+}
+
+

src/App.js

@@ -1,10 +1,51 @@
 import React, { Component } from 'react';
 import './App.css';
+import Search from './Search';
+import ComparisonContainer from './ComparisonContainer';
+import CardContainer from './CardContainer';
+import DistrictRepository from './helper';
+import Kindergartner from './data/kindergartners_in_full_day_program.js';
 
 class App extends Component {
+  constructor() {
+    super();
+    this.state = {
+      dataSet: 'Kindergartner',
+      displayData: [],
+      searchWord: '',
+      repository: new DistrictRepository(Kindergartner)
+    }
+  }
+
+  componentDidMount() {
+    this.prepareDataForDisplay();
+  }
+
+  searchForDistrict = (searchString) => {
+    const searchWord = searchString;
+    this.setState( { searchWord } );
+    this.prepareDataForDisplay(searchString)
+  }
+
+  prepareDataForDisplay = (searchWord) => {
+    const displayData = this.state.repository.findAllMatches(searchWord);
+    this.setState({ displayData })
+  }
+
   render() {
+
+    const { cleanData, displayData, dataSet } = this.state;
+
     return (
-      <div>Welcome To Headcount 2.0</div>
+      <div>
+        <h1 className='app'>Welcome To Headcount 2.0</h1>
+        <Search 
+          searchForDistrict={this.searchForDistrict } />
+        <ComparisonContainer />
+        <CardContainer 
+          displayData={ displayData }
+          dataSet={ dataSet }/>
+      </div>
     );
   }
 }

src/App.test.js

@@ -1,8 +1,74 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { shallow } from 'enzyme';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  // ReactDOM.render(<App />, div);
-});
+
+describe('App', () => {
+  it('Matches the snapshot', () => {
+    const wrapper = shallow(<App />);
+    expect(wrapper).toMatchSnapshot;
+  });
+
+  it.skip('componentDidMount calls the method prepareDataForDisplay with the correct params', () => {
+    const wrapper = shallow(<App />);
+
+  });
+
+  it.skip('PrepareDataForDisplay calls findAllMatches on the repository held in state', () => {
+
+  });
+
+  it('PrepareDataForDisplay sets the displayData of state', () => {
+    let mockDistrictRepository = {
+      stats: [
+      {
+        "Location": "VIRGINIA",
+        "TimeFrame": 1909,
+        "DataFormat": "Percent",
+        "Data": 0.107
+      },
+      {
+        "Location": "VIRGINIA",
+        "TimeFrame": 3999,
+        "DataFormat": "Percent",
+        "Data": 5.999
+      },
+      {
+        "Location": "NorthCarolina",
+        "TimeFrame": 1999,
+        "DataFormat": "Percent",
+        "Data": 1.007
+      },
+      {
+        "Location": "NorthCarolina",
+        "TimeFrame": 2099,
+        "DataFormat": "Percent",
+        "Data": 1.999
+      }],
+      findAllMatches: jest.fn(() => {
+        return [{location: 'NorthCarolina', 
+        stats: {1999: 0.007, 2099: 1.999 }}, 
+      {location: 'VIRGINIA', 
+       stats: {1909: 0.107, 3999: 5.999 }}]
+      })
+    };
+
+    const expected = [{location: 'NorthCarolina', 
+        stats: {1999: 0.007, 2099: 1.999 }}, 
+      {location: 'VIRGINIA', 
+       stats: {1909: 0.107, 3999: 5.999 }}]
+    const wrapper = shallow(<App />);
+
+    wrapper.setState({
+      dataSet: 'College',
+      displayData: [],
+      searchWord: '',
+      repository: mockDistrictRepository
+    });
+    wrapper.instance().prepareDataForDisplay();
+    expect(wrapper.state('displayData')).toEqual(expected);
+  })
+
+
+})

src/Card.css

@@ -0,0 +1,40 @@
+.above {
+  color: green;
+}
+
+.below {
+  color: red;
+}
+
+.card {
+  border: solid 2px black;
+  color: black;
+}
+
+ul {
+list-style: none;
+margin: 0;
+padding-left: 30px;
+padding-bottom: 10px
+}
+
+li {
+  text-orientation: left;
+}
+
+span {
+  display: flex;
+  justify-content: space-between;
+}
+
+h5 {
+  padding: 10px;
+  margin: 5px;
+}
+
+.select-btn {
+  padding: 2px;
+  border-radius: 25%;
+  margin: 5px;
+  font-size: 0.25rem;
+}

src/Card.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import './Card.css'
+
+const Card = ( {location, stats} ) => {
+    const displayStats = Object.keys(stats).map(stat => {
+      return ( <li className={`listedStats ${stats[stat] < 0.5 ? 'below' : 'above'}`}> {`${stat}: ${stats[stat] }`}</li>
+        )
+    })
+
+    return(
+      <div className='card'>
+        <span>
+          <h5>{ location }</h5>
+          <button className='select-btn'>Select</button>
+          </span>
+        <ul>
+          {displayStats} 
+        </ul>
+      </div>
+    )
+  }
+
+Card.propTypes = {
+  location: PropTypes.string.isRequired,
+  stats: PropTypes.object.isRequired
+}
+
+export default Card;

src/Card.test.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import Card from './Card';
+import { shallow } from 'enzyme';
+
+describe('Card', () => {
+  it('matches the snapshot', () => {
+
+    let wrapper = shallow(<Card 
+            key={Date.now()} 
+            location={'string'}
+            stats={{1909: 0.107, 3999: 5.999}} />);
+    expect(wrapper).toMatchSnapshot()
+  });
+
+  it.skip('assigns a classNames of listedStats and above to all stats that are above 0.5, and listedStats below to all stats less than 0.5', () => {
+
+
+  })
+
+
+
+})

src/CardContainer.css

@@ -0,0 +1,15 @@
+.cardContainer-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
+  grid-gap: 15px;
+  padding: 10px;
+  margin: 10px;
+  border-radius: 25px;
+  border: cornflowerblue;
+  align-items: center;
+}
+
+.cardContainerHeading {
+  color: cornflowerblue; 
+  text-align: center;
+}

src/CardContainer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Card from './Card';
+import PropTypes from 'prop-types';
+import './CardContainer.css';
+
+
+const CardContainer = ( {displayData, dataSet} ) => {
+
+
+  const cards = displayData.map(district => {
+    return <Card 
+            key={`card ${district.location}`}
+            {...district} />
+  })
+
+  return(
+    <div>
+      <h3 className='cardContainerHeading'>{dataSet} data for each district is listed below when nothing is entered in the search field, otherwise, only districts that match the search criteria are listed.</h3>
+      <section className='cardContainer-grid'>
+        { cards }
+      </section>
+    </div>
+  )
+}
+
+CardContainer.propTypes = {
+  displayData: PropTypes.array.isRequired
+}
+
+export default CardContainer;

src/CardContainer.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import CardContainer from './CardContainer';
+import { shallow } from 'enzyme';
+import Card from './Card';
+
+describe('CardContainer', () => {
+  it('matches the snapshot', () => {
+    let mockDataSet = 'College';
+    let mockDisplayData = 
+    [{location: 'NorthCarolina', 
+    stats: {1999: 0.007, 2099: 1.999 }}, 
+    {location: 'VIRGINIA', 
+    stats: {1909: 0.107, 3999: 5.999 }}];
+    let wrapper = shallow(<CardContainer displayData={mockDisplayData}
+      dataSet={mockDataSet}/>);
+
+    expect(wrapper).toMatchSnapshot()
+  });
+
+  it('renders all the cards', () => {
+    let mockDataSet = 'College';
+    let mockDisplayData = 
+    [ {location: 'NorthCarolina', 
+    stats: {1999: 0.007, 2099: 1.999 }}, 
+    {location: 'VIRGINIA', 
+    stats: {1909: 0.107, 3999: 5.999 }}];
+
+    let wrapper = shallow(<CardContainer
+        displayData={ mockDisplayData }
+        dataSet={mockDataSet} />)
+    expect(wrapper.find(Card).length).toEqual(2)
+  });
+
+  it.skip('Assigns a unique key to each card', () => {
+
+
+  });
+
+})

src/ComparisonContainer.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Card from './Card';
+
+const ComparisonContainer = () => {
+
+  return(
+    <div>
+      <h3>Select two districts to compare, they will be displayed here.</h3>
+    </div>
+  )
+}
+
+export default ComparisonContainer;

src/ComparisonContainer.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import ComparisonContainer from './ComparisonContainer';
+import { shallow } from 'enzyme';
+
+describe('ComparisonContainer', () => {
+
+  it('matches the snapshot', () => {
+    const wrapper = shallow(<ComparisonContainer />);
+    expect(wrapper).toMatchSnapshot()
+  });
+
+})