From 45be5c57fb3aaa268f90661c1ea3dd57e440b892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 10 May 2017 22:41:07 +0200 Subject: [PATCH 01/12] Fix dependencies for 'velocity-react' & 'radium' --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index d06c0f6..320a990 100644 --- a/package.json +++ b/package.json @@ -7,13 +7,13 @@ "prepublish": "npm run lib", "lib": "npm run babel", "babel": "rimraf lib && babel src/ -d lib/", - "test": "./node_modules/.bin/karma start karma.conf.js", - "test-travis": "./node_modules/karma/bin/karma start --browsers Firefox --single-run", + "test": "karma start karma.conf.js", + "test-travis": "karma/bin/karma start --browsers Firefox --single-run", "example": "webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js" }, "peerDependencies": { - "react": "^0.14 || ^15.0", - "react-dom": "^0.14 || ^15.0" + "react": "^15.3.0", + "react-dom": "^15.3.0" }, "repository": { "type": "git", @@ -60,9 +60,9 @@ "karma-webpack": "^1.7.0", "mocha": "^2.3.3", "node-libs-browser": "^0.5.3", - "react": "^0.14.7", - "react-addons-test-utils": "^0.14.7", - "react-dom": "^0.14.7", + "react": "^15.3.0", + "react-addons-test-utils": "^15.3.0", + "react-dom": "^15.3.0", "react-hot-loader": "^1.3.0", "rimraf": "^2.4.4", "sinon": "uberVU/Sinon.JS.git", @@ -73,8 +73,8 @@ "dependencies": { "babel-runtime": "^5.8.29", "deep-equal": "^1.0.1", - "radium": "^0.18.0", + "radium": "^0.18.2", "shallowequal": "^0.2.2", - "velocity-react": "^1.1.2" + "velocity-react": "^1.3.1" } } From 827f57d0e86c9a2d4b591f1e511ec416e132aa12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 10 May 2017 23:28:47 +0200 Subject: [PATCH 02/12] Use 'prop-types' package instead of React.PropTypes Closes #63 --- README.md | 10 +++++----- example/app.js | 3 ++- package.json | 1 + src/components/decorators.js | 25 +++++++++++++------------ src/components/header.js | 15 ++++++++------- src/components/node.js | 15 ++++++++------- src/components/treebeard.js | 19 ++++++++++--------- 7 files changed, 47 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 7784775..7ddbe72 100644 --- a/README.md +++ b/README.md @@ -82,27 +82,27 @@ ReactDOM.render(, content); ### Prop Values #### data -`React.PropTypes.oneOfType([React.PropTypes.object,React.PropTypes.array]).isRequired` +`PropTypes.oneOfType([PropTypes.object,PropTypes.array]).isRequired` Data that drives the tree view. State-driven effects can be built by manipulating the attributes in this object. Also supports an array for multiple nodes at the root level. An example can be found in `example/data.js` #### onToggle -`React.PropTypes.func` +`PropTypes.func` Callback function when a node is toggled / clicked. Passes 2 attributes: the data node and it's toggled boolean state. #### style -`React.PropTypes.object` +`PropTypes.object` Sets the treeview styling. Defaults to `src/themes/default`. #### animations -`React.PropTypes.oneOfType([React.PropTypes.object, React.PropTypes.bool])` +`PropTypes.oneOfType([PropTypes.object, PropTypes.bool])` Sets the treeview animations. Set to `false` if you want to turn off animations. See [velocity-react](https://github.com/twitter-fabric/velocity-react) for more details. Defaults to `src/themes/animations`. #### decorators -`React.PropTypes.object` +`PropTypes.object` Decorates the treeview. Here you can use your own Container, Header, Toggle and Loading components. Defaults to `src/decorators`. See example below: diff --git a/example/app.js b/example/app.js index baa9f13..40282f4 100644 --- a/example/app.js +++ b/example/app.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import { StyleRoot } from 'radium'; import {Treebeard, decorators} from '../src/index'; @@ -44,7 +45,7 @@ class NodeViewer extends React.Component { } NodeViewer.propTypes = { - node: React.PropTypes.object + node: PropTypes.object }; class DemoTree extends React.Component { diff --git a/package.json b/package.json index 320a990..e5bb5b5 100644 --- a/package.json +++ b/package.json @@ -73,6 +73,7 @@ "dependencies": { "babel-runtime": "^5.8.29", "deep-equal": "^1.0.1", + "prop-types": "^15.5.8", "radium": "^0.18.2", "shallowequal": "^0.2.2", "velocity-react": "^1.3.1" diff --git a/src/components/decorators.js b/src/components/decorators.js index 0ebe13f..845acd0 100644 --- a/src/components/decorators.js +++ b/src/components/decorators.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import PropTypes from 'prop-types'; import Radium from 'radium'; import {VelocityComponent} from 'velocity-react'; @@ -13,7 +14,7 @@ const Loading = (props) => { }; Loading.propTypes = { - style: React.PropTypes.object + style: PropTypes.object }; const Toggle = (props) => { @@ -37,7 +38,7 @@ const Toggle = (props) => { }; Toggle.propTypes = { - style: React.PropTypes.object + style: PropTypes.object }; const Header = (props) => { @@ -52,8 +53,8 @@ const Header = (props) => { }; Header.propTypes = { - style: React.PropTypes.object, - node: React.PropTypes.object.isRequired + style: PropTypes.object, + node: PropTypes.object.isRequired }; @Radium @@ -94,15 +95,15 @@ class Container extends React.Component { } Container.propTypes = { - style: React.PropTypes.object.isRequired, - decorators: React.PropTypes.object.isRequired, - terminal: React.PropTypes.bool.isRequired, - onClick: React.PropTypes.func.isRequired, - animations: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.bool + style: PropTypes.object.isRequired, + decorators: PropTypes.object.isRequired, + terminal: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, + animations: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.bool ]).isRequired, - node: React.PropTypes.object.isRequired + node: PropTypes.object.isRequired }; export default { diff --git a/src/components/header.js b/src/components/header.js index 8b4acb3..f4e000c 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import PropTypes from 'prop-types'; import shallowEqual from 'shallowequal'; import deepEqual from 'deep-equal'; @@ -39,14 +40,14 @@ class NodeHeader extends React.Component { } NodeHeader.propTypes = { - style: React.PropTypes.object.isRequired, - decorators: React.PropTypes.object.isRequired, - animations: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.bool + style: PropTypes.object.isRequired, + decorators: PropTypes.object.isRequired, + animations: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.bool ]).isRequired, - node: React.PropTypes.object.isRequired, - onClick: React.PropTypes.func + node: PropTypes.object.isRequired, + onClick: PropTypes.func }; export default NodeHeader; diff --git a/src/components/node.js b/src/components/node.js index 16393aa..6407626 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import PropTypes from 'prop-types'; import {VelocityTransitionGroup} from 'velocity-react'; import NodeHeader from './header'; @@ -97,14 +98,14 @@ class TreeNode extends React.Component { } TreeNode.propTypes = { - style: React.PropTypes.object.isRequired, - node: React.PropTypes.object.isRequired, - decorators: React.PropTypes.object.isRequired, - animations: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.bool + style: PropTypes.object.isRequired, + node: PropTypes.object.isRequired, + decorators: PropTypes.object.isRequired, + animations: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.bool ]).isRequired, - onToggle: React.PropTypes.func + onToggle: PropTypes.func }; export default TreeNode; diff --git a/src/components/treebeard.js b/src/components/treebeard.js index 7573f55..255187e 100644 --- a/src/components/treebeard.js +++ b/src/components/treebeard.js @@ -1,6 +1,7 @@ 'use strict'; import React from 'react'; +import PropTypes from 'prop-types'; import TreeNode from './node'; import defaultDecorators from './decorators'; @@ -33,17 +34,17 @@ class TreeBeard extends React.Component { } TreeBeard.propTypes = { - style: React.PropTypes.object, - data: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.array + style: PropTypes.object, + data: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.array ]).isRequired, - animations: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.bool + animations: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.bool ]), - onToggle: React.PropTypes.func, - decorators: React.PropTypes.object + onToggle: PropTypes.func, + decorators: PropTypes.object }; TreeBeard.defaultProps = { From 8b2c99384874aeb24fc1f139ac7ece9809fd6a02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 01:44:15 +0200 Subject: [PATCH 03/12] Code clean-up --- src/components/decorators.js | 79 +++++++-------- src/components/header.js | 46 +++++---- src/components/node.js | 135 ++++++++++++++++--------- src/components/treebeard.js | 30 +++--- test/src/components/decorator-tests.js | 70 ++++++------- test/src/components/header-tests.js | 60 +++++------ test/src/components/node-tests.js | 109 ++++++++++---------- test/src/components/treebeard-tests.js | 16 ++- 8 files changed, 289 insertions(+), 256 deletions(-) diff --git a/src/components/decorators.js b/src/components/decorators.js index 845acd0..ed4a250 100644 --- a/src/components/decorators.js +++ b/src/components/decorators.js @@ -5,53 +5,42 @@ import PropTypes from 'prop-types'; import Radium from 'radium'; import {VelocityComponent} from 'velocity-react'; -const Loading = (props) => { - return ( -
- loading... -
- ); +const Loading = ({style}) => { + return
loading...
; }; - Loading.propTypes = { style: PropTypes.object }; -const Toggle = (props) => { - const style = props.style; - const height = style.height; - const width = style.width; - let midHeight = height * 0.5; - let points = `0,0 0,${height} ${width},${midHeight}`; +const Toggle = ({style}) => { + const {height, width} = style; + const midHeight = height * 0.5; + const points = `0,0 0,${height} ${width},${midHeight}`; + return (
- +
); }; - Toggle.propTypes = { style: PropTypes.object }; -const Header = (props) => { - const style = props.style; +const Header = ({node, style}) => { return (
- {props.node.name} + {node.name}
); }; - Header.propTypes = { style: PropTypes.object, node: PropTypes.object.isRequired @@ -59,41 +48,43 @@ Header.propTypes = { @Radium class Container extends React.Component { - constructor(props){ - super(props); - } - render(){ + render() { const {style, decorators, terminal, onClick, node} = this.props; + return ( -
- { !terminal ? this.renderToggle() : null } - +
this.clickableRef = ref} + style={style.container}> + {!terminal ? this.renderToggle() : null} + +
); } - renderToggle(){ - const animations = this.props.animations; - if(!animations){ return this.renderToggleDecorator(); } + + renderToggle() { + const {animations} = this.props; + + if (!animations) { + return this.renderToggleDecorator(); + } + return ( - + this.velocityRef = ref}> {this.renderToggleDecorator()} ); } - renderToggleDecorator(){ + + renderToggleDecorator() { const {style, decorators} = this.props; - return (); + + return ; } } - Container.propTypes = { style: PropTypes.object.isRequired, decorators: PropTypes.object.isRequired, diff --git a/src/components/header.js b/src/components/header.js index f4e000c..c5edd09 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -6,35 +6,39 @@ import shallowEqual from 'shallowequal'; import deepEqual from 'deep-equal'; class NodeHeader extends React.Component { - constructor(props){ - super(props); - } - shouldComponentUpdate(nextProps){ + shouldComponentUpdate(nextProps) { const props = this.props; const nextPropKeys = Object.keys(nextProps); - for(let i = 0; i < nextPropKeys.length; i++){ + + for (let i = 0; i < nextPropKeys.length; i++) { const key = nextPropKeys[i]; - if(key === 'animations'){ continue; } + if (key === 'animations') { + continue; + } + const isEqual = shallowEqual(props[key], nextProps[key]); - if(!isEqual){ return true; } + if (!isEqual) { + return true; + } } - return !deepEqual(props.animations, nextProps.animations, { strict: true }); + + return !deepEqual(props.animations, nextProps.animations, {strict: true}); } - render(){ - const {style, decorators} = this.props; - const terminal = !this.props.node.children; - const active = this.props.node.active; + + render() { + const {animations, decorators, node, onClick, style} = this.props; + const {active, children} = node; + const terminal = !children; const container = [style.link, active ? style.activeLink : null]; - const headerStyles = Object.assign({ container }, this.props.style); + const headerStyles = Object.assign({container}, style); + return ( - + ); } } diff --git a/src/components/node.js b/src/components/node.js index 6407626..eb1c5ca 100644 --- a/src/components/node.js +++ b/src/components/node.js @@ -7,93 +7,132 @@ import {VelocityTransitionGroup} from 'velocity-react'; import NodeHeader from './header'; class TreeNode extends React.Component { - constructor(props){ - super(props); + constructor() { + super(); + this.onClick = this.onClick.bind(this); } - onClick(){ - let toggled = !this.props.node.toggled; - let onToggle = this.props.onToggle; - if(onToggle){ onToggle(this.props.node, toggled); } + + onClick() { + const {node, onToggle} = this.props; + const {toggled} = node; + + if (onToggle) { + onToggle(node, !toggled); + } } - animations(){ - const props = this.props; - if(props.animations === false){ return false; } - let anim = Object.assign({}, props.animations, props.node.animations); + + animations() { + const {animations, node} = this.props; + + if (animations === false) { + return false; + } + + const anim = Object.assign({}, animations, node.animations); return { toggle: anim.toggle(this.props), drawer: anim.drawer(this.props) }; } - decorators(){ + + decorators() { // Merge Any Node Based Decorators Into The Pack - const props = this.props; - let nodeDecorators = props.node.decorators || {}; - return Object.assign({}, props.decorators, nodeDecorators); + const {decorators, node} = this.props; + let nodeDecorators = node.decorators || {}; + + return Object.assign({}, decorators, nodeDecorators); } - render(){ + + render() { + const {style} = this.props; const decorators = this.decorators(); const animations = this.animations(); + return ( -
  • +
  • this.topLevelRef = ref} + style={style.base}> {this.renderHeader(decorators, animations)} + {this.renderDrawer(decorators, animations)}
    • ); } - renderDrawer(decorators, animations){ - const toggled = this.props.node.toggled; - if(!animations && !toggled){ return null; } - if(!animations && toggled){ + + renderDrawer(decorators, animations) { + const {node: {toggled}} = this.props; + + if (!animations && !toggled) { + return null; + } else if (!animations && toggled) { return this.renderChildren(decorators, animations); } + + const {animation, duration, ...restAnimationInfo} = animations.drawer; return ( - + this.velocityRef = ref}> {toggled ? this.renderChildren(decorators, animations) : null} ); } - renderHeader(decorators, animations){ + + renderHeader(decorators, animations) { + const {node, style} = this.props; + return ( - + ); } - renderChildren(decorators){ - if(this.props.node.loading){ return this.renderLoading(decorators); } - let children = this.props.node.children; - if (!Array.isArray(children)) { children = children ? [children] : []; } + + renderChildren(decorators) { + const {animations, decorators: propDecorators, node, style} = this.props; + + if (node.loading) { + return this.renderLoading(decorators); + } + + let children = node.children; + if (!Array.isArray(children)) { + children = children ? [children] : []; + } + return ( -
      - {children.map((child, index) => - +
        this.subtreeRef = ref}> + {children.map((child, index) => )}
      ); } - renderLoading(decorators){ + + renderLoading(decorators) { + const {style} = this.props; + return ( -
        +
        • - +
        ); } - _eventBubbles(){ - return { onToggle: this.props.onToggle }; + + _eventBubbles() { + const {onToggle} = this.props; + + return { + onToggle + }; } } diff --git a/src/components/treebeard.js b/src/components/treebeard.js index 255187e..2e15254 100644 --- a/src/components/treebeard.js +++ b/src/components/treebeard.js @@ -9,24 +9,24 @@ import defaultTheme from '../themes/default'; import defaultAnimations from '../themes/animations'; class TreeBeard extends React.Component { - constructor(props){ - super(props); - } - render(){ - let data = this.props.data; + render() { + const {animations, decorators, data: propsData, onToggle, style} = this.props; + let data = propsData; + // Support Multiple Root Nodes. Its not formally a tree, but its a use-case. - if(!Array.isArray(data)){ data = [data]; } + if (!Array.isArray(data)) { + data = [data]; + } return ( -
          +
            this.treeBaseRef = ref}> {data.map((node, index) => - + )}
          ); diff --git a/test/src/components/decorator-tests.js b/test/src/components/decorator-tests.js index 248c4a9..4b09689 100644 --- a/test/src/components/decorator-tests.js +++ b/test/src/components/decorator-tests.js @@ -11,11 +11,11 @@ const factory = require('../utils/factory'); const defaults = { style: {}, - node: { children: [] }, - animations: { toggle: {} }, + node: {children: []}, + animations: {toggle: {}}, terminal: false, decorators: factory.createDecorators(), - onClick: function(){} + onClick: () => null }; const Container = defaultDecorators.Container; @@ -25,21 +25,21 @@ describe('container decorator component', () => { const onClick = sinon.spy(); const container = TestUtils.renderIntoDocument( ); - const clickable = container.refs.clickable; + const clickable = container.clickableRef; TestUtils.Simulate.click(clickable); onClick.should.be.called.once; }); it('should render the toggle decorator not terminal', () => { - const toggleType = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ toggle: toggleType }); + const toggleType = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( ); const toggle = TestUtils.findRenderedComponentWithType(container, toggleType); @@ -47,12 +47,12 @@ describe('container decorator component', () => { }); it('should not render the toggle decorator if the node is terminal', () => { - const toggleType = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ toggle: toggleType }); + const toggleType = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( ); const toggle = TestUtils.scryRenderedComponentsWithType(container, toggleType); @@ -60,13 +60,13 @@ describe('container decorator component', () => { }); it('should pass the style to the toggle decorator', () => { - const style = { toggle: { color: 'red' } }; - const toggleType = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ toggle: toggleType }); + const style = {toggle: {color: 'red'}}; + const toggleType = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( ); const toggle = TestUtils.findRenderedComponentWithType(container, toggleType); @@ -84,10 +84,10 @@ describe('container decorator component', () => { it('should not render a velocity component if animations is false', () => { const container = TestUtils.renderIntoDocument( ); - const velocity = container.refs.velocity; + const velocity = container.velocityRef; global.should.not.exist(velocity); }); @@ -95,31 +95,31 @@ describe('container decorator component', () => { const animations = factory.createAnimations(); const container = TestUtils.renderIntoDocument( ); - const velocity = container.refs.velocity; + const velocity = container.velocityRef; velocity.should.exist; }); it('should pass velocity the toggle animation and duration props', () => { - const animations = { toggle: { duration: 1, animation: 'slideUp' } }; + const animations = {toggle: {duration: 1, animation: 'slideUp'}}; const container = TestUtils.renderIntoDocument( ); - const velocity = container.refs.velocity; + const velocity = container.velocityRef; velocity.props.duration.should.equal(animations.toggle.duration); velocity.props.animation.should.equal(animations.toggle.animation); }); it('should render the header decorator', () => { - const headType = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ header: headType }); + const headType = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( ); const head = TestUtils.findRenderedComponentWithType(container, headType); @@ -127,15 +127,15 @@ describe('container decorator component', () => { }); it('should pass the node and style to the header decorator', () => { - const style = { header: { color: 'red' } }; - const node = { name: 'terminal-node' }; - const headType = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ header: headType }); + const style = {header: {color: 'red'}}; + const node = {name: 'terminal-node'}; + const headType = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( ); const head = TestUtils.findRenderedComponentWithType(container, headType); diff --git a/test/src/components/header-tests.js b/test/src/components/header-tests.js index ce61edb..138f39c 100644 --- a/test/src/components/header-tests.js +++ b/test/src/components/header-tests.js @@ -7,13 +7,13 @@ const TestUtils = require('react-addons-test-utils'); const Header = require('../../../src/components/header'); const factory = require('../utils/factory'); -const ContainerType = React.createClass({ render: () =>
          }); +const ContainerType = React.createClass({render: () =>
          }); const defaults = { style: {}, - node: { children: [] }, - animations: { toggle: {} }, - decorators: factory.createDecorators({ container: ContainerType }) + node: {children: []}, + animations: {toggle: {}}, + decorators: factory.createDecorators({container: ContainerType}) }; describe('header component', () => { @@ -26,56 +26,56 @@ describe('header component', () => { }); it('should update the component if a prop changes', () => { - const node = { toggled: false }; + const node = {toggled: false}; const header = TestUtils.renderIntoDocument(
          ); - const nextProps = { node: { toggled: !node.toggled } }; + const nextProps = {node: {toggled: !node.toggled}}; header.shouldComponentUpdate(nextProps).should.be.true; }); it('should not update the component if no props change', () => { - const node = { toggled: false }; + const node = {toggled: false}; const header = TestUtils.renderIntoDocument(
          ); - const nextProps = Object.assign({}, defaults, { node: { toggled: node.toggled } }); + const nextProps = Object.assign({}, defaults, {node: {toggled: node.toggled}}); header.shouldComponentUpdate(nextProps).should.be.false; }); it('should not update when deep nested animation props have not changed value', () => { - const animations = { nested: { prop: 'value' } }; + const animations = {nested: {prop: 'value'}}; const header = TestUtils.renderIntoDocument(
          ); - const sameAnimationProp = { animations: { nested: { prop: animations.nested.prop } } }; + const sameAnimationProp = {animations: {nested: {prop: animations.nested.prop}}}; const nextProps = Object.assign({}, defaults, sameAnimationProp); header.shouldComponentUpdate(nextProps).should.be.false; }); it('should update when deep nested animation props have changed value', () => { - const animations = { nested: { prop: 'value' } }; + const animations = {nested: {prop: 'value'}}; const header = TestUtils.renderIntoDocument(
          ); - const diffAnimationProp = { animations: { nested: { prop: 'new-value' } } }; + const diffAnimationProp = {animations: {nested: {prop: 'new-value'}}}; const nextProps = Object.assign({}, defaults, diffAnimationProp); header.shouldComponentUpdate(nextProps).should.be.true; }); it('should pass a true terminal prop to the container when there are no children in the node', () => { - const node = { name: 'terminal-node' }; + const node = {name: 'terminal-node'}; const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); @@ -83,10 +83,10 @@ describe('header component', () => { }); it('should pass a false terminal prop to the container when there are children in the node', () => { - const node = { children: [{ name: 'child-node'}] }; + const node = {children: [{name: 'child-node'}]}; const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); @@ -94,10 +94,10 @@ describe('header component', () => { }); it('should pass in the high-level link style to the container', () => { - const style = { link: { backgroundColor: 'black' } }; + const style = {link: {backgroundColor: 'black'}}; const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); @@ -105,12 +105,12 @@ describe('header component', () => { }); it('should pass the active link style prop to the container when the node is active', () => { - const node = { active: true }; - const style = { activeLink: { color: 'red' } }; + const node = {active: true}; + const style = {activeLink: {color: 'red'}}; const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); @@ -118,12 +118,12 @@ describe('header component', () => { }); it('should not pass the active link style prop to the container when the node is inactive', () => { - const node = { active: false }; - const style = { activeLink: { color: 'red' } }; + const node = {active: false}; + const style = {activeLink: {color: 'red'}}; const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index 2120965..3316137 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -11,7 +11,7 @@ const factory = require('../utils/factory'); const defaults = { style: {}, - node: { chilren: [] }, + node: {chilren: []}, animations: factory.createAnimations(), decorators: factory.createDecorators() }; @@ -25,8 +25,8 @@ describe('node component', () => { }); it('should invert the toggle state on click', (done) => { - const node = { toggled: true }; - const onToggle = function(toggledNode, toggled){ + const node = {toggled: true}; + const onToggle = (toggledNode, toggled) => { toggled.should.equal(!toggledNode.toggled); done(); }; @@ -56,15 +56,16 @@ describe('node component', () => { const treeNode = TestUtils.renderIntoDocument( ); - (() => { treeNode.onClick(); }).should.not.throw(Error); + + (() => treeNode.onClick()).should.not.throw(Error); }); it('should use the node animations if defined', () => { const nodeAnimations = { - toggle: sinon.stub().returns({ duration: 0, animation: 'fadeIn' }), - drawer: sinon.stub().returns({ duration: 0, animation: 'fadeIn' }) + toggle: sinon.stub().returns({duration: 0, animation: 'fadeIn'}), + drawer: sinon.stub().returns({duration: 0, animation: 'fadeIn'}) }; - const node = { animations: nodeAnimations }; + const node = {animations: nodeAnimations}; const treeNode = TestUtils.renderIntoDocument( { it('should fallback to the prop animations if the node animations are not defined', () => { const animations = { - toggle: sinon.stub().returns({ duration: 0, animation: 'fadeIn' }), - drawer: sinon.stub().returns({ duration: 0, animation: 'fadeIn' }) + toggle: sinon.stub().returns({duration: 0, animation: 'fadeIn'}), + drawer: sinon.stub().returns({duration: 0, animation: 'fadeIn'}) }; const treeNode = TestUtils.renderIntoDocument( { }); it('should use the node decorators if defined', () => { - const ContainerDecorator = React.createClass({ render: () =>
          }); + const ContainerDecorator = React.createClass({render: () =>
          }); const nodeDecorators = { Container: ContainerDecorator }; - const node = { decorators: nodeDecorators, children: [] }; + const node = {decorators: nodeDecorators, children: []}; const treeNode = TestUtils.renderIntoDocument( { }); it('should fallback to the prop decorators if the node decorators are not defined', () => { - const ContainerDecorator = React.createClass({ render: () =>
          }); + const ContainerDecorator = React.createClass({render: () =>
          }); const decorators = { Container: ContainerDecorator }; - const node = { children: [] }; + const node = {children: []}; const treeNode = TestUtils.renderIntoDocument( { const treeNode = TestUtils.renderIntoDocument( ); - const topLevel = treeNode.refs.topLevel; + const topLevel = treeNode.topLevelRef; topLevel.tagName.toLowerCase().should.equal('li'); }); @@ -140,19 +141,19 @@ describe('node component', () => { }); it('should render the subtree if toggled', () => { - const node = { toggled: true }; + const node = {toggled: true}; const treeNode = TestUtils.renderIntoDocument( ); - treeNode.refs.subtree.should.exist; + treeNode.subtreeRef.should.exist; }); it('should not render the children if not toggled', () => { - const node = { toggled: false }; + const node = {toggled: false}; const treeNode = TestUtils.renderIntoDocument( ); - global.should.not.exist(treeNode.refs.subtree); + global.should.not.exist(treeNode.subtreeRef); }); it('should wrap the children in a velocity transition group', () => { @@ -168,10 +169,10 @@ describe('node component', () => { const animations = factory.createAnimations(); const treeNode = TestUtils.renderIntoDocument( ); - const velocity = treeNode.refs.velocity; + const velocity = treeNode.velocityRef; const drawer = animations.drawer(); velocity.props.enter.animation.should.equal(drawer.enter.animation); velocity.props.enter.duration.should.equal(drawer.enter.duration); @@ -181,36 +182,36 @@ describe('node component', () => { const animations = factory.createAnimations(); const treeNode = TestUtils.renderIntoDocument( ); - const velocity = treeNode.refs.velocity; + const velocity = treeNode.velocityRef; const drawer = animations.drawer(); velocity.props.leave.animation.should.equal(drawer.leave.animation); velocity.props.leave.duration.should.equal(drawer.leave.duration); }); it('should not render a velocity component if animations is false and not toggled', () => { - const node = { toggled: false }; + const node = {toggled: false}; const treeNode = TestUtils.renderIntoDocument( ); - const velocity = treeNode.refs.velocity; + const velocity = treeNode.velocityRef; global.should.not.exist(velocity); }); it('should not render a velocity component if animations is false and toggled', () => { - const node = { toggled: true }; + const node = {toggled: true}; const treeNode = TestUtils.renderIntoDocument( ); - const velocity = treeNode.refs.velocity; + const velocity = treeNode.velocityRef; global.should.not.exist(velocity); }); @@ -218,32 +219,32 @@ describe('node component', () => { const animations = factory.createAnimations(); const treeNode = TestUtils.renderIntoDocument( ); - const velocity = treeNode.refs.velocity; + const velocity = treeNode.velocityRef; velocity.should.exist; }); it('should wrap the children in a list', () => { - const node = { toggled: true }; + const node = {toggled: true}; const treeNode = TestUtils.renderIntoDocument( ); - const subtree = treeNode.refs.subtree; + const subtree = treeNode.subtreeRef; subtree.tagName.toLowerCase().should.equal('ul'); }); it('should render a TreeNode component for each child', () => { const node = { toggled: true, - children: [ {node: {}}, {node: {}}, {node: {}} ] + children: [{node: {}}, {node: {}}, {node: {}}] }; const treeNode = TestUtils.renderIntoDocument( ); // Find All TreeNodes (+ Top Level TreeNode) @@ -252,13 +253,13 @@ describe('node component', () => { }); it('should render the loading decorator if the node is loading and toggled', () => { - const node = { toggled: true, loading: true }; - const LoadingDecorator = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ loading: LoadingDecorator }); + const node = {toggled: true, loading: true}; + const LoadingDecorator = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( ); const loading = TestUtils.findRenderedComponentWithType(treeNode, LoadingDecorator); @@ -266,13 +267,13 @@ describe('node component', () => { }); it('should not render the loading decorator if the node is not loading but toggled', () => { - const node = { toggled: true, loading: false }; - const LoadingDecorator = React.createClass({ render: () =>
          }); - const decorators = factory.createDecorators({ loading: LoadingDecorator }); + const node = {toggled: true, loading: false}; + const LoadingDecorator = React.createClass({render: () =>
          }); + const decorators = factory.createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( ); const loading = TestUtils.scryRenderedComponentsWithType(treeNode, LoadingDecorator); @@ -280,24 +281,24 @@ describe('node component', () => { }); it('should not render the children if the node is Loading', () => { - const node = { toggled: true, loading: true }; + const node = {toggled: true, loading: true}; const treeNode = TestUtils.renderIntoDocument( ); - global.should.not.exist(treeNode.refs.subtree); + global.should.not.exist(treeNode.subtreeRef); }); it('should render a child with an id key if available', () => { const id = 'SpecialNode'; const node = { toggled: true, - children: [{ id }] + children: [{id}] }; const treeNode = TestUtils.renderIntoDocument( ); const nodes = TestUtils.scryRenderedComponentsWithType(treeNode, TreeNode); @@ -309,11 +310,11 @@ describe('node component', () => { it('should render a child with an index key if id is not available', () => { const node = { toggled: true, - children: [{ name: 'node' }] + children: [{name: 'node'}] }; const treeNode = TestUtils.renderIntoDocument( ); const nodes = TestUtils.scryRenderedComponentsWithType(treeNode, TreeNode); diff --git a/test/src/components/treebeard-tests.js b/test/src/components/treebeard-tests.js index 7f3b35b..2a8bf65 100644 --- a/test/src/components/treebeard-tests.js +++ b/test/src/components/treebeard-tests.js @@ -18,7 +18,7 @@ describe('treebeard component', () => { const treebeard = TestUtils.renderIntoDocument( ); - const treeBase = treebeard.refs.treeBase; + const treeBase = treebeard.treeBaseRef; treeBase.tagName.toLowerCase().should.equal('ul'); }); @@ -32,10 +32,8 @@ describe('treebeard component', () => { it('should pass the top level tree node the associated props', () => { const treebeard = TestUtils.renderIntoDocument( - {}} - /> + null}/> ); const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); node.props.node.should.equal(treebeard.props.data); @@ -71,8 +69,8 @@ describe('treebeard component', () => { it('should support rendering multiple nodes at the root level', () => { const multipleRootNodes = [ - { name: 'root-1', children: [] }, - { name: 'root-2', children: [] } + {name: 'root-1', children: []}, + {name: 'root-2', children: []} ]; const treebeard = TestUtils.renderIntoDocument( @@ -83,7 +81,7 @@ describe('treebeard component', () => { it('should render a root node with an id key if available', () => { const id = 'RootNode'; - const rootNode = { id: id, name: 'root-1', children: [] }; + const rootNode = {id: id, name: 'root-1', children: []}; const treebeard = TestUtils.renderIntoDocument( ); @@ -94,7 +92,7 @@ describe('treebeard component', () => { }); it('should render a root node with an index key if id is not available', () => { - const rootNode = { name: 'root-1', children: [] }; + const rootNode = {name: 'root-1', children: []}; const treebeard = TestUtils.renderIntoDocument( ); From 771b4d449ed6372f86bb0ddb85b4be4ba4b3b9dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 01:49:47 +0200 Subject: [PATCH 04/12] Use 'react-dom/test-utils' package instead of 'react-addons-test-utils' Closes #65 --- package.json | 9 ++++----- test/src/components/decorator-tests.js | 2 +- test/src/components/header-tests.js | 2 +- test/src/components/node-tests.js | 2 +- test/src/components/treebeard-tests.js | 2 +- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index e5bb5b5..7c38456 100644 --- a/package.json +++ b/package.json @@ -12,8 +12,8 @@ "example": "webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js" }, "peerDependencies": { - "react": "^15.3.0", - "react-dom": "^15.3.0" + "react": "^15.5.4", + "react-dom": "^15.5.4" }, "repository": { "type": "git", @@ -60,9 +60,8 @@ "karma-webpack": "^1.7.0", "mocha": "^2.3.3", "node-libs-browser": "^0.5.3", - "react": "^15.3.0", - "react-addons-test-utils": "^15.3.0", - "react-dom": "^15.3.0", + "react": "^15.5.4", + "react-dom": "^15.5.4", "react-hot-loader": "^1.3.0", "rimraf": "^2.4.4", "sinon": "uberVU/Sinon.JS.git", diff --git a/test/src/components/decorator-tests.js b/test/src/components/decorator-tests.js index 4b09689..fa76dc5 100644 --- a/test/src/components/decorator-tests.js +++ b/test/src/components/decorator-tests.js @@ -4,7 +4,7 @@ const sinon = require('sinon'); const React = require('react'); -const TestUtils = require('react-addons-test-utils'); +const TestUtils = require('react-dom/test-utils'); const VelocityComponent = require('velocity-react').VelocityComponent; const defaultDecorators = require('../../../src/components/decorators'); const factory = require('../utils/factory'); diff --git a/test/src/components/header-tests.js b/test/src/components/header-tests.js index 138f39c..305b165 100644 --- a/test/src/components/header-tests.js +++ b/test/src/components/header-tests.js @@ -3,7 +3,7 @@ 'use strict'; const React = require('react'); -const TestUtils = require('react-addons-test-utils'); +const TestUtils = require('react-dom/test-utils'); const Header = require('../../../src/components/header'); const factory = require('../utils/factory'); diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index 3316137..327ae45 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -5,7 +5,7 @@ const sinon = require('sinon'); const React = require('react'); const ReactDOM = require('react-dom'); -const TestUtils = require('react-addons-test-utils'); +const TestUtils = require('react-dom/test-utils'); const TreeNode = require('../../../src/components/node'); const factory = require('../utils/factory'); diff --git a/test/src/components/treebeard-tests.js b/test/src/components/treebeard-tests.js index 2a8bf65..1f663e1 100644 --- a/test/src/components/treebeard-tests.js +++ b/test/src/components/treebeard-tests.js @@ -4,7 +4,7 @@ const React = require('react'); const ReactDOM = require('react-dom'); -const TestUtils = require('react-addons-test-utils'); +const TestUtils = require('react-dom/test-utils'); const TreeNode = require('../../../src/components/node'); const Treebeard = require('../../../src/components/treebeard'); From 97574ac1dd8ff3740eff5fdbe80247dac270ee62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 01:56:56 +0200 Subject: [PATCH 05/12] Use ES6 classes instead of React.createClass Closes #64 --- test/src/components/decorator-tests.js | 30 +++++++++++++++++++++----- test/src/components/header-tests.js | 6 +++++- test/src/components/node-tests.js | 24 +++++++++++++++++---- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/test/src/components/decorator-tests.js b/test/src/components/decorator-tests.js index fa76dc5..14fa385 100644 --- a/test/src/components/decorator-tests.js +++ b/test/src/components/decorator-tests.js @@ -34,7 +34,11 @@ describe('container decorator component', () => { }); it('should render the toggle decorator not terminal', () => { - const toggleType = React.createClass({render: () =>
          }); + class toggleType extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { }); it('should not render the toggle decorator if the node is terminal', () => { - const toggleType = React.createClass({render: () =>
          }); + class toggleType extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { it('should pass the style to the toggle decorator', () => { const style = {toggle: {color: 'red'}}; - const toggleType = React.createClass({render: () =>
          }); + class toggleType extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { }); it('should render the header decorator', () => { - const headType = React.createClass({render: () =>
          }); + class headType extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( { it('should pass the node and style to the header decorator', () => { const style = {header: {color: 'red'}}; const node = {name: 'terminal-node'}; - const headType = React.createClass({render: () =>
          }); + class headType extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({header: headType}); const container = TestUtils.renderIntoDocument(
          }); +class ContainerType extends React.Component { + render() { + return
          ; + } +} const defaults = { style: {}, diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index 327ae45..b0916a3 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -94,7 +94,11 @@ describe('node component', () => { }); it('should use the node decorators if defined', () => { - const ContainerDecorator = React.createClass({render: () =>
          }); + class ContainerDecorator extends React.Component { + render() { + return
          ; + } + } const nodeDecorators = { Container: ContainerDecorator }; @@ -109,7 +113,11 @@ describe('node component', () => { }); it('should fallback to the prop decorators if the node decorators are not defined', () => { - const ContainerDecorator = React.createClass({render: () =>
          }); + class ContainerDecorator extends React.Component { + render() { + return
          ; + } + } const decorators = { Container: ContainerDecorator }; @@ -254,7 +262,11 @@ describe('node component', () => { it('should render the loading decorator if the node is loading and toggled', () => { const node = {toggled: true, loading: true}; - const LoadingDecorator = React.createClass({render: () =>
          }); + class LoadingDecorator extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( { it('should not render the loading decorator if the node is not loading but toggled', () => { const node = {toggled: true, loading: false}; - const LoadingDecorator = React.createClass({render: () =>
          }); + class LoadingDecorator extends React.Component { + render() { + return
          ; + } + } const decorators = factory.createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( Date: Thu, 11 May 2017 02:16:57 +0200 Subject: [PATCH 06/12] Code clean-up --- example/app.js | 87 ++++++++++++++------------ src/index.js | 16 +++-- src/themes/animations.js | 30 ++++----- test/src/components/decorator-tests.js | 29 +++++---- test/src/components/header-tests.js | 10 +-- test/src/components/node-tests.js | 26 ++++---- test/src/components/treebeard-tests.js | 10 +-- test/src/utils/factory.js | 79 ++++++++++++----------- 8 files changed, 148 insertions(+), 139 deletions(-) diff --git a/example/app.js b/example/app.js index 40282f4..9787955 100644 --- a/example/app.js +++ b/example/app.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; -import { StyleRoot } from 'radium'; +import {StyleRoot} from 'radium'; import {Treebeard, decorators} from '../src/index'; import data from './data'; @@ -13,87 +13,96 @@ import * as filters from './filter'; const HELP_MSG = 'Select A Node To See Its Data Structure Here...'; // Example: Customising The Header Decorator To Include Icons -decorators.Header = (props) => { - const style = props.style; - const iconType = props.node.children ? 'folder' : 'file-text'; +decorators.Header = ({style, node}) => { + const iconType = node.children ? 'folder' : 'file-text'; const iconClass = `fa fa-${iconType}`; - const iconStyle = { marginRight: '5px' }; + const iconStyle = {marginRight: '5px'}; + return (
          - {props.node.name} + + {node.name}
          ); }; class NodeViewer extends React.Component { - constructor(props){ - super(props); - } - render(){ + render() { const style = styles.viewer; let json = JSON.stringify(this.props.node, null, 4); - if(!json){ json = HELP_MSG; } - return ( -
          - {json} -
          - ); + + if (!json) { + json = HELP_MSG; + } + + return
          {json}
          ; } } - NodeViewer.propTypes = { node: PropTypes.object }; class DemoTree extends React.Component { - constructor(props){ - super(props); + constructor() { + super(); + this.state = {data}; this.onToggle = this.onToggle.bind(this); } - onToggle(node, toggled){ - if(this.state.cursor){this.state.cursor.active = false;} + + onToggle(node, toggled) { + const {cursor} = this.state; + + if (cursor) { + cursor.active = false; + } + node.active = true; - if(node.children){ node.toggled = toggled; } - this.setState({ cursor: node }); + if (node.children) { + node.toggled = toggled; + } + + this.setState({cursor: node}); } - onFilterMouseUp(e){ + + onFilterMouseUp(e) { const filter = e.target.value.trim(); - if(!filter){ return this.setState({data}); } + if (!filter) { + return this.setState({data}); + } var filtered = filters.filterTree(data, filter); filtered = filters.expandFilteredNodes(filtered, filter); this.setState({data: filtered}); } - render(){ + + render() { + const {data: stateData, cursor} = this.state; + return (
          - + - +
          - +
          - +
          - ); } } diff --git a/src/index.js b/src/index.js index 734094f..f04b432 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,13 @@ 'use strict'; -module.exports = { - Treebeard: require('./components/treebeard'), - decorators: require('./components/decorators'), - animations: require('./themes/animations'), - theme: require('./themes/default') + +import Treebeard from './components/treebeard'; +import decorators from './components/decorators'; +import animations from './themes/animations'; +import theme from './themes/default'; + +export default { + Treebeard, + decorators, + animations, + theme }; diff --git a/src/themes/animations.js b/src/themes/animations.js index e4ce091..4326041 100644 --- a/src/themes/animations.js +++ b/src/themes/animations.js @@ -1,22 +1,18 @@ 'use strict'; export default { - toggle: (props) => { - return { - animation: { rotateZ: props.node.toggled ? 90 : 0 }, + toggle: ({node: toggled}) => ({ + animation: {rotateZ: toggled ? 90 : 0}, + duration: 300 + }), + drawer: (/* props */) => ({ + enter: { + animation: 'slideDown', duration: 300 - }; - }, - drawer: (/* props */) => { - return { - enter: { - animation: 'slideDown', - duration: 300 - }, - leave: { - animation: 'slideUp', - duration: 300 - } - }; - } + }, + leave: { + animation: 'slideUp', + duration: 300 + } + }) }; diff --git a/test/src/components/decorator-tests.js b/test/src/components/decorator-tests.js index 14fa385..711d5e0 100644 --- a/test/src/components/decorator-tests.js +++ b/test/src/components/decorator-tests.js @@ -2,19 +2,19 @@ 'use strict'; -const sinon = require('sinon'); -const React = require('react'); -const TestUtils = require('react-dom/test-utils'); -const VelocityComponent = require('velocity-react').VelocityComponent; -const defaultDecorators = require('../../../src/components/decorators'); -const factory = require('../utils/factory'); +import sinon from 'sinon'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import {VelocityComponent} from 'velocity-react'; +import defaultDecorators from '../../../src/components/decorators'; +import {createAnimations, createDecorators} from '../utils/factory'; const defaults = { style: {}, node: {children: []}, animations: {toggle: {}}, terminal: false, - decorators: factory.createDecorators(), + decorators: createDecorators(), onClick: () => null }; @@ -39,7 +39,7 @@ describe('container decorator component', () => { return
          ; } } - const decorators = factory.createDecorators({toggle: toggleType}); + const decorators = createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({toggle: toggleType}); + const decorators = createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({toggle: toggleType}); + const decorators = createDecorators({toggle: toggleType}); const container = TestUtils.renderIntoDocument( { }); it('should render a velocity component if animations is an object', () => { - const animations = factory.createAnimations(); + const animations = createAnimations(); const container = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({header: headType}); + const decorators = createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({header: headType}); + const decorators = createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( + style={style}/> ); const head = TestUtils.findRenderedComponentWithType(container, headType); head.props.style.should.equal(style.header); diff --git a/test/src/components/header-tests.js b/test/src/components/header-tests.js index 462c7ac..0150aa1 100644 --- a/test/src/components/header-tests.js +++ b/test/src/components/header-tests.js @@ -2,10 +2,10 @@ 'use strict'; -const React = require('react'); -const TestUtils = require('react-dom/test-utils'); -const Header = require('../../../src/components/header'); -const factory = require('../utils/factory'); +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import Header from '../../../src/components/header'; +import {createDecorators} from '../utils/factory'; class ContainerType extends React.Component { render() { @@ -17,7 +17,7 @@ const defaults = { style: {}, node: {children: []}, animations: {toggle: {}}, - decorators: factory.createDecorators({container: ContainerType}) + decorators: createDecorators({container: ContainerType}) }; describe('header component', () => { diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index b0916a3..d21e776 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -2,18 +2,18 @@ 'use strict'; -const sinon = require('sinon'); -const React = require('react'); -const ReactDOM = require('react-dom'); -const TestUtils = require('react-dom/test-utils'); -const TreeNode = require('../../../src/components/node'); -const factory = require('../utils/factory'); +import sinon from 'sinon'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import TestUtils from 'react-dom/test-utils'; +import TreeNode from '../../../src/components/node'; +import {createAnimations, createDecorators} from '../utils/factory'; const defaults = { style: {}, node: {chilren: []}, - animations: factory.createAnimations(), - decorators: factory.createDecorators() + animations: createAnimations(), + decorators: createDecorators() }; describe('node component', () => { @@ -174,7 +174,7 @@ describe('node component', () => { }); it('should pass velocity the drawer enter animation and duration props', () => { - const animations = factory.createAnimations(); + const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( { }); it('should pass velocity the drawer leave animation and duration props', () => { - const animations = factory.createAnimations(); + const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( { }); it('should render a velocity component if animations is an object', () => { - const animations = factory.createAnimations(); + const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({loading: LoadingDecorator}); + const decorators = createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( { return
          ; } } - const decorators = factory.createDecorators({loading: LoadingDecorator}); + const decorators = createDecorators({loading: LoadingDecorator}); const treeNode = TestUtils.renderIntoDocument( { - return spec.loading ? :
          ; - }, - Toggle: (props) => { - return spec.toggle ? :
          ; - }, - Header: (props) => { - return spec.header ? :
          ; - }, - Container: (props) => { - return spec.container ? :
          ; - } +export const createDecorators = (spec) => { + spec = spec || {}; + return { + Loading: (props) => { + return spec.loading ? :
          ; + }, + Toggle: (props) => { + return spec.toggle ? :
          ; + }, + Header: (props) => { + return spec.header ? :
          ; + }, + Container: (props) => { + return spec.container ? :
          ; + } - }; - }, - createAnimations: function(){ - return { - toggle: () => { - return { - animation: 'fadeOut', + }; +}; + +export const createAnimations = () => { + return { + toggle: () => { + return { + animation: 'fadeOut', + duration: 0 + }; + }, + drawer: () => { + return { + enter: { + animation: 'slideDown', + duration: 0 + }, + leave: { + animation: 'slideUp', duration: 0 - }; - }, - drawer: () => { - return { - enter: { - animation: 'slideDown', - duration: 0 - }, - leave: { - animation: 'slideUp', - duration: 0 - } - }; - } - }; - } + } + }; + } + }; }; From a1e257f0a763827e4a4bc801220d030cadadf66a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 02:27:06 +0200 Subject: [PATCH 07/12] Fix 'test-travis' script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c38456..9d8c3d4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "lib": "npm run babel", "babel": "rimraf lib && babel src/ -d lib/", "test": "karma start karma.conf.js", - "test-travis": "karma/bin/karma start --browsers Firefox --single-run", + "test-travis": "karma start --browsers Firefox --single-run", "example": "webpack-dev-server --content-base ./example/ --config ./example/webpack.config.js" }, "peerDependencies": { From cbb4fecd74d7dcd5edfaab0294f685967b567718 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 13:28:30 +0200 Subject: [PATCH 08/12] Delete tests for deprecated 'reactId' --- test/src/components/node-tests.js | 33 -------------------------- test/src/components/treebeard-tests.js | 24 ------------------- 2 files changed, 57 deletions(-) diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index d21e776..4438c4d 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -305,37 +305,4 @@ describe('node component', () => { ); global.should.not.exist(treeNode.subtreeRef); }); - - it('should render a child with an id key if available', () => { - const id = 'SpecialNode'; - const node = { - toggled: true, - children: [{id}] - }; - const treeNode = TestUtils.renderIntoDocument( - - ); - const nodes = TestUtils.scryRenderedComponentsWithType(treeNode, TreeNode); - const element = ReactDOM.findDOMNode(nodes[1]); - const expectedId = '$' + id; - element.dataset.reactid.should.contain(expectedId); - }); - - it('should render a child with an index key if id is not available', () => { - const node = { - toggled: true, - children: [{name: 'node'}] - }; - const treeNode = TestUtils.renderIntoDocument( - - ); - const nodes = TestUtils.scryRenderedComponentsWithType(treeNode, TreeNode); - const element = ReactDOM.findDOMNode(nodes[1]); - const expectedId = '$0'; - element.dataset.reactid.should.contain(expectedId); - }); }); diff --git a/test/src/components/treebeard-tests.js b/test/src/components/treebeard-tests.js index 033d1fc..19de083 100644 --- a/test/src/components/treebeard-tests.js +++ b/test/src/components/treebeard-tests.js @@ -78,28 +78,4 @@ describe('treebeard component', () => { const nodes = TestUtils.scryRenderedComponentsWithType(treebeard, TreeNode); nodes.length.should.equal(multipleRootNodes.length); }); - - it('should render a root node with an id key if available', () => { - const id = 'RootNode'; - const rootNode = {id: id, name: 'root-1', children: []}; - const treebeard = TestUtils.renderIntoDocument( - - ); - const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); - const element = ReactDOM.findDOMNode(node); - const expectedId = '$' + id; - element.dataset.reactid.should.contain(expectedId); - }); - - it('should render a root node with an index key if id is not available', () => { - const rootNode = {name: 'root-1', children: []}; - const treebeard = TestUtils.renderIntoDocument( - - ); - const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); - const element = ReactDOM.findDOMNode(node); - const expectedId = '$0'; - element.dataset.reactid.should.contain(expectedId); - }); - }); From b3a284ddd67e41436bf2168f4ab7f6ce7e8a2bf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 11 May 2017 13:49:45 +0200 Subject: [PATCH 09/12] Code clean-up --- test/src/components/decorator-tests.js | 43 +++++---- test/src/components/header-tests.js | 43 +++++---- test/src/components/node-tests.js | 127 ++++++++++++------------- test/src/components/treebeard-tests.js | 39 ++++---- 4 files changed, 122 insertions(+), 130 deletions(-) diff --git a/test/src/components/decorator-tests.js b/test/src/components/decorator-tests.js index 711d5e0..7321ce1 100644 --- a/test/src/components/decorator-tests.js +++ b/test/src/components/decorator-tests.js @@ -2,11 +2,14 @@ 'use strict'; -import sinon from 'sinon'; import React from 'react'; import TestUtils from 'react-dom/test-utils'; + import {VelocityComponent} from 'velocity-react'; +import sinon from 'sinon'; + import defaultDecorators from '../../../src/components/decorators'; + import {createAnimations, createDecorators} from '../utils/factory'; const defaults = { @@ -25,11 +28,11 @@ describe('container decorator component', () => { const onClick = sinon.spy(); const container = TestUtils.renderIntoDocument( + onClick={onClick}/> ); const clickable = container.clickableRef; TestUtils.Simulate.click(clickable); + onClick.should.be.called.once; }); @@ -43,10 +46,10 @@ describe('container decorator component', () => { const container = TestUtils.renderIntoDocument( + terminal={false}/> ); const toggle = TestUtils.findRenderedComponentWithType(container, toggleType); + toggle.should.exist; }); @@ -60,10 +63,10 @@ describe('container decorator component', () => { const container = TestUtils.renderIntoDocument( + terminal={true}/> ); const toggle = TestUtils.scryRenderedComponentsWithType(container, toggleType); + toggle.should.be.empty; }); @@ -78,28 +81,27 @@ describe('container decorator component', () => { const container = TestUtils.renderIntoDocument( + style={style}/> ); const toggle = TestUtils.findRenderedComponentWithType(container, toggleType); + toggle.props.style.should.equal(style.toggle); }); it('should render the toggle decorator in a velocity component', () => { - const container = TestUtils.renderIntoDocument( - - ); + const container = TestUtils.renderIntoDocument(); const component = TestUtils.findRenderedComponentWithType(container, VelocityComponent); + component.should.exist; }); it('should not render a velocity component if animations is false', () => { const container = TestUtils.renderIntoDocument( + animations={false}/> ); const velocity = container.velocityRef; + global.should.not.exist(velocity); }); @@ -107,10 +109,10 @@ describe('container decorator component', () => { const animations = createAnimations(); const container = TestUtils.renderIntoDocument( + animations={animations}/> ); const velocity = container.velocityRef; + velocity.should.exist; }); @@ -118,10 +120,10 @@ describe('container decorator component', () => { const animations = {toggle: {duration: 1, animation: 'slideUp'}}; const container = TestUtils.renderIntoDocument( + animations={animations}/> ); const velocity = container.velocityRef; + velocity.props.duration.should.equal(animations.toggle.duration); velocity.props.animation.should.equal(animations.toggle.animation); }); @@ -135,10 +137,10 @@ describe('container decorator component', () => { const decorators = createDecorators({header: headType}); const container = TestUtils.renderIntoDocument( + decorators={decorators}/> ); const head = TestUtils.findRenderedComponentWithType(container, headType); + head.should.exist; }); @@ -158,6 +160,7 @@ describe('container decorator component', () => { style={style}/> ); const head = TestUtils.findRenderedComponentWithType(container, headType); + head.props.style.should.equal(style.header); head.props.node.should.equal(node); }); diff --git a/test/src/components/header-tests.js b/test/src/components/header-tests.js index 0150aa1..7aff8b4 100644 --- a/test/src/components/header-tests.js +++ b/test/src/components/header-tests.js @@ -4,7 +4,9 @@ import React from 'react'; import TestUtils from 'react-dom/test-utils'; + import Header from '../../../src/components/header'; + import {createDecorators} from '../utils/factory'; class ContainerType extends React.Component { @@ -22,10 +24,9 @@ const defaults = { describe('header component', () => { it('should render the container decorator', () => { - const header = TestUtils.renderIntoDocument( -
          - ); + const header = TestUtils.renderIntoDocument(
          ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + container.should.exist; }); @@ -33,10 +34,10 @@ describe('header component', () => { const node = {toggled: false}; const header = TestUtils.renderIntoDocument(
          + node={node}/> ); const nextProps = {node: {toggled: !node.toggled}}; + header.shouldComponentUpdate(nextProps).should.be.true; }); @@ -44,10 +45,10 @@ describe('header component', () => { const node = {toggled: false}; const header = TestUtils.renderIntoDocument(
          + node={node}/> ); const nextProps = Object.assign({}, defaults, {node: {toggled: node.toggled}}); + header.shouldComponentUpdate(nextProps).should.be.false; }); @@ -55,11 +56,11 @@ describe('header component', () => { const animations = {nested: {prop: 'value'}}; const header = TestUtils.renderIntoDocument(
          + animations={animations}/> ); const sameAnimationProp = {animations: {nested: {prop: animations.nested.prop}}}; const nextProps = Object.assign({}, defaults, sameAnimationProp); + header.shouldComponentUpdate(nextProps).should.be.false; }); @@ -67,11 +68,11 @@ describe('header component', () => { const animations = {nested: {prop: 'value'}}; const header = TestUtils.renderIntoDocument(
          + animations={animations}/> ); const diffAnimationProp = {animations: {nested: {prop: 'new-value'}}}; const nextProps = Object.assign({}, defaults, diffAnimationProp); + header.shouldComponentUpdate(nextProps).should.be.true; }); @@ -79,10 +80,10 @@ describe('header component', () => { const node = {name: 'terminal-node'}; const header = TestUtils.renderIntoDocument(
          + node={node}/> ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + container.props.terminal.should.be.true; }); @@ -90,10 +91,10 @@ describe('header component', () => { const node = {children: [{name: 'child-node'}]}; const header = TestUtils.renderIntoDocument(
          + node={node}/> ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + container.props.terminal.should.be.false; }); @@ -101,10 +102,10 @@ describe('header component', () => { const style = {link: {backgroundColor: 'black'}}; const header = TestUtils.renderIntoDocument(
          + style={style}/> ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + container.props.style.container[0].should.equal(style.link); }); @@ -114,10 +115,10 @@ describe('header component', () => { const header = TestUtils.renderIntoDocument(
          + style={style}/> ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + container.props.style.container[1].should.equal(style.activeLink); }); @@ -127,10 +128,10 @@ describe('header component', () => { const header = TestUtils.renderIntoDocument(
          + style={style}/> ); const container = TestUtils.findRenderedComponentWithType(header, ContainerType); + global.should.not.exist(container.props.style.container[1]); }); diff --git a/test/src/components/node-tests.js b/test/src/components/node-tests.js index 4438c4d..892e7cb 100644 --- a/test/src/components/node-tests.js +++ b/test/src/components/node-tests.js @@ -2,11 +2,15 @@ 'use strict'; -import sinon from 'sinon'; import React from 'react'; -import ReactDOM from 'react-dom'; import TestUtils from 'react-dom/test-utils'; + +import sinon from 'sinon'; +import {VelocityTransitionGroup as TransitionGroup} from 'velocity-react'; + +import NodeHeader from '../../../src/components/header'; import TreeNode from '../../../src/components/node'; + import {createAnimations, createDecorators} from '../utils/factory'; const defaults = { @@ -18,9 +22,8 @@ const defaults = { describe('node component', () => { it('should not have any internal state', () => { - const treeNode = TestUtils.renderIntoDocument( - - ); + const treeNode = TestUtils.renderIntoDocument(); + global.should.not.exist(treeNode.state); }); @@ -31,11 +34,9 @@ describe('node component', () => { done(); }; const treeNode = TestUtils.renderIntoDocument( - + ); treeNode.onClick(); }); @@ -49,13 +50,12 @@ describe('node component', () => { /> ); treeNode.onClick(); + onToggle.should.be.called.once; }); it('should not throw an exception if a callback is not registered on click', () => { - const treeNode = TestUtils.renderIntoDocument( - - ); + const treeNode = TestUtils.renderIntoDocument(); (() => treeNode.onClick()).should.not.throw(Error); }); @@ -67,12 +67,11 @@ describe('node component', () => { }; const node = {animations: nodeAnimations}; const treeNode = TestUtils.renderIntoDocument( - + ); treeNode.animations(); + nodeAnimations.toggle.should.be.calledWith(treeNode.props); nodeAnimations.drawer.should.be.calledWith(treeNode.props); }); @@ -83,12 +82,11 @@ describe('node component', () => { drawer: sinon.stub().returns({duration: 0, animation: 'fadeIn'}) }; const treeNode = TestUtils.renderIntoDocument( - + ); treeNode.animations(); + animations.toggle.should.be.calledWith(treeNode.props); animations.drawer.should.be.calledWith(treeNode.props); }); @@ -104,12 +102,12 @@ describe('node component', () => { }; const node = {decorators: nodeDecorators, children: []}; const treeNode = TestUtils.renderIntoDocument( - + ); - TestUtils.findRenderedComponentWithType(treeNode, ContainerDecorator).should.exist; + const component = TestUtils.findRenderedComponentWithType(treeNode, ContainerDecorator); + + component.should.exist; }); it('should fallback to the prop decorators if the node decorators are not defined', () => { @@ -123,13 +121,13 @@ describe('node component', () => { }; const node = {children: []}; const treeNode = TestUtils.renderIntoDocument( - + ); - TestUtils.findRenderedComponentWithType(treeNode, ContainerDecorator).should.exist; + const component = TestUtils.findRenderedComponentWithType(treeNode, ContainerDecorator); + + component.should.exist; }); it('should render a list item at the top level', () => { @@ -141,35 +139,30 @@ describe('node component', () => { }); it('should render the NodeHeader component', () => { - const NodeHeader = require('../../../src/components/header'); - const treeNode = TestUtils.renderIntoDocument( - - ); - TestUtils.findRenderedComponentWithType(treeNode, NodeHeader).should.exist; + const treeNode = TestUtils.renderIntoDocument(); + const component = TestUtils.findRenderedComponentWithType(treeNode, NodeHeader); + + component.should.exist; }); it('should render the subtree if toggled', () => { const node = {toggled: true}; - const treeNode = TestUtils.renderIntoDocument( - - ); + const treeNode = TestUtils.renderIntoDocument(); + treeNode.subtreeRef.should.exist; }); it('should not render the children if not toggled', () => { const node = {toggled: false}; - const treeNode = TestUtils.renderIntoDocument( - - ); + const treeNode = TestUtils.renderIntoDocument(); + global.should.not.exist(treeNode.subtreeRef); }); it('should wrap the children in a velocity transition group', () => { - const TransitionGroup = require('velocity-react').VelocityTransitionGroup; - const treeNode = TestUtils.renderIntoDocument( - - ); + const treeNode = TestUtils.renderIntoDocument(); const component = TestUtils.findRenderedComponentWithType(treeNode, TransitionGroup); + component.should.exist; }); @@ -177,11 +170,11 @@ describe('node component', () => { const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( + animations={animations}/> ); const velocity = treeNode.velocityRef; const drawer = animations.drawer(); + velocity.props.enter.animation.should.equal(drawer.enter.animation); velocity.props.enter.duration.should.equal(drawer.enter.duration); }); @@ -190,11 +183,11 @@ describe('node component', () => { const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( + animations={animations}/> ); const velocity = treeNode.velocityRef; const drawer = animations.drawer(); + velocity.props.leave.animation.should.equal(drawer.leave.animation); velocity.props.leave.duration.should.equal(drawer.leave.duration); }); @@ -204,10 +197,10 @@ describe('node component', () => { const treeNode = TestUtils.renderIntoDocument( + node={node}/> ); const velocity = treeNode.velocityRef; + global.should.not.exist(velocity); }); @@ -216,10 +209,10 @@ describe('node component', () => { const treeNode = TestUtils.renderIntoDocument( + node={node}/> ); const velocity = treeNode.velocityRef; + global.should.not.exist(velocity); }); @@ -227,10 +220,10 @@ describe('node component', () => { const animations = createAnimations(); const treeNode = TestUtils.renderIntoDocument( + animations={animations}/> ); const velocity = treeNode.velocityRef; + velocity.should.exist; }); @@ -238,10 +231,10 @@ describe('node component', () => { const node = {toggled: true}; const treeNode = TestUtils.renderIntoDocument( + node={node}/> ); const subtree = treeNode.subtreeRef; + subtree.tagName.toLowerCase().should.equal('ul'); }); @@ -252,11 +245,11 @@ describe('node component', () => { }; const treeNode = TestUtils.renderIntoDocument( + node={node}/> ); // Find All TreeNodes (+ Top Level TreeNode) const nodes = TestUtils.scryRenderedComponentsWithType(treeNode, TreeNode); + nodes.length.should.equal(node.children.length + 1); }); @@ -271,10 +264,10 @@ describe('node component', () => { const treeNode = TestUtils.renderIntoDocument( + decorators={decorators}/> ); const loading = TestUtils.findRenderedComponentWithType(treeNode, LoadingDecorator); + loading.should.exist; }); @@ -289,10 +282,10 @@ describe('node component', () => { const treeNode = TestUtils.renderIntoDocument( + decorators={decorators}/> ); const loading = TestUtils.scryRenderedComponentsWithType(treeNode, LoadingDecorator); + loading.should.be.empty; }); @@ -300,9 +293,9 @@ describe('node component', () => { const node = {toggled: true, loading: true}; const treeNode = TestUtils.renderIntoDocument( + node={node}/> ); + global.should.not.exist(treeNode.subtreeRef); }); }); diff --git a/test/src/components/treebeard-tests.js b/test/src/components/treebeard-tests.js index 19de083..bea7134 100644 --- a/test/src/components/treebeard-tests.js +++ b/test/src/components/treebeard-tests.js @@ -3,10 +3,13 @@ 'use strict'; import React from 'react'; -import ReactDOM from 'react-dom'; import TestUtils from 'react-dom/test-utils'; + +import defaultDecorators from '../../../src/components/decorators'; import TreeNode from '../../../src/components/node'; import Treebeard from '../../../src/components/treebeard'; +import defaultAnimations from '../../../src/themes/animations'; +import defaultTheme from '../../../src/themes/default'; const defaults = { name: '', @@ -15,18 +18,16 @@ const defaults = { describe('treebeard component', () => { it('should render the treebase as a list', () => { - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const treeBase = treebeard.treeBaseRef; + treeBase.tagName.toLowerCase().should.equal('ul'); }); it('should render the treebase as a list', () => { - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const nodes = TestUtils.scryRenderedComponentsWithType(treebeard, TreeNode); + nodes.length.should.equal(1); }); @@ -36,34 +37,29 @@ describe('treebeard component', () => { onToggle={() => null}/> ); const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); + node.props.node.should.equal(treebeard.props.data); node.props.onToggle.should.equal(treebeard.props.onToggle); }); it('should use the default theme if none specified', () => { - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); - const defaultTheme = require('../../../src/themes/default'); + node.props.style.should.equal(defaultTheme.tree.node); }); it('should use the default animations if none specified', () => { - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); - const defaultAnimations = require('../../../src/themes/animations'); + node.props.animations.should.equal(defaultAnimations); }); it('should use the default decorators if none specified', () => { - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const node = TestUtils.findRenderedComponentWithType(treebeard, TreeNode); - const defaultDecorators = require('../../../src/components/decorators'); + node.props.decorators.should.equal(defaultDecorators); }); @@ -72,10 +68,9 @@ describe('treebeard component', () => { {name: 'root-1', children: []}, {name: 'root-2', children: []} ]; - const treebeard = TestUtils.renderIntoDocument( - - ); + const treebeard = TestUtils.renderIntoDocument(); const nodes = TestUtils.scryRenderedComponentsWithType(treebeard, TreeNode); + nodes.length.should.equal(multipleRootNodes.length); }); }); From a0aedac253e4d8c54f3ada79cb80d9c36320df55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 16 May 2017 09:54:36 +0200 Subject: [PATCH 10/12] Fix little bug --- src/themes/animations.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/animations.js b/src/themes/animations.js index 4326041..642c33c 100644 --- a/src/themes/animations.js +++ b/src/themes/animations.js @@ -1,7 +1,7 @@ 'use strict'; export default { - toggle: ({node: toggled}) => ({ + toggle: ({node: {toggled}}) => ({ animation: {rotateZ: toggled ? 90 : 0}, duration: 300 }), From 7dacf541abf087d3c15047e3e603cab4080c9b94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Tue, 16 May 2017 23:16:16 +0200 Subject: [PATCH 11/12] Bump Radium version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9d8c3d4..c1234d5 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "babel-runtime": "^5.8.29", "deep-equal": "^1.0.1", "prop-types": "^15.5.8", - "radium": "^0.18.2", + "radium": "^0.18.3", "shallowequal": "^0.2.2", "velocity-react": "^1.3.1" } From 14b593cb0b09bcb23395ceba9064169f48072088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Wed, 17 May 2017 09:57:01 +0200 Subject: [PATCH 12/12] Bump Radium version again --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c1234d5..08d6caa 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "babel-runtime": "^5.8.29", "deep-equal": "^1.0.1", "prop-types": "^15.5.8", - "radium": "^0.18.3", + "radium": "^0.19.0", "shallowequal": "^0.2.2", "velocity-react": "^1.3.1" }