fix: type error accessing null object and added test case (#1620)

PostHog · Dec 19, 2024 · 142dad1 · 142dad1
1 parent 7424c35
commit 142dad1
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 6 deletions.
diff --git a/src/__tests__/heatmaps.test.ts b/src/__tests__/heatmaps.test.ts
@@ -89,6 +89,27 @@ describe('heatmaps', () => {
         expect(posthog.heatmaps!.getAndClearBuffer()).toBeDefined()
     })
 
+    it('should handle empty mouse moves', async () => {
+        posthog.heatmaps?.['_onMouseMove']?.(new Event('mousemove'))
+
+        jest.advanceTimersByTime(posthog.heatmaps!.flushIntervalMilliseconds + 1)
+
+        expect(beforeSendMock).toBeCalledTimes(1)
+        expect(beforeSendMock.mock.lastCall[0]).toMatchObject({
+            event: '$$heatmap',
+            properties: {
+                $heatmap_data: {
+                    'http://replaced/': [
+                        {
+                            target_fixed: false,
+                            type: 'mousemove',
+                        },
+                    ],
+                },
+            },
+        })
+    })
+
     it('should send rageclick events in the same area', async () => {
         posthog.heatmaps?.['_onClick']?.(createMockMouseEvent())
         posthog.heatmaps?.['_onClick']?.(createMockMouseEvent())
@@ -123,16 +144,24 @@ describe('heatmaps', () => {
     })
 
     it('should ignore clicks if they come from the toolbar', async () => {
+        const testElementToolbar = document.createElement('div')
+        testElementToolbar.id = '__POSTHOG_TOOLBAR__'
+
         posthog.heatmaps?.['_onClick']?.(
             createMockMouseEvent({
-                target: { id: '__POSTHOG_TOOLBAR__' } as Element,
+                target: testElementToolbar,
             })
         )
         expect(posthog.heatmaps?.['buffer']).toEqual(undefined)
 
+        const testElementClosest = document.createElement('div')
+        testElementClosest.closest = () => {
+            return {}
+        }
+
         posthog.heatmaps?.['_onClick']?.(
             createMockMouseEvent({
-                target: { closest: () => ({}) } as unknown as Element,
+                target: testElementClosest,
             })
         )
         expect(posthog.heatmaps?.['buffer']).toEqual(undefined)

diff --git a/src/heatmaps.ts b/src/heatmaps.ts
@@ -177,7 +177,7 @@ export class Heatmaps {
     }
 
     private _onMouseMove(e: Event): void {
-        if (isElementInToolbar(e.target as Element)) {
+        if (isElementInToolbar(e.target)) {
             return
         }
         clearTimeout(this._mouseMoveTimeout)

diff --git a/src/utils/element-utils.ts b/src/utils/element-utils.ts
@@ -1,8 +1,11 @@
 import { TOOLBAR_CONTAINER_CLASS, TOOLBAR_ID } from '../constants'
 
-export function isElementInToolbar(el: Element): boolean {
-    // NOTE: .closest is not supported in IE11 hence the operator check
-    return el.id === TOOLBAR_ID || !!el.closest?.('.' + TOOLBAR_CONTAINER_CLASS)
+export function isElementInToolbar(el: EventTarget | null): boolean {
+    if (el instanceof Element) {
+        // NOTE: .closest is not supported in IE11 hence the operator check
+        return el.id === TOOLBAR_ID || !!el.closest?.('.' + TOOLBAR_CONTAINER_CLASS)
+    }
+    return false
 }
 
 /*