diff --git a/src/__tests__/heatmaps.test.ts b/src/__tests__/heatmaps.test.ts index cb8955261..b8c08a4b8 100644 --- 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 index e1e69a270..8948fe0ab 100644 --- 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 index 5567cd696..f784ff8aa 100644 --- 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 } /*