HighlightPostSidebarWidget.spec.tsx

import React from 'react';
import {
  act,
  fireEvent,
  render,
  screen,
  waitFor,
} from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { HighlightPostSidebarWidget } from './HighlightPostSidebarWidget';
import { useLogContext } from '../../../contexts/LogContext';
import { gqlClient } from '../../../graphql/common';
import { ONE_HOUR } from '../../../lib/time';
import { useAnonymousPostExperience } from '../../../hooks/post/useAnonymousPostExperience';

jest.mock('../../../lib/constants', () => ({
  webappUrl: '/',
  isDevelopment: false,
}));

jest.mock('../../../contexts/LogContext');
jest.mock('../../../hooks/post/useAnonymousPostExperience');
jest.mock('../../../graphql/common', () => ({
  gqlClient: {
    request: jest.fn(),
  },
}));

const mockUseLogContext = jest.mocked(useLogContext);
const mockUseAnonymousPostExperience = jest.mocked(useAnonymousPostExperience);
const mockGqlRequest = jest.mocked(gqlClient.request);

const buildHighlight = (id: string, headline: string, hoursAgo = 1) => ({
  id,
  channel: 'agents',
  headline,
  highlightedAt: new Date(Date.now() - hoursAgo * ONE_HOUR).toISOString(),
  post: {
    id: `post-${id}`,
    commentsPermalink: `/posts/post-${id}`,
  },
});

const buildResponse = (highlights: ReturnType<typeof buildHighlight>[]) => ({
  majorHeadlines: {
    edges: highlights.map((node) => ({ node, cursor: node.id })),
    pageInfo: { hasNextPage: false, endCursor: null },
  },
});

const renderWidget = () => {
  const client = new QueryClient({
    defaultOptions: { queries: { retry: false, gcTime: 0 } },
  });
  return render(
    <QueryClientProvider client={client}>
      <HighlightPostSidebarWidget />
    </QueryClientProvider>,
  );
};

