import { render, screen } from '@testing-library/react';
import { IconSearch } from '@douyinfe/semi-icons';
import { Button, Typography } from '@douyinfe/semi-ui';
import { expect, test } from 'vitest';
import { WorkspaceCommandBar } from './WorkspaceCommandBar';

test('renders a compact Semi workspace command hierarchy', () => {
  const view = render(<WorkspaceCommandBar
    className="custom-command"
    ariaLabel="测试工作区操作"
    title="测试工作区"
    description="说明当前任务和数据范围"
    status="12 条"
    meta={<Typography.Text type="tertiary">刚刚更新</Typography.Text>}
    actions={<Button theme="solid">执行</Button>}
  />);

  expect(screen.getByRole('heading', { name: '测试工作区', level: 5 })).toBeInTheDocument();
  expect(screen.getByLabelText('测试工作区操作')).toHaveClass('v2-workspace-command-bar', 'custom-command');
  expect(screen.getByText('12 条').closest('.semi-tag')).toBeInTheDocument();
  expect(screen.getByRole('button', { name: '执行' })).toHaveClass('semi-button');
  expect(view.container.querySelector('.v2-workspace-command-copy')).toHaveTextContent('说明当前任务和数据范围');
});

test('renders a Semi identity treatment for primary workspaces', () => {
  const view = render(<WorkspaceCommandBar
    ariaLabel="车辆目录操作"
    eyebrow="车辆目录"
    icon={<IconSearch />}
    title="车辆快速定位"
    description="车牌、VIN 或手机号快速查车"
  />);

  expect(screen.getByLabelText('车辆目录操作')).toHaveClass('has-identity');
  expect(screen.getByText('车辆目录')).toHaveClass('v2-workspace-command-eyebrow');
  expect(screen.getByRole('heading', { name: '车辆快速定位', level: 5 })).toHaveClass('v2-workspace-command-title');
  expect(view.container.querySelector('.v2-workspace-command-icon')).toHaveClass('semi-avatar');
});