import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiDataTableToolbar from '../UiDataTableToolbar.vue';

describe('UiDataTableToolbar', () => {
  describe('Rendering', () => {
    test('renders default slot controls', () => {
      const { getByRole } = render(UiDataTableToolbar, {
        slots: {
          default:
            '<input aria-label="Search payments" placeholder="Search..." />',
        },
      });

      expect(
        getByRole('textbox', { name: 'Search payments' }),
      ).toBeInTheDocument();
    });

    test('renders trailing actions slot', () => {
      const { getByRole } = render(UiDataTableToolbar, {
        slots: {
          default: '<input aria-label="Search payments" />',
          actions: '<button type="button">Columns</button>',
        },
      });

      expect(getByRole('button', { name: 'Columns' })).toBeInTheDocument();
    });

    test('does not render actions container without actions slot', () => {
      const { container } = render(UiDataTableToolbar, {
        slots: {
          default: '<input aria-label="Search payments" />',
        },
      });

      expect(container.querySelectorAll('.shrink-0')).toHaveLength(0);
    });

    test('renders custom filter controls without props', () => {
      const { getByRole } = render(UiDataTableToolbar, {
        slots: {
          default: '<button type="button">Reset filters</button>',
        },
      });

      expect(
        getByRole('button', { name: 'Reset filters' }),
      ).toBeInTheDocument();
    });
  });
});
