[shape] add innerRef to <LinkVertical />

packages/vx-shape/package.json

@@ -4,13 +4,21 @@
   "description": "vx shape",
   "main": "build/index.js",
   "repository": "https://github.com/hshoff/vx",
-  "files": ["build"],
+  "files": [
+    "build"
+  ],
   "scripts": {
     "build": "make build SRC=./src",
     "prepublish": "make build SRC=./src",
     "test": "jest"
   },
-  "keywords": ["vx", "react", "d3", "visualizations", "charts"],
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts"
+  ],
   "author": "@hshoff",
   "license": "MIT",
   "dependencies": {
@@ -24,6 +32,7 @@
   "devDependencies": {
     "babel-jest": "^20.0.3",
     "d3-array": "^1.2.0",
+    "d3-hierarchy": "^1.1.5",
     "enzyme": "^2.8.2",
     "jest": "^20.0.3",
     "react": "^15.0.0-0 || ^16.0.0-0",

packages/vx-shape/src/shapes/LinkVertical.js

@@ -1,23 +1,30 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { linkVertical } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+LinkVertical.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function LinkVertical({
   className,
+  innerRef,
   data,
   x = d => d.x,
   y = d => d.y,
   ...restProps
 }) {
-  const link = linkVertical()
+  const link = linkVertical();
   link.x(x);
   link.y(y);
   return (
     <path
+      ref={innerRef}
       className={cx('vx-link-vertical', className)}
       d={link(data)}
       {...additionalProps(restProps, data)}
     />
   );
-}
+}

packages/vx-shape/test/LinkVertical.test.js

@@ -1,7 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { hierarchy } from 'd3-hierarchy';
 import { LinkVertical } from '../src';
 
+const mockHierarchy = hierarchy({
+  name: 'Eve',
+  children: [
+    { name: 'Cain' },
+    {
+      name: 'Seth',
+      children: [{ name: 'Enos' }, { name: 'Noam' }],
+    },
+  ],
+});
+const link = mockHierarchy.links()[0];
+
 describe('<LinkVertical />', () => {
   test('it should be defined', () => {
-    expect(LinkVertical).toBeDefined()
-  })
-})
+    expect(LinkVertical).toBeDefined();
+  });
+
+  test('it should expose its ref via an innerRef prop', done => {
+    const node = document.createElement('div');
+    const refCallback = n => {
+      expect(n.tagName).toEqual('PATH');
+      done();
+    };
+    ReactDOM.render(
+      <LinkVertical innerRef={refCallback} data={link} />,
+      node,
+    );
+  });
+});