Adds depthFactor prop + unit test (#5)

Author: bkrem

src/Node/index.js

@@ -4,7 +4,13 @@ import uuid from 'uuid';
 import './style.css';
 
 function Node(props) {
-  const { nodeData, orientation } = props;
+  const { nodeData, orientation, depthFactor } = props;
+
+  // Normalise node position for fixed depth
+  if (depthFactor) {
+    nodeData.y = nodeData.depth * depthFactor;
+  }
+
   const transform = orientation === 'horizontal' ?
     `translate(${nodeData.y},${nodeData.x})` :
     `translate(${nodeData.x},${nodeData.y})`;
@@ -70,6 +76,7 @@ Node.propTypes = {
     'vertical',
   ]).isRequired,
   onClick: PropTypes.func,
+  depthFactor: PropTypes.number,
   primaryLabel: PropTypes.string,
   primaryLabelStyle: PropTypes.object,
   secondaryLabels: PropTypes.object,

src/Node/tests/index.test.js

@@ -7,11 +7,12 @@ describe('<Node />', () => {
   const nodeData = {
     id: 'abc123',
     name: 'mockNode',
+    depth: 3,
     x: 123,
     y: 321,
   };
 
-  it('should have the correct `id` attribute value', () => {
+  it('has the correct `id` attribute value', () => {
     const renderedComponent = shallow(
       <Node
         nodeData={nodeData}
@@ -22,7 +23,7 @@ describe('<Node />', () => {
     expect(renderedComponent.find('g').prop('id')).toBe(nodeData.id);
   });
 
-  it('should apply correct base className if `nodeData._children` is defined', () => {
+  it('applies correct base className if `nodeData._children` is defined', () => {
     const noChildrenComponent = shallow(
       <Node
         nodeData={nodeData}
@@ -40,7 +41,7 @@ describe('<Node />', () => {
     expect(withChildrenComponent.prop('className')).toBe('nodeBase');
   });
 
-  it('should apply correct <circle> style prop if `nodeData._children` is defined', () => {
+  it('applies correct <circle> style prop if `nodeData._children` is defined', () => {
     const leafCircleStyle = { fill: 'blue' };
     const circleStyle = { fill: 'green' };
     const noChildrenComponent = shallow(
@@ -64,7 +65,7 @@ describe('<Node />', () => {
     expect(withChildrenComponent.find('circle').prop('style')).toBe(circleStyle);
   });
 
-  it('should apply correct `transform` prop, depending on parent `orientation`', () => {
+  it('applies correct `transform` prop, depending on parent `orientation`', () => {
     const horizontalTransform = `translate(${nodeData.y},${nodeData.x})`;
     const verticalTransform = `translate(${nodeData.x},${nodeData.y})`;
     const horizontalComponent = shallow(
@@ -96,7 +97,7 @@ describe('<Node />', () => {
     expect(renderedComponent.prop('onClick')).toBeDefined();
   });
 
-  it('should handle click events and pass the nodeId to onClick handler', () => {
+  it('handles click events and pass the nodeId to onClick handler', () => {
     const onClickSpy = jest.fn();
     const renderedComponent = shallow(
       <Node
@@ -110,7 +111,7 @@ describe('<Node />', () => {
     expect(onClickSpy).toHaveBeenCalledWith(nodeData.id);
   });
 
-  it('should map each `props.secondaryLabels` to a <tspan> element', () => {
+  it('maps each `props.secondaryLabels` to a <tspan> element', () => {
     const fixture = { keyA: 'valA', keyB: 'valB' };
     const renderedComponent = shallow(
       <Node
@@ -130,4 +131,18 @@ describe('<Node />', () => {
       n.text() === `keyB: ${fixture.keyB}`).length
     ).toBe(1);
   });
+
+  it('mutates a node\'s `y` property according to `depthFactor`, when specified', () => {
+    const depthFactor = 100;
+    const expectedY = nodeData.depth * depthFactor;
+    const renderedComponent = shallow(
+      <Node
+        nodeData={nodeData}
+        orientation="vertical"
+        depthFactor={depthFactor}
+      />
+    );
+
+    expect(renderedComponent.prop('transform')).toBe(`translate(${nodeData.x},${expectedY})`);
+  });
 });

src/Tree/index.js

@@ -206,7 +206,7 @@ export default class Tree extends React.Component {
   }
 
   render() {
-    const { orientation, translate, pathFunc } = this.props;
+    const { orientation, translate, pathFunc, depthFactor } = this.props;
     const { nodes, links } = this.generateTree();
     return (
       <div className="treeContainer">
@@ -225,6 +225,7 @@ export default class Tree extends React.Component {
               <Node
                 key={nodeData.id}
                 orientation={orientation}
+                depthFactor={depthFactor}
                 textAnchor="start"
                 nodeData={nodeData}
                 primaryLabel={nodeData.name}
@@ -253,6 +254,7 @@ Tree.defaultProps = {
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
+  depthFactor: undefined,
   collapsible: true,
   initialDepth: undefined,
   zoomable: true,
@@ -273,6 +275,7 @@ Tree.propTypes = {
     'diagonal',
     'elbow',
   ]),
+  depthFactor: PropTypes.number,
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,
   zoomable: PropTypes.bool,