import React, { Fragment } from 'react';
import renderer from 'react-test-renderer';
import { Card, Header, Footer, FooterLine, FooterItem, Content, Item } from './Card';
import { Tooltip } from '../Tooltip/Tooltip';

describe('<Card /> ', () => {
  test('Render Card correctly', () => {
    const tree = renderer
      .create(<Card>
        <Fragment>
          <Header name="Test Name" id={1} baseUrl="http://esome.com" urlPageName="ad-board" />

          <Content>
            <Item>
              <span className="es-card__label-text">Budget Bucket</span>
              <p className="es-card__text">Some Name</p>
            </Item>
          </Content>

          <Footer>
            <FooterItem>
              <Tooltip title="Edit" placement="left">
                <span className="es-icon es-icon-pencil" role="button" />
              </Tooltip>
            </FooterItem>
            <FooterLine />
            <FooterItem>
              <Tooltip title="Archive" placement="left">
                <span className="es-icon es-icon-archive" role="button" />
              </Tooltip>
            </FooterItem>
          </Footer>
        </Fragment>
      </Card>)
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});