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

import Tabs from './index';

const { Tab, TabsContainer, Content } = Tabs;

test('Tabs renders correctly', () => {
  const tree = renderer.create(
    <div>
      <Tabs>
        <TabsContainer
          sticky={{
            topOffset: -110
          }}
          scrollSpy={{
            topOffset: -50
          }}
          style={{ position: 'fixed', top: 0, right: 0 }}
        >
          <Tab selected to="tab1">Tab 1</Tab>
          <Tab to="tab2">Tab 2</Tab>
          <Tab to="tab3">Tab 3</Tab>
        </TabsContainer>
        <Content>
          <div id="tab1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus consequat, massa posuere eleifend tincidunt, erat velit malesuada orci,
            sit amet vehicula tortor eros vel ipsum. Integer bibendum nunc eu eros blandit gravida.
            Aliquam erat volutpat. Phasellus non orci tristique, porttitor elit non, luctus augue.
            Vestibulum a aliquam quam. Proin eget orci ante. Phasellus viverra, erat sed sagittis ornare,
          </div>
          <div id="tab2">
            Nullam vel neque laoreet, interdum est eu, semper dui. Aliquam pretium urna vel mauris porttitor,
            in cursus dolor condimentum. Aliquam vitae faucibus nunc. Phasellus eleifend, ipsum quis auctor luctus,
            est nibh euismod odio, eu luctus lacus orci ac tellus. Donec pretium elit sapien, sit amet lobortis risus
            finibus bibendum. Ut feugiat mollis quam a fringilla. Curabitur vitae neque quis diam eleifend aliquet.
            <br /><br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus consequat, massa posuere eleifend tincidunt, erat velit malesuada orci,
            sit amet vehicula tortor eros vel ipsum. Integer bibendum nunc eu eros blandit gravida.
            Aliquam erat volutpat. Phasellus non orci tristique, porttitor elit non, luctus augue.
            Vestibulum a aliquam quam. Proin eget orci ante. Phasellus viverra, erat sed sagittis ornare,
            Donec maximus elementum urna, egestas ultrices neque cursus vitae. Nullam rutrum libero erat.
            enim laoreet vel. Donec venenatis lacus ut tellus pharetra, a molestie lorem varius.
            <br /><br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus consequat, massa posuere eleifend tincidunt, erat velit malesuada orci,
            sit amet vehicula tortor eros vel ipsum. Integer bibendum nunc eu eros blandit gravida.
            Aliquam erat volutpat. Phasellus non orci tristique, porttitor elit non, luctus augue.
            Vestibulum a aliquam quam. Proin eget orci ante. Phasellus viverra, erat sed sagittis ornare,
            Donec maximus elementum urna, egestas ultrices neque cursus vitae. Nullam rutrum libero erat.
            enim laoreet vel. Donec venenatis lacus ut tellus pharetra, a molestie lorem varius.
          </div>
          <div id="tab3">
            Nullam vel neque laoreet, interdum est eu, semper dui. Aliquam pretium urna vel mauris porttitor,
            in cursus dolor condimentum. Aliquam vitae faucibus nunc. Phasellus eleifend, ipsum quis auctor luctus,
            est nibh euismod odio, eu luctus lacus orci ac tellus. Donec pretium elit sapien, sit amet lobortis risus
            finibus bibendum. Ut feugiat mollis quam a fringilla. Curabitur vitae neque quis diam eleifend aliquet.
            <br /><br />
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus consequat, massa posuere eleifend tincidunt, erat velit malesuada orci,
            sit amet vehicula tortor eros vel ipsum. Integer bibendum nunc eu eros blandit gravida.
            Aliquam erat volutpat. Phasellus non orci tristique, porttitor elit non, luctus augue.
            Vestibulum a aliquam quam. Proin eget orci ante. Phasellus viverra, erat sed sagittis ornare,
            Donec maximus elementum urna, egestas ultrices neque cursus vitae. Nullam rutrum libero erat.
            enim laoreet vel. Donec venenatis lacus ut tellus pharetra, a molestie lorem varius.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Phasellus consequat, massa posuere eleifend tincidunt, erat velit malesuada orci,
            sit amet vehicula tortor eros vel ipsum. Integer bibendum nunc eu eros blandit gravida.
            Aliquam erat volutpat. Phasellus non orci tristique, porttitor elit non, luctus augue.
            Vestibulum a aliquam quam. Proin eget orci ante. Phasellus viverra, erat sed sagittis ornare,
            Donec maximus elementum urna, egestas ultrices neque cursus vitae. Nullam rutrum libero erat.
            enim laoreet vel. Donec venenatis lacus ut tellus pharetra, a molestie lorem varius.
          </div>
        </Content>
      </Tabs>
      <Tabs>
        <TabsContainer>
          <Tab selected>Tab 1</Tab>
          <Tab>Tab 2</Tab>
        </TabsContainer>
        <Content>Content</Content>
      </Tabs>
      <Tabs>
        <TabsContainer>
          <Tab component="span" selected>Tab 1</Tab>
          <Tab component="span">Tab 2</Tab>
        </TabsContainer>
        <Content>Content</Content>
      </Tabs>
    </div>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
