import { Table } from '@shlinkio/shlink-frontend-kit';
import { MemoryRouter } from 'react-router';
import type { ServerWithId } from '../../src/servers/data';
import { ManageServersRow } from '../../src/servers/ManageServersRow';
import { checkAccessibility } from '../__helpers__/accessibility';
import { renderWithStore } from '../__helpers__/setUpTest';

describe('<ManageServersRow />', () => {
  const server: ServerWithId = {
    name: 'My server',
    url: 'https://example.com',
    apiKey: '123',
    id: 'abc',
  };
  const setUp = (hasAutoConnect = false, autoConnect = false) =>
    renderWithStore(
      <MemoryRouter>
        <Table header={<Table.Row />}>
          <ManageServersRow server={{ ...server, autoConnect }} hasAutoConnect={hasAutoConnect} />
        </Table>
      </MemoryRouter>,
    );

  it('passes a11y checks', () => checkAccessibility(setUp()));

  it.each([
    [true, 4],
    [false, 3],
  ])('renders expected amount of columns', async (hasAutoConnect, expectedCols) => {
    const screen = await setUp(hasAutoConnect);
    expect(screen.getByRole('cell').elements()).toHaveLength(expectedCols);
  });

  it('renders an options dropdown', async () => {
    const screen = await setUp();
    await expect.element(screen.getByRole('button', { name: 'Options' })).toBeInTheDocument();
  });

  it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', async (autoConnect) => {
    const { container } = await setUp(true, autoConnect);
    expect(container).toMatchSnapshot();
  });

  it('renders server props where appropriate', async () => {
    const screen = await setUp();
    const link = screen.getByRole('link');

    await expect.element(link).toHaveAttribute('href', `/server/${server.id}`);
    await expect.element(link).toHaveTextContent(server.name);
    await expect.element(screen.getByText(server.url)).toBeInTheDocument();
  });
});