[shape] add innerRef prop to <AreaClosed />

airbnb · Oct 7, 2017 · c23d4fa · c23d4fa
1 parent 5d0d8b8
commit c23d4fa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 13 deletions.
diff --git a/packages/vx-shape/src/shapes/AreaClosed.js b/packages/vx-shape/src/shapes/AreaClosed.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import { area } from 'd3-shape';
 import additionalProps from '../util/additionalProps';
 
+AreaClosed.propTypes = {
+  innerRef: PropTypes.func,
+};
+
 export default function AreaClosed({
   x,
   y,
@@ -16,6 +21,7 @@ export default function AreaClosed({
   stroke = 'black',
   fill = 'rgba(0,0,0,0.3)',
   curve,
+  innerRef,
   ...restProps
 }) {
   const path = area()
@@ -27,6 +33,7 @@ export default function AreaClosed({
   return (
     <g>
       <path
+        ref={innerRef}
         className={cx('vx-area-closed', className)}
         d={path(data)}
         stroke={stroke}

diff --git a/packages/vx-shape/test/AreaClosed.test.js b/packages/vx-shape/test/AreaClosed.test.js
@@ -1,22 +1,23 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { extent, max } from "d3-array";
-import { AreaClosed } from "../src";
-import { appleStock } from "../../vx-mock-data";
-import { scaleTime, scaleLinear } from "../../vx-scale";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { shallow } from 'enzyme';
+import { extent, max } from 'd3-array';
+import { AreaClosed } from '../src';
+import { appleStock } from '../../vx-mock-data';
+import { scaleTime, scaleLinear } from '../../vx-scale';
 
 const xStock = d => new Date(d.date);
 const yStock = d => d.close;
 
 const fakeXScale = scaleTime({
   range: [0, 100],
-  domain: extent(appleStock, xStock)
+  domain: extent(appleStock, xStock),
 });
 
 const fakeYScale = scaleLinear({
   range: [100, 0],
   domain: [0, max(appleStock, yStock)],
-  nice: true
+  nice: true,
 });
 
 const AreaClosedWrapper = ({ ...restProps }) =>
@@ -28,15 +29,38 @@ const AreaClosedWrapper = ({ ...restProps }) =>
       x={xStock}
       y={yStock}
       {...restProps}
-    />
+    />,
   );
 
-describe("<AreaClosed />", () => {
-  test("it should be defined", () => {
+describe('<AreaClosed />', () => {
+  test('it should be defined', () => {
     expect(AreaClosed).toBeDefined();
   });
 
-  test("it should have the .vx-area-closed class", () => {
-    expect(AreaClosedWrapper().find('path').prop("className")).toBe("vx-area-closed");
+  test('it should have the .vx-area-closed class', () => {
+    expect(
+      AreaClosedWrapper()
+        .find('path')
+        .prop('className'),
+    ).toBe('vx-area-closed');
+  });
+
+  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(
+      <AreaClosed
+        data={appleStock}
+        xScale={fakeXScale}
+        yScale={fakeYScale}
+        x={xStock}
+        y={yStock}
+        innerRef={refCallback}
+      />,
+      node,
+    );
   });
 });