import React from 'react';
import {render, screen, waitFor} from '@testing-library/react';

jest.mock('next/link', () => ({
  __esModule: true,
  default: ({children, href, ...rest}: {children: React.ReactNode; href: string}) => <a href={href} {...rest}>{children}</a>,
}));
jest.mock('@/services/soutienService', () => ({getSoutiens: jest.fn()}));

import SoutiensLogos from '../SoutiensLogos';
import {getSoutiens} from '@/services/soutienService';

const mockedGetSoutiens = getSoutiens as jest.Mock;

describe('SoutiensLogos', () => {
  beforeEach(() => jest.clearAllMocks());

  it('shouldShowTheFooterSupportersLogosLinkedToTheirSite', async () => {
    mockedGetSoutiens.mockResolvedValue([
      {souId: 1, souNom: 'Région Bretagne', souUrl: 'https://bretagne.bzh', souDescription: null, souPiedDePage: true, logoUrl: 'https://pimcore.test/region.png'},
      {souId: 2, souNom: 'Mécène sans logo', souUrl: null, souDescription: null, souPiedDePage: true, logoUrl: null},
    ]);
    render(<SoutiensLogos locale="fr" />);

    await waitFor(() => expect(screen.getByTestId('footer-soutiens')).toBeInTheDocument());
    expect(mockedGetSoutiens).toHaveBeenCalledWith(true);
    const logo = screen.getByRole('img', {name: 'Région Bretagne'});
    expect(logo).toHaveAttribute('src', 'https://pimcore.test/region.png');
    expect(logo.closest('a')).toHaveAttribute('href', 'https://bretagne.bzh');
    expect(screen.getByText('Mécène sans logo').closest('a')).toHaveAttribute('href', '/fr/soutiens');
    expect(screen.getByRole('link', {name: 'footer_soutiens_all'})).toHaveAttribute('href', '/fr/soutiens');
  });

  it('shouldRenderNothingWithoutFooterSupporter', async () => {
    mockedGetSoutiens.mockResolvedValue([]);
    const {container} = render(<SoutiensLogos locale="fr" />);

    await waitFor(() => expect(mockedGetSoutiens).toHaveBeenCalled());
    expect(container).toBeEmptyDOMElement();
  });
});