[shape] add innerRef prop to <LinkHorizontal />

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

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

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

@@ -1,7 +1,34 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { hierarchy } from 'd3-hierarchy';
 import { LinkHorizontal } from '../src';
 
+const mockHierarchy = hierarchy({
+  name: 'Eve',
+  children: [
+    { name: 'Cain' },
+    {
+      name: 'Seth',
+      children: [{ name: 'Enos' }, { name: 'Noam' }],
+    },
+  ],
+});
+const link = mockHierarchy.links()[0];
+
 describe('<LinkHorizontal />', () => {
   test('it should be defined', () => {
-    expect(LinkHorizontal).toBeDefined()
-  })
-})
+    expect(LinkHorizontal).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(
+      <LinkHorizontal innerRef={refCallback} data={link} />,
+      node,
+    );
+  });
+});