import { fireEvent, render } from '../../../test/testRenderer';

import SectionPanel from '.';

describe(SectionPanel, () => {
  it('displays given Header and sections', async () => {
    const header = <>Header</>;
    const sections = [
      {
        expandable: false,
        id: 'non-expandable',
        section: <>Non Expandable Section</>
      },
      {
        expandable: true,
        id: 'expandable',
        section: <>Expandable Section</>,
        title: 'Expand me'
      }
    ];
    const { getByText } = render(
      <SectionPanel header={header} sections={sections} onClose={jest.fn()} />
    );

    expect(getByText('Header')).toBeInTheDocument();
    expect(getByText('Non Expandable Section')).toBeInTheDocument();
    expect(getByText('Expand me')).toBeInTheDocument();
    expect(getByText('Expandable Section')).toBeInTheDocument();
  });

  it('displays secondary Panel when secondary Panel bar is clicked', () => {
    const secondaryPanel = <>Secondary Panel</>;

    const { baseElement, getByText, queryByText } = render(
      <SectionPanel
        header={<>Header</>}
        secondaryPanel={secondaryPanel}
        sections={[]}
        onClose={jest.fn()}
      />
    );

    expect(queryByText('Secondary Panel')).toBeNull();

    const svgs = baseElement.querySelectorAll('svg');

    // The first SVG corresponds to the close icon.
    const secondSvg = svgs[1];

    fireEvent.click(secondSvg);

    expect(getByText('Secondary Panel')).toBeInTheDocument();
  });
});
