/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Column } from '../List.model';
import { ListRowLoader, ListRowLoaderProps } from './ListRowLoader';

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

const mockProps: ListRowLoaderProps<TestExplorerData> = {
  columns: [{ propertyName: 'id', size: '1fr', label: 'id' }],
  columnSizes: '1fr',
  columnGap: '5px',
  rowHeight: '50px',
};

describe('ListRowLoader', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<ListRowLoader {...mockProps} />);

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

  it(`Loader 'width' should be undefined and 'viewBox' should be the default if size is not a 'px' value`, () => {
    const mockViewBox = '0 0 100 10';
    const mockColumns: Column<TestExplorerData>[] = [
      { propertyName: 'id', size: '1fr', label: 'id' },
    ];
    const { container } = render(
      <ListRowLoader {...mockProps} columns={mockColumns} />,
    );

    const loaders = container.querySelectorAll('svg');

    loaders.forEach((loader) => {
      expect(loader.getAttribute('width')).toBeNull();
      expect(loader.getAttribute('viewBox')).toBe(mockViewBox);
    });
  });

  it(`Loader 'width' and 'viewBox' should use the numerical size value if size is a 'px' value`, () => {
    const mockSize = 75;
    const mockViewBox = `0 0 ${mockSize} 10`;
    const mockColumns: Column<TestExplorerData>[] = [
      { propertyName: 'id', size: `${mockSize}px`, label: 'id' },
    ];
    const { container } = render(
      <ListRowLoader {...mockProps} columns={mockColumns} />,
    );

    const loaders = container.querySelectorAll('[data-test-id="loader"]');

    loaders.forEach((loader) => {
      expect(loader).toHaveStyle({ width: `${mockSize}px` });
    });

    const svgs = container.querySelectorAll('svg');
    svgs.forEach((svg) => {
      expect(svg.getAttribute('viewBox')).toBe(mockViewBox);
    });
  });
});
