Testing for issue 75 - Form Component

.env.development

@@ -0,0 +1 @@
+JWT_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAnk0u5Aag3eJk3FaiG9H+\nv/NLRjiZxFXGJBoOO5Zhal1j8tk1D1vkWRMk+KdCjN998s//62kwYMLkAjOuEoCc\n4Lb6hCeHVIgL+nX9JOxEny0Zi6Koli1KnyQNUZ7vVYHf5NZ7k1h6MShYIzhUPdks\ntiE9nQMtP18JBupccES986iMZw8hra3AGjTBXR6siRePnBa84rYlPhzETjZX4jf6\nM+aDI7+KY3ztrkcBSQL7sbPdILBepBzxHCN1uqUBoYbVTYPZYMmaGsK553KcVds2\nB83LAy626KRAD7Sp1/NwgRIcL55bB1xef/Q+qjSnIOGd4r2JkmjmNLEM4A0p1rEo\nFQIDAQAB\n-----END PUBLIC KEY-----"

go

@@ -9,7 +9,7 @@
   }
 
   function reset_db {
-    env=${1:-test}
+    env=${1:-test}q
     dbname=interviewdb-${env}
     dropdb ${dbname}
     createdb ${dbname}

package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "body-parser": "^1.17.1",
     "chai": "^3.5.0",
+    "chai-enzyme": "^0.6.1",
     "chai-http": "^3.0.0",
     "dotenv": "^4.0.0",
     "enzyme": "^2.8.0",

src/browser/components/common/router.js

@@ -21,10 +21,10 @@ export default class Routes extends Component {
     }
 
     const LandingComponent = (props, state, params) =>
-    <Landing profile={fakeProfile} {...props}  stats={fakeStats} {...props}/>
+    <Landing profile={fakeProfile} {...props}  stats={fakeStats} />
 
     const GameOptionsComponent = (props, state, params) =>
-    <GameOptions profile={fakeProfile} {...props} stats={fakeStats} {...props} />
+    <GameOptions profile={fakeProfile} {...props} stats={fakeStats} />
 
     const ProfileComponent = (props, state, params) =>
     <Profile profile={fakeProfile} {...props} stats={fakeStats} {...props} />

src/browser/components/molecules/form/index.js

@@ -42,6 +42,15 @@ export default class Form extends Component{
     this.state = {
       input: {}
     }
+
+    const form = this.props.inputModules.map( inputModule => {
+      return {'Input': this.initTextInput.bind(this, inputModule),
+        'Checkbox': this.initCheckbox.bind(this, inputModule),
+        'Radio': this.initRadio.bind(this, inputModule),
+        'Select': this.initSelect.bind(this, inputModule)
+      }[inputModule.type]()
+    })
+    this.state.form = form
   }
 
   parseName(inputModule, option){
@@ -63,9 +72,9 @@ export default class Form extends Component{
   }
 
   initTextInput(inputModule) {
-    let domElement = (<FormInput 
-      prompt={inputModule.prompt} 
-      placeholder={inputModule.placeholder} 
+    let domElement = (<FormInput
+      prompt={inputModule.prompt}
+      placeholder={inputModule.placeholder}
       onChange={this.handleChange.bind(this)}/>
     )
 
@@ -76,9 +85,9 @@ export default class Form extends Component{
   }
 
   initCheckbox(inputModule) {
-    let domElement = (<FormCheckbox 
-      prompt={inputModule.prompt} 
-      options={inputModule.options} 
+    let domElement = (<FormCheckbox
+      prompt={inputModule.prompt}
+      options={inputModule.options}
       onChange={this.handleChange.bind(this)}/>)
 
     let currentState = this.state
@@ -90,9 +99,9 @@ export default class Form extends Component{
   }
 
   initRadio(inputModule) {
-    let domElement = (<FormRadio 
-      prompt={inputModule.prompt} 
-      options={inputModule.options} 
+    let domElement = (<FormRadio
+      prompt={inputModule.prompt}
+      options={inputModule.options}
       onChange={this.handleChange.bind(this)}
       />)
     let currentState = this.state
@@ -104,11 +113,11 @@ export default class Form extends Component{
 
   initSelect(inputModule) {
     let domElement = (
-      <FormSelect 
-      prompt={inputModule.prompt} 
-      options={inputModule.options} 
-      isOptionRequired={inputModule.isOptionRequired} 
-      onChange={this.handleChange.bind(this) } 
+      <FormSelect
+      prompt={inputModule.prompt}
+      options={inputModule.options}
+      isOptionRequired={inputModule.isOptionRequired}
+      onChange={this.handleChange.bind(this) }
       passId={inputModule.id}
       />)
     let currentState = this.state
@@ -117,17 +126,6 @@ export default class Form extends Component{
     return domElement
   }
 
-  componentDidMount() {
-    const form = this.props.inputModules.map( inputModule => {
-      return {'Input': this.initTextInput.bind(this, inputModule),
-        'Checkbox': this.initCheckbox.bind(this, inputModule),
-        'Radio': this.initRadio.bind(this, inputModule),
-        'Select': this.initSelect.bind(this, inputModule)
-      }[inputModule.type]()
-    })
-    this.setState({form: form})
-  }
-
   render(){
     return(
       <form className="uk-form-horizontal uk-margin-large">

src/browser/components/molecules/prompt-input/index.js

@@ -11,7 +11,7 @@ export default class AddInput extends Component {
 
   render() {
     return (
-      <div>
+      <div className="add-input">
         <button className="uk-button uk-button-default" onClick={this.addInput}>
           Add a Hint
         </button>

src/browser/components/molecules/scorecard/index.js

@@ -5,10 +5,8 @@ export default class Scorecard extends Component {
     const {questions, answered, skipped} = this.props
     return (
       <div className="uk-grid">
-
           <div className="">Correct: {answered.length}/{questions.length}</div>
           <div className="">Skipped: {skipped.length}/{questions.length}</div>
-
       </div>
     )
   }

src/browser/components/pages/game/index.js

@@ -41,14 +41,14 @@ export default class Game extends Component {
 
           <div className="uk-flex uk-grid">
             <div className="uk-flex-first">
-              <button className="uk-button uk-button-primary"
+              <button id="correct" className="uk-button uk-button-primary"
                       onClick={this.incrementQuestionState.bind(this, 'answered')}>Correct</button>
             </div>
             <div className="uk-flex">
-              <button className="uk-button uk-button-danger"
+              <button id="skipped" className="uk-button uk-button-danger"
                       onClick={this.incrementQuestionState.bind(this, 'skipped')}>Skip</button>
             </div>
-            <div className="uk-flex">
+            <div id="show" className="uk-flex">
               <button className="uk-button-secondary uk-button" onClick={this.toggleProperty.bind(this, 'showAnswer')}>Show Answer</button>
             </div>
           </div>

test/browser/atoms/form_input_test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow, mount } from 'enzyme'
+import { jsdom } from 'jsdom'
+
+import FormInput from '../../../src/browser/components/atoms/form-input/index'
+
+describe('<FormInput />', () => {
+
+  it('should return a div', () => {
+    const wrapper = shallow(<FormInput />)
+    expect(wrapper.find('div.uk-form-controls')).to.have.length(1)
+  })
+
+  it('should have an input field inside the main div', () => {
+    const wrapper = mount(<FormInput />)
+    expect(wrapper.children()).to.have.length(1)
+    expect(wrapper.find('div.uk-form-controls').childAt(0).type()).to.equal('input')
+    expect(wrapper.find('#form-horizontal-text')).to.have.length(1)
+  })
+})

test/browser/atoms/profile_box_test.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow, mount } from 'enzyme'
+import { jsdom } from 'jsdom'
+
+import ProfileBox from '../../../src/browser/components/atoms/profile-box/index'
+
+describe('<ProfileBox />', () => {
+
+  it('should return a div', () => {
+    const wrapper = shallow(<ProfileBox />)
+    expect(wrapper.children()).to.have.length(1)
+  })
+
+  it('the child element should be a div', () => {
+    const wrapper = mount(<ProfileBox />)
+    expect(wrapper.find('div.uk-grid-small').childAt(0).type()).to.equal('div')
+  })
+
+
+
+});

test/browser/atoms/select_tag_test.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow, mount } from 'enzyme'
+import { jsdom } from 'jsdom'
+
+import SelectTag from '../../../src/browser/components/atoms/form-select/index'
+
+
+describe('<SelectTag />', () => {
+  const label = 'difficulty'
+  const options = ['Javascript', 'SQL', 'http']
+  const value = 'SQL'
+
+  it('should return a div', () => {
+    const wrapper = shallow(<SelectTag options={[]} label={label} value={options[1]}  />)
+    expect(wrapper.find('div.uk-margin')).to.have.length(1)
+  })
+
+  context('the outer div should contain two html elements', () => {
+    it('should have a label', () => {
+      const wrapper = mount(<SelectTag options={[]} label={label} value={options[1]} />)
+      expect(wrapper.find('div.uk-margin').childAt(0).type()).to.equal('label')
+      expect(wrapper.props().label).to.equal('difficulty')
+    })
+
+    it('should have a div', () => {
+      const wrapper = mount(<SelectTag options={[]} label={label} value={options[1]} />)
+      expect(wrapper.find('div.uk-margin').childAt(1).type()).to.equal('div')
+    })
+  })
+
+  context('inner divs child should be a select', () => {
+    it('is a selector', () => {
+      const wrapper = mount(<SelectTag options={[]} label={label} value={options[1]} />)
+      expect(wrapper.find('div.uk-form-controls').children().type()).to.equal('select')
+    })
+    it('should display a value', () => {
+      const wrapper = mount(<SelectTag options={[]} label={label} value={options[1]} />)
+      expect(wrapper.props().value).to.equal('SQL')
+    })
+  })
+
+  it('should render N+1 <option> tags', () => {
+    const wrapper = mount(<SelectTag options={options} label={label} />)
+    expect(wrapper.find('option').length).to.eql(4)
+  })
+
+})

test/browser/atoms/stat_box_test.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow, mount } from 'enzyme'
+import { jsdom } from 'jsdom'
+
+global.document = jsdom('');
+global.window = document.defaultView;
+
+import StatBox from '../../../src/browser/components/atoms/stat-box/index'
+import StatCounter from '../../../src/browser/components/atoms/stat-counter/index'
+
+describe('<StatBox />', () => {
+
+  it('should return a div', () => {
+    const wrapper = shallow(<StatBox />)
+    expect(wrapper.find('div.uk-grid-small')).to.have.length(1)
+  })
+
+  context('should have a nested div', () => {
+    it('should have a div inside of the main div', () => {
+      const wrapper = mount(<StatBox />)
+      expect(wrapper.find('div.uk-grid-small').childAt(0).type()).to.equal('div')
+      expect(wrapper.find('div.uk-flex-left')).to.have.length(1)
+    })
+  })
+  context('inner div contains an instance of <StatCounter />', () => {
+    it('should render <StatCounter/>', () => {
+      const wrapper = mount(<StatBox />)
+      expect(wrapper.containsMatchingElement(<StatCounter />)).to.be.true
+    })
+  })
+
+})

test/browser/atoms/stat_counter_test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { expect } from 'chai'
+import { shallow, mount } from 'enzyme'
+import { jsdom } from 'jsdom'
+
+global.document = jsdom('');
+global.window = document.defaultView;
+
+import StatCounter from '../../../src/browser/components/atoms/stat-counter/index'
+
+describe('<StatCounter />', () => {
+  it('should contain a div', () => {
+    const wrapper = shallow(<StatCounter />)
+    expect(wrapper.find('div.uk-margin-small-left')).to.have.length(1)
+  })
+
+  it('should contain a nested div', () => {
+    const wrapper = mount(<StatCounter />)
+    expect(wrapper.find('div.uk-badge').exists()).to.be.true
+  })
+})

test/routes_test.js → test/browser/common/routes_test.js

@@ -8,19 +8,18 @@ const doc = jsdom.jsdom('<!doctype html><html><body><div id="app"></div></body><
 global.document = doc
 global.window = doc.defaultView
 
-import Routes from '../src/browser/components/common/router'
-import Landing from '../src/browser/components/pages/landing/index'
-import Scorecard from '../src/browser/components/molecules/scorecard/index'
-import FormSelect from '../src/browser/components/atoms/form-select/index'
-import GameOptions from '../src/browser/components/molecules/game-options/index'
+import Routes from '../../../src/browser/components/common/router'
+import Landing from '../../../src/browser/components/pages/landing/index'
+import Scorecard from '../../../src/browser/components/molecules/scorecard/index'
+import SelectTag from '../../../src/browser/components/atoms/form-select/index'
+import GameOptions from '../../../src/browser/components/molecules/game-options/index'
 
 describe('<Routes />', () => {
   it('should render correct routes', () => {
-    const wrapper = shallow( < Routes / > )
+    const wrapper = shallow( < Routes / >)
     const pathMap = wrapper.find(Route).reduce((pathMap, route) => {
       const routeProps = route.props()
       pathMap[routeProps.path] = routeProps.component
-      // console.log('path map::', pathMap)
       return pathMap;
     }, {})
     expect(pathMap['/'].toString()).to.equal(Landing.toString())