{"size": 2339, "ext": "js", "max_stars_repo_path": "src/components/Elements/DropDown/DropDown.spec.js", "max_stars_repo_name": "Lindsay89/beautiful-react-ui", "max_stars_repo_stars_event_min_datetime": "2020-01-14T18:36:06.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-10T03:14:06.000Z", "max_issues_repo_path": "src/components/Elements/DropDown/DropDown.spec.js", "max_issues_repo_name": "Lindsay89/beautiful-react-ui", "max_issues_repo_issues_event_min_datetime": "2020-01-14T20:15:15.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-04T15:11:17.000Z", "max_forks_repo_path": "src/components/Elements/DropDown/DropDown.spec.js", "max_forks_repo_name": "Lindsay89/beautiful-react-ui", "max_forks_repo_forks_event_min_datetime": "2020-02-14T16:58:52.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-24T07:53:07.000Z"}
{"max_stars_count": 68, "max_issues_count": 22, "max_forks_count": 13, "avg_line_length": 31.1866666667, "max_line_length": 88, "alphanum_fraction": 0.6186404446}
import React from 'react';
import { render, cleanup } from '@testing-library/react';
import noop from '../../../../test/utils/noop';
import Button from '../Button';
import DropDown from '.';

describe('DropDown component', () => {
  afterEach(cleanup);

  const Trigger = (<Button>foo</Button>);

  it('should render without explode', () => {
    render(
      <DropDown onToggle={noop} trigger={Trigger} isShown>
        <DropDown.Button>Lorem</DropDown.Button>
        <DropDown.Divider />
        <DropDown.Link href="#">Lorem</DropDown.Link>
      </DropDown>,
    );

    expect(document.querySelector('#bi-floats .bi.bi-dropdown')).to.exist;
  });

  it('should accept "id" prop', () => {
    render(
      <DropDown onToggle={noop} trigger={Trigger} isShown id="foo">
        <DropDown.Button>Lorem</DropDown.Button>
        <DropDown.Divider />
        <DropDown.Link href="#">Lorem</DropDown.Link>
      </DropDown>,
    );

    const ddEl = document.querySelector('#bi-floats .bi.bi-dropdown');
    expect(ddEl.id).to.equal('foo');
  });

  it('should allow adding custom classes', () => {
    render(
      <DropDown onToggle={noop} trigger={Trigger} isShown className="foo">
        <DropDown.Button>Lorem</DropDown.Button>
        <DropDown.Divider />
        <DropDown.Link href="#">Lorem</DropDown.Link>
      </DropDown>,
    );

    const ddEl = document.querySelector('#bi-floats .bi.bi-dropdown');
    expect(ddEl.classList.contains('foo')).to.be.true;
  });

  it('should not render the DropDown component if isShown prop is set to false', () => {
    render(
      <DropDown onToggle={noop} trigger={Trigger} isShown={false}>
        <DropDown.Button>Lorem</DropDown.Button>
        <DropDown.Divider />
        <DropDown.Link href="#">Lorem</DropDown.Link>
      </DropDown>,
    );

    expect(document.querySelector('#bi-floats .bi-dropdown')).not.to.exist;
  });

  it('should allow adding custom style', () => {
    render(
      <DropDown onToggle={noop} trigger={Trigger} isShown style={{ margin: '10px' }}>
        <DropDown.Button>Lorem</DropDown.Button>
        <DropDown.Divider />
        <DropDown.Link href="#">Lorem</DropDown.Link>
      </DropDown>,
    );

    const ddEl = document.querySelector('#bi-floats .bi.bi-dropdown');
    expect(ddEl.getAttribute('style')).equal('margin: 10px;');
  });
});
