Refactor sample app structure and add mock for mParticle integration

Author: thomson-t

.gitignore

@@ -82,3 +82,6 @@ package-lock.json
 
 # TypeScript build output
 lib/
+
+# Development package
+*.tgz

package.json

@@ -11,6 +11,8 @@
     "build": "tsc",
     "clean": "rm -rf lib",
     "prepare": "yarn clean && yarn build",
+    "dev:pack": "yarn build && yarn pack --filename react-native-mparticle-latest.tgz",
+    "dev:link": "yarn build && yarn pack --filename react-native-mparticle-latest.tgz && cd sample && yarn install && cd ..",
     "test": "./node_modules/standard/bin/cmd.js",
     "fix": "./node_modules/standard/bin/cmd.js --fix"
   },

sample/README.md

@@ -0,0 +1,144 @@
+# mParticle React Native Sample App
+
+This sample app demonstrates how to integrate and use the mParticle React Native SDK.
+
+## Prerequisites
+
+- Node.js (>= 18)
+- Yarn package manager
+- React Native development environment set up
+- For iOS: Xcode and iOS Simulator
+- For Android: Android Studio and Android SDK
+
+## Setup Instructions
+
+### 1. Configure mParticle Keys
+
+Before running the sample app, you need to replace the placeholder mParticle keys with your actual mParticle app credentials.
+
+#### iOS Configuration
+
+Edit `ios/MParticleSample/AppDelegate.mm` and replace the placeholder keys:
+
+```objc
+MParticleOptions *mParticleOptions = [MParticleOptions optionsWithKey:@"YOUR_IOS_API_KEY"
+                                                               secret:@"YOUR_IOS_SECRET_KEY"];
+```
+
+#### Android Configuration
+
+Edit `android/app/src/main/java/com/mparticlesample/MainApplication.kt` and replace the placeholder keys:
+
+```kotlin
+val options = MParticleOptions.builder(this)
+  .credentials("YOUR_ANDROID_API_KEY", "YOUR_ANDROID_SECRET_KEY")
+  .logLevel(MParticle.LogLevel.VERBOSE)
+  .identify(identityRequest.build())
+  .build()
+```
+
+### 2. Build and Install the Package
+
+From the **root directory**, run the following commands:
+
+```bash
+# Build the TypeScript source and create a package
+yarn dev:pack
+
+# Install dependencies in the sample app
+cd sample
+yarn install
+```
+
+Alternatively, you can use the combined command from the root directory:
+
+```bash
+# Build, pack, and install in sample directory in one command
+yarn dev:link
+```
+
+### 3. Install iOS Dependencies (iOS only)
+
+```bash
+cd sample/ios
+pod install
+```
+
+## Running the Sample App
+
+### iOS
+
+From the **sample directory**:
+
+```bash
+yarn ios
+```
+
+### Android
+
+From the **sample directory**:
+
+```bash
+yarn android
+```
+
+## Development Workflow
+
+When making changes to the mParticle React Native SDK:
+
+1. Make your changes to the SDK source code
+2. Rebuild and reinstall the package:
+
+    ```bash
+    # From root directory
+    yarn dev:link
+    ```
+
+3. Restart the sample app to see your changes
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Metro bundler cache issues**: Clear the cache with:
+
+   ```bash
+   cd sample
+   npx react-native start --reset-cache
+   ```
+
+2. **iOS build issues**: Clean and rebuild:
+
+   ```bash
+   cd sample/ios
+   xcodebuild clean
+   cd ..
+   yarn ios
+   ```
+
+3. **Android build issues**: Clean and rebuild:
+
+   ```bash
+   cd sample/android
+   ./gradlew clean
+   cd ..
+   yarn android
+   ```
+
+4. **Package not found**: Make sure you've run `yarn dev:pack` or `yarn dev:link` from the root directory
+
+## Available Scripts
+
+From the sample directory:
+
+- `yarn start` - Start the Metro bundler
+- `yarn ios` - Run on iOS simulator
+- `yarn android` - Run on Android emulator
+- `yarn lint` - Run ESLint
+- `yarn test` - Run Jest tests
+
+## Additional Resources
+
+- [mParticle Documentation](https://docs.mparticle.com/)
+- [React Native mParticle SDK Documentation](https://github.com/mParticle/react-native-mparticle)
+- [React Native Documentation](https://reactnative.dev/)

sample/__mocks__/react-native-mparticle.js

@@ -0,0 +1,184 @@
+/* eslint-disable */
+/**
+ * Mock for react-native-mparticle
+ * This mock provides a simple API that mimics the essential functionality
+ */
+
+// Mock classes
+class User {
+  constructor(userId) {
+    this.userId = userId;
+  }
+  
+  getMpid() {
+    return this.userId;
+  }
+  
+  setUserAttribute() {}
+  getUserAttributes(callback) {
+    callback({ testAttribute: 'testValue' });
+  }
+  setUserTag() {}
+  incrementUserAttribute() {}
+  removeUserAttribute() {}
+  getUserIdentities(callback) {
+    callback({ email: '[email protected]' });
+  }
+  getFirstSeen(callback) {
+    callback(Date.now() - 86400000);
+  }
+  getLastSeen(callback) {
+    callback(Date.now());
+  }
+}
+
+class IdentityRequest {
+  setEmail(email) {
+    this.email = email;
+    return this;
+  }
+  
+  setCustomerID(customerId) {
+    this.customerId = customerId;
+    return this;
+  }
+  
+  setUserIdentity(userIdentity, identityType) {
+    this[identityType] = userIdentity;
+    return this;
+  }
+}
+
+class Identity {
+  static getCurrentUser(completion) {
+    var currentUser = new User('mockUserId123');
+    completion(currentUser);
+  }
+  
+  static login(request, completion) {
+    completion(null, 'mockUserId123', 'mockPreviousUserId456');
+  }
+  
+  static logout(request, completion) {
+    completion(null, 'mockUserId123');
+  }
+  
+  static identify(request, completion) {
+    completion(null, 'mockUserId123', 'mockPreviousUserId456');
+  }
+  
+  static modify(request, completion) {
+    completion(null, 'mockUserId123', 'mockPreviousUserId456');
+  }
+  
+  static aliasUsers(request, completion) {
+    completion(true, null);
+  }
+}
+
+class Product {
+  constructor(name, sku, price, quantity = 1) {
+    this.name = name;
+    this.sku = sku;
+    this.price = price;
+    this.quantity = quantity;
+  }
+}
+
+class TransactionAttributes {
+  constructor(transactionId) {
+    this.transactionId = transactionId;
+  }
+}
+
+class CommerceEvent {
+  static createProductActionEvent(productActionType, products, transactionAttributes) {
+    return new CommerceEvent();
+  }
+}
+
+class AliasRequest {
+  sourceMpid(mpid) {
+    this.sourceMpid = mpid;
+    return this;
+  }
+  
+  destinationMpid(mpid) {
+    this.destinationMpid = mpid;
+    return this;
+  }
+  
+  startTime(time) {
+    this.startTime = time;
+    return this;
+  }
+  
+  endTime(time) {
+    this.endTime = time;
+    return this;
+  }
+}
+
+// Mock Rokt
+const Rokt = {
+  selectPlacements: () => Promise.resolve()
+};
+
+// Constants
+const EventType = {
+  Navigation: 1,
+  Location: 2,
+  Search: 3,
+  Transaction: 4,
+  UserContent: 5,
+  UserPreference: 6,
+  Social: 7,
+  Other: 8,
+  Media: 9
+};
+
+const UserIdentityType = {
+  Email: 7,
+  CustomerId: 1,
+  Alias: 8
+};
+
+const ProductActionType = {
+  AddToCart: 1,
+  RemoveFromCart: 2,
+  Checkout: 3,
+  Purchase: 7
+};
+
+// Main mock object
+const MParticle = {
+  // Classes
+  User,
+  IdentityRequest,
+  Identity,
+  Product,
+  TransactionAttributes,
+  CommerceEvent,
+  AliasRequest,
+  Rokt,
+  
+  // Constants
+  EventType,
+  UserIdentityType,
+  ProductActionType,
+  
+  // Methods
+  logEvent: () => {},
+  logCommerceEvent: () => {},
+  logPushRegistration: () => {},
+  getSession: (callback) => callback({ sessionId: 'mockSessionId123' }),
+  setOptOut: () => {},
+  getOptOut: (callback) => callback(false),
+  isKitActive: (kitId, callback) => callback(true),
+  getAttributions: (callback) => callback({ attributionResults: 'mock results' }),
+  upload: () => {},
+  setUploadInterval: () => {},
+  setLocation: () => {}
+};
+
+module.exports = MParticle; 

sample/__tests__/index.ios.js

@@ -1,12 +1,21 @@
 import 'react-native';
 import React from 'react';
-import Index from '../index.android.js';
+import Index from '../index.js';
 
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 
+// Use fake timers to avoid async issues
+jest.useFakeTimers();
+
 it('renders correctly', () => {
   const tree = renderer.create(
     <Index />
   );
+
+  // Clean up any timers that might be running
+  jest.runOnlyPendingTimers();
+  jest.clearAllTimers();
+
+  expect(tree.toJSON()).toBeTruthy();
 });