describe('HighlightPostSidebarWidget', () => {
  const logEvent = jest.fn();

  beforeEach(() => {
    jest.clearAllMocks();
    mockGqlRequest.mockReset();
    mockUseAnonymousPostExperience.mockReturnValue({
      isAnonPostExperience: false,
      isPostPageExperience: true,
    });
    mockUseLogContext.mockReturnValue({
      logEvent,
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } as any);
  });

  afterEach(() => {
    jest.useRealTimers();
  });

  it('renders title and the first headline when query resolves', async () => {
    mockGqlRequest.mockResolvedValue(
      buildResponse([
        buildHighlight('h1', 'The first highlight'),
        buildHighlight('h2', 'The second highlight'),
      ]),
    );

    renderWidget();

    expect(await screen.findByText('Happening Now')).toBeInTheDocument();
    expect(screen.getByText('The first highlight')).toBeInTheDocument();
    expect(screen.queryByText('The second highlight')).not.toBeInTheDocument();
  });

  it('returns null when no highlights are returned', async () => {
    mockGqlRequest.mockResolvedValue(buildResponse([]));

    renderWidget();

    await waitFor(() => expect(mockGqlRequest).toHaveBeenCalled());
    expect(screen.queryByText('Happening Now')).not.toBeInTheDocument();
    expect(
      screen.queryByTestId('postPageHighlightWidget'),
    ).not.toBeInTheDocument();
  });

  it('filters out highlights older than 24 hours', async () => {
    mockGqlRequest.mockResolvedValue(
      buildResponse([
        buildHighlight('fresh', 'Fresh headline', 2),
        buildHighlight('stale', 'Stale headline', 30),
      ]),
    );

    renderWidget();

    expect(await screen.findByText('Fresh headline')).toBeInTheDocument();
    expect(screen.queryByText('Stale headline')).not.toBeInTheDocument();
  });

  it('hides the widget when all highlights are older than 24 hours', async () => {
    mockGqlRequest.mockResolvedValue(
      buildResponse([
        buildHighlight('stale1', 'Stale one', 25),
        buildHighlight('stale2', 'Stale two', 48),
      ]),
    );

    renderWidget();

    await waitFor(() => expect(mockGqlRequest).toHaveBeenCalled());
    expect(screen.queryByText('Happening Now')).not.toBeInTheDocument();
    expect(
      screen.queryByTestId('postPageHighlightWidget'),
    ).not.toBeInTheDocument();
  });

  it('renders for anonymous users by default', async () => {
    mockUseAnonymousPostExperience.mockReturnValue({
      isAnonPostExperience: true,
      isPostPageExperience: true,
    });
    mockGqlRequest.mockResolvedValue(
      buildResponse([buildHighlight('h1', 'Anonymous headline')]),
    );

    renderWidget();

    expect(await screen.findByText('Anonymous headline')).toBeInTheDocument();
  });

  it('points "Read all" to /highlights with the first highlight id', async () => {
    mockGqlRequest.mockResolvedValue(
      buildResponse([buildHighlight('first', 'First headline')]),
    );

    renderWidget();

    const readAll = await screen.findByLabelText('Read all highlights');
    expect(readAll).toHaveAttribute('href', '/highlights?highlight=first');
  });

  it('rotates headlines after the interval', async () => {
    jest.useFakeTimers({ doNotFake: ['queueMicrotask'] });
    mockGqlRequest.mockResolvedValue(
      buildResponse([
        buildHighlight('h1', 'The first highlight'),
        buildHighlight('h2', 'The second highlight'),
      ]),
    );

    renderWidget();

    await act(async () => {
      await Promise.resolve();
    });

    await waitFor(() =>
      expect(screen.getByText('The first highlight')).toBeInTheDocument(),
    );

    await act(async () => {
      jest.advanceTimersByTime(6000);
    });
    await act(async () => {
      jest.advanceTimersByTime(500);
    });

    expect(screen.getByText('The second highlight')).toBeInTheDocument();
    expect(screen.queryByText('The first highlight')).not.toBeInTheDocument();
  });

  it('pauses rotation while hovering and resumes after unhover', async () => {
    jest.useFakeTimers({ doNotFake: ['queueMicrotask'] });
    mockGqlRequest.mockResolvedValue(
      buildResponse([
        buildHighlight('h1', 'The first highlight'),
        buildHighlight('h2', 'The second highlight'),
      ]),
    );

    renderWidget();

    await act(async () => {
      await Promise.resolve();
    });
    await waitFor(() =>
      expect(screen.getByText('The first highlight')).toBeInTheDocument(),
    );

    const widget = screen.getByTestId('postPageHighlightWidget');

    await act(async () => {
      fireEvent.mouseEnter(widget);
    });

    await act(async () => {
      jest.advanceTimersByTime(6000);
    });
    await act(async () => {
      jest.advanceTimersByTime(500);
    });

    expect(screen.getByText('The first highlight')).toBeInTheDocument();
    expect(screen.queryByText('The second highlight')).not.toBeInTheDocument();

    await act(async () => {
      fireEvent.mouseLeave(widget);
    });

    await act(async () => {
      jest.advanceTimersByTime(6000);
    });
    await act(async () => {
      jest.advanceTimersByTime(500);
    });

    expect(screen.getByText('The second highlight')).toBeInTheDocument();
    expect(screen.queryByText('The first highlight')).not.toBeInTheDocument();
  });

  it('logs an impression when highlights load', async () => {
    mockGqlRequest.mockResolvedValue(
      buildResponse([buildHighlight('h1', 'A headline')]),
    );

    renderWidget();

    await screen.findByText('Happening Now');

    await waitFor(() =>
      expect(logEvent).toHaveBeenCalledWith(
        expect.objectContaining({ event_name: 'impression' }),
      ),
    );
  });
});