import React from 'react';
import { cleanup } from '@testing-library/react';
import { render } from '../../utils/theme-render-wrapper';
import { BrowserRouter } from 'react-router-dom';
import sidebarItemsMap from './__mocks__/mockHeader';
import { Header } from './header';
import type { HeaderProps } from './header';

afterEach(cleanup);

const defaultProps: HeaderProps = {
  breadcrumbsProps: {
    sidebarItemsMap,
    pathname: '/cs/agent-rollout/rollout-logs'
  },
  userControlsProps: {
    name: 'Name',
    userRole: 'Admin'
  },
  drawerWidthOpen: '',
  drawerWidthClose: '',
  sidebarOpen: false
};

describe('<Header />', () => {
  it(`should render successfully`, () => {
    render(
      <BrowserRouter>
        <Header {...defaultProps} />
      </BrowserRouter>
    );
  });

  it(`should render Header with custom content component`, () => {
    const testId = 'testId';
    const ContentComponent = () => <div data-testid={testId} />;
    const { queryByTestId } = render(
      <BrowserRouter>
        <Header {...defaultProps} ContentComponent={ContentComponent} />
      </BrowserRouter>
    );
    const el = queryByTestId(testId);
    expect(el).toBeTruthy();
  });
});