Enhanced pie chart multicolor support, jest tests, & updated example sync util (capitalone#36)

* Initial attempt at better pie multicolor support

* Added sync-rnpc script as an alternative to prior filewatch util

* Added jest snapshot tests for Pie chart

* Added test kickoff for circleci config

Author: marzolfb

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

README.md

@@ -53,8 +53,12 @@ react-native run-android
 
 ### Developing and Testing With The Example App
 
-Please see the [util/watchman-update-example-src/README.md](util/watchman-update-example-src/README.md) for information on how to setup a [Watchman](https://facebook.github.io/watchman/)-based file watch that automates source file copying between [project source](src) and the [example app](example) to make manual testing easier
+As you are working on changing src files in this library and testing those changes against the example app, it is necessary to copy files to example/node_modules/react-native-pathjs-charts each time a change is made. To automate this, a `sync-rnpc` script has been added that will create a background process to watch for src file changes and automatically copy them. To enable this:
 
+```
+cd example
+npm run sync-rnpc
+```
 
 ## Todo
 

circle.yml

@@ -4,8 +4,7 @@ dependencies:
 
 test:
   override:
-    - echo "Verifying login successful prior to npm publish..."
-    - npm owner ls
+    - npm test
 
 deployment:
   release:

example/package.json

@@ -3,12 +3,16 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "start": "node node_modules/react-native/local-cli/cli.js start"
+    "start": "node node_modules/react-native/local-cli/cli.js start",
+    "sync-rnpc": "rm -rf ./node_modules/react-native-pathjs-charts; sane '/usr/bin/rsync -v -a --exclude .git --exclude example --exclude node_modules ../ ./node_modules/react-native-pathjs-charts/' .. --glob='{**/*.json,**/*.js}'"
   },
   "dependencies": {
     "react": "^15.4.1",
     "react-native": "^0.38.1",
     "react-native-pathjs-charts": "file:../",
     "react-native-side-menu": "^0.20.1"
+  },
+  "devDependencies": {
+    "sane": "^1.4.1"
   }
 }

example/src/pie/PieChartBasic.js

@@ -30,7 +30,8 @@ class PieChartBasic extends Component {
       "population": 2584160
     }, {
       "name": "Minnesota",
-      "population": 6590667
+      "population": 6590667,
+      "color": {'r':223,'g':154,'b':20}
     }, {
       "name": "Alaska",
       "population": 7284698
@@ -64,10 +65,31 @@ class PieChartBasic extends Component {
 
     return (
       <View>
-        <Pie
-          data={data}
+        <Pie data={data}
           options={options}
-          accessorKey="population" />
+          accessorKey="population"
+          margin={{top: 20, left: 20, right: 20, bottom: 20}}
+          color="#2980B9"
+          pallete={
+            [
+              {'r':25,'g':99,'b':201},
+              {'r':24,'g':175,'b':35},
+              {'r':190,'g':31,'b':69},
+              {'r':100,'g':36,'b':199},
+              {'r':214,'g':207,'b':32},
+              {'r':198,'g':84,'b':45}
+            ]
+          }
+          r={50}
+          R={150}
+          legendPosition="topLeft"
+          label={{
+            fontFamily: 'Arial',
+            fontSize: 8,
+            fontWeight: true,
+            color: '#ECF0F1'
+          }}
+          />
       </View>
     )
   }

package.json

@@ -9,7 +9,8 @@
   "main": "src/index.js",
   "scripts": {
     "start": "node_modules/react-native/packager/packager.sh",
-    "lint": "eslint --ext .js,.jsx src"
+    "lint": "eslint --ext .js,.jsx src",
+    "test": "jest"
   },
   "keywords": [
     "react-native",
@@ -41,7 +42,16 @@
     "react-native-svg": "^4.4.1"
   },
   "devDependencies": {
+    "babel-jest": "*",
+    "babel-preset-react-native": "^1.9.0",
+    "diff": "^3.1.0",
+    "jest": "^18.0.0",
+    "jest-react-native": "*",
     "react": "~15.4.1",
-    "react-native": "^0.38.1"
+    "react-native": "^0.38.1",
+    "react-test-renderer": "*"
+  },
+  "jest": {
+    "preset": "jest-react-native"
   }
 }

src/Pie.js

@@ -42,14 +42,15 @@ export default class PieChart extends Component {
         bold: true,
         color: '#ECF0F1'
       }
