import { cleanup, fireEvent, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, test, vi } from 'vitest';
import { WorkspaceFilterPanel } from './WorkspaceFilterPanel';

describe('WorkspaceFilterPanel', () => {
  afterEach(cleanup);

  test('keeps desktop context and mobile disclosure in one shared component', () => {
    const onToggle = vi.fn();
    const { container } = render(
      <WorkspaceFilterPanel
        title="事件筛选"
        description="按关键词与状态收窄范围"
        mobileSummary="已启用 2 项"
        expanded={false}
        status="2 项已启用"
        statusColor="blue"
        onToggle={onToggle}
      >
        <form aria-label="事件筛选表单"><input aria-label="关键词" /></form>
      </WorkspaceFilterPanel>
    );

    expect(screen.getByRole('heading', { name: '事件筛选', level: 5 })).toBeInTheDocument();
    expect(screen.getByText('按关键词与状态收窄范围')).toBeInTheDocument();
    expect(screen.getByText('2 项已启用')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: '修改事件筛选：已启用 2 项' })).toHaveAttribute('aria-expanded', 'false');
    expect(container.querySelector('.v2-workspace-filter-panel')).toHaveClass('semi-card', 'is-mobile-collapsed');
    expect(screen.getByRole('form', { name: '事件筛选表单' })).toBeInTheDocument();

    fireEvent.click(screen.getByRole('button', { name: '修改事件筛选：已启用 2 项' }));
    expect(onToggle).toHaveBeenCalledTimes(1);
  });
});
