From 76548a0a088aabd8f8ff006808825982c2f569bc Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Tue, 1 Sep 2020 17:34:16 -0700 Subject: [PATCH 1/3] test: add unit tests --- packages/vx-grid/test/Columns.test.tsx | 7 ----- packages/vx-grid/test/Grid.test.tsx | 21 ++++++++++++- packages/vx-grid/test/GridColumns.test.tsx | 22 +++++++++++++ packages/vx-grid/test/GridRows.test.tsx | 22 +++++++++++++ packages/vx-grid/test/Rows.test.tsx | 7 ----- packages/vx-zoom/test/Zoom.test.tsx | 36 ++++++++++++++++++++-- 6 files changed, 98 insertions(+), 17 deletions(-) delete mode 100644 packages/vx-grid/test/Columns.test.tsx create mode 100644 packages/vx-grid/test/GridColumns.test.tsx create mode 100644 packages/vx-grid/test/GridRows.test.tsx delete mode 100644 packages/vx-grid/test/Rows.test.tsx diff --git a/packages/vx-grid/test/Columns.test.tsx b/packages/vx-grid/test/Columns.test.tsx deleted file mode 100644 index e0301619e..000000000 --- a/packages/vx-grid/test/Columns.test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { GridColumns } from '../src'; - -describe('', () => { - test('it should be defined', () => { - expect(GridColumns).toBeDefined(); - }); -}); diff --git a/packages/vx-grid/test/Grid.test.tsx b/packages/vx-grid/test/Grid.test.tsx index e3a3879fc..fc0760886 100644 --- a/packages/vx-grid/test/Grid.test.tsx +++ b/packages/vx-grid/test/Grid.test.tsx @@ -1,7 +1,26 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { scaleLinear } from '@vx/scale'; import { Grid } from '../src'; describe('', () => { - test('it should be defined', () => { + it('should be defined', () => { expect(Grid).toBeDefined(); }); + it('should create grid lines', () => { + const wrapper = render( + , + ); + expect(wrapper.find('.vx-rows')).toHaveLength(1); + expect(wrapper.find('.vx-columns')).toHaveLength(1); + expect(wrapper.find('.vx-line')).toHaveLength(22); + }); }); diff --git a/packages/vx-grid/test/GridColumns.test.tsx b/packages/vx-grid/test/GridColumns.test.tsx new file mode 100644 index 000000000..6c12a4376 --- /dev/null +++ b/packages/vx-grid/test/GridColumns.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { scaleLinear } from '@vx/scale'; +import { GridColumns } from '../src'; + +describe('', () => { + it('should be defined', () => { + expect(GridColumns).toBeDefined(); + }); + it('should create grid lines', () => { + const wrapper = render( + , + ); + expect(wrapper.find('.vx-line')).toHaveLength(11); + }); +}); diff --git a/packages/vx-grid/test/GridRows.test.tsx b/packages/vx-grid/test/GridRows.test.tsx new file mode 100644 index 000000000..3afbcbd44 --- /dev/null +++ b/packages/vx-grid/test/GridRows.test.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { scaleLinear } from '@vx/scale'; +import { GridRows } from '../src'; + +describe('', () => { + it('should be defined', () => { + expect(GridRows).toBeDefined(); + }); + it('should create grid lines', () => { + const wrapper = render( + , + ); + expect(wrapper.find('.vx-line')).toHaveLength(11); + }); +}); diff --git a/packages/vx-grid/test/Rows.test.tsx b/packages/vx-grid/test/Rows.test.tsx deleted file mode 100644 index b037ee4ad..000000000 --- a/packages/vx-grid/test/Rows.test.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { GridRows } from '../src'; - -describe('', () => { - test('it should be defined', () => { - expect(GridRows).toBeDefined(); - }); -}); diff --git a/packages/vx-zoom/test/Zoom.test.tsx b/packages/vx-zoom/test/Zoom.test.tsx index ee6fbb521..db6ca4e3c 100644 --- a/packages/vx-zoom/test/Zoom.test.tsx +++ b/packages/vx-zoom/test/Zoom.test.tsx @@ -1,13 +1,45 @@ +import React from 'react'; +import { render } from 'enzyme'; import { Zoom, inverseMatrix } from '../src'; describe('Zoom', () => { - test('it should be defined', () => { + it('should be defined', () => { expect(Zoom).toBeDefined(); }); + it('should render the children and pass zoom params', () => { + const initialTransform = { + scaleX: 1.27, + scaleY: 1.27, + translateX: -211.62, + translateY: 162.59, + skewX: 0, + skewY: 0, + }; + + const wrapper = render( + + {({ transformMatrix }) => { + const { scaleX, scaleY, translateX, translateY } = transformMatrix; + return
{[scaleX, scaleY, translateX, translateY].join(',')}
; + }} + , + ); + + expect(wrapper.find('div')).toHaveLength(1); + expect(wrapper.find('div').text()).toEqual('1.27,1.27,-211.62,162.59'); + }); }); describe('inverseMatrix', () => { - test('it should be defined', () => { + it('should be defined', () => { expect(inverseMatrix).toBeDefined(); }); }); From 7f6acf065f78bd284a7e011cb4a33a770eff97b2 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Tue, 1 Sep 2020 17:52:30 -0700 Subject: [PATCH 2/3] test: add test for threshold --- packages/vx-threshold/test/Threshold.test.tsx | 63 ++++++++++++++++++- packages/vx-zoom/test/Zoom.test.tsx | 2 +- 2 files changed, 62 insertions(+), 3 deletions(-) diff --git a/packages/vx-threshold/test/Threshold.test.tsx b/packages/vx-threshold/test/Threshold.test.tsx index b94e04eee..75bf495ce 100644 --- a/packages/vx-threshold/test/Threshold.test.tsx +++ b/packages/vx-threshold/test/Threshold.test.tsx @@ -1,7 +1,66 @@ +import React from 'react'; +import { render } from 'enzyme'; import { Threshold } from '../src'; -describe('Threshold', () => { - test('it should be defined', () => { +const data = [ + { x: 1, y0: 6, y1: 10 }, + { x: 2, y0: 7, y1: 11 }, +]; + +describe('', () => { + it('should be defined', () => { expect(Threshold).toBeDefined(); }); + + it('should render the path', () => { + const wrapper = render( + + d.x} + y0={d => d.y0} + y1={d => d.y1} + clipAboveTo={0} + clipBelowTo={100} + belowAreaProps={{ + fill: 'violet', + fillOpacity: 0.4, + }} + aboveAreaProps={{ + fill: 'green', + fillOpacity: 0.4, + }} + /> + , + ); + expect(wrapper.find('g.vx-threshold')).toHaveLength(1); + expect(wrapper.find('path')).toHaveLength(4); + }); + + it('supports accessors for clipping', () => { + const wrapper = render( + + d.x} + y0={d => d.y0} + y1={d => d.y1} + clipAboveTo={() => 0} + clipBelowTo={() => 100} + belowAreaProps={{ + fill: 'violet', + fillOpacity: 0.4, + }} + aboveAreaProps={{ + fill: 'green', + fillOpacity: 0.4, + }} + /> + , + ); + expect(wrapper.find('g.vx-threshold')).toHaveLength(1); + expect(wrapper.find('path')).toHaveLength(4); + }); }); diff --git a/packages/vx-zoom/test/Zoom.test.tsx b/packages/vx-zoom/test/Zoom.test.tsx index db6ca4e3c..68364ac7a 100644 --- a/packages/vx-zoom/test/Zoom.test.tsx +++ b/packages/vx-zoom/test/Zoom.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from 'enzyme'; import { Zoom, inverseMatrix } from '../src'; -describe('Zoom', () => { +describe('', () => { it('should be defined', () => { expect(Zoom).toBeDefined(); }); From 3afb33307e82c976a9cbc3df1911f581ebfe4774 Mon Sep 17 00:00:00 2001 From: Krist Wongsuphasawat Date: Tue, 1 Sep 2020 18:30:40 -0700 Subject: [PATCH 3/3] test: more tests --- .../test/utils/D3ShapeFactories.test.ts | 121 ++++++++++++++++++ .../vx-shape/test/utils/getBandwidth.test.ts | 15 +++ 2 files changed, 136 insertions(+) create mode 100644 packages/vx-shape/test/utils/D3ShapeFactories.test.ts create mode 100644 packages/vx-shape/test/utils/getBandwidth.test.ts diff --git a/packages/vx-shape/test/utils/D3ShapeFactories.test.ts b/packages/vx-shape/test/utils/D3ShapeFactories.test.ts new file mode 100644 index 000000000..2acc5b149 --- /dev/null +++ b/packages/vx-shape/test/utils/D3ShapeFactories.test.ts @@ -0,0 +1,121 @@ +import { curveBasis, stackOrderDescending, stackOffsetExpand } from 'd3-shape'; +import { arc, area, pie, line, radialLine, stack } from '../../src/util/D3ShapeFactories'; + +describe('D3ShapeFactories', () => { + describe('arc()', () => { + it('innerRadius', () => { + expect(arc({ innerRadius: 1 }).innerRadius()({})).toEqual(1); + }); + it('outerRadius', () => { + expect(arc({ outerRadius: 1 }).outerRadius()({})).toEqual(1); + }); + it('cornerRadius', () => { + expect(arc({ cornerRadius: 1 }).cornerRadius()({})).toEqual(1); + }); + it('startAngle', () => { + expect(arc({ startAngle: 1 }).startAngle()({})).toEqual(1); + }); + it('endAngle', () => { + expect(arc({ endAngle: 1 }).endAngle()({})).toEqual(1); + }); + it('padAngle', () => { + expect(arc({ padAngle: 1 }).padAngle()({})).toEqual(1); + }); + it('padRadius', () => { + expect(arc({ padRadius: 1 }).padRadius()!({})).toEqual(1); + }); + }); + + describe('area()', () => { + it('x', () => { + expect(area({ x: 1 }).x()({}, 0, [])).toEqual(1); + }); + it('x0', () => { + expect(area({ x0: 1 }).x0()({}, 0, [])).toEqual(1); + }); + it('x1', () => { + expect(area({ x1: 1 }).x1()!({}, 0, [])).toEqual(1); + }); + it('y', () => { + expect(area({ y: 1 }).y()({}, 0, [])).toEqual(1); + }); + it('y0', () => { + expect(area({ y0: 1 }).y0()({}, 0, [])).toEqual(1); + }); + it('y1', () => { + expect(area({ y1: 1 }).y1()!({}, 0, [])).toEqual(1); + }); + it('defined', () => { + expect(area({ defined: () => true }).defined()({}, 0, [])).toEqual(true); + }); + it('curve', () => { + expect(area({ curve: curveBasis }).curve()).toEqual(curveBasis); + }); + }); + + describe('line()', () => { + it('x', () => { + expect(line({ x: 1 }).x()({}, 0, [])).toEqual(1); + }); + it('y', () => { + expect(line({ y: 1 }).y()({}, 0, [])).toEqual(1); + }); + it('defined', () => { + expect(line({ defined: () => true }).defined()({}, 0, [])).toEqual(true); + }); + it('curve', () => { + expect(line({ curve: curveBasis }).curve()).toEqual(curveBasis); + }); + }); + + describe('pie()', () => { + it('startAngle', () => { + expect(pie({ startAngle: 1 }).startAngle()([])).toEqual(1); + }); + it('endAngle', () => { + expect(pie({ endAngle: 1 }).endAngle()([])).toEqual(1); + }); + it('padAngle', () => { + expect(pie({ padAngle: 1 }).padAngle()([])).toEqual(1); + }); + it('value', () => { + expect(pie({ value: () => 1 }).value()({}, 1, [])).toEqual(1); + }); + it('sort', () => { + expect(pie({ sort: () => 1 }).sort()!({}, {})).toEqual(1); + }); + it('sortValues', () => { + expect(pie({ sortValues: () => 1 }).sortValues()!(2, 1)).toEqual(1); + }); + }); + + describe('radialLine()', () => { + it('angle', () => { + expect(radialLine({ angle: 1 }).angle()({}, 1, [])).toEqual(1); + }); + it('radius', () => { + expect(radialLine({ radius: 1 }).radius()({}, 1, [])).toEqual(1); + }); + it('defined', () => { + expect(radialLine({ defined: () => true }).defined()({}, 0, [])).toEqual(true); + }); + it('curve', () => { + expect(radialLine({ curve: curveBasis }).curve()).toEqual(curveBasis); + }); + }); + + describe('stack()', () => { + it('keys', () => { + expect(stack({ keys: ['a', 'b', 'c'] }).keys()([])).toEqual(['a', 'b', 'c']); + }); + it('value', () => { + expect(stack({ value: () => 1 }).value()({}, '', 1, [])).toEqual(1); + }); + it('order', () => { + expect(stack({ order: 'descending' }).order()).toEqual(stackOrderDescending); + }); + it('offset', () => { + expect(stack({ offset: 'expand' }).offset()).toEqual(stackOffsetExpand); + }); + }); +}); diff --git a/packages/vx-shape/test/utils/getBandwidth.test.ts b/packages/vx-shape/test/utils/getBandwidth.test.ts new file mode 100644 index 000000000..6795480b2 --- /dev/null +++ b/packages/vx-shape/test/utils/getBandwidth.test.ts @@ -0,0 +1,15 @@ +import { scaleBand, scalePoint, scaleOrdinal } from '@vx/scale'; +import getBandwidth from '../../src/util/getBandwidth'; + +describe('getBandwidth()', () => { + it('returns bandwidth for scales that natively supports', () => { + const scale1 = scaleBand({ domain: ['bacon', 'egg'], range: [0, 100] }); + expect(getBandwidth(scale1)).toEqual(50); + const scale2 = scalePoint({ domain: ['bacon', 'egg'], range: [0, 100] }); + expect(getBandwidth(scale2)).toEqual(0); + }); + it('otherwise compute band from domain and range', () => { + const scale = scaleOrdinal({ domain: ['bacon', 'egg'], range: [0, 100] }); + expect(getBandwidth(scale)).toEqual(50); + }); +});