Merge pull request #173 from Abhinandan-Kushwaha/abhi

Wrote snapshot tests for 6 bar, 4 line and 4 pie charts

App.js

@@ -2,9 +2,21 @@ import React, {useEffect, useState} from 'react';
 import {ScrollView, TouchableOpacity} from 'react-native';
 import {Alert} from 'react-native';
 import {View, Text, StyleSheet} from 'react-native';
-import {MyPattern} from './src/pattern';
 import {BarChart, LineChart, PieChart} from './src';
 import {Path, Pattern} from 'react-native-svg';
+import BarWithGradient from './examples/BarChart/BarWithGradient';
+import CappedBars from './examples/BarChart/CappedBars';
+import RoundStackBar from './examples/BarChart/RoundStackBar';
+import SimpleBarAnimated from './examples/BarChart/SimpleBarAnimated';
+import SimpleBlueBars from './examples/BarChart/SimpleBlueBars';
+import AnimatedArea from './examples/LineChart/AnimatedArea';
+import AreaTwo from './examples/LineChart/AreaTwo';
+import LineChartTwo from './examples/LineChart/LineChartTwo';
+import SimpleBlueLine from './examples/LineChart/SimpleBlueLine';
+import ProgressPie from './examples/PieChart/ProgressPie';
+import SimplePie from './examples/PieChart/SimplePie';
+import SplitPie from './examples/PieChart/SplitPie';
+import ThreeDPie from './examples/PieChart/ThreeDPie';
 
 const App = () => {
   const [toggle, setToggle] = useState(true);
@@ -982,7 +994,21 @@ const App = () => {
         // backgroundColor: '#1C1C1C',
       }}>
       {/* <PieChart data={llData}/> */}
