Merge pull request #95 from Flaque/evan-test-shapes

[shape] Add tests for Arc, AreaClosed, & Line

packages/vx-shape/package.json

@@ -31,13 +31,14 @@
   },
   "devDependencies": {
     "babel-jest": "^20.0.3",
+    "d3-array": "^1.2.0",
     "enzyme": "^2.8.2",
     "jest": "^20.0.3",
+    "react": "^15.0.0 || 15.x",
     "react-addons-test-utils": "^15.5.1",
     "react-fatigue-dev": "github:tj/react-fatigue-dev",
     "react-tools": "^0.10.0",
-    "regenerator-runtime": "^0.10.5",
-    "react": "^15.0.0 || 15.x"
+    "regenerator-runtime": "^0.10.5"
   },
   "peerDependencies": {
     "react": "^15.0.0 || 15.x"

packages/vx-shape/src/shapes/AreaClosed.js

@@ -13,7 +13,7 @@ export default function AreaClosed({
   strokeDasharray,
   strokeWidth = 2,
   stroke = 'black',
-  fill = rgba(0,0,0,0.3),
+  fill = "rgba(0,0,0,0.3)",
   curve,
   ...restProps,
 }) {

packages/vx-shape/test/Arc.test.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { Arc } from "../src";
+import { browserUsage } from "../../vx-mock-data";
+
+const ArcWrapper = ({ ...restProps }) =>
+  shallow(<Arc data={browserUsage} {...restProps} />);
+
+describe("<Arc />", () => {
+  test("it should be defined", () => {
+    expect(Arc).toBeDefined();
+  });
+
+  test("it should have the .vx-arcs-group class", () => {
+    expect(ArcWrapper().prop("className")).toBe("vx-arcs-group");
+  });
+
+  test("it should contain paths", () => {
+    expect(ArcWrapper().find("path").length).toBeGreaterThan(0);
+  });
+});

packages/vx-shape/test/AreaClosed.test.js

@@ -1,7 +1,42 @@
-import { AreaClosed } from '../src';
+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";
 
-describe('<AreaClosed />', () => {
-  test('it should be defined', () => {
-    expect(AreaClosed).toBeDefined()
-  })
-})
+const xStock = d => new Date(d.date);
+const yStock = d => d.close;
+
+const fakeXScale = scaleTime({
+  range: [0, 100],
+  domain: extent(appleStock, xStock)
+});
+
+const fakeYScale = scaleLinear({
+  range: [100, 0],
+  domain: [0, max(appleStock, yStock)],
+  nice: true
+});
+
+const AreaClosedWrapper = ({ ...restProps }) =>
+  shallow(
+    <AreaClosed
+      data={appleStock}
+      xScale={fakeXScale}
+      yScale={fakeYScale}
+      x={xStock}
+      y={yStock}
+      {...restProps}
+    />
+  );
+
+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");
+  });
+});

packages/vx-shape/test/Line.test.js

@@ -1,7 +1,19 @@
-import { Line } from '../src';
+import React from "react";
+import { shallow } from "enzyme";
+import { Line } from "../src";
 
-describe('<Line />', () => {
-  test('it should be defined', () => {
-    expect(Line).toBeDefined()
-  })
-})
+const LineWrapper = ({ ...restProps }) => shallow(<Line {...restProps} />);
+
+describe("<Line />", () => {
+  test("it should be defined", () => {
+    expect(Line).toBeDefined();
+  });
+
+  test("it should contain a <line/>", () => {
+    expect(LineWrapper().find("line").length).toBe(1);
+  });
+
+  test("it should have the .vx-line class", () => {
+    expect(LineWrapper().prop("className")).toBe("vx-line");
+  });
+});