feat(shared): track user hover card analytics

packages/shared/src/components/profile/ProfileTooltip.spec.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import type { TooltipProps } from '../tooltips/BaseTooltip';
+import { ProfileTooltip } from './ProfileTooltip';
+import { useLogContext } from '../../contexts/LogContext';
+import { LogEvent } from '../../lib/log';
+
+const mockSetQueryData = jest.fn();
+const mockLogEvent = jest.fn();
+const mockSimpleTooltipSpy = jest.fn();
+
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
+  useQueryClient: () => ({ setQueryData: mockSetQueryData }),
+  useQuery: () => ({ data: null, isLoading: false }),
+}));
+
+jest.mock('../../contexts/LogContext', () => ({
+  useLogContext: jest.fn(),
+}));
+
+jest.mock('../tooltips/SimpleTooltip', () => ({
+  SimpleTooltip: ({ children, ...props }: TooltipProps) => {
+    mockSimpleTooltipSpy(props);
+    return <div>{children}</div>;
+  },
+}));
+
+describe('ProfileTooltip', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useLogContext as jest.Mock).mockReturnValue({ logEvent: mockLogEvent });
+  });
+
+  it('should log hover user card event on show', () => {
+    render(
+      <ProfileTooltip userId="user-1">
+        <button type="button">User</button>
+      </ProfileTooltip>,
+    );
+
+    const [props] = mockSimpleTooltipSpy.mock.calls[0] as [TooltipProps];
+    const { onShow } = props;
+
+    act(() => {
+      onShow?.({} as never);
+    });
+
+    expect(mockLogEvent).toHaveBeenCalledWith({
+      event_name: LogEvent.HoverUserCard,
+      target_id: 'user-1',
+    });
+  });
+
+  it('should call custom tooltip onShow callback', () => {
+    const tooltipOnShow = jest.fn();
+
+    render(
+      <ProfileTooltip userId="user-2" tooltip={{ onShow: tooltipOnShow }}>
+        <button type="button">User</button>
+      </ProfileTooltip>,
+    );
+
+    const [props] = mockSimpleTooltipSpy.mock.calls[0] as [TooltipProps];
+    const { onShow } = props;
+    const instance = {} as never;
+
+    act(() => {
+      onShow?.(instance);
+    });
+
+    expect(tooltipOnShow).toHaveBeenCalledWith(instance);
+  });
+});

packages/shared/src/components/profile/ProfileTooltip.tsx

@@ -9,6 +9,8 @@ import { SimpleTooltip } from '../tooltips/SimpleTooltip';
 import type { MostReadTag, UserReadingRank } from '../../graphql/users';
 import { getUserShortInfo } from '../../graphql/users';
 import UserEntityCard from '../cards/entity/UserEntityCard';
+import { useLogContext } from '../../contexts/LogContext';
+import { LogEvent } from '../../lib/log';
 import { generateQueryKey, RequestKey } from '../../lib/query';
 
 export interface ProfileTooltipProps extends ProfileTooltipContentProps {
@@ -42,6 +44,7 @@ export function ProfileTooltip({
   onTooltipMouseLeave,
 }: Omit<ProfileTooltipProps, 'user'>): ReactElement {
   const query = useQueryClient();
+  const { logEvent } = useLogContext();
   const handler = useRef<() => void>();
   const [id, setId] = useState<string | undefined>(undefined);
   const { data, isLoading } = useQuery({
@@ -52,7 +55,7 @@ export function ProfileTooltip({
     enabled: !!id,
   });
 
-  const onShow = () => {
+  const handleShow = () => {
     if (!scrollingContainer) {
       return;
     }
@@ -124,14 +127,18 @@ export function ProfileTooltip({
       onTooltipMouseEnter || onTooltipMouseLeave ? [hoverPlugin] : undefined,
     ...tooltip,
     onShow: (instance) => {
+      logEvent({
+        event_name: LogEvent.HoverUserCard,
+        target_id: userId,
+      });
       if (id !== userId) {
         setId(userId);
       }
       if (typeof tooltip.onShow === 'function') {
         tooltip.onShow(instance);
         return;
       }
-      onShow();
+      handleShow();
     },
   };
 

packages/shared/src/lib/log.ts

@@ -297,6 +297,7 @@ export enum LogEvent {
   ProfileView = 'profile view',
   UpdateProfile = 'update profile',
   UpdateProfileImage = 'update profile image',
+  HoverUserCard = 'hover user card',
   // End Profile
   TranslatePost = 'translate post',
   // Start Credits