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