new react tests with enzyme library (#1116)

* move ImportDialogBox into a folder

* install enzyme

* start testing InfoAndHelp component

* add star logic to tests

* switch ImportDialogBox to using enzyme but tests are still failing

* make `npm run test` work

* tests pass again

* eslint

* try to fix travis by adding react-addons-test-utils again

* eslintrc for test dir

* remove duplicated code

* fix

* try to suppress 2 warnings

frontend/test/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "rules": {
+    "no-unused-expressions": "off"
+  }
+}

frontend/test/Metamaps/Import.spec.js

@@ -1,10 +1,8 @@
 /* global describe, it */
 
-import chai from 'chai'
+import { expect } from 'chai'
 
-import Import from '../src/Metamaps/Import'
-
-const { expect } = chai
+import Import from '../../src/Metamaps/Import.js'
 
 describe('Metamaps.Import.js', function() {
   it('has a topic whitelist', function() {

frontend/test/Metamaps/Util.spec.js

@@ -1,10 +1,8 @@
 /* global describe, it */
 
-import chai from 'chai'
+import { expect } from 'chai'
 
-import Util from '../src/Metamaps/Util'
-
-const { expect } = chai
+import Util from '../../src/Metamaps/Util'
 
 describe('Metamaps.Util.js', function() {
   describe('splitLine', function() {

frontend/test/components/ImportDialogBox.spec.js

@@ -1,50 +0,0 @@
-/* global describe, it */
-import React from 'react'
-import TestUtils from 'react-addons-test-utils' // ES6
-import ImportDialogBox from '../../src/components/ImportDialogBox.js'
-import Dropzone from 'react-dropzone'
-import chai from 'chai'
-
-const { expect } = chai
-
-describe('ImportDialogBox', function() {
-  it('has an Export CSV button', function(done) {
-    const onExport = format => {
-      if (format === 'csv') done()
-    }
-    const detachedComp = TestUtils.renderIntoDocument(<ImportDialogBox onExport={onExport} />)
-    const button = TestUtils.findRenderedDOMComponentWithClass(detachedComp, 'export-csv')
-    const buttonNode = React.findDOMNode(button)
-    expect(button).to.exist;
-    TestUtils.Simulate.click(buttonNode)
-  })
-
-  it('has an Export JSON button', function(done) {
-    const onExport = format => {
-      if (format === 'json') done()
-    }
-    const detachedComp = TestUtils.renderIntoDocument(<ImportDialogBox onExport={onExport} />)
-    const button = TestUtils.findRenderedDOMComponentWithClass(detachedComp, 'export-json')
-    const buttonNode = React.findDOMNode(button)
-    expect(button).to.exist;
-    TestUtils.Simulate.click(buttonNode)
-  })
-
-  it('has a Download screenshot button', function(done) {
-    const downloadScreenshot = () => { done() }
-    const detachedComp = TestUtils.renderIntoDocument(<ImportDialogBox downloadScreenshot={downloadScreenshot()} />)
-    const button = TestUtils.findRenderedDOMComponentWithClass(detachedComp, 'download-screenshot')
-    const buttonNode = React.findDOMNode(button)
-    expect(button).to.exist;
-    TestUtils.Simulate.click(buttonNode)
-  })
-
-  it('has a file uploader', function(done) {
-    const uploadedFile = { file: 'mock a file' }
-    const onFileAdded = file => { if (file === uploadedFile) done() }
-    const detachedComp = TestUtils.renderIntoDocument(<ImportDialogBox onExport={() => {}} onFileAdded={onFileAdded} />)
-    const dropzone = TestUtils.findRenderedComponentWithType(detachedComp, Dropzone)
-    expect(dropzone).to.exist;
-    dropzone.props.onDropAccepted([uploadedFile], { preventDefault: () => {} })
-  })
-})

frontend/test/components/MapView/ImportDialogBox.spec.js

@@ -0,0 +1,58 @@
+/* global describe, it */
+import React from 'react'
+import ImportDialogBox from '../../../src/components/MapView/ImportDialogBox.js'
+import Dropzone from 'react-dropzone'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+describe('ImportDialogBox', function() {
+  const csvExport = sinon.spy()
+  const jsonExport = sinon.spy()
+  const onExport = format => () => {
+    if (format === 'csv') {
+      csvExport()
+    } else if (format === 'json') {
+      jsonExport()
+    }
+  }
+
+  const testExportButton = ({ description, cssClass, exporter }) => {
+    it(description, () => {
+      const wrapper = shallow(<ImportDialogBox onExport={onExport} />)
+      const button = wrapper.find(cssClass)
+      expect(button).to.exist
+      button.simulate('click')
+      expect(exporter).to.have.property('callCount', 1)
+    })
+  }
+  testExportButton({
+    description: 'has an Export CSV button',
+    cssClass: '.export-csv',
+    exporter: csvExport
+  })
+  testExportButton({
+    description: 'has an Export JSON button',
+    cssClass: '.export-json',
+    exporter: jsonExport
+  })
+
+  it('has a Download screenshot button', () => {
+    const downloadScreenshot = sinon.spy()
+    const wrapper = shallow(<ImportDialogBox onExport={() => null} downloadScreenshot={downloadScreenshot} />)
+    const button = wrapper.find('.download-screenshot')
+    expect(button).to.exist
+    button.simulate('click')
+    expect(downloadScreenshot).to.have.property('callCount', 1)
+  })
+
+  it('has a file uploader', () => {
+    const uploadedFile = {}
+    const onFileAdded = sinon.spy()
+    const wrapper = shallow(<ImportDialogBox onExport={() => null} onFileAdded={onFileAdded} />)
+    const dropzone = wrapper.find(Dropzone)
+    dropzone.props().onDropAccepted([uploadedFile], { preventDefault: () => {} })
+    expect(onFileAdded).to.have.property('callCount', 1)
+    expect(onFileAdded.calledWith(uploadedFile)).to.equal(true)
+  })
+})

frontend/test/components/common/InfoAndHelp.spec.js

@@ -0,0 +1,101 @@
+/* global describe, it */
+import React from 'react'
+import { expect } from 'chai'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+
+import InfoAndHelp from '../../../src/components/common/InfoAndHelp.js'
+import MapInfoBox from '../../../src/components/MapView/MapInfoBox.js'
+
+function assertTooltip({ wrapper, description, cssClass, tooltipText, callback }) {
+  it(description, function() {
+    expect(wrapper.find(cssClass)).to.exist
+    expect(wrapper.find(`${cssClass} .tooltipsAbove`).text()).to.equal(tooltipText)
+    wrapper.find(cssClass).simulate('click')
+    expect(callback).to.have.property('callCount', 1)
+  })
+}
+
+function assertContent({ currentUser, map }) {
+  const onInfoClick = sinon.spy()
+  const onHelpClick = sinon.spy()
+  const onStarClick = sinon.spy()
+  const wrapper = shallow(
+    <InfoAndHelp map={map} currentUser={currentUser}
+      onInfoClick={onInfoClick}
+      onHelpClick={onHelpClick}
+      onMapStar={onStarClick}
+      mapIsStarred={false}
+    />)
+
+  if (map) {
+    it('renders MapInfoBox', () => expect(wrapper.find(MapInfoBox)).to.exist)
+    assertTooltip({
+      wrapper,
+      description: 'renders Map Info icon',
+      cssClass: '.mapInfoIcon',
+      tooltipText: 'Map Info',
+      callback: onInfoClick
+    })
+  } else {
+    it('does not render MapInfoBox', () => expect(wrapper.find(MapInfoBox).length).to.equal(0))
+    it('does not render Map Info icon', () => expect(wrapper.find('.mapInfoIcon').length).to.equal(0))
+  }
+
+  if (map && currentUser) {
+    it('renders Star icon', () => {
+      expect(wrapper.find('.starMap')).to.exist
+      wrapper.find('.starMap').simulate('click')
+      expect(onStarClick).to.have.property('callCount', 1)
+    })
+  } else {
+    it('does not render the Star icon', () => expect(wrapper.find('.starMap').length).to.equal(0))
+  }
+
+  // common content
+  assertTooltip({
+    wrapper,
+    description: 'renders Help icon',
+    cssClass: '.openCheatsheet',
+    tooltipText: 'Help',
+    callback: onHelpClick
+  })
+  it('renders clearfloat at the end', function() {
+    const clearfloat = wrapper.find('.clearfloat')
+    expect(clearfloat).to.exist
+    expect(wrapper.find('.infoAndHelp').children().last()).to.eql(clearfloat)
+  })
+}
+
+function assertStarLogic({ mapIsStarred }) {
+  const onMapStar = sinon.spy()
+  const onMapUnstar = sinon.spy()
+  const wrapper = shallow(
+    <InfoAndHelp map={{}} currentUser={{}}
+      onMapStar={onMapStar}
+      onMapUnstar={onMapUnstar}
+      mapIsStarred={mapIsStarred}
+    />)
+  const starWrapper = wrapper.find('.starMap')
+  starWrapper.simulate('click')
+  it(mapIsStarred ? 'has unstar content' : 'has star content', () => {
+    expect(starWrapper.hasClass('starred')).to.equal(mapIsStarred)
+    expect(starWrapper.find('.tooltipsAbove').text()).to.equal(mapIsStarred ? 'Unstar' : 'Star')
+    expect(onMapStar).to.have.property('callCount', mapIsStarred ? 0 : 1)
+    expect(onMapUnstar).to.have.property('callCount', mapIsStarred ? 1 : 0)
+  })
+}
+
+describe('InfoAndHelp', function() {
+  describe('no currentUser, map is present', function() {
+    assertContent({ currentUser: null, map: {} })
+  })
+  describe('currentUser is present, map is present', function() {
+    assertContent({ currentUser: {}, map: {} })
+  })
+  describe('no currentUser, no map', function() {
+    assertContent({ currentUser: null, map: null })
+  })
+  assertStarLogic({ mapIsStarred: true })
+  assertStarLogic({ mapIsStarred: false })
+})

frontend/test_support/dom.js

@@ -5,12 +5,12 @@ const win = doc.defaultView
 global.document = doc
 global.window = win
 
-// take all properties of the window object and also attach it to the 
+// take all properties of the window object and also attach it to the
 // mocha global object
 propagateToGlobal(win)
 
 // from mocha-jsdom https://github.com/rstacruz/mocha-jsdom/blob/master/index.js#L80
-function propagateToGlobal (window) {
+function propagateToGlobal(window) {
   for (let key in window) {
     if (!window.hasOwnProperty(key)) continue
     if (key in global) continue

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack",
     "build:watch": "webpack --watch",
-    "test": "mocha-webpack --webpack-config webpack.test.config.js --require frontend/test/support/dom.js frontend/test",
+    "test": "mocha-webpack --webpack-config webpack.test.config.js --require frontend/test_support/dom.js --recursive frontend/test",
     "eslint": "eslint frontend",
     "eslint:fix": "eslint --fix frontend"
   },
@@ -58,6 +58,7 @@
     "babel-eslint": "^7.1.1",
     "chai": "^3.5.0",
     "circular-dependency-plugin": "^2.0.0",
+    "enzyme": "^2.8.2",
     "eslint": "^3.11.1",
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-promise": "^3.4.0",
@@ -66,7 +67,8 @@
     "jsdom": "^9.11.0",
     "mocha": "^3.2.0",
     "mocha-webpack": "^0.7.0",
-    "react-addons-test-utils": "^15.4.2"
+    "react-addons-test-utils": "^15.5.1",
+    "sinon": "^2.2.0"
   },
   "optionalDependencies": {
     "raml2html": "4.0.5"

webpack.test.config.js

@@ -1,5 +1,15 @@
 const config = require('./webpack.config')
 
 config.target = 'node'
+config.externals = config.externals.concat([
+  'react/lib/ExecutionEnvironment',
+  'react/lib/ReactContext',
+  'react/addons',
+  'react-test-renderer/shallow',
+  'react-dom/test-utils',
+  'canvas',
+  'bufferutil',
+  'utf-8-validate'
+])
 
 module.exports = config