Skip to content

Commit 463e1a0

Browse files
committed
Merge branch 'release/0.2.0'
2 parents bcc5d4b + acd8637 commit 463e1a0

File tree

10 files changed

+7821
-114
lines changed

10 files changed

+7821
-114
lines changed

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
/node_modules
66
/umd
77
npm-debug.log*
8-
yarn.lock
8+
.idea

README.md

Lines changed: 18 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ element with an ID of 'sequence-viewer1'.
3636

3737
```jsx
3838
import React from 'react';
39-
import {render} from 'react-dom';
39+
import ReactDOM from 'react-dom';
4040

4141
// Either uncomment these lines or pull
4242
// in jQuery and Bootstrap into the HTML page of your application.
@@ -51,18 +51,15 @@ import ReactSequenceViewer from 'react-sequence-viewer';
5151

5252
const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
5353

54-
render(React.createClass({
55-
render() {
56-
return (
57-
<ReactSequenceViewer sequence={mySeq} />
58-
);
59-
}
60-
}),document.getElementsById('#sequence-viewer1'));
54+
ReactDOM.render(
55+
<ReactSequenceViewer sequence={mySeq} />,
56+
document.getElementById('#sequence-viewer1')
57+
);
6158
```
6259

6360
```jsx
6461
import React from 'react';
65-
import {render} from 'react-dom';
62+
import ReactDOM from 'react-dom';
6663

6764
// Either uncomment these lines or pull
6865
// in jQuery and Bootstrap into the HTML page of your application.
@@ -77,20 +74,17 @@ import ReactSequenceViewer from 'react-sequence-viewer';
7774

7875
const mySeq = 'CAGTCGATCGTAGCTAGCTAGCTGATCGATGC';
7976
const options = {
80-
showLineNumbers: true,
81-
toolbar: false,
82-
search: false,
83-
title: "my sequence",
84-
badge: true,
77+
badge: true,
78+
search: false,
79+
showLineNumbers: true,
80+
title: "my sequence",
81+
toolbar: false,
8582
};
8683

87-
render(React.createClass({
88-
render() {
89-
return (
90-
<ReactSequenceViewer sequence={mySeq} {...options} />
91-
);
92-
}
93-
}),document.getElementsById('#sequence-viewer1'));
84+
ReactDOM.render(
85+
<ReactSequenceViewer sequence={mySeq} {...options} />,
86+
document.getElementById('#sequence-viewer1')
87+
);
9488
```
9589

9690
## Properties / Options
@@ -101,14 +95,14 @@ for more details on the options below.
10195

10296
| Name | Description | Type | Required | Comment |
10397
|:-----|:------------|------|----------|:--------|
104-
| id | The ID to use for the Sequence Viewer container element | String | No | |
10598
| className | HTML class name to apply to the Sequence Viewer div container | String | No | |
106-
| sequence | The sequence to render. | String | Yes | |
107-
| selection | A region to highlight | Array | No | Not compatible with `coverage` |
10899
| coverage | Advanced sequence hightlighting | Array[Objects] | No | Not compatible with `selection` |
100+
| id | The ID to use for the Sequence Viewer container element | String | No | |
109101
| legend | Adds a legend to the sequence | Array[Objects] | No | |
110102
| onMouseSelection | Event handler for sequence selection with the mouse | function | No | |
111103
| onSubpartSelected | Event handler for sequence selected via the search box | function | No | |
104+
| selection | A region to highlight | Array | No | Not compatible with `coverage` |
105+
| sequence | The sequence to render. | String | Yes | |
112106

113107
[build-badge]: https://img.shields.io/travis/FlyBase/react-sequence-viewer/master.png?style=flat-square
114108
[build]: https://travis-ci.org/FlyBase/react-sequence-viewer

