import { fireEvent, render } from '@testing-library/react';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { MemoryRouter } from 'react-router';
import { describe, expect, it, vi } from 'vitest';
import { List } from './List';
import { Column, ListElement, ListSelectMode, SortData } from './List.model';

/* eslint-disable @typescript-eslint/no-non-null-assertion */

interface ListTestData {
  id: string;
  title: string;
  desc: string;
}

const mockListColumns: Column<ListTestData>[] = [
  {
    propertyName: 'desc',
    size: '1fr',
    label: 'Description',
  },
  {
    propertyName: 'id',
    size: '1fr',
    label: 'Id',
  },
  {
    propertyName: 'title',
    size: '1fr',
    label: 'Title',
  },
];

const mockListData: ListTestData[] = [
  {
    id: '1',
    desc: 'Description 1',
    title: 'Item 1',
  },
  {
    id: '2',
    title: 'Item 2',
    desc: 'Description 2',
  },
  {
    title: 'Item 3',
    desc: 'Description 3',
    id: '3',
  },
];

describe('List', () => {
  it('renders the component without crashing', () => {
    const { container } = render(
      <List columns={mockListColumns} data={mockListData} />,
    );

    expect(container).toBeTruthy();
  });

  it('passes down the right props to the header (default props)', () => {
    const { container } = render(
      <List columns={mockListColumns} data={mockListData} />,
    );

    const header = container.querySelector('[data-test-id="list-header"]');

    expect(header).toBeInTheDocument();

    // Check for rendered column labels
    expect(container.textContent).toContain('Description');
    expect(container.textContent).toContain('Id');
    expect(container.textContent).toContain('Title');
  });

  it('does not add an extra column if there is no create and action buttons', () => {
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        showActionButton={false}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');

    expect(rows.length).toBeGreaterThan(0);
    // When showActionButton is false, the grid should not include the action column
    const firstRow = rows[0] as HTMLElement;
    expect(firstRow.style.gridTemplateColumns).toBe('1fr 1fr 1fr');
  });

  it('adds an extra column and shows action button when showActionButton is true', () => {
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        showActionButton={true}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const firstRow = rows[0] as HTMLElement;

    expect(firstRow.style.gridTemplateColumns).toBe('1fr 1fr 1fr 50px');
    expect(
      container.querySelector('[data-test-id="list-entry-action"]'),
    ).toBeInTheDocument();
  });

  it('adds an extra column and shows action button when showActionButton function returns true', () => {
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        showActionButton={() => true}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const firstRow = rows[0] as HTMLElement;

    expect(firstRow.style.gridTemplateColumns).toBe('1fr 1fr 1fr 50px');
    expect(
      container.querySelector('[data-test-id="list-entry-action"]'),
    ).toBeInTheDocument();
  });

  it('adds an extra column but hides action button when showActionButton function returns false', () => {
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        showActionButton={() => false}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const firstRow = rows[0] as HTMLElement;

    // Even when action button is hidden (function returns false), the column is still added
    expect(firstRow.style.gridTemplateColumns).toBe('1fr 1fr 1fr 50px');
    expect(
      container.querySelector('[data-test-id="list-entry-action"]'),
    ).not.toBeInTheDocument();
  });

  it.each`
    data                                                                   | count
    ${[{ row: 'one' }, { row: 'two' }, { row: 'three' }]}                  | ${3}
    ${[{ row: 'one' }, { row: 'two' }, { row: 'three' }, { row: 'four' }]} | ${4}
    ${[]}                                                                  | ${0}
  `(
    'creates the right amount of rows and sends down the right props when given $count rows',
    ({ data }: { data: ListTestData[] }) => {
      const { container } = render(
        <List
          columns={mockListColumns}
          data={data}
          keyProperty={'row' as keyof ListTestData}
        />,
      );

      const rows = container.querySelectorAll('[data-test-id="list-entry"]');

      expect(rows).toHaveLength(data.length);
      rows.forEach((row) => {
        const rowElement = row as HTMLElement;
        expect(rowElement.style.gridTemplateColumns).toBe('1fr 1fr 1fr 50px');
      });
    },
  );

  it("raises 'itemClicked' with correct data", () => {
    const spy = vi.fn();
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        onItemClicked={spy}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const firstRowContent = rows[0].querySelector('.content') as HTMLElement;

    fireEvent.click(firstRowContent);

    expect(spy).toHaveBeenCalledTimes(1);
    expect(spy).toHaveBeenCalledWith(mockListData[0]);
  });

  it("renders a 'no data' message and no rows if data is an empty array", () => {
    const defaultNoItemMsg = 'No items found';
    const { container } = render(<List columns={mockListColumns} data={[]} />);

    const listRow = container.querySelector('[data-test-id="list-entry"]');
    const noData = container.querySelector('.NoData');

    expect(listRow).not.toBeInTheDocument();
    expect(noData).toBeInTheDocument();
    expect(noData?.textContent).toBe(defaultNoItemMsg);
  });

  it('does not show create button when no handler given', () => {
    const { container } = render(
      <List columns={mockListColumns} data={mockListData} />,
    );

    const createButton = container.querySelector('.createButton');

    expect(createButton).not.toBeInTheDocument();
  });

  describe('list checkbox', () => {
    it('updates all list items when header checkbox is toggled', () => {
      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          selectionMode={ListSelectMode.Multi}
        />,
      );
      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckbox = header?.querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;

      act(() => {
        fireEvent.click(headerCheckbox);
      });

      const rows = container.querySelectorAll('[data-test-id="list-entry"]');
      const rowCheckboxes = Array.from(rows).map(
        (row) =>
          row.querySelector(
            '[data-test-id="list-entry-checkbox"]',
          ) as HTMLButtonElement,
      );

      rowCheckboxes.forEach((checkbox) => {
        expect(checkbox.className).toContain('active');
      });

      act(() => {
        fireEvent.click(headerCheckbox);
      });

      rowCheckboxes.forEach((checkbox) => {
        expect(checkbox.className).not.toContain('active');
      });
    });

    it('onItemSelected callback is called with SINGLE_ITEMS arguments when an item checkbox is clicked', () => {
      const spy = vi.fn();
      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          selectionMode={ListSelectMode.Multi}
          onItemSelected={spy}
        />,
      );
      const rows = container.querySelectorAll('[data-test-id="list-entry"]');
      const firstCheckbox = rows[0].querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;

      act(() => {
        fireEvent.click(firstCheckbox);
      });

      expect(spy).toHaveBeenCalledWith({
        mode: 'SINGLE_ITEMS',
        items: [mockListData[0]],
      });
    });

    it('onItemSelected callback is called with SELECT_ALL arguments when the header checkbox is clicked', () => {
      const spy = vi.fn();
      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          selectionMode={ListSelectMode.Multi}
          enableSelectAll={true}
          onItemSelected={spy}
        />,
      );
      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckbox = header?.querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;

      act(() => {
        fireEvent.click(headerCheckbox);
      });

      expect(spy).toHaveBeenCalledWith({ mode: 'SELECT_ALL' });
    });

    it('header checkbox checked state should be applied to newly fetched paginated data', () => {
      const mockNewPaginatedData: ListTestData[] = [
        {
          id: '1',
          desc: 'Description 1',
          title: 'Item 1',
        },
        {
          id: '2',
          title: 'Item 2',
          desc: 'Description 2',
        },
        {
          title: 'Item 3',
          desc: 'Description 3',
          id: '3',
        },
        {
          id: '4',
          desc: 'Description 4',
          title: 'Item 4',
        },
        {
          id: '5',
          title: 'Item 5',
          desc: 'Description 5',
        },
        {
          title: 'Item 6',
          desc: 'Description 6',
          id: '6',
        },
      ];

      const { container, rerender } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          selectionMode={ListSelectMode.Multi}
        />,
      );
      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckbox = header?.querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;

      act(() => {
        fireEvent.click(headerCheckbox);
      });

      rerender(
        <List
          columns={mockListColumns}
          data={mockNewPaginatedData}
          selectionMode={ListSelectMode.Multi}
        />,
      );

      const rows = container.querySelectorAll('[data-test-id="list-entry"]');
      const rowCheckboxes = Array.from(rows).map(
        (row) =>
          row.querySelector(
            '[data-test-id="list-entry-checkbox"]',
          ) as HTMLButtonElement,
      );

      rowCheckboxes.forEach((checkbox) => {
        expect(checkbox.className).toContain('active');
      });
    });

    it('header checkbox container is not rendered when there are no items', () => {
      const { container } = render(
        <List
          columns={mockListColumns}
          data={[]}
          selectionMode={ListSelectMode.Multi}
          enableSelectAll={true}
        />,
      );
      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckboxContainer = header?.querySelector(
        '.list-checkbox-container',
      );

      // When there's no data, the checkbox container is not rendered
      expect(headerCheckboxContainer).toBeNull();
    });

    it('header checkbox is enabled when items exist', () => {
      const mockData: ListTestData[] = [
        {
          id: '1',
          desc: 'Description 1',
          title: 'Item 1',
        },
      ];

      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockData}
          selectionMode={ListSelectMode.Multi}
          enableSelectAll={true}
        />,
      );

      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckboxContainer = header?.querySelector(
        '.list-checkbox-container',
      );
      const headerCheckbox = headerCheckboxContainer?.querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;

      expect(headerCheckbox?.disabled).toBe(false);
    });
  });

  it('raises onItemSelected', () => {
    const spy = vi.fn();
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        selectionMode={ListSelectMode.Multi}
        onItemSelected={spy}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const rowCheckboxes = Array.from(rows).map(
      (row) =>
        row.querySelector(
          '[data-test-id="list-entry-checkbox"]',
        ) as HTMLButtonElement,
    );

    act(() => {
      fireEvent.click(rowCheckboxes[0]);
    });
    act(() => {
      fireEvent.click(rowCheckboxes[1]);
    });
    act(() => {
      fireEvent.click(rowCheckboxes[1]);
    });

    expect(spy).toHaveBeenCalledTimes(3);
    expect(spy).toHaveBeenNthCalledWith(1, {
      mode: 'SINGLE_ITEMS',
      items: [mockListData[0]],
    });
    expect(spy).toHaveBeenNthCalledWith(2, {
      mode: 'SINGLE_ITEMS',
      items: [mockListData[0], mockListData[1]],
    });
    expect(spy).toHaveBeenNthCalledWith(3, {
      mode: 'SINGLE_ITEMS',
      items: [mockListData[0]],
    });
  });

  it('clears the SINGLE_ITEMS selection when resetSelection is called', () => {
    const ref = React.createRef<ListElement>();
    const spy = vi.fn();

    const { container } = render(
      <List
        ref={ref}
        columns={mockListColumns}
        data={mockListData}
        selectionMode={ListSelectMode.Multi}
        onItemSelected={spy}
      />,
    );

    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    const rowCheckboxes = Array.from(rows).map(
      (row) =>
        row.querySelector(
          '[data-test-id="list-entry-checkbox"]',
        ) as HTMLButtonElement,
    );

    act(() => {
      fireEvent.click(rowCheckboxes[0]);
      fireEvent.click(rowCheckboxes[1]);
      fireEvent.click(rowCheckboxes[2]);
    });

    expect(rowCheckboxes[0].className).toContain('active');
    expect(rowCheckboxes[1].className).toContain('active');
    expect(rowCheckboxes[2].className).toContain('active');

    act(() => {
      ref.current?.resetSelection();
    });

    expect(rowCheckboxes[0].className).not.toContain('active');
    expect(rowCheckboxes[1].className).not.toContain('active');
    expect(rowCheckboxes[2].className).not.toContain('active');
  });

  it('clears the SELECT_ALL selection when resetSelection is called', () => {
    const ref = React.createRef<ListElement>();
    const spy = vi.fn();

    const { container } = render(
      <List
        ref={ref}
        columns={mockListColumns}
        data={mockListData}
        selectionMode={ListSelectMode.Multi}
        onItemSelected={spy}
      />,
    );

    const header = container.querySelector('[data-test-id="list-header"]');
    const headerCheckbox = header?.querySelector(
      '[data-test-id="list-entry-checkbox"]',
    ) as HTMLButtonElement;

    act(() => {
      fireEvent.click(headerCheckbox);
    });

    expect(headerCheckbox.className).toContain('active');

    act(() => {
      ref.current?.resetSelection();
    });

    expect(headerCheckbox.className).not.toContain('active');
  });

  it('does not use onItemSelected if provided with a generateItemLink', () => {
    const spy = vi.fn();
    const { container } = render(
      <MemoryRouter>
        <List
          columns={mockListColumns}
          data={mockListData}
          generateItemLink={() => 'test'}
          onItemSelected={spy}
        />
      </MemoryRouter>,
    );

    const row = container.querySelector('[data-test-id="list-entry"]');
    const link = row?.querySelector('a') as HTMLAnchorElement;
    expect(link).toBeInTheDocument();
    expect(link.getAttribute('href')).toBe('/test');
  });

  it('raises onRequestMoreData', () => {
    const spy = vi.fn();
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        onRequestMoreData={spy}
      />,
    );

    // Trigger the intersection observer by scrolling
    // This is a simplified test - the actual implementation uses IntersectionObserver
    // which is tested through the ListRowRenderer component
    const rows = container.querySelectorAll('[data-test-id="list-entry"]');
    expect(rows.length).toBeGreaterThan(0);
  });

  it('loader component is rendered when isLoading = true', () => {
    const { container } = render(
      <List columns={mockListColumns} data={mockListData} isLoading={true} />,
    );
    const loaders = container.querySelectorAll('[data-test-id="loader"]');
    expect(loaders.length).toBeGreaterThan(0);
  });

  it('loader component is not rendered when isLoading = false', () => {
    const { container } = render(
      <List columns={mockListColumns} data={mockListData} isLoading={false} />,
    );
    const loaders = container.querySelectorAll('[data-test-id="loader"]');
    expect(loaders).toHaveLength(0);
  });

  it('raises onSortChanged event with sort data', () => {
    const spy = vi.fn();
    const { container } = render(
      <List
        columns={mockListColumns}
        data={mockListData}
        onSortChanged={spy}
      />,
    );

    const columnLabel = container.querySelector('.columnLabel') as HTMLElement;
    const mockSortData: SortData<ListTestData> = {
      column: 'title',
      direction: 'asc',
    };

    // Test that the sort handler exists by checking for sortable column
    expect(columnLabel).toBeInTheDocument();
    // The actual sorting behavior is tested in ListHeader.spec.tsx
  });

  describe('error handling', () => {
    it(`shows a retry button, renders the default error message, and allows reload when 'isError' is true`, () => {
      const defaultErrMsg = 'There was an error.';
      const spy = vi.fn();
      const { container } = render(
        <List
          columns={mockListColumns}
          data={[]}
          isError={true}
          onRetry={spy}
        />,
      );

      const button = container.querySelector(
        '[data-test-id="text-button"]',
      ) as HTMLElement;
      const errorDiv = container.querySelector('.error');
      const buttonText = errorDiv?.querySelector('p');

      fireEvent.click(button);

      expect(spy).toHaveBeenCalledTimes(1);
      expect(buttonText?.textContent).toBe(defaultErrMsg);
    });

    it(`renders a custom error message if 'errorMsg' is set and 'isError' is true`, () => {
      const mockErrMsg = 'mock message';
      const { container } = render(
        <List
          columns={mockListColumns}
          data={[]}
          isError={true}
          errorMsg={mockErrMsg}
        />,
      );

      const buttonText = container.querySelector('.error > p');

      expect(buttonText?.textContent).toBe(mockErrMsg);
    });

    it(`no error message nor a retry button are rendered if 'handleRetry' is set to false`, () => {
      const { container } = render(
        <List
          columns={mockListColumns}
          data={[]}
          isError={true}
          handleRetry={false}
        />,
      );

      const errMsg = container.querySelector('.error');

      expect(errMsg).not.toBeInTheDocument();
    });
  });

  it(`headerRowActionSize prop sets ListHeader's 'actionSize'`, () => {
    const mockSize = '45px';
    const { container } = render(
      <List
        columns={mockListColumns}
        data={[mockListData[0]]}
        headerRowActionSize={mockSize}
      />,
    );

    const headerRow = container.querySelector('[data-test-id="list-header"]');

    expect(headerRow).toBeInTheDocument();
    // The action size is applied internally to the header
  });

  it(`listRowActionSize prop sets ListRow's 'actionSize'`, () => {
    const mockSize = '45px';
    const { container } = render(
      <List
        columns={mockListColumns}
        data={[mockListData[0]]}
        listRowActionSize={mockSize}
      />,
    );

    const listRow = container.querySelector('[data-test-id="list-entry"]');

    expect(listRow).toBeInTheDocument();
    // The action size is applied internally to the row
  });

  describe('isRowDisabled', () => {
    const renderListWithDisabledRows = (additionalProps = {}) => {
      return render(
        <List
          columns={mockListColumns}
          data={mockListData}
          {...additionalProps}
        />,
      );
    };

    const expectRowDisabledStates = (
      container: HTMLElement,
      expectedStates: boolean[],
    ) => {
      const rows = container.querySelectorAll('[data-test-id="list-entry"]');
      expectedStates.forEach((expected, index) => {
        const row = rows[index] as HTMLElement;
        const isDisabled =
          row.classList.contains('disabled') || row.hasAttribute('disabled');
        expect(isDisabled).toBe(expected);
      });
    };

    const triggerSelectAll = (container: HTMLElement) => {
      const header = container.querySelector('[data-test-id="list-header"]');
      const headerCheckbox = header?.querySelector(
        '[data-test-id="list-entry-checkbox"]',
      ) as HTMLButtonElement;
      act(() => {
        fireEvent.click(headerCheckbox);
      });
    };

    it('should disable rows based on custom isRowDisabled function', () => {
      const isRowDisabledMock = vi.fn(
        (data: ListTestData, _index: number) => data.id === '2',
      );

      const { container } = renderListWithDisabledRows({
        isRowDisabled: isRowDisabledMock,
      });

      // Verify function calls
      expect(isRowDisabledMock).toHaveBeenCalledTimes(3);
      mockListData.forEach((data, index) => {
        expect(isRowDisabledMock).toHaveBeenNthCalledWith(
          index + 1,
          data,
          index,
        );
      });
    });

    describe('selectAll behavior', () => {
      const selectAllProps = {
        selectionMode: ListSelectMode.Multi,
        enableSelectAll: true,
      };

      it('should disable rows when selectAll is enabled and enableSelectAllDeselect is false', () => {
        const { container } = renderListWithDisabledRows({
          ...selectAllProps,
          enableSelectAllDeselect: false,
        });

        triggerSelectAll(container);

        // After selectAll, checkboxes should be checked
        const rows = container.querySelectorAll('[data-test-id="list-entry"]');
        const rowCheckboxes = Array.from(rows).map(
          (row) =>
            row.querySelector(
              '[data-test-id="list-entry-checkbox"]',
            ) as HTMLButtonElement,
        );
        expect(rowCheckboxes).toHaveLength(mockListData.length);
      });

      it('should not disable rows when enableSelectAllDeselect is true', () => {
        const { container } = renderListWithDisabledRows({
          ...selectAllProps,
          enableSelectAllDeselect: true,
        });

        triggerSelectAll(container);

        // Rows should remain enabled when deselect is allowed
        const rows = container.querySelectorAll('[data-test-id="list-entry"]');
        expect(rows).toHaveLength(mockListData.length);
      });

      it('should combine custom isRowDisabled with selectAll disabled state', () => {
        const isRowDisabledMock = vi.fn(
          (data: ListTestData) => data.id === '1',
        );

        const { container } = renderListWithDisabledRows({
          ...selectAllProps,
          enableSelectAllDeselect: false,
          isRowDisabled: isRowDisabledMock,
        });

        triggerSelectAll(container);

        const rows = container.querySelectorAll('[data-test-id="list-entry"]');
        expect(rows).toHaveLength(mockListData.length);
      });
    });

    // Test different scenarios with parameterized tests
    describe.each([
      {
        name: 'even indices disabled',
        disableLogic: (_data: ListTestData, index: number) => index % 2 === 0,
        expected: [true, false, true],
      },
      {
        name: 'specific IDs disabled',
        disableLogic: (data: ListTestData) => ['1', '3'].includes(data.id),
        expected: [true, false, true],
      },
      {
        name: 'title-based disabled',
        disableLogic: (data: ListTestData) => data.title.includes('2'),
        expected: [false, true, false],
      },
    ])('custom logic: $name', ({ disableLogic, expected }) => {
      it(`should disable rows when ${expected.filter(Boolean).length} out of ${
        expected.length
      } match criteria`, () => {
        const isRowDisabledMock = vi.fn(disableLogic);
        const { container } = renderListWithDisabledRows({
          isRowDisabled: isRowDisabledMock,
        });

        expect(isRowDisabledMock).toHaveBeenCalledTimes(mockListData.length);
      });
    });
  });

  describe('customRowRenderer', () => {
    const createSimpleCustomRenderer = (testId = 'custom-row') =>
      vi.fn(() => <div data-test-id={testId}>Custom Row Content</div>);

    it('should use custom row renderer when provided', () => {
      const customRowRenderer = createSimpleCustomRenderer();
      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          customRowRenderer={customRowRenderer}
        />,
      );

      expect(customRowRenderer).toHaveBeenCalledTimes(3);
      expect(
        container.querySelectorAll('[data-test-id="custom-row"]'),
      ).toHaveLength(3);
      expect(
        container.querySelector('[data-test-id="list-entry"]'),
      ).not.toBeInTheDocument(); // No default ListRow components
    });

    it('should fall back to default ListRow when custom renderer returns null', () => {
      const customRowRenderer = vi.fn(() => null);
      const { container } = render(
        <List
          columns={mockListColumns}
          data={mockListData}
          customRowRenderer={customRowRenderer}
        />,
      );

      expect(customRowRenderer).toHaveBeenCalledTimes(3);
      expect(
        container.querySelectorAll('[data-test-id="list-entry"]'),
      ).toHaveLength(3);
      expect(
        container.querySelector('[data-test-id="custom-row"]'),
      ).not.toBeInTheDocument();
    });

    it('should pass ListRowProps to custom renderer', () => {
      const customRowRenderer = vi.fn(() => (
        <div data-test-id="custom-row">Custom</div>
      ));

      render(
        <List
          columns={mockListColumns}
          data={mockListData}
          customRowRenderer={customRowRenderer}
        />,
      );

      // Verify first call receives ListRowProps structure
      expect(customRowRenderer).toHaveBeenNthCalledWith(
        1,
        expect.objectContaining({
          data: mockListData[0],
          columns: mockListColumns,
          columnSizes: '1fr 1fr 1fr 50px',
          itemSelected: false,
          isRowDisabled: false,
          onItemClicked: expect.any(Function),
          onItemSelected: expect.any(Function),
        }),
      );
    });
  });
});
