import React from 'react';
import { render, cleanup, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import getFooterSection from '~tests/factories/sections/footer.factory';
import Footer from '.';

const footerSection = getFooterSection();

describe('Footer Component', () => {
  test('render footer menu items', async () => {
    const { getByText } = render(
      <Footer
        footerMenu="footer_links"
        footerLogos="footer_logos"
        section={footerSection.sections.footer}
      />
    );

    await waitFor(() => {
      expect(getByText('test1sub1')).toBeTruthy();
      expect(getByText('test1sub1').closest('a').getAttribute('href')).toEqual('/test1sub1link');
      expect(getByText('test1sub2')).toBeTruthy();
      expect(getByText('test1sub2').closest('a').getAttribute('href')).toEqual('/test1sub2link');
      expect(getByText('test1sub2').closest('ul').children.length).toBe(3);

      expect(getByText('test2sub1')).toBeTruthy();
      expect(getByText('test2sub1').closest('a').getAttribute('href')).toEqual('/test2sub1link');
      expect(getByText('test2sub2')).toBeTruthy();
      expect(getByText('test2sub2').closest('a').getAttribute('href')).toEqual('/test2sub2link');
      expect(getByText('test2sub2').closest('ul').children.length).toBe(3);
    });
  });

  test('render footer extra component', () => {
    const FooterTop = () => <>Test Extra component</>;

    const FooterBottom = () => <>Test Extra component2</>;

    const { getByText } = render(
      <Footer
        footerMenu="footer_links"
        footerLogos="footer_logos"
        section={footerSection.sections.footer}
        footerTopCustom={FooterTop}
        footerBottomCustom={FooterBottom}
      />
    );
    expect(getByText('Test Extra component')).toBeTruthy();
    expect(getByText('Test Extra component2')).toBeTruthy();
  });

  test('render logo list', async () => {
    const { getByTitle } = render(
      <Footer
        footerMenu="footer_links"
        footerLogos="footer_logos"
        section={footerSection.sections.footer}
      />
    );
    await waitFor(() => {
      expect(getByTitle('logo1')).toBeTruthy();
      expect(getByTitle('logo2')).toBeTruthy();
    });
  });
});
afterEach(() => {
  cleanup();
});
