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

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
}));

import SonsSection from '../SonsSection';

const sons = [
  {asoId: 1, titre: 'Gavotte des montagnes', taille: 1200, ordre: 0, url: 'https://media.tamm-kreiz.bzh/gavotte.mp3'},
  {asoId: 2, titre: null, taille: 900, ordre: 1, url: 'https://media.tamm-kreiz.bzh/plinn.mp3'},
  {asoId: 3, titre: 'Sans fichier', taille: 0, ordre: 2, url: null},
];

describe('SonsSection', () => {
  it('shouldOfferAPlayerPerSoundWithItsTitle', () => {
    const {container} = render(<SonsSection sons={sons} />);

    expect(screen.getByTestId('sons-section')).toHaveTextContent('sons_title');
    expect(screen.getByText('Gavotte des montagnes')).toBeInTheDocument();
    const players = container.querySelectorAll('audio[controls]');
    expect(Array.from(players).map(p => p.getAttribute('src'))).toEqual([
      'https://media.tamm-kreiz.bzh/gavotte.mp3',
      'https://media.tamm-kreiz.bzh/plinn.mp3',
    ]);
  });

  it('shouldNameAnUntitledSoundByItsRank', () => {
    render(<SonsSection sons={sons} />);

    expect(screen.getByText('son_sans_titre 2')).toBeInTheDocument();
  });

  it('shouldRenderNothingWithoutPlayableSound', () => {
    const {container} = render(<SonsSection sons={[{asoId: 3, titre: 'Sans fichier', taille: 0, ordre: 0, url: null}]} />);

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