Support-2399 : Removed Expo dependencies with native dependencies. Added test and test dependencies for ReactNativeFusionChart component.

Author: Rex

.npmignore

@@ -4,3 +4,6 @@
 assets/
 bin/
 node_modules/
+examples/
+testData/
+__tests__/

README.md

@@ -42,7 +42,7 @@ In bare React Native application you need to also install the expo-modules packa
 - Run the following command in your project
 
 ```bash
-$ npm install react-native-webview
+$ npm i react-native-webview @notifee/react-native @react-native-camera-roll/camera-roll react-native-fs react-native-share
 ```
 
 - After that install react-native-fusioncharts in your app

__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,142 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import React from 'react';
+import ReactNativeFusionCharts from '../src/FusionCharts.js';
+import { data } from '../testData/null_data.js';
+import { schema } from '../testData/null_schema.js';
+
+// Note: import explicitly to use the types shipped with jest.
+import { it } from '@jest/globals';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
+
+jest.mock('react-native-webview', () => {
+  const MockWebView = jest.requireActual('react-native').View;
+
+  return {
+    __esModule: true,
+    WebView: MockWebView,
+    default: MockWebView,
+  };
+});
+
+jest.mock('react-native-fs', () => ({
+  default: () => jest.fn() // or any mocked component instead of native view,
+}));
+
+jest.mock('@notifee/react-native', () => ({
+  default: () => jest.fn() // or any mocked component instead of native view,
+}));
+
+jest.mock('react-native-share', () => ({
+  default: () => jest.fn() // or any mocked component instead of native view,
+}));
+
+jest.mock('@react-native-camera-roll/camera-roll', () => ({
+  default: () => jest.fn() // or any mocked component instead of native view,
+}));
+
+
+it('Chart renders without crashing', () => {
+  const chartData = [
+    { label: "Venezuela", value: "250" },
+    { label: "Saudi", value: "260" },
+    { label: "Canada", value: "180" },
+    { label: "Iran", value: "140" },
+    { label: "Russia", value: "115" },
+    { label: "UAE", value: "100" },
+    { label: "US", value: "30" },
+    { label: "China", value: "30" },
+  ];
+  const chartConfig = {
+    type: "column2D",
+    width: "300",
+    height: "400",
+    dataFormat: "json",
+    dataSource: {
+      chart: {
+        caption: "Countries With Most Oil Reserves [2017-18]",
+        subCaption: "In MMbbl = One Million barrels",
+        xAxisName: "Country",
+        yAxisName: "Reserves (MMbbl)",
+        numberSuffix: "K",
+        theme: "fusion",
+        exportEnabled: 1 // to enable the export chart functionality
+      },
+      data: chartData
+    }
+  };
+  const { toJSON } = render(
+    <ReactNativeFusionCharts
+      chartConfig={chartConfig}
+    />);
+  expect(toJSON()).toMatchSnapshot(); // Check if the component renders correctly
+});
+
+
+it('TimeSeries chart renders without crashing', () => {
+  let startTime = performance.now();
+
+  const chartConfig = {
+    type: 'timeseries',
+    width: '100%',
+    height: '500',
+    dataFormat: 'json',
+    dataSource: {
+      chart: {},
+      data: null,
+      caption: {
+        text: "Pollution Report of Yatcha Street"
+      },
+      subcaption: {
+        text: "An industrial town"
+      },
+      yaxis: [{
+        plot: [{
+          value: "Pollution",
+          "connectnulldata": "true",
+          type: 'line'
+
+        }],
+        title: "Pollution Concentration (in ppm)",
+        min: "130",
+
+        referenceline: [{
+          label: "Controlled Temperature",
+          value: "150"
+        }]
+      }]
+    },
+    schemaJson: schema,
+    dataJson: data
+  };
+
+  const events = {
+    dataplotclick: (e, a) => {
+      alert(`You clicked on ${e.data.categoryLabel}`);
+    },
+    "rendered": (e, a) => {
+      let endTime = performance.now()
+
+      console.log(`Call to doSomething took ${endTime - startTime} milliseconds.`);
+    },
+    "referencelineclick": function (ev) {
+      alert('reference line clicked')
+    },
+  }
+  const modules = ['timeseries'];
+
+
+  const { toJSON } = render(
+    <ReactNativeFusionCharts
+      chartConfig={chartConfig}
+      events={events}
+      modules={modules}
+    />);
+  expect(toJSON()).toMatchSnapshot(); // Check if the component renders correctly
+});

__tests__/index.test.js

@@ -1,6 +1,6 @@
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ['module:@react-native/babel-preset'],
   };
 };

babel.config.js

