import React from 'react';
import renderer from 'react-test-renderer'; // eslint-disable-line import/no-extraneous-dependencies

import Dropdown from './index';

// TODO: Remove mock when updating to React 15.4
// https://github.com/facebook/react/issues/7740
jest.mock('./Content', () => 'DropdownContent');

test('Dropdown renders correctly', () => {
  const tree = renderer.create(
    <div>
      <Dropdown variant="primary" reverse className="dc">
        <Dropdown.Trigger className="tc">
          Hello
        </Dropdown.Trigger>
        <Dropdown.Content maxItems="2" className="cc">
          <Dropdown.Item className="ic">hello hello hello hello</Dropdown.Item>
          <Dropdown.Item onClick={alert}>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>

      <Dropdown variant="info">
        <Dropdown.Trigger>
          Hello
        </Dropdown.Trigger>
        <Dropdown.Content maxItems="5">
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>

      <Dropdown variant="warning">
        <Dropdown.Trigger>
          Hello
        </Dropdown.Trigger>
        <Dropdown.Content maxItems="5">
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>

      <Dropdown variant="alert">
        <Dropdown.Trigger>
          Hello
        </Dropdown.Trigger>
        <Dropdown.Content maxItems="5">
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>

      <Dropdown variant="dash-lagoon">
        <Dropdown.Trigger>
          Hello
        </Dropdown.Trigger>
        <Dropdown.Content maxItems="5">
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
          <Dropdown.Item>hello hello hello hello</Dropdown.Item>
        </Dropdown.Content>
      </Dropdown>

    </div>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
