ImportDialogBox component tests

frontend/src/Metamaps/GlobalUI/ImportDialog.js

@@ -26,7 +26,10 @@ const ImportDialog = {
     ReactDOM.render(React.createElement(ImportDialogBox, {
       onFileAdded: PasteInput.handleFile,
       exampleImageUrl: serverData['import-example.png'],
-      downloadScreenshot: ImportDialog.downloadScreenshot
+      downloadScreenshot: ImportDialog.downloadScreenshot,
+      onExport: format => {
+        window.open(`${window.location.pathname}/export.${format}`, '_blank')
+      }
     }), $('.importDialogWrapper').get(0))
   },
   show: function() {

frontend/src/components/ImportDialogBox.js

@@ -2,10 +2,6 @@ import React, { PropTypes, Component } from 'react'
 import Dropzone from 'react-dropzone'
 
 class ImportDialogBox extends Component {
-  handleExport = format => () => {
-    window.open(`${window.location.pathname}/export.${format}`, '_blank')
-  }
-
   handleFile = (files, e) => {
     e.preventDefault() // prevent it from triggering the default drag-drop handler
     this.props.onFileAdded(files[0])
@@ -15,13 +11,13 @@ class ImportDialogBox extends Component {
     return (
       <div className="import-dialog">
         <h3>EXPORT</h3>
-        <div className="import-blue-button" onClick={this.handleExport('csv')}>
+        <div className="export-csv import-blue-button" onClick={this.props.onExport('csv')}>
           Export as CSV
         </div>
-        <div className="import-blue-button" onClick={this.handleExport('json')}>
+        <div className="export-json import-blue-button" onClick={this.props.onExport('json')}>
           Export as JSON
         </div>
-        <div className="import-blue-button" onClick={this.props.downloadScreenshot}>
+        <div className="download-screenshot import-blue-button" onClick={this.props.downloadScreenshot}>
           Download screenshot
         </div>
         <h3>IMPORT</h3>
@@ -39,8 +35,8 @@ class ImportDialogBox extends Component {
 
 ImportDialogBox.propTypes = {
   onFileAdded: PropTypes.func,
-  exampleImageUrl: PropTypes.string,
-  downloadScreenshot: PropTypes.func
+  downloadScreenshot: PropTypes.func,
+  onExport: PropTypes.func
 }
 
 export default ImportDialogBox

frontend/test/components/ImportDialogBox.spec.js

@@ -0,0 +1,50 @@
+/* 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: () => {} })
+  })
+})

package.json

@@ -63,7 +63,8 @@
     "eslint-plugin-standard": "^2.0.1",
     "jsdom": "^9.11.0",
     "mocha": "^3.2.0",
-    "mocha-webpack": "^0.7.0"
+    "mocha-webpack": "^0.7.0",
+    "react-addons-test-utils": "^15.4.2"
   },
   "optionalDependencies": {
     "raml2html": "4.0.5"