@@ -0,0 +1,32 @@
+const path = require('path');
+const fs = require('fs');
+
+function replacePathsWithContents(obj) {
+    const promises = [];
+    function traverseAndReplace(obj) {
+        for (let key in obj) {
+            if (typeof obj[key] === 'string') {
+                const filePath = path.join(__dirname, obj[key]);
+                promises.push(
+                    new Promise((resolve, reject) => {
+                        fs.readFile(filePath, 'utf8', (err, data) => {
+                            if (err) {
+                                return reject(err);
+                            }
+                            obj[key] = data;
+                            resolve();
+                        });
+                    })
+                );
+            } else if (typeof obj[key] === 'object') {
+                traverseAndReplace(obj[key]);
+            }
+        }
+    }
+    traverseAndReplace(obj);
+    return Promise.all(promises).catch(err => {
+        console.error('Error reading file:', err);
+    });
+}
+
+module.exports = { replacePathsWithContents };

gulpUtil.js

@@ -1,17 +1,26 @@
 const rename = require('gulp-rename');
 const gulp = require('gulp');
 const removeFiles = require('gulp-remove-files');
+const fs = require('fs').promises;
+const merge = require('merge-stream');
+const { modules, scripts } = require('./src/FusionChartsModule.js');
+const { replacePathsWithContents } = require('./gulpUtil.js');
 
 const filePath = './src/modules/fusioncharts/';
+const inputFilePath = './src/modules/index.html';
+const outputFilePath = './src/modules/layout.js';
+const jsOutputFilePath = './src/modules/scripts.js';
+const modulesOutputFilePath = './src/modules/modules.js';
 
-gulp.task('default', async function () {
-    // rename
-    gulp.src(filePath + '*.js')
+// Task for renaming and removing files
+gulp.task('rename', function () {
+
+    const renameModuleStream = gulp.src(filePath + '*.js')
         .pipe(rename(function (path) {
             path.extname = '.fcscript';
         }))
         .pipe(gulp.dest(filePath));
-    
+
     // remove duplicates
     gulp.src(filePath + '*.js')
         .pipe(removeFiles());
@@ -22,7 +31,7 @@ gulp.task('default', async function () {
             path.extname = '.fcscript';
         }))
         .pipe(gulp.dest(filePath + 'maps/es/'));
-    
+
     // remove duplicates in maps folder
     gulp.src(filePath + 'maps/es/*.js')
         .pipe(removeFiles());
@@ -33,9 +42,45 @@ gulp.task('default', async function () {
             path.extname = '.fcscript';
         }))
         .pipe(gulp.dest(filePath + 'themes/'));
-    
+
     // remove duplicates in theme folder
     gulp.src(filePath + 'themes/*.js')
         .pipe(removeFiles());
 
+    return renameModuleStream
 });
+
+// Default task
+gulp.task('default', gulp.series('rename', async function (done) {
+    try {
+        // Read the content of index.html
+        const data = await fs.readFile(inputFilePath, 'utf8');
+
+        // Escape backticks and dollar signs to prevent issues in the template string
+        const escapedContent = data.replace(/`/g, '\\`').replace(/\$/g, '\\$');
+
+        // Prepare the JavaScript content
+        const outputContent = `export default \`${escapedContent}\`;`;
+
+        // Write the content to layout.js
+        await fs.writeFile(outputFilePath, outputContent);
+        console.log('layout.js created successfully!');
+
+        // Read Scripts and Modules and create a single output.js file
+        await replacePathsWithContents(scripts);
+        const jsOutputContent = `export default ${JSON.stringify(scripts)};`;
+        await fs.writeFile(jsOutputFilePath, jsOutputContent);
+        console.log('scripts.js created successfully!');
+
+        // Process modules
+        await replacePathsWithContents(modules);
+        const modulesOutputContent = `export default ${JSON.stringify(modules)};`;
+        await fs.writeFile(modulesOutputFilePath, modulesOutputContent);
+        console.log('modules.js created successfully!');
+
+    } catch (err) {
+        console.error('Error:', err);
+    } finally {
+        done(); // Ensure done is called even if an error occurs
+    }
+}));

gulpfile.js

@@ -0,0 +1 @@
+import '@testing-library/react-native/extend-expect';

jest-setup.js

@@ -0,0 +1,19 @@
+module.exports = {
+  verbose: true,
+  preset: 'react-native',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native' +
+      '|@react-native' +
+      '|@react-native-community' +
+      '|@react-navigation' +
+      '|react-navigation-tabs' +
+      '|react-native-splash-screen' +
+      '|react-native-screens' +
+      '|react-native-reanimated' +
+      '|react-native-webview' +
+      '|react-native-fs'+
+
+      ')/)',
+  ],
+};