import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, test } from 'vitest';
import { Button } from '@douyinfe/semi-ui';
import { WorkspacePanelHeader } from './WorkspacePanelHeader';

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

  test('renders one shared Semi workspace heading with metadata and actions', () => {
    render(<WorkspacePanelHeader title="数据明细" description="最近一次查询结果" meta="共 20 条" actions={<Button>刷新</Button>} />);

    expect(screen.getByRole('heading', { name: '数据明细', level: 5 })).toHaveClass('semi-typography');
    expect(screen.getByRole('heading', { name: '数据明细', level: 5 }).closest('header')).toHaveClass('is-default');
    expect(screen.getByText('最近一次查询结果')).toHaveClass('semi-typography');
    expect(screen.getByText('共 20 条')).toHaveClass('v2-workspace-panel-meta');
    expect(screen.getByRole('button', { name: '刷新' })).toHaveClass('semi-button');
  });

  test('supports compact and inverted panel anatomy without changing semantics', () => {
    const { rerender } = render(<WorkspacePanelHeader variant="compact" title="行程概览" meta="完整点集" />);
    expect(screen.getByRole('heading', { name: '行程概览', level: 5 }).closest('header')).toHaveClass('is-compact');

    rerender(<WorkspacePanelHeader variant="inverted" title="粤A12345" description="07/17 11:30:00" meta="50%" />);
    expect(screen.getByRole('heading', { name: '粤A12345', level: 5 }).closest('header')).toHaveClass('is-inverted');
  });
});
