familysync/apps/pwa/src/components/SyncStateToast.test.tsx

/**
 * SyncStateToast tests — Task 2 (TDD RED → GREEN)
 *
 * Covers all states from UI-SPEC §SyncStateToast:
 *   - pending: "Syncing…" + spinner role="status"
 *   - done: "Saved" + Check icon, auto-dismiss after 2s, invalidates ['events']
 *   - failed (generic): "Didn't save. Try again." role="alert", persists with dismiss button
 *   - failed (conflict/412): conflict copy, invalidates ['events']
 *   - dead: "Not saved. Check your connection." role="alert"
 *   - refetchInterval active only while pending
 *   - renders nothing when lastSyncedUid is null
 */

import 'temporal-polyfill/global'
import React from 'react'
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
import { render, screen, waitFor, act, fireEvent } from '@testing-library/react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { SyncStateToast } from './SyncStateToast.js'

// ── Module mocks ──────────────────────────────────────────────────────────────
// vi.hoisted() required for variables referenced inside vi.mock() factories (D-03-04-hoisting)

const {
  mockLastSyncedUid,
  mockSetLastSyncedUid,
  mockFetchSyncStatus,
} = vi.hoisted(() => ({
  mockLastSyncedUid: { value: 'test-uid-123' as string | null },
  mockSetLastSyncedUid: vi.fn(),
  mockFetchSyncStatus: vi.fn(),
}))

vi.mock('../store/calendarStore.js', () => ({
  useCalendarStore: (selector: (s: Record<string, unknown>) => unknown) => {
    const state = {
      lastSyncedUid: mockLastSyncedUid.value,
      setLastSyncedUid: mockSetLastSyncedUid,
    }
    return selector(state)
  },
}))

vi.mock('../api/client.js', () => ({
  fetchSyncStatus: mockFetchSyncStatus,
}))

// ── Helpers ───────────────────────────────────────────────────────────────────

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  })
}

function renderToast(queryClient: QueryClient) {
  return render(
    <QueryClientProvider client={queryClient}>
      <SyncStateToast />
    </QueryClientProvider>,
  )
}

// ── Tests ─────────────────────────────────────────────────────────────────────

describe('SyncStateToast', () => {
  let queryClient: QueryClient

  beforeEach(() => {
    vi.clearAllMocks()
    queryClient = makeQueryClient()
    mockLastSyncedUid.value = 'test-uid-123'
  })

  afterEach(() => {
    vi.useRealTimers()
  })

  it('renders nothing when lastSyncedUid is null', () => {
    mockLastSyncedUid.value = null
    const { container } = renderToast(queryClient)
    expect(container.firstChild).toBeNull()
  })

  it('pending: renders "Syncing…" with role="status"', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'pending' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByRole('status')).toBeInTheDocument()
      expect(screen.getByText('Syncing…')).toBeInTheDocument()
    }, { timeout: 3000 })
  })

  it('done: renders "Saved"', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'done' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByText('Saved')).toBeInTheDocument()
    }, { timeout: 3000 })
  })

  it('done: calls queryClient.invalidateQueries for ["events"]', async () => {
    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'done' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByText('Saved')).toBeInTheDocument()
    }, { timeout: 3000 })

    expect(invalidateSpy).toHaveBeenCalledWith(
      expect.objectContaining({ queryKey: ['events'] }),
    )
  })

  it('done: auto-dismisses after 2s via setLastSyncedUid(null)', async () => {
    vi.useFakeTimers({ shouldAdvanceTime: true })
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'done' })

    renderToast(queryClient)

    // Wait for the "Saved" state (real timer resolution happens via shouldAdvanceTime)
    await act(async () => {
      await vi.runAllTimersAsync()
    })

    expect(mockSetLastSyncedUid).toHaveBeenCalledWith(null)
  })

  it('failed (generic): renders "Didn\'t save. Try again." with role="alert"', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'failed' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByRole('alert')).toBeInTheDocument()
      expect(screen.getByText("Didn't save. Try again.")).toBeInTheDocument()
    }, { timeout: 3000 })
  })

  it('failed (generic): persists and has a dismiss button', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'failed' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByRole('alert')).toBeInTheDocument()
    }, { timeout: 3000 })

    // Should have a dismiss button
    const dismissBtn = screen.getByRole('button', { name: /dismiss/i })
    expect(dismissBtn).toBeInTheDocument()
  })

  it('failed (conflict/412): renders conflict copy and invalidates ["events"]', async () => {
    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
    mockFetchSyncStatus.mockResolvedValue({
      uid: 'test-uid-123',
      status: 'failed',
      error: '412 Conflict',
    })

    renderToast(queryClient)

    await waitFor(() => {
      expect(
        screen.getByText('This event changed elsewhere — review the latest version'),
      ).toBeInTheDocument()
    }, { timeout: 3000 })

    expect(invalidateSpy).toHaveBeenCalledWith(
      expect.objectContaining({ queryKey: ['events'] }),
    )
  })

  it('dead: renders "Not saved. Check your connection." with role="alert"', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'dead' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByRole('alert')).toBeInTheDocument()
      expect(screen.getByText('Not saved. Check your connection.')).toBeInTheDocument()
    }, { timeout: 3000 })
  })

  it('refetchInterval is active (3000ms) while pending', async () => {
    let callCount = 0
    mockFetchSyncStatus.mockImplementation(() => {
      callCount++
      return Promise.resolve({ uid: 'test-uid-123', status: 'pending' })
    })

    vi.useFakeTimers({ shouldAdvanceTime: true })
    renderToast(queryClient)

    // Wait for first fetch
    await act(async () => {
      await vi.advanceTimersByTimeAsync(100)
    })
    const countAfterFirst = callCount
    expect(countAfterFirst).toBeGreaterThanOrEqual(1)

    // Advance 3s to trigger refetch
    await act(async () => {
      await vi.advanceTimersByTimeAsync(3100)
    })

    expect(callCount).toBeGreaterThan(countAfterFirst)
  })

  it('dismiss button on failed toast calls setLastSyncedUid(null)', async () => {
    mockFetchSyncStatus.mockResolvedValue({ uid: 'test-uid-123', status: 'failed' })

    renderToast(queryClient)

    await waitFor(() => {
      expect(screen.getByRole('alert')).toBeInTheDocument()
    }, { timeout: 3000 })

    const dismissBtn = screen.getByRole('button', { name: /dismiss/i })
    fireEvent.click(dismissBtn)

    expect(mockSetLastSyncedUid).toHaveBeenCalledWith(null)
  })
})