demo/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class Demo extends Component {
6060
render() {
6161
return <div>
6262
<h1>react-sequence-viewer Demo</h1>
63-
<button onClick={this.handleOnClick}>Click me</button>
63+
<button onClick={this.handleOnClick}>Click me to change the sequence</button>
6464
<MyComponent
6565
onSubpartSelected={subPart}
6666
onMouseSelection={mouseClick}

nwb.config.js

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
var path = require('path');
22

33
module.exports = {
4-
type: 'react-component',
5-
npm: {
6-
esModules: true,
7-
umd: {
8-
global: 'ReactSequenceViewer',
9-
externals: {
10-
react: 'React'
11-
}
12-
}
13-
},
14-
webpack: {
15-
compat: {
16-
enzyme: true
17-
}
18-
}
4+
type: 'react-component',
5+
karma: {
6+
testContext: 'tests.webpack.js',
7+
testFiles: '.test.js'
8+
},
9+
npm: {
10+
esModules: true,
11+
umd: {
12+
global: 'ReactSequenceViewer',
13+
externals: {
14+
react: 'React'
15+
}
16+
}
17+
},
1918
};
2019

package.json

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-sequence-viewer",
3-
"version": "0.1.5",
3+
"version": "0.2.0",
44
"description": "A React wrapper around the BioJS sequence-viewer component",
55
"main": "lib/index.js",
66
"jsnext:main": "es/index.js",
@@ -24,21 +24,25 @@
2424
"uuid": "^3.0.1"
2525
},
2626
"peerDependencies": {
27-
"react": "15.x"
27+
"react": "^16.0.0"
28+
},
29+
"repository": {
30+
"type": "git",
31+
"url": "https://github.com/FlyBase/react-sequence-viewer"
2832
},
2933
"devDependencies": {
3034
"bootstrap": "^3.3.7",
31-
"enzyme": "^2.4.1",
35+
"enzyme": "^3.3.0",
36+
"enzyme-adapter-react-16": "^1.1.1",
3237
"jquery": "^3.1.1",
33-
"nwb": "0.13.x",
34-
"react": "^15.3.1",
35-
"react-addons-test-utils": "^15.3.1",
36-
"react-dom": "^15.3.1"
38+
"nwb": "0.21.0",
39+
"prop-types": "^15.6.0",
40+
"react": "^16.2.0",
41+
"react-dom": "^16.2.0"
3742
},
3843
"author": "Josh Goodman",
3944
"homepage": "",
4045
"license": "MIT",
41-
"repository": "https://github.com/FlyBase/react-sequence-viewer",
4246
"keywords": [
4347
"react-component",
4448
"BioJS",

src/index.js

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React, {PropTypes, Component} from 'react';
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
23
import { v4 } from 'uuid';
34

45
import Sequence from 'sequence-viewer';
56

6-
export default class ReactSequenceViewer extends Component {
7+
export default class ReactSequenceViewer extends Component {
78
constructor(props) {
89
super(props);
910
this.handleChange = this.handleChange.bind(this);
@@ -38,8 +39,8 @@ export default class ReactSequenceViewer extends Component {
3839
}
3940
}
4041

41-
// When the component mounts, add a change listenver to the document
42-
// and call render. We attach the change listener here becuase
42+
// When the component mounts, add a change listener to the document
43+
// and call render. We attach the change listener here because
4344
// jQuery events don't bubble up through React due to its synthetic event
4445
// handling. Thus, when a user toggles the charsPerLine drop down menu.
4546
// the event is handled by jQuery, but not seen by React when the
@@ -53,7 +54,7 @@ export default class ReactSequenceViewer extends Component {
5354
}
5455

5556
// Update the sequence-viewer object if we get a new DNA sequence.
56-
componentWillReceiveProps(nextProps) {
57+
componentWillReceiveProps(nextProps) {
5758
if (this.props.sequence !== nextProps.sequence) {
5859
this._seqObj = new Sequence(nextProps.sequence);
5960
}
@@ -110,20 +111,20 @@ ReactSequenceViewer.propTypes = {
110111
}),
111112
coverage: PropTypes.arrayOf(
112113
PropTypes.shape({
113-
start: PropTypes.number.isRequired,
114-
end: PropTypes.number.isRequired,
115-
color : PropTypes.string,
116-
bgcolor : PropTypes.string,
117-
underscore : PropTypes.bool,
118-
tooltip : PropTypes.string,
119-
onclick : PropTypes.func,
120-
})),
114+
start: PropTypes.number.isRequired,
115+
end: PropTypes.number.isRequired,
116+
color : PropTypes.string,
117+
bgcolor : PropTypes.string,
118+
underscore : PropTypes.bool,
119+
tooltip : PropTypes.string,
120+
onclick : PropTypes.func,
121+
})),
121122
legend: PropTypes.arrayOf(
122123
PropTypes.shape({
123-
name: PropTypes.string,
124-
color: PropTypes.string,
125-
underscore: PropTypes.bool,
126-
})),
124+
name: PropTypes.string,
125+
color: PropTypes.string,
126+
underscore: PropTypes.bool,
127+
})),
127128
seqLenClass: PropTypes.string,
128129
onMouseSelection: PropTypes.func,
129130
onSubpartSelected: PropTypes.func,
@@ -133,7 +134,7 @@ ReactSequenceViewer.defaultProps = {
133134
id: v4(),
134135
coverage: [],
135136
legend: [],
136-
selection: [],
137+
selection: [],
137138
seqLenClass: "CPLChoice",
138139
onMouseSelection: (elem) => {},
139140
onSubpartSelected: (elem) => {},

tests.webpack.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { configure } from 'enzyme'
2+
import Adapter from 'enzyme-adapter-react-16'
3+
4+
configure({adapter: new Adapter()})
5+
6+
let context = require.context('./tests', true, /\.js$/)
7+
context.keys().forEach(context)

tests/index-test.js

Lines changed: 0 additions & 47 deletions
This file was deleted.

tests/index.test.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import expect, {spyOn, createSpy} from 'expect';
3+
import { mount } from 'enzyme';
4+
import jquery from 'jquery';
5+
window.jQuery = jquery;
6+
7+
import 'bootstrap/dist/css/bootstrap.min.css';
8+
9+
import Component from 'src/index';
10+
11+
describe('<Component />', () => {
12+
const sequence = 'ctcgatgctagtcgatgctagtcgtagcta';
13+
14+
let seqViewer = document.createElement('div');
15+
seqViewer.id = 'test';
16+
17+
beforeEach(() => {
18+
document.body.appendChild(seqViewer);
19+
});
20+
21+
afterEach(() => {
22+
document.body.removeChild(seqViewer);
23+
});
24+
25+
it('calls componentDidMount', () => {
26+
const spy = spyOn(Component.prototype, 'componentDidMount');
27+
const wrapper = mount(<Component id="test" sequence="cgtagtcgatca" />);
28+
expect(spy).toHaveBeenCalled();
29+
});
30+
31+
it('checking required props', () => {
32+
const wrapper = mount(<Component id="test" sequence={sequence} />);
33+
expect(wrapper.props().sequence).toEqual(sequence);
34+
expect(wrapper.props().id).toEqual("test");
35+
});
36+
});
37+

0 commit comments

Comments
 (0)