import React from 'react';
import renderWithTheme from '../../../testUtils/renderWithTheme';

import Breadcrumb from '..';

describe('rendering', () => {
  it('renders single item', () => {
    const { getByText } = renderWithTheme(
      <Breadcrumb items={[{ href: '/components/breadcrumb', text: 'Home' }]} />
    );
    expect(getByText('Home')).toBeInTheDocument();
    expect(getByText('Home')).toHaveAttribute('href', '/components/breadcrumb');
  });

  it('renders multiple items', () => {
    const { getByText } = renderWithTheme(
      <Breadcrumb
        items={[
          { href: '/components/breadcrumb', text: 'Home' },
          { href: '/components/breadcrumb-item', text: 'Item' },
          { href: '/components/breadcrumb-sub-item', text: 'Sub item' },
        ]}
      />
    );
    expect(getByText('Home')).toBeInTheDocument();
    expect(getByText('Home')).toHaveAttribute('href', '/components/breadcrumb');

    expect(getByText('Item')).toBeInTheDocument();
    expect(getByText('Item')).toHaveAttribute(
      'href',
      '/components/breadcrumb-item'
    );

    expect(getByText('Sub item')).toBeInTheDocument();
    expect(getByText('Sub item')).not.toHaveAttribute('href');
  });
});