Merge branch 'release/0.2.0'

Author: jogoodma

.gitignore

@@ -5,4 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
-yarn.lock
+.idea

README.md

@@ -36,7 +36,7 @@ element with an ID of 'sequence-viewer1'.
 
 ```jsx
 import React from 'react';
-import {render} from 'react-dom';
+import ReactDOM from 'react-dom';
 
 // Either uncomment these lines or pull
 // in jQuery and Bootstrap into the HTML page of your application.
@@ -51,18 +51,15 @@ import ReactSequenceViewer from 'react-sequence-viewer';
 
 const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
 
-render(React.createClass({
-    render() {
-        return (
-            <ReactSequenceViewer sequence={mySeq} />
-        );
-    }
-}),document.getElementsById('#sequence-viewer1'));
+ReactDOM.render(
+  <ReactSequenceViewer sequence={mySeq} />,
+  document.getElementById('#sequence-viewer1')
+);
 ```
 
 ```jsx
 import React from 'react';
-import {render} from 'react-dom';
+import ReactDOM from 'react-dom';
 
 // Either uncomment these lines or pull
 // in jQuery and Bootstrap into the HTML page of your application.
@@ -77,20 +74,17 @@ import ReactSequenceViewer from 'react-sequence-viewer';
 
 const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
 const options = {
-    showLineNumbers: true,
-    toolbar: false,
-    search: false,
-    title: "my sequence",
-    badge: true,
+  badge: true,
+  search: false,
+  showLineNumbers: true,
+  title: "my sequence",
+  toolbar: false,
 };
 
-render(React.createClass({
-    render() {
-        return (
-            <ReactSequenceViewer sequence={mySeq} {...options} />
-        );
-    }
-}),document.getElementsById('#sequence-viewer1'));
+ReactDOM.render(
+  <ReactSequenceViewer sequence={mySeq} {...options} />,
+  document.getElementById('#sequence-viewer1')
+);
 ```
 
 ## Properties / Options
@@ -101,14 +95,14 @@ for more details on the options below.
 
 | Name | Description | Type | Required | Comment |
 |:-----|:------------|------|----------|:--------|
-| id | The ID to use for the Sequence Viewer container element | String | No |  |
 | className | HTML class name to apply to the Sequence Viewer div container | String | No |  |
-| sequence | The sequence to render. | String | Yes |  |
-| selection | A region to highlight | Array | No | Not compatible with `coverage` |
 | coverage | Advanced sequence hightlighting | Array[Objects] | No | Not compatible with `selection` |
+| id | The ID to use for the Sequence Viewer container element | String | No |  |
 | legend | Adds a legend to the sequence  |  Array[Objects] | No |  |
 | onMouseSelection | Event handler for sequence selection with the mouse | function | No |  |
 | onSubpartSelected | Event handler for sequence selected via the search box | function | No |  |
+| selection | A region to highlight | Array | No | Not compatible with `coverage` |
+| sequence | The sequence to render. | String | Yes |  |
 
 [build-badge]: https://img.shields.io/travis/FlyBase/react-sequence-viewer/master.png?style=flat-square
 [build]: https://travis-ci.org/FlyBase/react-sequence-viewer

demo/src/index.js

