Merge pull request airbnb#793 from kristw/kristw--tests

test: add unit tests

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('<Grid />', () => {
-  test('it should be defined', () => {
+  it('should be defined', () => {
     expect(Grid).toBeDefined();
   });
+  it('should create grid lines', () => {
+    const wrapper = render(
+      <Grid
+        xScale={scaleLinear({ range: [0, 100] })}
+        yScale={scaleLinear({ range: [0, 100] })}
+        width={400}
+        height={400}
+        strokeDasharray="3,3"
+        strokeOpacity={0.3}
+        pointerEvents="none"
+      />,
+    );
+    expect(wrapper.find('.vx-rows')).toHaveLength(1);
+    expect(wrapper.find('.vx-columns')).toHaveLength(1);
+    expect(wrapper.find('.vx-line')).toHaveLength(22);
+  });
 });

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('<GridColumns />', () => {
+  it('should be defined', () => {
+    expect(GridColumns).toBeDefined();
+  });
+  it('should create grid lines', () => {
+    const wrapper = render(
+      <GridColumns
+        scale={scaleLinear({ range: [0, 100] })}
+        height={400}
+        strokeDasharray="3,3"
+        strokeOpacity={0.3}
+        pointerEvents="none"
+      />,
+    );
+    expect(wrapper.find('.vx-line')).toHaveLength(11);
+  });
+});

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('<GridRows />', () => {
+  it('should be defined', () => {
+    expect(GridRows).toBeDefined();
+  });
+  it('should create grid lines', () => {
+    const wrapper = render(
+      <GridRows
+        scale={scaleLinear({ range: [0, 100] })}
+        width={400}
+        strokeDasharray="3,3"
+        strokeOpacity={0.3}
+        pointerEvents="none"
+      />,
+    );
+    expect(wrapper.find('.vx-line')).toHaveLength(11);
+  });
+});

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);
+    });
+  });
+});

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);
+  });
+});

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('<Threshold />', () => {
+  it('should be defined', () => {
     expect(Threshold).toBeDefined();
   });
+
+  it('should render the path', () => {
+    const wrapper = render(
+      <svg>
+        <Threshold
+          id={`${Math.random()}`}
+          data={data}
+          x={d => 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,
+          }}
+        />
+      </svg>,
+    );
+    expect(wrapper.find('g.vx-threshold')).toHaveLength(1);
+    expect(wrapper.find('path')).toHaveLength(4);
+  });
+
+  it('supports accessors for clipping', () => {
+    const wrapper = render(
+      <svg>
+        <Threshold
+          id={`${Math.random()}`}
+          data={data}
+          x={d => 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,
+          }}
+        />
+      </svg>,
+    );
+    expect(wrapper.find('g.vx-threshold')).toHaveLength(1);
+    expect(wrapper.find('path')).toHaveLength(4);
+  });
 });

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', () => {
+describe('<Zoom />', () => {
+  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(
+      <Zoom
+        width={400}
+        height={400}
+        scaleXMin={1 / 2}
+        scaleXMax={4}
+        scaleYMin={1 / 2}
+        scaleYMax={4}
+        transformMatrix={initialTransform}
+      >
+        {({ transformMatrix }) => {
+          const { scaleX, scaleY, translateX, translateY } = transformMatrix;
+          return <div>{[scaleX, scaleY, translateX, translateY].join(',')}</div>;
+        }}
+      </Zoom>,
+    );
+
+    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();
   });
 });