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

import Button from './index';

test('Button renders correctly', () => {
  const tree = renderer.create(
    <div>
      <p>Small</p>
      <div>
        <Button size="sm" type="submit" component="a">Button sm</Button>
        <Button size="sm" type="submit">Button with multiline content</Button>
      </div>
      <p>Medium</p>
      <div>
        <Button size="md" type="submit">Button md</Button>
        <Button size="md" type="submit">Button with multiline content</Button>
      </div>
      <p>Large</p>
      <div>
        <Button size="lg" type="submit">Button lg</Button>
        <Button size="lg" type="submit">Button with multiline content</Button>
      </div>
      <p>Nav bar</p>
      <div>
        <Button size="nav-bar" variant="dash-lagoon" type="submit" componen="a">Button small</Button>
        <Button size="nav-bar" variant="dash-lagoon" type="submit">My button with multiline content</Button>
      </div>
    </div>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
