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

import getPageData from '~tests/factories/pages/default.factory';
import MainProvider from '~context/MainProvider';
import Breadcrumbs from './index';

function renderComponent(pageData) {
  return render(
    <MainProvider
      value={{
        bannerIsActive: false,
        cookieAccepted: true,
        translations: {
          home_operator_review: 'Sample Casino',
          home_operator_review_sample_category: 'Simple Casino',
        },
      }}
    >
      <Breadcrumbs page={pageData} />
    </MainProvider>
  );
}

describe('Show Breadcrumbs in a page', () => {
  test('render with props', () => {
    const data = getPageData();
    const { getByText } = render(<Breadcrumbs page={data} />);
    expect(getByText('The Page Title')).toBeTruthy();
    expect(getByText('Home').getAttribute('href')).toEqual('/');
    expect(getByText('Sport').getAttribute('href')).toEqual('/sport');
  });
  test('Do not show Breadcrumb on Home page', () => {
    const page = {
      path: '/',
    };
    const { container } = render(<Breadcrumbs page={page} />);
    expect(container).toBeEmptyDOMElement();
  });
  test('Breadcrumb when we dont have link', () => {
    const page = {
      ...getPageData(),
      breadcrumbs: [{ label: 'Sport', path: null }],
    };
    const { container } = render(<Breadcrumbs page={page} />);
    expect(container.querySelectorAll('a')).toHaveLength(1);
  });
  test('Vanity label', () => {
    const page = {
      vanity_label: 'Alternative title',
    };
    const { getByText } = render(<Breadcrumbs page={page} />);
    expect(getByText('Home').getAttribute('href')).toEqual('/');
    expect(getByText('Alternative title')).toBeTruthy();
  });
  test('Translation for Home available', () => {
    const page = {
      template: 'operator_review',
    };
    const { getByText } = renderComponent(page);
    expect(getByText('Sample Casino')).toBeTruthy();
  });
  test('Page category available', () => {
    const page = {
      categories: [
        { name: 'Sample Category', short_name: 'sample_category' },
        { name: 'Sample Category1', short_name: 'sample_category1' },
      ],
      template: 'operator_review',
    };
    const { getByText } = renderComponent(page);
    expect(getByText('Simple Casino')).toBeTruthy();
  });
  test('Breadcrumbs with multiple markets', () => {
    const data = getPageData();
    const { getByText } = render(
      <Breadcrumbs page={data} markets={{ en_za: { path_prefix: 'en' } }} />
    );
    expect(getByText('The Page Title')).toBeTruthy();
    expect(getByText('Home').getAttribute('href')).toEqual('/en');
    expect(getByText('Sport').getAttribute('href')).toEqual('/sport');
  });
});
afterEach(() => {
  cleanup();
});
