diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json
index 584246150..cfb95e0ec 100644
--- a/packages/vx-shape/package.json
+++ b/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",
diff --git a/packages/vx-shape/src/shapes/LinkVertical.js b/packages/vx-shape/src/shapes/LinkVertical.js
index 604eacd44..8d6044263 100644
--- a/packages/vx-shape/src/shapes/LinkVertical.js
+++ b/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 (
);
-}
\ No newline at end of file
+}
diff --git a/packages/vx-shape/test/LinkVertical.test.js b/packages/vx-shape/test/LinkVertical.test.js
index b4359a1fb..4e4269508 100644
--- a/packages/vx-shape/test/LinkVertical.test.js
+++ b/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('', () => {
test('it should be defined', () => {
- expect(LinkVertical).toBeDefined()
- })
-})
\ No newline at end of file
+ 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(
+ ,
+ node,
+ );
+ });
+});