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

import Table from './index';

const { Header, Footer, Body, Row, RowColumn } = Table;

test('Table renders correctly', () => {
  const tree = renderer.create(
    <Table
      style={{ minHeight: '300px' }}
      onChange={() => {}}
      displayRowCheckbox
      multiSelectable
      fixedFooter
      fixedHeader
    >
      <Header>
        <Row>
          <RowColumn sort={['_id']}>ID</RowColumn>
          <RowColumn sort={['name']} order="desc">Name</RowColumn>
          <RowColumn sort={['status']}>Status</RowColumn>
        </Row>
      </Header>
      <Body>
        <Row
          value={{ _id: 1, status: 'Employed', name: 'Samuel Roberts' }}
          onRowClick={() => {}}
          onCellClick={() => {}}
          selected
        >
          <RowColumn>ID 1</RowColumn>
          <RowColumn>Samuel Roberts</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 2, status: 'Employed', name: 'Steve Brown' }}>
          <RowColumn>ID 2</RowColumn>
          <RowColumn>Steve Brown</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 3, status: 'Employed', name: 'Stephanie Sanders' }} selected>
          <RowColumn>ID 3</RowColumn>
          <RowColumn>Stephanie Sanders</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 4, status: 'Employed', name: 'Adam Moore' }}>
          <RowColumn>ID 4</RowColumn>
          <RowColumn>Adam Moore</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 5, status: 'Unemployed', name: 'Randal White' }}>
          <RowColumn>ID 5</RowColumn>
          <RowColumn>Randal White</RowColumn>
          <RowColumn>Unemployed</RowColumn>
        </Row>
        <Row value={{ _id: 6, status: 'Employed', name: 'Samuel Roberts' }}>
          <RowColumn>ID 6</RowColumn>
          <RowColumn>Samuel Roberts</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 7, status: 'Employed', name: 'Steve Brown' }}>
          <RowColumn>ID 7</RowColumn>
          <RowColumn>Steve Brown</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 8, status: 'Employed', name: 'Stephanie Sanders' }}>
          <RowColumn>ID 8</RowColumn>
          <RowColumn>Stephanie Sanders</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 9, status: 'Employed', name: 'Adam Moore' }}>
          <RowColumn>ID 9</RowColumn>
          <RowColumn>Adam Moore</RowColumn>
          <RowColumn>Employed</RowColumn>
        </Row>
        <Row value={{ _id: 10, status: 'Unemployed', name: 'Randal White' }}>
          <RowColumn>ID 10</RowColumn>
          <RowColumn>Randal White</RowColumn>
          <RowColumn>Unemployed</RowColumn>
        </Row>
      </Body>
      <Footer>
        <Row>
          <RowColumn>footer ID</RowColumn>
          <RowColumn>footer Name</RowColumn>
          <RowColumn>footer Status</RowColumn>
        </Row>
      </Footer>
    </Table>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});
