// src/components/AnonymousUserBanner.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { AnonymousUserBanner } from './AnonymousUserBanner';

// Mock the icon to ensure it is rendered correctly
vi.mock('./icons/InformationCircleIcon', () => ({
  InformationCircleIcon: (props: React.SVGProps<SVGSVGElement>) => (
    <svg data-testid="info-icon" {...props} />
  ),
}));

describe('AnonymousUserBanner', () => {
  it('should render the banner with the correct text content and accessibility role', () => {
    const mockOnOpenProfile = vi.fn();
    render(<AnonymousUserBanner onOpenProfile={mockOnOpenProfile} />);

    // Check for accessibility role
    expect(screen.getByRole('alert')).toBeInTheDocument();

    expect(screen.getByText(/you're viewing as a guest/i)).toBeInTheDocument();
    expect(
      screen.getByText(/to save your flyers, create a watchlist, and access more features/i),
    ).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /sign up or log in/i })).toBeInTheDocument();
    expect(screen.getByTestId('info-icon')).toBeInTheDocument();
    expect(screen.getByTestId('info-icon')).toHaveClass('text-blue-500');
  });

  it('should call onOpenProfile when the "sign up or log in" button is clicked', () => {
    const mockOnOpenProfile = vi.fn();
    render(<AnonymousUserBanner onOpenProfile={mockOnOpenProfile} />);

    const loginButton = screen.getByRole('button', { name: /sign up or log in/i });
    fireEvent.click(loginButton);

    expect(mockOnOpenProfile).toHaveBeenCalledTimes(1);
  });
});