-    }
+    },
   }
 
   color(i) {
-    let color = this.props.options.color
+    let color = this.props.color || (this.props.options && this.props.options.color)
     if (color && !_.isString(color)) color = color.color
-    let pallete = this.props.pallete || Colors.mix(color || '#9ac7f7')
-    return Colors.string(cyclic(pallete, i)) }
+    let pallete = this.props.pallete || (this.props.options && this.props.options.pallete) || Colors.mix(color || '#9ac7f7')
+    return Colors.string(cyclic(pallete, i))
+  }
 
 
   get defaultRange() {
@@ -68,17 +69,17 @@ export default class PieChart extends Component {
     let radius = Math.min(x, y)
 
     let chart = Pie({
-      center: this.props.options.center || [0,0],
-      r: this.props.options.r || radius /2,
-      R: this.props.options.R || radius,
+      center: this.props.center || (this.props.options && this.props.options.center) || [0,0] ,
+      r: this.props.r || (this.props.options && this.props.options.r) || radius /2,
+      R: this.props.R || (this.props.options && this.props.options.R) || radius,
       data: this.props.data,
       accessor: this.props.accessor || identity(this.props.accessorKey)
     })
 
     let textStyle = fontAdapt(options.label)
 
     let slices = chart.curves.map( (c, i) => {
-      let fill = this.color(i)
+      let fill = (c.item.color && Colors.string(c.item.color)) || this.color(i)
       let stroke = Colors.darkenColor(fill)
       return (
                 <G key={ i } x={x - options.margin.left} y={y - options.margin.top}>

src/__mocks__/react-native-svg.js

@@ -0,0 +1,41 @@
+import React from 'react'
+
+export default function({ children }) {
+  return (
+    <view mockedComponent="svg-component">
+      {children}
+    </view>
+  )
+}
+
+export const Rect = (props) => {
+  return (
+    <view mockedComponent="svg-Rect" {...props} />
+  )
+}
+
+export const Path = (props) => {
+  return (
+    <view mockedComponent="svg-Path" {...props} />
+  )
+}
+
+export const G = ({ children }) => {
+  return (
+    <view mockedComponent="svg-G">
+      {children}
+    </view>
+  )
+}
+
+export const Svg = (props) => {
+  return (
+    <view mockedComponent="svg-Svg" {...props} />
+  )
+}
+
+export const Text = (props) => {
+  return (
+    <view mockedComponent="svg-Text" {...props} />
+  )
+}

src/__mocks__/react-native.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const View = ({ children }) => {
+  return (
+    <div>{children}</div>
+  )
+}

src/__tests__/PieBasic-test.js

@@ -0,0 +1,97 @@
+import 'react-native'
+import React from 'react'
+import Pie from '../Pie'
+import renderer from 'react-test-renderer'
+import { diffJson } from 'diff'
+
+let data = [{
+  "name": "Washington",
+  "population": 7694980
+}, {
+  "name": "Oregon",
+  "population": 2584160
+}, {
+  "name": "Minnesota",
+  "population": 6590667,
+  "color": {'r':223,'g':154,'b':20}
+}, {
+  "name": "Alaska",
+  "population": 7284698
+}]
+
+let options = {
+  margin: {
+    top: 20,
+    left: 20,
+    right: 20,
+    bottom: 20
+  },
+  width: 350,
+  height: 350,
+  color: '#2980B9',
+  r: 50,
+  R: 150,
+  legendPosition: 'topLeft',
+  animate: {
+    type: 'oneByOne',
+    duration: 200,
+    fillTransition: 3
+  },
+  label: {
+    fontFamily: 'Arial',
+    fontSize: 8,
+    fontWeight: true,
+    color: '#ECF0F1'
+  }
+}
+
+it('renders using options property correctly', () => {
+  let tree = renderer.create(
+    <Pie data={data}
+      options={options}/>
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+it('renders using flattened properties correctly', () => {
+  let tree = renderer.create(
+    <Pie data={data}
+      options={options}
+      r={10} />
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+it('contains expected diff between flattened vs non-flattened option usage', () => {
+  let treeUsingOptionsProp = renderer.create(
+    <Pie data={data}
+      options={options}/>
+  ).toJSON()
+
+  let treeUsingFlattenedProps = renderer.create(
+    <Pie data={data}
+      options={options}
+    r={10}/>
+  ).toJSON()
+
+  let jsonDiff = diffJson(treeUsingOptionsProp, treeUsingFlattenedProps)
+
+  const expectedRemoveCount = 4
+  const expectedAddCount = 4
+  var actualRemoveCount = 0
+  var actualAddCount = 0
+
+  jsonDiff.forEach((part) => {
+    if (part.removed && part.value.trim()
+          === '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 50 50 0 0 0 NaN NaN Z ",') {
+      actualRemoveCount++
+    }
+    if (part.added && part.value.trim()
+          === '"d": "M NaN NaN A 150 150 0 0 1 NaN NaN L NaN NaN A 10 10 0 0 0 NaN NaN Z ",') {
+      actualAddCount++
+    }
+  })
+  expect(actualRemoveCount).toBe(expectedRemoveCount)
+  expect(actualAddCount).toBe(expectedAddCount)
+
+})