feat: add comprehensive test coverage, testing infrastructure, and example improvements

- Add test reporting with jest-html-reporter and coverage collection
- Implement 100% code coverage across all source files with 24 tests
- Add test setup file with jsdom environment configuration
- Create comprehensive test suite covering:
  * useFlutterwave hook with multiple payment scenarios
  * FlutterWaveButton component with various configurations
  * useFWScript loading mechanism with retry logic and error handling
  * closePaymentModal functionality
  * Parameter validation and edge cases
- Add isolated loading state test for script initialization
- Update .babelrc.js with @babel/preset-react for JSX support
- Update jest.config.js with proper test patterns and coverage exclusions
- Update .gitignore to exclude test reports and coverage directories
- Add jest-html-reporter and identity-obj-proxy to dev dependencies
- Modernize example app with:
  * Updated App.js with dynamic form configuration
  * Professional gradient styling and responsive design
  * Three payment integration methods demonstration
  * Comprehensive README with test credentials and setup instructions
  * Updated example package dependencies

Author: bajoski34

.babelrc.js

@@ -8,6 +8,7 @@ module.exports = {
         },
       },
     ],
+    '@babel/preset-react',
     '@babel/preset-typescript',
   ],
 

.gitignore

@@ -22,6 +22,7 @@ lib-cov
 # Coverage directory used by tools like istanbul
 coverage
 *.lcov
+test-report/
 
 # nyc test coverage
 .nyc_output

example/README.md

@@ -1,68 +1,104 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# Flutterwave React v3 Example
 
-## Available Scripts
+This example demonstrates how to integrate Flutterwave payment gateway into your React application using the `flutterwave-react-v3` package.
 
-In the project directory, you can run:
+## Features Demonstrated
 
-### `yarn start`
+✅ **Three Payment Integration Methods:**
+- Custom button with `useFlutterwave` hook
+- Pre-built `FlutterWaveButton` component
+- Custom styled payment buttons
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+✅ **Real-time Configuration:**
+- Dynamic amount input
+- Customer information management
+- Live payment preview
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+✅ **Modern UI/UX:**
+- Responsive design
+- Beautiful gradient backgrounds
+- Interactive hover effects
+- Mobile-friendly layout
 
-### `yarn test`
+## Getting Started
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+### Prerequisites
 
-### `yarn build`
+- Node.js (v14 or higher)
+- npm or yarn
+- Flutterwave account ([Sign up here](https://flutterwave.com))
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Installation
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+1. Install dependencies:
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+npm install
+# or
+yarn install
+```
 
-### `yarn eject`
+2. Update your Flutterwave public key in `src/App.js`:
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+```javascript
+const config = {
+  public_key: "YOUR_FLUTTERWAVE_PUBLIC_KEY", // Replace with your key
+  // ... other config
+};
+```
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+### Running the Example
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+```bash
+npm start
+# or
+yarn start
+```
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-## Learn More
+## Test Credentials
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+For testing purposes, use these Flutterwave test card details:
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+- **Card Number:** 5531 8866 5214 2950
+- **CVV:** Any 3 digits
+- **Expiry:** Any future date
+- **PIN:** 3310
+- **OTP:** 12345
 
-### Code Splitting
+## Package Information
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+This example uses `flutterwave-react-v3` - the official Flutterwave React package with:
 
-### Analyzing the Bundle Size
+- ✅ 100% Test Coverage
+- ✅ TypeScript Support
+- ✅ React 19 Compatible
+- ✅ Multiple Payment Options
+- ✅ Comprehensive Documentation
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+## Learn More
+
+- [Flutterwave Documentation](https://developer.flutterwave.com/docs)
+- [React Documentation](https://react.dev)
+- [Package Repository](https://github.com/Flutterwave/React-v3)
+
+## Available Scripts
 
-### Making a Progressive Web App
+### `npm start`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+Runs the app in development mode at [http://localhost:3000](http://localhost:3000).
 
-### Advanced Configuration
+### `npm test`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+Launches the test runner in interactive watch mode.
 
-### Deployment
+### `npm run build`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+Builds the app for production to the `build` folder.
 
-### `yarn build` fails to minify
+## Support
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+For issues or questions:
+- [GitHub Issues](https://github.com/Flutterwave/React-v3/issues)
+- [Flutterwave Support](https://support.flutterwave.com)