Fixes #1293 - Add tests for clay-charts-react

package.json

@@ -56,7 +56,11 @@
     ]
   },
   "workspaces": {
-    "packages":["packages/*"],
-    "nohoist": ["**/clay-charts-shared"]
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/clay-charts-shared"
+    ]
   }
 }

packages/clay-charts-react/.babelrc

@@ -0,0 +1,7 @@
+{
+	"presets": [
+		"env",
+		"stage-3",
+		"react"
+	]
+}

packages/clay-charts-react/package.json

@@ -8,7 +8,8 @@
 		"compile": "./node_modules/.bin/babel -d lib/ src/ -s --ignore src/__tests__",
 		"prepublish": "npm run compile && npm run copyAssets",
 		"start": "webpack-dev-server --mode development",
-		"copyAssets": "ncp ./node_modules/clay-charts-shared/lib/css lib/css"
+		"copyAssets": "ncp ./node_modules/clay-charts-shared/lib/css lib/css",
+		"test": "jest"
 	},
 	"author": "Bryce Osterhaus",
 	"license": "BSD",
@@ -21,28 +22,24 @@
 		"react-dom": "^16.6.0"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.1.2",
-		"@babel/core": "^7.1.2",
-		"@babel/polyfill": "^7.0.0",
-		"@babel/preset-env": "^7.1.0",
-		"@babel/preset-react": "^7.0.0",
-		"babel-loader": "^8.0.4",
+		"babel-cli": "^6.24.1",
+		"babel-core": "^6.25.0",
+		"babel-loader": "^7.0.0",
+		"babel-preset-env": "^1.6.0",
+		"babel-preset-react": "^6.24.1",
+		"babel-preset-stage-3": "^6.24.1",
 		"css-loader": "^1.0.0",
 		"eslint-plugin-react": "^7.11.1",
 		"html-webpack-plugin": "^3.2.0",
 		"ncp": "^2.0.0",
+		"raf": "^3.4.1",
 		"react": "^16.6.0",
 		"react-billboardjs": "^1.4.3",
 		"react-dom": "^16.6.0",
+		"react-test-renderer": "^16.6.1",
 		"style-loader": "^0.23.1",
 		"webpack": "^4.22.0",
 		"webpack-cli": "^3.1.2",
 		"webpack-dev-server": "^3.1.10"
-	},
-	"babel": {
-		"presets": [
-			"@babel/preset-env",
-			"@babel/preset-react"
-		]
 	}
 }

packages/clay-charts-react/src/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chart should render named chart without js exception 1`] = `
+<div
+  className="bar-chart"
+  style={undefined}
+/>
+`;
+
+exports[`Chart should render with type without js exception 1`] = `
+<div
+  className="bar-chart"
+  style={undefined}
+/>
+`;

packages/clay-charts-react/src/__tests__/index.js

@@ -0,0 +1,36 @@
+import 'raf/polyfill'; // React depends on requestAnimationFrame
+
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import Chart, {BarChart} from '../index';
+
+const COLUMNS = [['data1', 100, 20, 30], ['data2', 20, 70, 100]];
+
+describe('Chart', function() {
+	it('should render named chart without js exception', () => {
+		const testRenderer = TestRenderer.create(
+			<BarChart
+				className="bar-chart"
+				data={{
+					columns: COLUMNS,
+				}}
+			/>
+		  );
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('should render with type without js exception', async () => {
+		const testRenderer = TestRenderer.create(
+			<Chart
+				className="bar-chart"
+				data={{
+					columns: [['data1', 30], ['data2', 70]],
+					type: 'donut',
+				}}
+			/>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+});

packages/clay-charts-shared/.babelrc

@@ -0,0 +1,5 @@
+{
+	"presets": [
+		"env"
+	]
+}

packages/clay-charts-shared/package.json

@@ -18,8 +18,9 @@
 		"metal": "^2.16.6"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.1.2",
-		"@babel/core": "^7.1.2",
+		"babel-cli": "^6.24.1",
+		"babel-core": "^6.25.0",
+		"babel-preset-env": "^1.6.0",
 		"ncp": "^2.0.0",
 		"node-sass": "^4.9.4"
 	}