Configure testing and add some sample tests

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+# node version specified in .nvmrc
+
+cache:
+  directories:
+    - "node_modules"

package.json

@@ -5,32 +5,37 @@
   "dependencies": {
     "deep-diff": "^0.3.8",
     "file-saver": "^1.3.8",
-    "lodash": "^4.17.4",
-    "moment": "^2.20.1",
-    "react": "^16.2.0",
+    "lodash": "^4.17.10",
+    "moment": "^2.22.2",
+    "react": "^16.4.1",
     "react-bootstrap": "^0.31.5",
-    "react-bootstrap-typeahead": "^2.3.0",
+    "react-bootstrap-typeahead": "^2.6.0",
     "react-bs-notifier": "^4.4.6",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.1",
     "react-dropzone": "^4.2.11",
-    "react-ga": "^2.4.1",
+    "react-ga": "^2.5.3",
     "react-monaco-editor": "^0.13.0",
-    "react-redux": "^5.0.6",
+    "react-redux": "^5.0.7",
     "react-router-bootstrap": "^0.24.4",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.1",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "^2.0.0-next.3e165448",
     "react-select": "^1.2.1",
-    "react-virtualized": "^9.17.1",
+    "react-virtualized": "^9.19.1",
     "redux": "^3.7.2",
     "redux-persist": "^4.6.0",
-    "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "^2.0.3"
+    "redux-thunk": "^2.3.0",
+    "whatwg-fetch": "^2.0.4"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "node-sass": "^4.5.2",
-    "npm-run-all": "^4.0.2"
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "jest-enzyme": "^6.0.2",
+    "node-sass": "^4.9.0",
+    "npm-run-all": "^4.1.3",
+    "react-test-renderer": "^16.4.1",
+    "redux-mock-store": "^1.5.3"
   },
   "scripts": {
     "copy-monaco": "node ./src/utils/install-monaco.js",
@@ -42,5 +47,17 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "start-prod": "npm run build && serve -s build"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">0.25%",
+      "not op_mini all",
+      "ie 11"
+    ]
   }
 }

src/components/PageInspect.js

@@ -15,7 +15,7 @@ import { FilterBar, MonacoEditorWrapper, Section, CopyUrlButton } from './'
 import EntitySpec from '../utils/entitySpec'
 import { ROUTE_INSPECT, ROUTE_CURATE } from '../utils/routingConstants'
 