-      <LineChart data={drata} yAxisOffset={100} />
+      {/* <BarThreeD/> */}
+      {/* <BarWithGradient /> */}
+      {/* <CappedBars /> */}
+      {/* <RoundStackBar /> */}
+      {/* <SimpleBarAnimated /> */}
+      {/* <SimpleBlueBars /> */}
+      {/* <AnimatedArea /> */}
+      {/* <AreaTwo /> */}
+      {/* <LineChartTwo /> */}
+      {/* <SimpleBlueLine /> */}
+      {/* <ProgressPie /> */}
+      {/* <SimplePie /> */}
+      {/* <SplitPie /> */}
+      {/* <ThreeDPie /> */}
+      <LineChart data={drata} yAxisOffset={120} />
       {/* <LineChart
         areaChart
         curved

__tests__/App-test.js

@@ -1,14 +0,0 @@
-/**
- * @format
- */
-
-import 'react-native';
-import React from 'react';
-import App from '../App';
-
-// Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
-
-it('renders correctly', () => {
-  renderer.create(<App />);
-});

__tests__/BarChart.test.js

@@ -0,0 +1,45 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import BarThreeD from '../examples/BarChart/BarThreeD';
+import BarWithGradient from '../examples/BarChart/BarWithGradient';
+import CappedBars from '../examples/BarChart/CappedBars';
+import RoundStackBar from '../examples/BarChart/RoundStackBar';
+import SimpleBarAnimated from '../examples/BarChart/SimpleBarAnimated';
+import SimpleBlueBars from '../examples/BarChart/SimpleBlueBars';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders 3D bar chart correctly', () => {
+  const tree = renderer.create(<BarThreeD />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders gradient bar chart correctly', () => {
+  const tree = renderer.create(<BarWithGradient />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders capped bar chart correctly', () => {
+  const tree = renderer.create(<CappedBars />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders rounded stack bar chart correctly', () => {
+  const tree = renderer.create(<RoundStackBar />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders simple animated bar chart correctly', () => {
+  const tree = renderer.create(<SimpleBarAnimated />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders alternate blue and gray bar chart correctly', () => {
+  const tree = renderer.create(<SimpleBlueBars />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/LineChart.test.js

@@ -0,0 +1,33 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import AnimatedArea from '../examples/LineChart/AnimatedArea';
+import AreaTwo from '../examples/LineChart/AreaTwo';
+import LineChartTwo from '../examples/LineChart/LineChartTwo';
+import SimpleBlueLine from '../examples/LineChart/SimpleBlueLine';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders animated area chart correctly', () => {
+  const tree = renderer.create(<AnimatedArea />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders 2 area chart correctly', () => {
+  const tree = renderer.create(<AreaTwo />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders 2 line chart correctly', () => {
+  const tree = renderer.create(<LineChartTwo />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders blue line chart correctly', () => {
+  const tree = renderer.create(<SimpleBlueLine />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

__tests__/PieChart.test.js

@@ -0,0 +1,33 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import ProgressPie from '../examples/PieChart/ProgressPie';
+import SimplePie from '../examples/PieChart/SimplePie';
+import SplitPie from '../examples/PieChart/SplitPie';
+import ThreeDPie from '../examples/PieChart/ThreeDPie';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders progress pie chart correctly', () => {
+  const tree = renderer.create(<ProgressPie />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders simple pie chart correctly', () => {
+  const tree = renderer.create(<SimplePie />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders split pie chart correctly', () => {
+  const tree = renderer.create(<SplitPie />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders #D pie chart correctly', () => {
+  const tree = renderer.create(<ThreeDPie />).toJSON();
+  expect(tree).toMatchSnapshot();
+});

examples/BarChart/BarThreeD.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {BarChart} from '../../src/BarChart';
 
-const BarWithGradient = () => {
+const BarThreeD = () => {
   const barData = [
     {
       value: 230,
@@ -58,4 +58,4 @@ const BarWithGradient = () => {
   );
 };
 
-export default BarWithGradient;
+export default BarThreeD;

examples/BarChart/CappedBars.js

@@ -15,7 +15,7 @@ const CappedBars = () => {
         data={data}
         barWidth={35}
         cappedBars
-        capColor={'rgba(78, 0, 142)'}
+        capColor={'rgb(78, 0, 142)'}
         capThickness={4}
         showGradient
         gradientColor={'rgba(200, 100, 244,0.8)'}

examples/BarChart/SimpleBarAnimated.js

@@ -2,7 +2,7 @@ import {BarChart} from '../../src/BarChart';
 import React from 'react';
 import {View} from 'react-native';
 
-const SimpleBarAnimation = () => {
+const SimpleBarAnimated = () => {
   const barData = [
     {value: 230, label: 'Jan', frontColor: '#4ABFF4'},
     {value: 180, label: 'Feb', frontColor: '#79C3DB'},
@@ -24,4 +24,4 @@ const SimpleBarAnimation = () => {
   );
 };
 
-export default SimpleBarAnimation;
+export default SimpleBarAnimated;

examples/PieChart/SplitPie.js

@@ -5,7 +5,7 @@ const SplitPie = () => {
   const pieData = [
     {value: 54, color: '#177AD5'},
     {value: 40, color: '#79D2DE'},
-    {value: 20, color: '#ED6665', shiftX: 28, shiftY: -18},
+    {value: 20, color: '#ED6665', shiftX: -10, shiftY: -18},
   ];
   return <PieChart data={pieData} />;
 };

examples/PieChart/ThreeDPie.js

@@ -4,9 +4,9 @@ import {PieChart} from '../../src/PieChart';
 
 const ThreeDPie = () => {
   const pieData = [
-    {value: 54, color: '#177AD5', text: '54%'},
-    {value: 40, color: '#79D2DE', text: '30%'},
-    {value: 20, color: '#ED6665', text: '26%'},
+    {value: 54, color: '#177AD5'},
+    {value: 40, color: '#79D2DE'},
+    {value: 20, color: '#ED6665'},
   ];
 
   return (
@@ -14,7 +14,9 @@ const ThreeDPie = () => {
       <PieChart
         donut
         isThreeD
+        shadow
         showText
+        showValuesAsLabels
         innerCircleBorderWidth={6}
         innerCircleBorderColor="lightgray"
         shiftInnerCenterX={-10}

jest.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  preset: 'react-native',
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.ts?$': 'ts-jest',
+  },
+  transformIgnorePatterns: [
+    '<rootDir>/node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)',
+  ],
+};

package.json

@@ -41,7 +41,8 @@
     "eslint": "^7.31.0",
     "jest": "^27.0.6",
     "metro-react-native-babel-preset": "^0.66.2",
-    "react-test-renderer": "17.0.1"
+    "react-test-renderer": "17.0.1",
+    "ts-jest": "^27.1.4"
   },
   "peerDependencies": {
     "react": "*",
@@ -57,8 +58,5 @@
     "donut",
     "area",
     "line"
-  ],
-  "jest": {
-    "preset": "react-native"
-  }
+  ]
 }