import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import CategoryCreateModal from './category-create-modal';

// CategorySelect 自体は SWR 経由の API 呼び出しを伴い本テストの関心事ではないためスタブ化する
vi.mock('../category-select/category-select', () => ({
  default: () => <div data-testid="category-select-stub" />,
}));

describe('CategoryCreateModal', () => {
  it('スコープのチェックボックスが Checkbox の acms-admin-form-checkbox 構造・クラスで描画される', () => {
    render(<CategoryCreateModal isOpen onClose={vi.fn()} />);

    // グループ見出しラベルも同じ id を指す既存マークアップのため、
    // アクセシブルネームでの一意な取得はできず role のみで問い合わせる
    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toHaveAttribute('id', 'input-checkbox-global');
    expect(checkbox).toHaveAttribute('name', 'scope');
    expect(checkbox).toHaveAttribute('value', 'global');

    const wrapper = checkbox.closest('div');
    expect(wrapper).toHaveClass('acms-admin-form-checkbox');
    expect(wrapper?.querySelector('i.acms-admin-ico-checkbox')).toBeInTheDocument();
    expect(wrapper).toHaveTextContent('category.scope_global');
  });

  it('送信ボタンが Button の acms-admin-btn クラス・type=submit・form 属性で描画される', () => {
    render(<CategoryCreateModal isOpen onClose={vi.fn()} />);

    const submitButton = screen.getByRole('button', { name: 'category.add' });
    expect(submitButton).toHaveClass('acms-admin-btn');
    expect(submitButton).toHaveAttribute('type', 'submit');
    expect(submitButton).toHaveAttribute('form', 'category-create-form');
  });
});