-class PageInspect extends Component {
+export class PageInspect extends Component {
   constructor(props) {
     super(props)
     this.state = {}
@@ -91,10 +91,10 @@ class PageInspect extends Component {
 
   renderInnerData(value, name, type = 'json', actionButton = null) {
     if (value.isFetching) return this.renderPlaceholder(`Loading the ${name}`)
-    if (value.error && !value.error.state === 404)
+    if (value.error && value.error.state !== 404)
       return this.renderPlaceholder(`There was a problem loading the ${name}`)
     if (!value.isFetched) return this.renderPlaceholder('Search for some part of a component name to see details')
-    if (!value.item) return this.renderPlaceholder(`There are no ${name}`, actionButton)
+    if (!value.item) return this.renderPlaceholder(`There are no ${name}`)
     const options = {
       selectOnLineNumbers: true
     }
@@ -121,7 +121,7 @@ class PageInspect extends Component {
     return (
       <Button
         bsStyle="success"
-        className="pull-right"
+        className="pull-right add-curation-btn"
         disabled={!Boolean(this.props.filterValue)}
         onClick={this.addCuration}
       >

src/components/__tests__/App.test.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { App, Header, Footer } from '../'
+
+describe('App', () => {
+  it('renders without crashing', () => {
+    shallow(<App />)
+  })
+  it('renders the header', () => {
+    const wrapper = shallow(<App />)
+    expect(wrapper).toContainReact(<Header />)
+  })
+  it('renders the content', () => {
+    const wrapper = shallow(<App />)
+    expect(wrapper.find('.App-content')).toExist()
+  })
+  it('renders the footer', () => {
+    const wrapper = shallow(<App />)
+    expect(wrapper).toContainReact(<Footer />)
+  })
+})

src/components/__tests__/PageInspect.test.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { shallow as enzymeShallow } from 'enzyme'
+import { MonacoEditorWrapper, FilterBar } from '../'
+import { PageInspect } from '../PageInspect' // get store unconnected component
+
+describe('PageInspect', () => {
+  const shallow = (comp, opts = {}) => enzymeShallow(comp, { disableLifecycleMethods: true, ...opts })
+  const initialProps = {
+    token: 'foo',
+    path: '/inspect',
+    filterValue: '',
+    filterOptions: {},
+    definition: {},
+    curation: {},
+    harvest: {}
+  }
+
+  it('renders the page without crashing', () => {
+    const wrapper = shallow(<PageInspect {...initialProps} />)
+    expect(wrapper.find('[name="Current definition"]')).toExist()
+    expect(wrapper.find('[name="Curations"]')).toExist()
+    expect(wrapper.find('[name="Harvested data"]')).toExist()
+  })
+
+  it('should render the filterbar', () => {
+    const props = { ...initialProps }
+    const wrapper = shallow(<PageInspect {...props} />)
+    expect(wrapper.find(FilterBar)).toExist()
+  })
+
+  it('should dispatch an action on filter change', () => {
+    const mockCallback = jest.fn()
+    const props = { ...initialProps, dispatch: mockCallback }
+    const wrapper = shallow(<PageInspect {...props} />)
+    wrapper.instance().filterChanged('foo')
+    expect(mockCallback).toHaveBeenCalled()
+    expect(mockCallback).toHaveBeenCalledWith({ type: 'UI_INSPECT_UPDATE_FILTER', value: 'foo' })
+  })
+
+  describe('Current definition section', () => {
+    const getMessage = x => x.find('[name="Current definition"] .placeholder-message')
+
+    it('should render a loading message', () => {
+      const props = { ...initialProps, definition: { isFetching: true } }
+      const wrapper = shallow(<PageInspect {...props} />)
+      expect(getMessage(wrapper)).toIncludeText('Loading the Current definition')
+    })
+
+    it('should render an error message', () => {
+      const props = { ...initialProps, definition: { error: { state: 500 } } }
+      const wrapper = shallow(<PageInspect {...props} />)
+      expect(getMessage(wrapper)).toIncludeText('There was a problem loading the Current definition')
+    })
+
+    it('should prompt to search for components', () => {
+      const wrapper = shallow(<PageInspect {...initialProps} />)
+      expect(getMessage(wrapper)).toIncludeText('Search for some part of a component name to see details')
+    })
+
+    it('should render no definition message', () => {
+      const props = { ...initialProps, definition: { isFetching: false, isFetched: true } }
+      const wrapper = shallow(<PageInspect {...props} />)
+      expect(getMessage(wrapper)).toIncludeText('There are no Current definition')
+    })
+
+    it('should render the editor', () => {
+      const props = { ...initialProps, definition: { isFetching: false, isFetched: true, item: {} } }
+      const wrapper = shallow(<PageInspect {...props} />)
+      expect(wrapper.find(MonacoEditorWrapper)).toExist()
+    })
+  })
+})

src/reducers/uiReducer.js

@@ -85,32 +85,32 @@ const navigation = (state = initialStateNavigation, action) => {
 }
 
 const curate = combineReducers({
-  filter: new valueReducer(UI_CURATE_UPDATE_FILTER),
-  filterList: new listReducer(UI_CURATE_UPDATE_FILTER_LIST),
-  currentCuration: new itemReducer(UI_CURATE_GET),
-  proposedCuration: new itemReducer(UI_CURATE_GET_PROPOSED),
-  currentDefinition: new itemReducer(UI_CURATE_GET_DEFINITION),
-  proposedDefinition: new itemReducer(UI_CURATE_GET_DEFINITION_PROPOSED),
-  previewDefinition: new itemReducer(UI_CURATE_DEFINITION_PREVIEW)
+  filter: valueReducer(UI_CURATE_UPDATE_FILTER),
+  filterList: listReducer(UI_CURATE_UPDATE_FILTER_LIST),
+  currentCuration: itemReducer(UI_CURATE_GET),
+  proposedCuration: itemReducer(UI_CURATE_GET_PROPOSED),
+  currentDefinition: itemReducer(UI_CURATE_GET_DEFINITION),
+  proposedDefinition: itemReducer(UI_CURATE_GET_DEFINITION_PROPOSED),
+  previewDefinition: itemReducer(UI_CURATE_DEFINITION_PREVIEW)
 })
 
 const inspect = combineReducers({
-  filter: new valueReducer(UI_INSPECT_UPDATE_FILTER),
-  filterList: new listReducer(UI_INSPECT_UPDATE_FILTER_LIST),
-  definition: new itemReducer(UI_INSPECT_GET_DEFINITION, item => yaml.safeDump(item, { sortKeys: true })),
-  curation: new itemReducer(UI_INSPECT_GET_CURATION, item => yaml.safeDump(item, { sortKeys: true })),
-  harvested: new itemReducer(UI_INSPECT_GET_HARVESTED, item => JSON.stringify(item, null, 2))
+  filter: valueReducer(UI_INSPECT_UPDATE_FILTER),
+  filterList: listReducer(UI_INSPECT_UPDATE_FILTER_LIST),
+  definition: itemReducer(UI_INSPECT_GET_DEFINITION, item => yaml.safeDump(item, { sortKeys: true })),
+  curation: itemReducer(UI_INSPECT_GET_CURATION, item => yaml.safeDump(item, { sortKeys: true })),
+  harvested: itemReducer(UI_INSPECT_GET_HARVESTED, item => JSON.stringify(item, null, 2))
 })
 
 const browse = combineReducers({
-  filter: new valueReducer(UI_BROWSE_UPDATE_FILTER),
-  filterList: new listReducer(UI_BROWSE_UPDATE_FILTER_LIST),
-  componentList: new listReducer(UI_BROWSE_UPDATE_LIST, null, EntitySpec.isEquivalent)
+  filter: valueReducer(UI_BROWSE_UPDATE_FILTER),
+  filterList: listReducer(UI_BROWSE_UPDATE_FILTER_LIST),
+  componentList: listReducer(UI_BROWSE_UPDATE_LIST, null, EntitySpec.isEquivalent)
 })
 
 const harvest = combineReducers({
-  filter: new valueReducer(UI_HARVEST_UPDATE_FILTER),
-  requestQueue: new listReducer(UI_HARVEST_UPDATE_QUEUE, null, isEqual)
+  filter: valueReducer(UI_HARVEST_UPDATE_FILTER),
+  requestQueue: listReducer(UI_HARVEST_UPDATE_QUEUE, null, isEqual)
 })
 
 const notifications = (state = [], action) => {

src/setupTests.js

@@ -0,0 +1,5 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import 'jest-enzyme'
+
+configure({ adapter: new Adapter() })