testing-tool/components/__tests__/PageHeader.test.tsx

import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import CloseIcon from '@mui/icons-material/Close';
import { render, screen } from '@testing-library/react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import PageHeader, { type PageHeaderProps } from '@/components/PageHeader';

vi.mock('@/config/features', () => ({
  getEntryPointType: vi.fn(() => 'sidepanel'),
}));

const theme = createTheme();

function renderWithTheme(ui: React.ReactElement) {
  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
}

describe('PageHeader 组件系统', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  afterEach(() => {
    vi.restoreAllMocks();
    vi.resetAllMocks();
  });

  const defaultProps: PageHeaderProps = {
    icon: <AccessTimeIcon />,
    title: '时间戳转换',
    subtitle: 'Unix 毫秒数转换与格式化',
  };

  describe('PageHeader UI 渲染', () => {
    it('应渲染页面标题栏&副标题', () => {
      renderWithTheme(<PageHeader {...defaultProps} />);
      expect(screen.getByText('时间戳转换')).toBeInTheDocument();
      expect(screen.getByText('Unix 毫秒数转换与格式化')).toBeInTheDocument();
    });

    it('应渲染图标', () => {
      renderWithTheme(<PageHeader {...defaultProps} />);
      expect(screen.getByTestId('AccessTimeIcon')).toBeInTheDocument();
    });

    it('应渲染自定义图标&图标颜色', () => {
      renderWithTheme(<PageHeader {...defaultProps} icon={<CloseIcon />} iconColor="#FF0000" />);
      expect(screen.getByTestId('CloseIcon')).toBeInTheDocument();
      expect(screen.getByTestId('CloseIcon')).toHaveStyle('color: #FF0000;');
    });

    it('应默认使用主题 primary 色', () => {
      renderWithTheme(<PageHeader {...defaultProps} icon={<CloseIcon />} />);
      expect(screen.getByTestId('CloseIcon')).toHaveStyle(`color: ${theme.palette.primary.main};`);
    });

    it('应渲染 badge 组件', () => {
      const badge = <span data-testid="test-badge">New</span>;
      renderWithTheme(<PageHeader {...defaultProps} badge={badge} />);
      expect(screen.getByTestId('test-badge')).toBeInTheDocument();
      expect(screen.getByText('New')).toBeInTheDocument();
    });

    it('应渲染 badge 与 title 并排布局', () => {
      const badge = <span data-testid="side-badge">v1.0</span>;
      renderWithTheme(<PageHeader {...defaultProps} badge={badge} />);
      const title = screen.getByText('时间戳转换');
      const badgeEl = screen.getByTestId('side-badge');
      expect(title).toBeInTheDocument();
      expect(badgeEl).toBeInTheDocument();
    });
  });

  describe('PageHeader 条件渲染', () => {
    it('subtitle 为 undefined 时不应渲染副标题', () => {
      const { container } = renderWithTheme(
        <PageHeader icon={<AccessTimeIcon />} title="仅标题" />,
      );
      const captionElements = container.querySelectorAll('p');
      expect(captionElements.length).toBe(0);
    });

    it('subtitle 为空字符串时不应渲染副标题', () => {
      const { container } = renderWithTheme(
        <PageHeader icon={<AccessTimeIcon />} title="标题" subtitle="" />,
      );
      const captionElements = container.querySelectorAll('p');
      expect(captionElements.length).toBe(0);
    });

    it('badge 为 undefined 时不应渲染 badge 区域', () => {
      renderWithTheme(<PageHeader {...defaultProps} />);
      expect(screen.queryByText('v1.0')).not.toBeInTheDocument();
    });
  });

  describe('PageHeader 样式扩展', () => {
    it('iconSx 应作为属性传递给图标容器', () => {
      const { container } = renderWithTheme(
        <PageHeader {...defaultProps} iconSx={{ border: '2px solid red' }} />,
      );
      const iconContainer = container.querySelector('div');
      expect(iconContainer).toBeTruthy();
    });

    it('titleSx 应作为属性传递给标题', () => {
      renderWithTheme(<PageHeader {...defaultProps} titleSx={{ fontWeight: 'bold' }} />);
      const titleEl = screen.getByText('时间戳转换');
      expect(titleEl).toBeInTheDocument();
    });

    it('subtitleSx 应作为属性传递给副标题', () => {
      renderWithTheme(<PageHeader {...defaultProps} subtitleSx={{ color: 'red' }} />);
      const subtitleEl = screen.getByText('Unix 毫秒数转换与格式化');
      expect(subtitleEl).toBeInTheDocument();
    });

    it('sx 应作为属性传递给外层容器', () => {
      const { container } = renderWithTheme(<PageHeader {...defaultProps} sx={{ mt: 3 }} />);
      const outerElement = container.firstChild;
      expect(outerElement).toBeTruthy();
    });
  });

  describe('PageHeader 入口点隐藏', () => {
    it('popup 模式下应返回 null', async () => {
      const { getEntryPointType } = await import('@/config/features');
      vi.mocked(getEntryPointType).mockReturnValue('popup');

      const { container } = renderWithTheme(<PageHeader {...defaultProps} />);
      expect(container.innerHTML).toBe('');
    });
  });
});