import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';
import sample from 'lodash/sample';
import { Breadcrumbs } from './breadcrumbs';
import sidebarItemsMap from './__mocks__/mockBreadcrumbs';
import type { BreadcrumbsProps } from './types';

afterEach(cleanup);

describe('<Breadcrumbs />', () => {
  // This test currently supports 3 levels of nesting, we can make it more generic using recursion
  it(`Should render Breadcrumbs when router is null`, () => {
    const { queryByTestId } = render(
      <Breadcrumbs pathname="/cs/agent-rollout/rollout-logs" sidebarItemsMap={sidebarItemsMap} />
    );
    expect(queryByTestId('breadcrumbsRoot')).toBeTruthy();
  });

  it('Should render component with custom breadcrumbs', () => {
    const customBreadcrumbs: BreadcrumbsProps['customBreadcrumbs'] = [
      {
        href: '/',
        text: 'text1'
      }
    ];
    const { queryByText } = render(<Breadcrumbs customBreadcrumbs={customBreadcrumbs} />);
    const text = sample(customBreadcrumbs)?.text;
    let el;
    if (text) {
      el = queryByText(text);
    }
    expect(el).toBeTruthy();
  });
});