From e37fefbe0fcf512ca3de7fff7ae5d3fb02d32632 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 21:55:50 -0700 Subject: [PATCH 1/7] [shape] add innerRef prop to --- packages/vx-shape/package.json | 13 +++-------- packages/vx-shape/src/shapes/LinePath.js | 14 ++++++++---- packages/vx-shape/test/LinePath.test.js | 29 +++++++++++++++++++++--- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/packages/vx-shape/package.json b/packages/vx-shape/package.json index 50eb75097..584246150 100644 --- a/packages/vx-shape/package.json +++ b/packages/vx-shape/package.json @@ -4,21 +4,13 @@ "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": { @@ -35,6 +27,7 @@ "enzyme": "^2.8.2", "jest": "^20.0.3", "react": "^15.0.0-0 || ^16.0.0-0", + "react-dom": "^15.0.0-0 || ^16.0.0-0", "react-fatigue-dev": "github:tj/react-fatigue-dev", "react-test-renderer": "^15.6.1", "react-tools": "^0.10.0", diff --git a/packages/vx-shape/src/shapes/LinePath.js b/packages/vx-shape/src/shapes/LinePath.js index 8fcac6b34..83fc72ad3 100644 --- a/packages/vx-shape/src/shapes/LinePath.js +++ b/packages/vx-shape/src/shapes/LinePath.js @@ -1,9 +1,14 @@ import React from 'react'; import cx from 'classnames'; +import PropTypes from 'prop-types'; import { line } from 'd3-shape'; import { curveLinear } from '@vx/curve'; import additionalProps from '../util/additionalProps'; +LinePath.propTypes = { + innerRef: PropTypes.func, +}; + export default function LinePath({ data, xScale, @@ -19,6 +24,7 @@ export default function LinePath({ fill = 'none', curve = curveLinear, glyph, + innerRef, ...restProps }) { const path = line() @@ -29,6 +35,7 @@ export default function LinePath({ return ( - {glyph && - - {data.map(glyph)} - } + {glyph && ( + {data.map(glyph)} + )} ); } diff --git a/packages/vx-shape/test/LinePath.test.js b/packages/vx-shape/test/LinePath.test.js index e9666764a..c91ac2b27 100644 --- a/packages/vx-shape/test/LinePath.test.js +++ b/packages/vx-shape/test/LinePath.test.js @@ -1,7 +1,30 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { shallow } from 'enzyme'; import { LinePath } from '../src'; +const linePathProps = { + data: [{ x: 0, y: 0 }, { x: 1, y: 1 }], + x: d => d.x, + y: d => d.y, + xScale: d => d, + yScale: d => d, +}; + describe('', () => { test('it should be defined', () => { - expect(LinePath).toBeDefined() - }) -}) + expect(LinePath).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, + ); + }); +}); From e901ec592ea4269344d34cf543819adf76e341a7 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 21:58:59 -0700 Subject: [PATCH 2/7] [shape] add innerRef prop to --- packages/vx-shape/src/shapes/Line.js | 7 ++++++ packages/vx-shape/test/Line.test.js | 31 +++++++++++++++++-------- packages/vx-shape/test/LinePath.test.js | 1 - 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/vx-shape/src/shapes/Line.js b/packages/vx-shape/src/shapes/Line.js index b597beead..b2ec7448c 100644 --- a/packages/vx-shape/src/shapes/Line.js +++ b/packages/vx-shape/src/shapes/Line.js @@ -1,8 +1,13 @@ import React from 'react'; import cx from 'classnames'; +import PropTypes from 'prop-types'; import { Point } from '@vx/point'; import additionalProps from '../util/additionalProps'; +Line.propTypes = { + innerRef: PropTypes.func, +}; + export default function Line({ from = new Point({ x: 0, y: 0 }), to = new Point({ x: 1, y: 1 }), @@ -12,10 +17,12 @@ export default function Line({ transform = '', className = '', data, + innerRef, ...restProps }) { return ( shallow(); +const LineWrapper = ({ ...restProps }) => + shallow(); -describe("", () => { - test("it should be defined", () => { +describe('', () => { + test('it should be defined', () => { expect(Line).toBeDefined(); }); - test("it should contain a ", () => { - expect(LineWrapper().find("line").length).toBe(1); + test('it should contain a ', () => { + expect(LineWrapper().find('line').length).toBe(1); }); - test("it should have the .vx-line class", () => { - expect(LineWrapper().prop("className")).toBe("vx-line"); + test('it should have the .vx-line class', () => { + expect(LineWrapper().prop('className')).toBe('vx-line'); + }); + + test('it should expose its ref via an innerRef prop', done => { + const node = document.createElement('div'); + const refCallback = n => { + expect(n.tagName).toEqual('LINE'); + done(); + }; + ReactDOM.render(, node); }); }); diff --git a/packages/vx-shape/test/LinePath.test.js b/packages/vx-shape/test/LinePath.test.js index c91ac2b27..ca946f997 100644 --- a/packages/vx-shape/test/LinePath.test.js +++ b/packages/vx-shape/test/LinePath.test.js @@ -1,6 +1,5 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import { shallow } from 'enzyme'; import { LinePath } from '../src'; const linePathProps = { From 8d9385c1536096427c6a988c55924dca3c7c759b Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 22:02:24 -0700 Subject: [PATCH 3/7] [shape] add innerRef prop to --- packages/vx-shape/src/shapes/LineRadial.js | 9 +++++++- packages/vx-shape/test/LineRadial.test.js | 24 +++++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/vx-shape/src/shapes/LineRadial.js b/packages/vx-shape/src/shapes/LineRadial.js index 31dc2cc2c..de1190e26 100644 --- a/packages/vx-shape/src/shapes/LineRadial.js +++ b/packages/vx-shape/src/shapes/LineRadial.js @@ -1,8 +1,13 @@ import React from 'react'; import cx from 'classnames'; +import PropTypes from 'prop-types'; import { radialLine } from 'd3-shape'; import additionalProps from '../util/additionalProps'; +LineRadial.propTypes = { + innerRef: PropTypes.func, +}; + export default function LineRadial({ className = '', angle, @@ -10,6 +15,7 @@ export default function LineRadial({ defined, curve, data, + innerRef, ...restProps }) { const path = radialLine(); @@ -20,10 +26,11 @@ export default function LineRadial({ return ( ); -} \ No newline at end of file +} diff --git a/packages/vx-shape/test/LineRadial.test.js b/packages/vx-shape/test/LineRadial.test.js index 7a1db74d5..1b3c50a58 100644 --- a/packages/vx-shape/test/LineRadial.test.js +++ b/packages/vx-shape/test/LineRadial.test.js @@ -1,7 +1,25 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; import { LineRadial } from '../src'; +const lineRadialProps = { + data: [{ x: 0, y: 0 }, { x: 1, y: 1 }], +}; + describe('', () => { test('it should be defined', () => { - expect(LineRadial).toBeDefined() - }) -}) + expect(LineRadial).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, + ); + }); +}); From 5d0d8b86787bdc7e3ef61256494a43071faae247 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 22:43:56 -0700 Subject: [PATCH 4/7] [shape] add innerRef prop to --- packages/vx-shape/src/shapes/Bar.js | 11 +++++++++-- packages/vx-shape/test/Bar.test.js | 17 ++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/packages/vx-shape/src/shapes/Bar.js b/packages/vx-shape/src/shapes/Bar.js index d43e26662..390344b58 100644 --- a/packages/vx-shape/src/shapes/Bar.js +++ b/packages/vx-shape/src/shapes/Bar.js @@ -1,9 +1,15 @@ import React from 'react'; import cx from 'classnames'; +import PropTypes from 'prop-types'; import additionalProps from '../util/additionalProps'; -export default ({ +Bar.propTypes = { + innerRef: PropTypes.func, +}; + +export default function Bar({ className, + innerRef, data, x = 0, y = 0, @@ -21,9 +27,10 @@ export default ({ strokeMiterlimit, strokeOpacity, ...restProps, -}) => { +}) { return ( ', () => { test('it should be defined', () => { - expect(Bar).toBeDefined() - }) -}) + expect(Bar).toBeDefined(); + }); + + test('it should expose its ref via an innerRef prop', done => { + const node = document.createElement('div'); + const refCallback = n => { + expect(n.tagName).toEqual('RECT'); + done(); + }; + ReactDOM.render(, node); + }); +}); From c23d4fa70f7ad6e0262da653ae33acac7af7ada2 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 22:48:23 -0700 Subject: [PATCH 5/7] [shape] add innerRef prop to --- packages/vx-shape/src/shapes/AreaClosed.js | 7 +++ packages/vx-shape/test/AreaClosed.test.js | 50 ++++++++++++++++------ 2 files changed, 44 insertions(+), 13 deletions(-) diff --git a/packages/vx-shape/src/shapes/AreaClosed.js b/packages/vx-shape/src/shapes/AreaClosed.js index d427d3548..1af77f648 100644 --- 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 ( 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("", () => { - test("it should be defined", () => { +describe('', () => { + 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( + , + node, + ); }); }); From 931dbee38864980564652502763df132847e71f4 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 22:56:59 -0700 Subject: [PATCH 6/7] [shape] add innerRef to --- packages/vx-shape/package.json | 13 ++++++-- packages/vx-shape/src/shapes/LinkVertical.js | 11 +++++-- packages/vx-shape/test/LinkVertical.test.js | 33 ++++++++++++++++++-- 3 files changed, 50 insertions(+), 7 deletions(-) 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, + ); + }); +}); From ed1ee3bc44563fce06bde7814eb2382057514400 Mon Sep 17 00:00:00 2001 From: Harry Shoff Date: Fri, 6 Oct 2017 22:58:51 -0700 Subject: [PATCH 7/7] [shape] add innerRef prop to --- .../vx-shape/src/shapes/LinkHorizontal.js | 11 +++++-- packages/vx-shape/test/LinkHorizontal.test.js | 33 +++++++++++++++++-- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/vx-shape/src/shapes/LinkHorizontal.js b/packages/vx-shape/src/shapes/LinkHorizontal.js index bd48938a6..8c5cc86aa 100644 --- a/packages/vx-shape/src/shapes/LinkHorizontal.js +++ b/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 ( ); -} \ No newline at end of file +} diff --git a/packages/vx-shape/test/LinkHorizontal.test.js b/packages/vx-shape/test/LinkHorizontal.test.js index fa1eb6aac..2ffc2c9a3 100644 --- a/packages/vx-shape/test/LinkHorizontal.test.js +++ b/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('', () => { test('it should be defined', () => { - expect(LinkHorizontal).toBeDefined() - }) -}) \ No newline at end of file + 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( + , + node, + ); + }); +});