Add tests for FieldGuide, FieldGuideButton, HelpIcon. Fix store tests.

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.js

@@ -37,12 +37,12 @@ class FieldGuide extends React.Component {
 }
 
 FieldGuide.wrappedComponent.defaultProps = {
-  activeItem: null,
+  activeItem: -1,
   className: '',
 }
 
 FieldGuide.wrappedComponent.propTypes = {
-  activeItem: PropTypes.object,
+  activeItem: PropTypes.number,
   className: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.object).isRequired
 }

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuide/FieldGuide.spec.js

@@ -0,0 +1,51 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import FieldGuide from './FieldGuide'
+import FieldGuideItem from './components/FieldGuideItem'
+import FieldGuideItems from './components/FieldGuideItems'
+import { FieldGuideMediumFactory } from '../../../../../../../test/factories'
+
+const medium = FieldGuideMediumFactory.build()
+const items = [
+  {
+    title: 'Cat',
+    icon: medium.id,
+    content: 'lorem ipsum'
+  },
+  {
+    title: 'Dog',
+    content: 'Foo bar'
+  },
+  { title: 'Iguana', content: 'hello' },
+  { title: 'Koala', content: '' },
+  { title: 'Dragon', content: 'Why is this here?' }
+]
+
+describe('Component > FieldGuide', function () {
+  it('should render without crashing', function () {
+    const wrapper = shallow(
+      <FieldGuide.wrappedComponent
+        items={items}
+      />)
+    expect(wrapper).to.be.ok
+  })
+
+  it('should render FieldGuideItems if there is not an active item', function () {
+    const wrapper = shallow(
+      <FieldGuide.wrappedComponent
+        items={items}
+      />)
+    expect(wrapper.find(FieldGuideItems)).to.have.lengthOf(1)
+    expect(wrapper.find(FieldGuideItem)).to.have.lengthOf(0)
+  })
+
+  it('should render FieldGuideItem if there is an active item', function () {
+    const wrapper = shallow(
+      <FieldGuide.wrappedComponent
+        activeItem={0}
+        items={items}
+      />)
+    expect(wrapper.find(FieldGuideItems)).to.have.lengthOf(0)
+    expect(wrapper.find(FieldGuideItem)).to.have.lengthOf(1)
+  })
+})

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuideButton/FieldGuideButton.js

@@ -60,7 +60,6 @@ function storeMapper(stores) {
 class FieldGuideButton extends React.Component {
   onClick () {
     const { setModalVisibility } = this.props
-    console.info('Open field guide')
     setModalVisibility(true)
   }
 
@@ -81,6 +80,10 @@ class FieldGuideButton extends React.Component {
   }
 }
 
+FieldGuideButton.defaultProps = {
+  fieldGuide: null
+}
+
 FieldGuideButton.wrappedComponent.propTypes = {
   fieldGuide: PropTypes.object,
   setModalVisibility: PropTypes.func.isRequired

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuideButton/FieldGuideButton.spec.js

@@ -0,0 +1,89 @@
+import { shallow, mount } from 'enzyme'
+import sinon from 'sinon'
+import React from 'react'
+import FieldGuideButton, { ButtonLabel } from './FieldGuideButton'
+import { FieldGuideFactory, FieldGuideMediumFactory } from '../../../../../../../test/factories'
+
+const medium = FieldGuideMediumFactory.build()
+const items = [
+  {
+    title: 'Cat',
+    icon: medium.id,
+    content: 'lorem ipsum'
+  },
+  {
+    title: 'Dog',
+    content: 'Foo bar'
+  },
+  { title: 'Iguana', content: 'hello' },
+  { title: 'Koala', content: '' },
+  { title: 'Dragon', content: 'Why is this here?' }
+]
+const fieldGuide = FieldGuideFactory.build({ items })
+const fieldGuideWithoutItems = FieldGuideFactory.build()
+
+describe('Component > FieldGuideButton', function () {
+  it('should render without crashing', function () {
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        fieldGuide={fieldGuide}
+        setModalVisibility={() => {}}
+      />)
+    expect(wrapper).to.be.ok
+  })
+
+  it('should disable the button if there isn\'t a field guide', function () {
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        setModalVisibility={() => { }}
+      />)
+    expect(wrapper.props().disabled).to.be.true
+  })
+
+  it('should disable the button if the field guide doesn\'t have items', function () {
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        fieldGuide={fieldGuideWithoutItems}
+        setModalVisibility={() => { }}
+      />)
+    expect(wrapper.props().disabled).to.be.true
+  })
+
+  it('should enable the button if the field guide has items', function () {
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        fieldGuide={fieldGuide}
+        setModalVisibility={() => { }}
+      />)
+    expect(wrapper.props().disabled).to.be.false
+  })
+
+  it('should render a ButtonLabel for the label', function () {
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        fieldGuide={fieldGuide}
+        setModalVisibility={() => { }}
+      />)
+
+    expect(wrapper.props().label.type).to.equal(ButtonLabel)
+  })
+
+  it('should call setModalVisibility on click', function () {
+    const setModalVisibilitySpy = sinon.spy()
+    const wrapper = shallow(
+      <FieldGuideButton.wrappedComponent
+        fieldGuide={fieldGuide}
+        setModalVisibility={setModalVisibilitySpy}
+      />)
+
+    wrapper.simulate('click')
+    expect(setModalVisibilitySpy).to.have.been.calledOnceWith(true)
+  })
+
+  describe('Component > ButtonLabel', function () {
+    it('should render without crashing', function () {
+      const wrapper = shallow(<ButtonLabel />)
+      expect(wrapper).to.be.ok
+    })
+  })
+})

packages/lib-classifier/src/components/Classifier/components/FieldGuide/components/FieldGuideButton/HelpIcon.spec.js

@@ -0,0 +1,10 @@
+import { shallow, mount } from 'enzyme'
+import React from 'react'
+import HelpIcon from './HelpIcon'
+
+describe('Component > HelpIcon', function () {
+  it('should render without crashing', function () {
+    const wrapper = shallow(<HelpIcon />)
+    expect(wrapper).to.be.ok
+  })
+})

packages/lib-classifier/src/store/FieldGuideStore.spec.js

@@ -364,7 +364,7 @@ describe('Model > FieldGuideStore', function () {
 
       fetchFieldGuide()
         .then(() => {
-          rootStore.fieldGuide.setActiveItem(0)
+          rootStore.fieldGuide.setActiveItem(fieldGuideWithItems.items[0])
           expect(rootStore.fieldGuide.activeItem).to.equal(0)
           expect(rootStore.fieldGuide.activeMedium.toJSON()).to.deep.equal(medium)
         }).then(done, done)
@@ -386,7 +386,7 @@ describe('Model > FieldGuideStore', function () {
         })
 
       fetchFieldGuide().then(() => {
-        rootStore.fieldGuide.setActiveItem(0)
+        rootStore.fieldGuide.setActiveItem(fieldGuideWithoutIcon.items[0])
         expect(rootStore.fieldGuide.activeItem).to.equal(0)
         expect(rootStore.fieldGuide.activeMedium).to.be.undefined
       }).then(done, done)
@@ -411,7 +411,7 @@ describe('Model > FieldGuideStore', function () {
 
       fetchFieldGuide()
         .then(() => {
-          rootStore.fieldGuide.setActiveItem(0)
+          rootStore.fieldGuide.setActiveItem(fieldGuideWithItems.items[0])
           rootStore.fieldGuide.setModalVisibility(true)
         })
         .then(() => {