import { cleanup } from '@testing-library/react';
import { render } from '../../../utils/theme-render-wrapper';

import CardGrid from './card-grid';
import { CardGridProps } from './types';
import { mockGroupsCards } from './__mocks__/mockGroupsCards';
import { mockIntegrationsCards } from './__mocks__/mockIntegrationsCards';

afterEach(cleanup);

const actionClickHandler = jest.fn();
const cellClickHandler = jest.fn();

const mockGroupsRowId = 'row1';
const mockGroupsCardsArgs: CardGridProps = {
  ...mockGroupsCards({
    onActionClick: value => actionClickHandler
  }),
  onCellClick: cellClickHandler
};

const mockIntegrationsRowId = 'SPLUNK';
const mockIntegrationsCardsArgs: CardGridProps = {
  ...mockIntegrationsCards({
    onActionClick: value => actionClickHandler
  }),
  onCellClick: cellClickHandler
};

describe('<CardGrid />', () => {
  it('should render successfully', () => {
    const { baseElement } = render(<CardGrid />);
    expect(baseElement).toBeTruthy();
  });

  it('should render empty card grid', () => {
    const { baseElement } = render(
      <CardGrid
        cols={[
          {
            field: 'name',
            headerName: 'Name',
            // `default` column type + renderCell
            renderCell: ({ cell, colIndex, rowIndex }) => (
              <div>{`${cell.contents} ${rowIndex}*${colIndex}`}</div>
            ),
            className: 'class-test-1'
          },
          {
            field: 'networks',
            headerName: 'Networks',
            type: 'textList',
            cellClassName: () => 'class-test-2'
          },
          {
            field: 'actionButtons',
            type: 'actionButtons',
            actions: [],
            cellClassName: 'class-test-3'
          }
        ]}
        rows={[
          {
            id: 'row1',
            name: {
              contents: 'Row*Col:'
            },
            networks: {
              text: ['Developers', 'Sales', 'Production', 'All Users', 'Admins']
            }
          }
        ]}
      />
    );
    expect(baseElement).toBeTruthy();
  });

  it('should render Groups mock and click twice', () => {
    const { getAllByRole, getByTestId } = render(<CardGrid {...mockGroupsCardsArgs} />);

    const firstCellEl = getAllByRole('gridcell')[0];
    firstCellEl.click();
    expect(cellClickHandler).toHaveBeenCalled();

    const actionViewEl = getByTestId(`${mockGroupsRowId}_view`);
    actionViewEl.click();
    expect(actionClickHandler).toHaveBeenCalled();
  });

  it('should render Integrations mock and click twice', () => {
    const { getAllByRole, getByTestId } = render(<CardGrid {...mockIntegrationsCardsArgs} />);

    const firstCellEl = getAllByRole('gridcell')[0];
    firstCellEl.click();
    expect(cellClickHandler).toHaveBeenCalled();

    const actionEditEl = getByTestId(`${mockIntegrationsRowId}_edit`);
    actionEditEl.click();
    expect(actionClickHandler).toHaveBeenCalled();
  });
});