@@ -60,7 +60,7 @@ class Demo extends Component {
   render() {
     return <div>
       <h1>react-sequence-viewer Demo</h1>
-      <button onClick={this.handleOnClick}>Click me</button>
+      <button onClick={this.handleOnClick}>Click me to change the sequence</button>
       <MyComponent
         onSubpartSelected={subPart}
         onMouseSelection={mouseClick}

nwb.config.js

@@ -1,20 +1,19 @@
 var path = require('path');
 
 module.exports =  {
-        type: 'react-component',
-        npm: {
-            esModules: true,
-            umd: {
-                global: 'ReactSequenceViewer',
-                externals: {
-                    react: 'React'
-                }
-            }
-        },
-        webpack: {
-            compat: {
-                enzyme: true
-            }
-        }
+  type: 'react-component',
+  karma: {
+    testContext: 'tests.webpack.js',
+    testFiles: '.test.js'
+  },
+  npm: {
+    esModules: true,
+    umd: {
+      global: 'ReactSequenceViewer',
+      externals: {
+        react: 'React'
+      }
+    }
+  },
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-sequence-viewer",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "A React wrapper around the BioJS sequence-viewer component",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",
@@ -24,21 +24,25 @@
     "uuid": "^3.0.1"
   },
   "peerDependencies": {
-    "react": "15.x"
+    "react": "^16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FlyBase/react-sequence-viewer"
   },
   "devDependencies": {
     "bootstrap": "^3.3.7",
-    "enzyme": "^2.4.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "jquery": "^3.1.1",
-    "nwb": "0.13.x",
-    "react": "^15.3.1",
-    "react-addons-test-utils": "^15.3.1",
-    "react-dom": "^15.3.1"
+    "nwb": "0.21.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
   },
   "author": "Josh Goodman",
   "homepage": "",
   "license": "MIT",
-  "repository": "https://github.com/FlyBase/react-sequence-viewer",
   "keywords": [
     "react-component",
     "BioJS",

src/index.js

@@ -1,9 +1,10 @@
-import React, {PropTypes, Component} from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { v4 } from 'uuid';
 
 import Sequence from 'sequence-viewer';
 
-export default class ReactSequenceViewer extends Component { 
+export default class ReactSequenceViewer extends Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
@@ -38,8 +39,8 @@ export default class ReactSequenceViewer extends Component {
     }
   }
 
-  // When the component mounts, add a change listenver to the document
-  // and call render.  We attach the change listener here becuase
+  // When the component mounts, add a change listener to the document
+  // and call render.  We attach the change listener here because
   // jQuery events don't bubble up through React due to its synthetic event
   // handling.  Thus, when a user toggles the charsPerLine drop down menu.
   // the event is handled by jQuery, but not seen by React when the
@@ -53,7 +54,7 @@ export default class ReactSequenceViewer extends Component {
   }
 
   // Update the sequence-viewer object if we get a new DNA sequence.
-  componentWillReceiveProps(nextProps) { 
+  componentWillReceiveProps(nextProps) {
     if (this.props.sequence !== nextProps.sequence) {
       this._seqObj = new Sequence(nextProps.sequence);
     }
@@ -110,20 +111,20 @@ ReactSequenceViewer.propTypes = {
   }),
   coverage: PropTypes.arrayOf(
     PropTypes.shape({
-    start: PropTypes.number.isRequired,
-    end: PropTypes.number.isRequired,
-    color : PropTypes.string,
-    bgcolor : PropTypes.string,
-    underscore : PropTypes.bool,
-    tooltip : PropTypes.string,
-    onclick : PropTypes.func,
-  })),
+      start: PropTypes.number.isRequired,
+      end: PropTypes.number.isRequired,
+      color : PropTypes.string,
+      bgcolor : PropTypes.string,
+      underscore : PropTypes.bool,
+      tooltip : PropTypes.string,
+      onclick : PropTypes.func,
+    })),
   legend: PropTypes.arrayOf(
     PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string,
-    underscore: PropTypes.bool,
-  })),
+      name: PropTypes.string,
+      color: PropTypes.string,
+      underscore: PropTypes.bool,
+    })),
   seqLenClass: PropTypes.string,
   onMouseSelection: PropTypes.func,
   onSubpartSelected: PropTypes.func,
@@ -133,7 +134,7 @@ ReactSequenceViewer.defaultProps = {
   id: v4(),
   coverage: [],
   legend: [],
-  selection: [], 
+  selection: [],
   seqLenClass: "CPLChoice",
   onMouseSelection: (elem) => {},
   onSubpartSelected: (elem) => {},

tests.webpack.js

@@ -0,0 +1,7 @@
+import { configure } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+configure({adapter: new Adapter()})
+
+let context = require.context('./tests', true, /\.js$/)
+context.keys().forEach(context)

tests/index-test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import expect, {spyOn, createSpy} from 'expect';
+import { mount } from 'enzyme';
+import jquery from 'jquery';
+window.jQuery = jquery;
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import Component from 'src/index';
+
+describe('<Component />', () => {
+  const sequence = 'ctcgatgctagtcgatgctagtcgtagcta';
+
+  let seqViewer = document.createElement('div');
+  seqViewer.id = 'test';
+
+  beforeEach(() => {
+    document.body.appendChild(seqViewer);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(seqViewer);
+  });
+
+  it('calls componentDidMount', () => {
+    const spy = spyOn(Component.prototype, 'componentDidMount');
+    const wrapper = mount(<Component id="test" sequence="cgtagtcgatca" />);
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('checking required props', () => {
+    const wrapper = mount(<Component id="test" sequence={sequence} />);
+    expect(wrapper.props().sequence).toEqual(sequence);
+    expect(wrapper.props().id).toEqual("test");
+  });
+});
+