Simplifies structuring for top-level style object

Author: bkrem

package.json

@@ -29,7 +29,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 90,
-        "branches": 83,
+        "branches": 82,
         "functions": 90,
         "lines": 90
       }

src/Node/index.js

@@ -66,23 +66,20 @@ export default class Node extends React.Component {
 
   render() {
     const { nodeData, styles } = this.props;
-    const nodeStyle = nodeData._children ?
-      { ...this.state.initialStyle, ...styles.node } :
-      { ...this.state.initialStyle, ...styles.leafNode };
-
+    const nodeStyle = nodeData._children ? { ...styles.node } : { ...styles.leafNode };
     return (
       <g
         id={nodeData.id}
         ref={(n) => { this.node = n; }}
-        style={nodeStyle}
+        style={this.state.initialStyle}
         className={nodeData._children ? 'nodeBase' : 'leafNodeBase'}
         transform={this.state.transform}
         onClick={this.handleClick}
       >
         <text
           className="nodeNameBase"
           textAnchor={this.props.textAnchor}
-          style={styles.name}
+          style={nodeStyle.name}
           x="10"
           y="-10"
           dy=".35em"
@@ -92,14 +89,14 @@ export default class Node extends React.Component {
 
         <circle
           r={this.props.circleRadius}
-          style={nodeData._children ? styles.circle : styles.leafCircle}
+          style={nodeStyle.circle}
         />
 
         <text
           className="nodeAttributesBase"
           y="0"
           textAnchor={this.props.textAnchor}
-          style={styles.attributes}
+          style={nodeStyle.attributes}
         >
           {
             this.props.attributes &&

src/Node/tests/index.test.js

@@ -57,11 +57,14 @@ describe('<Node />', () => {
   });
 
 
-  it('applies correct node styles depending on `nodeData._children`', () => {
-    const initialStyle = { opacity: 0 }; // state.initialStyle
+  it('applies correct <circle> styles depending on `nodeData._children`', () => {
     const fixture = {
-      node: { ...initialStyle, fill: 'blue' },
-      leafNode: { ...initialStyle, fill: 'green' },
+      leafNode: {
+        circle: { fill: 'blue' },
+      },
+      node: {
+        circle: { fill: 'green' },
+      },
     };
     const leafNodeComponent = shallow(
       <Node
@@ -77,49 +80,70 @@ describe('<Node />', () => {
       />
     );
 
-    expect(leafNodeComponent.prop('style')).toEqual(fixture.leafNode);
-    expect(nodeComponent.prop('style')).toEqual(fixture.node);
+    expect(leafNodeComponent.find('circle').prop('style'))
+    .toBe(fixture.leafNode.circle);
+    expect(nodeComponent.find('circle').prop('style'))
+    .toBe(fixture.node.circle);
   });
 
 
-  it('applies correct <circle> styles depending on `nodeData._children`', () => {
-    const leafCircle = { fill: 'blue' };
-    const circle = { fill: 'green' };
-    const styles = { circle, leafCircle };
+  it('applies correct node name styles depending on `nodeData._children`', () => {
+    const fixture = {
+      node: {
+        name: { stroke: '#000' },
+      },
+      leafNode: {
+        name: { stroke: '#fff' },
+      },
+    };
     const leafNodeComponent = shallow(
       <Node
         {...mockProps}
-        styles={styles}
+        styles={fixture}
       />
     );
     const nodeComponent = shallow(
       <Node
         {...mockProps}
         nodeData={{ ...nodeData, _children: [] }}
-        styles={styles}
+        styles={fixture}
       />
     );
 
-    expect(leafNodeComponent.find('circle').prop('style')).toBe(leafCircle);
-    expect(nodeComponent.find('circle').prop('style')).toBe(circle);
+    expect(leafNodeComponent.find('.nodeNameBase').prop('style'))
+    .toBe(fixture.leafNode.name);
+    expect(nodeComponent.find('.nodeNameBase').prop('style'))
+    .toBe(fixture.node.name);
   });
 
 
-  it('applies correct node attributes styles', () => {
+  it('applies correct node attributes styles depending on `nodeData._children`', () => {
     const fixture = {
-      attributes: {
-        stroke: '#000',
-        strokeWidth: 12,
+      node: {
+        attributes: { stroke: '#000' },
+      },
+      leafNode: {
+        attributes: { stroke: '#fff' },
       },
     };
-    const renderedComponent = shallow(
+    const leafNodeComponent = shallow(
       <Node
         {...mockProps}
         styles={fixture}
       />
     );
+    const nodeComponent = shallow(
+      <Node
+        {...mockProps}
+        nodeData={{ ...nodeData, _children: [] }}
+        styles={fixture}
+      />
+    );
 
-    expect(renderedComponent.find('.nodeAttributesBase').prop('style')).toBe(fixture.attributes);
+    expect(leafNodeComponent.find('.nodeAttributesBase').prop('style'))
+    .toBe(fixture.leafNode.attributes);
+    expect(nodeComponent.find('.nodeAttributesBase').prop('style'))
+    .toBe(fixture.node.attributes);
   });
 
 
@@ -195,7 +219,8 @@ describe('<Node />', () => {
       />
     );
 
-    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(fixture);
+    expect(renderedComponent.instance().applyTransform)
+    .toHaveBeenCalledWith(fixture);
   });
 
 
@@ -217,9 +242,13 @@ describe('<Node />', () => {
       />
     );
 
-    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(initialTransform);
+    expect(renderedComponent.instance().applyTransform)
+    .toHaveBeenCalledWith(initialTransform);
+
     renderedComponent.setProps(updatedProps);
-    expect(renderedComponent.instance().applyTransform).toHaveBeenCalledWith(updatedTransform);
+
+    expect(renderedComponent.instance().applyTransform)
+    .toHaveBeenCalledWith(updatedTransform);
   });
 
   // TODO Find a way to meaningfully test `componentWillLeave`

src/Tree/index.js

@@ -285,7 +285,18 @@ Tree.defaultProps = {
   zoomable: true,
   scaleExtent: { min: 0.1, max: 1 },
   styles: {
-    nodes: {},
+    nodes: {
+      node: {
+        circle: {},
+        name: {},
+        attributes: {},
+      },
+      leafNode: {
+        circle: {},
+        name: {},
+        attributes: {},
+      },
+    },
     links: {},
   },
 };