workavia-calendar-front/__test__/features/Events/ImportAlert.test.tsx

import ImportAlert from '@/features/Events/ImportAlert'
import { fireEvent, screen } from '@testing-library/react'
import { renderWithProviders } from '../../utils/Renderwithproviders'

// Mock the ErrorSnackbar component since we want to test ImportAlert logic,
// but we can also test integration if we don't mock it.
// Given ImportAlert uses EventErrorSnackbar which uses MUI Snackbar,
// it's better to render it and check for text presence.

describe('ImportAlert', () => {
  const preloadedState = {
    calendars: {
      list: {
        cal1: {
          id: 'cal1',
          name: 'Calendar 1',
          events: {
            event1: {
              uid: 'event1',
              title: 'Event 1',
              error: 'Error message 1'
            },
            event2: {
              uid: 'event2',
              title: 'Event 2'
              // No error
            }
          }
        },
        cal2: {
          id: 'cal2',
          name: 'Calendar 2',
          events: {
            event3: {
              uid: 'event3',
              title: 'Event 3',
              error: 'Error message 2'
            }
          }
        }
      }
    }
  }

  it('renders nothing when there are no errors', () => {
    const state = {
      calendars: {
        list: {
          cal1: {
            id: 'cal1',
            events: {
              event1: { uid: 'event1' }
            }
          }
        }
      }
    }

    const { container } = renderWithProviders(<ImportAlert />, state)
    expect(container).toBeEmptyDOMElement()
  })

  it('renders snackbar with error message when there is one error', () => {
    renderWithProviders(<ImportAlert />, preloadedState)

    // EventErrorSnackbar shows "multipleEvents" if > 1, or the message if 1.
    // Here we have 2 errors in preloadedState.
    // Let's adjust state for single error test.
    const singleErrorState = {
      calendars: {
        list: {
          cal1: {
            id: 'cal1',
            events: {
              event1: {
                uid: 'event1',
                error: 'Single Error'
              }
            }
          }
        }
      }
    }

    renderWithProviders(<ImportAlert />, singleErrorState)
    expect(screen.getByText('Single Error')).toBeInTheDocument()
  })

  it('renders summary message when there are multiple errors', () => {
    renderWithProviders(<ImportAlert />, preloadedState)
    // 2 errors in preloadedState
    // "error.multipleEvents" key is used.
    // In test environment, t function usually returns the key or formatted string.
    // We should check what the real t function does or if it's mocked.
    // Based on other tests, it seems we might need to check for the translation key or value.
    // Let's assume standard behavior: "error.multipleEvents"

    // Actually, EventErrorSnackbar uses: t("error.multipleEvents", { count: messages.length })
    // If we don't have full i18n setup in tests, it might be tricky.
    // But renderWithProviders likely sets up i18n.

    // Let's check for the text that appears.
    // If translation is missing, it might show "error.multipleEvents".
    // Or if we can match regex.

    // Let's try to match partial text or use a custom state with known behavior.
    // If we look at EventErrorSnackbar:
    // const summary = messages.length === 1 ? messages[0] : t("error.multipleEvents", { count: messages.length });

    // We can check if the Alert is present.
    expect(screen.getByRole('alert')).toBeInTheDocument()
  })

  it('dismisses error when close button is clicked', () => {
    const singleErrorState = {
      calendars: {
        list: {
          cal1: {
            id: 'cal1',
            events: {
              event1: {
                uid: 'event1',
                error: 'Dismiss Me'
              }
            }
          }
        }
      }
    }

    renderWithProviders(<ImportAlert />, singleErrorState)
    expect(screen.getByText('Dismiss Me')).toBeInTheDocument()

    const closeButton = screen.getByRole('button', { name: /ok/i }) // EventErrorSnackbar has an "OK" button
    fireEvent.click(closeButton)

    // After clicking, it should disappear (or at least be removed from DOM or hidden)
    // Since we use local state to filter dismissed errors, it should re-render with null.
    expect(screen.queryByText('Dismiss Me')).not.toBeInTheDocument()
  })
})