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

import { mockNetworks } from '../__mocks__/networks';

import { DataGrid } from '../index';
import type { DataGridProps } from '../index';

beforeEach(cleanup);

jest.setTimeout(15000);

const Wrapper = (props: Partial<DataGridProps>) => (
  <DataGrid components={{ Cell: undefined }} {...mockNetworks} {...props} />
);

describe('Check DataGrid master detail panel', () => {
  it(`should render successfully and toggle panel`, async () => {
    const rowId = mockNetworks.tableData.data[0].networkId;
    const tunnelId = mockNetworks.tableData.data[0].tunnels?.[0].tunnelId as string;
    const { queryByTestId, queryByText } = render(<Wrapper />);

    const toggleEl = queryByTestId(`detailPanelToggle_${rowId}`);
    toggleEl && fireEvent.click(toggleEl);
    await waitFor(() => expect(queryByText(tunnelId)).toBeTruthy(), {
      interval: 200,
      timeout: 2000
    });

    toggleEl && fireEvent.click(toggleEl);
    expect(queryByText(tunnelId)).toBeFalsy();
  });
});