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

jest.mock('next-intl', () => ({useTranslations: () => (key: string) => key}));
jest.mock('next/link', () => ({
  __esModule: true,
  default: ({children, href, ...rest}: {children: React.ReactNode; href: string}) => <a href={href} {...rest}>{children}</a>,
}));

import FederationsLogos from '../FederationsLogos';

describe('FederationsLogos', () => {
  it('shouldLinkEachFederationWithItsLogoOrName', () => {
    render(
      <FederationsLogos
        locale="fr"
        federations={[
          {fedId: 3, fedLibelle: 'Kendalc\'h', logoUrl: 'https://media.test/kendalch.png'},
          {fedId: 4, fedLibelle: 'War \'l Leur', logoUrl: null},
        ]}
      />
    );

    expect(screen.getByRole('heading', {level: 2})).toHaveTextContent('federations_title');
    const kendalch = screen.getByRole('link', {name: 'Kendalc\'h'});
    expect(kendalch).toHaveAttribute('href', '/fr/federations/3');
    expect(screen.getByRole('img', {name: 'Kendalc\'h'})).toHaveAttribute('src', 'https://media.test/kendalch.png');
    const warlleur = screen.getByRole('link', {name: 'War \'l Leur'});
    expect(warlleur).toHaveAttribute('href', '/fr/federations/4');
    expect(warlleur.querySelector('img')).toBeNull();
  });

  it('shouldRenderNothingWithoutFederation', () => {
    const {container} = render(<FederationsLogos locale="fr" federations={[]} />);

    expect(container).toBeEmptyDOMElement();
  });
});