refactor: adding react typescript with custom function

Author: ahnopologetic

tests/analyzeTypeScript.test.js

@@ -488,7 +488,7 @@ test.describe('analyzeTsFile', () => {
     // Sort events by line number for consistent ordering
     events.sort((a, b) => a.line - b.line);
 
-    assert.strictEqual(events.length, 8);
+    assert.strictEqual(events.length, 7);
 
     // Test PostHog event
     const posthogEvent = events.find(e => e.source === 'posthog');
@@ -595,4 +595,20 @@ test.describe('analyzeTsFile', () => {
       checkout_step: { type: 'number' }
     });
   });
+
+  test('should correctly analyze React TypeScript file with custom function', () => {
+    const reactFilePath = path.join(fixturesDir, 'typescript-react', 'main.tsx');
+    const program = createProgram(reactFilePath);
+    const events = analyzeTsFile(reactFilePath, program, 'tracker.track');
+
+    console.log({ events });
+    const trackEvent = events.find(e => e.source === 'custom');
+
+    assert.strictEqual(trackEvent.eventName, 'cart_update');
+    assert.strictEqual(trackEvent.functionName, 'trackCartUpdate');
+    assert.strictEqual(trackEvent.line, 81);
+    assert.deepStrictEqual(trackEvent.properties, {
+      cart_size: { type: 'number' }
+    });
+  });
 });

tests/fixtures/typescript-react/main.tsx

@@ -78,15 +78,10 @@ export const ShoppingCart: React.FC<CartProps> = ({ products }) => {
 
     // Tracking with custom event builder
     const trackCartUpdate = () => {
-        const event = buildStructEvent({
-            category: 'Cart',
-            action: 'Update',
-            label: 'Cart Contents Modified',
-            property: 'cart_size',
-            value: cartItems.length
+        tracker.track('cart_update', {
+            cart_size: cartItems.length
         });
-        tracker.track(event);
-    };
+    }
 
     return (
         <div className="shopping-cart">
@@ -95,7 +90,10 @@ export const ShoppingCart: React.FC<CartProps> = ({ products }) => {
             {products.map(product => (
                 <div key={product.id} className="product-item">
                     <span>{product.name} - ${product.price}</span>
-                    <button onClick={() => handleAddToCart(product)}>Add to Cart</button>
+                    <button onClick={() => {
+                        handleAddToCart(product);
+                        trackCartUpdate();
+                    }}>Add to Cart</button>
                 </div>
             ))}