import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router';
import ModuleFilter from './index';

describe('ModuleFilter', () => {
  it('検索ボタンが unstyled な Button 由来で acms-admin-btn-admin 系クラスと type=submit を維持する', () => {
    render(
      <MemoryRouter>
        <ModuleFilter />
      </MemoryRouter>
    );

    const searchButton = screen.getByRole('button', { name: 'entry_index.filter.submit' });
    expect(searchButton).toHaveClass(
      'acms-admin-btn-admin',
      'acms-admin-btn-admin-info',
      'acms-admin-btn-admin-search'
    );
    expect(searchButton).toHaveAttribute('type', 'submit');
    expect(searchButton).toHaveAttribute('name', 'intent');
    expect(searchButton).toHaveAttribute('value', 'search');
  });

  it('クリアボタンが unstyled な Button 由来で acms-admin-btn-admin クラスと type=submit を維持する', () => {
    render(
      <MemoryRouter>
        <ModuleFilter />
      </MemoryRouter>
    );

    const clearButton = screen.getByRole('button', { name: 'entry_index.filter.clear' });
    expect(clearButton).toHaveClass('acms-admin-btn-admin');
    expect(clearButton).toHaveAttribute('type', 'submit');
    expect(clearButton).toHaveAttribute('name', 'intent');
    expect(clearButton).toHaveAttribute('value', 'clear');
  });

  it('ブログ軸セレクトが Select 由来で acms-admin-form-select クラスと選択肢を維持する', () => {
    render(
      <MemoryRouter>
        <ModuleFilter />
      </MemoryRouter>
    );

    const select = screen.getByRole('combobox', { name: 'module_index.filter.blog_axis' });
    expect(select).toHaveClass('acms-admin-form-select', 'acms-admin-form-width-full');
    expect(select.tagName).toBe('SELECT');
    expect(screen.getByRole('option', { name: 'module.blog_axis.self' })).toBeInTheDocument();
    expect(screen.getByRole('option', { name: 'module.blog_axis.descendant-or-self' })).toBeInTheDocument();
  });

  it('ツールチップトリガーボタンは既存クラスのまま素の button で維持される', () => {
    render(
      <MemoryRouter>
        <ModuleFilter />
      </MemoryRouter>
    );

    const tooltipTrigger = screen.getByRole('button', { name: 'tooltip.trigger.label' });
    expect(tooltipTrigger).toHaveClass('acms-admin-btn-unstyled');
    expect(tooltipTrigger.tagName).toBe('BUTTON');
  });

  it('キーワード入力欄がラベルと関連付けられている', () => {
    render(
      <MemoryRouter>
        <ModuleFilter />
      </MemoryRouter>
    );

    expect(screen.getByLabelText('module_index.filter.quick_search')).toHaveAttribute('name', 'keyword');
  });
});
