import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Menu from './menu';

// DndContext 外でのテスト用に useSortable を no-op でモック（packages/frontend/kanban/src/components/Card.test.tsx と同じ方式）
vi.mock('@dnd-kit/sortable', () => ({
  useSortable: () => ({
    attributes: {},
    listeners: {},
    setNodeRef: vi.fn(),
    setActivatorNodeRef: vi.fn(),
    transform: null,
    transition: undefined,
    isDragging: false,
  }),
}));

describe('Menu', () => {
  it('画像追加・ソース追加ボタンが Button コンポーネントの acms-admin-btn クラスで描画される', () => {
    render(<Menu id="banner-1" addItem={vi.fn()} />);

    const mediaButton = screen.getByRole('button', { name: ACMS.i18n('media.media') });
    const sourceButton = screen.getByRole('button', { name: ACMS.i18n('media.source') });

    expect(mediaButton).toHaveClass('acms-admin-btn');
    expect(sourceButton).toHaveClass('acms-admin-btn');
    // variant を指定していないため、variant サフィックス付きクラスは付与されない
    expect(mediaButton.className).not.toMatch(/acms-admin-btn-\w/);
    expect(sourceButton.className).not.toMatch(/acms-admin-btn-\w/);
  });

  it('画像追加ボタンをクリックすると addItem("image") が呼ばれる', async () => {
    const addItem = vi.fn();
    render(<Menu id="banner-1" addItem={addItem} />);

    await userEvent.click(screen.getByRole('button', { name: ACMS.i18n('media.media') }));

    expect(addItem).toHaveBeenCalledWith('image');
  });

  it('ソース追加ボタンをクリックすると addItem("source") が呼ばれる', async () => {
    const addItem = vi.fn();
    render(<Menu id="banner-1" addItem={addItem} />);

    await userEvent.click(screen.getByRole('button', { name: ACMS.i18n('media.source') }));

    expect(addItem).toHaveBeenCalledWith('source');
  });
});
