Genarrative/src/components/common/PlatformPillBadge.test.tsx

/* @vitest-environment jsdom */

import { render, screen } from '@testing-library/react';
import { Tag } from 'lucide-react';
import { expect, test } from 'vitest';

import { PlatformPillBadge } from './PlatformPillBadge';
import { getPlatformPillBadgeClassName } from './platformPillBadgeModel';

test('renders neutral platform pill badge by default', () => {
  render(<PlatformPillBadge>草稿</PlatformPillBadge>);

  const badge = screen.getByText('草稿');

  expect(badge.className).toContain('rounded-full');
  expect(badge.className).toContain('border-[var(--platform-subpanel-border)]');
  expect(badge.className).toContain('bg-white/72');
});

test('supports muted platform pill badge', () => {
  render(<PlatformPillBadge tone="muted">选择</PlatformPillBadge>);

  const badge = screen.getByText('选择');

  expect(badge.className).toContain('bg-[var(--platform-subpanel-fill)]');
  expect(badge.className).toContain('text-[var(--platform-text-soft)]');
});

test('supports solid neutral status pill badge', () => {
  render(<PlatformPillBadge tone="neutralSolid">开启</PlatformPillBadge>);

  const badge = screen.getByText('开启');

  expect(badge.className).toContain('bg-[var(--platform-neutral-bg)]');
  expect(badge.className).toContain('text-[var(--platform-neutral-text)]');
});

test('supports light overlay pill badge for nested action metadata', () => {
  render(<PlatformPillBadge tone="lightOverlay">2泥点</PlatformPillBadge>);

  const badge = screen.getByText('2泥点');

  expect(badge.className).toContain('border-white/30');
  expect(badge.className).toContain('bg-white/24');
  expect(badge.className).toContain('text-current');
});

test('supports success tone, compact size, icon and custom class', () => {
  render(
    <PlatformPillBadge
      tone="success"
      size="xs"
      icon={<Tag aria-hidden="true" className="h-3 w-3" />}
      className="ml-2"
    >
      已发布
    </PlatformPillBadge>,
  );

  const badge = screen.getByText('已发布');

  expect(badge.className).toContain('border-emerald-200');
  expect(badge.className).toContain('text-[11px]');
  expect(badge.className).toContain('ml-2');
  expect(badge.querySelector('svg')).toBeTruthy();
});

test('supports extra compact size for dense catalog chips', () => {
  render(
    <PlatformPillBadge tone="warning" size="xxs">
      新
    </PlatformPillBadge>,
  );

  const badge = screen.getByText('新');

  expect(badge.className).toContain('px-2.5');
  expect(badge.className).toContain('py-1');
  expect(badge.className).toContain('text-[10px]');
});

test('shares badge chrome with interactive pill actions', () => {
  const className = getPlatformPillBadgeClassName({
    tone: 'neutral',
    size: 'xs',
    className: 'tracking-[0.18em]',
  });

  expect(className).toContain('inline-flex');
  expect(className).toContain('rounded-full');
  expect(className).toContain('bg-white/72');
  expect(className).toContain('text-[11px]');
  expect(className).toContain('tracking-[0.18em]');
});

test('supports warning, danger and cool tones', () => {
  const { rerender } = render(
    <PlatformPillBadge tone="warning">待确认</PlatformPillBadge>,
  );

  expect(screen.getByText('待确认').className).toContain(
    'border-[var(--platform-warm-border)]',
  );

  rerender(<PlatformPillBadge tone="danger">失败</PlatformPillBadge>);
  expect(screen.getByText('失败').className).toContain(
    'border-[var(--platform-button-danger-border)]',
  );

  rerender(<PlatformPillBadge tone="cool">处理中</PlatformPillBadge>);
  expect(screen.getByText('处理中').className).toContain(
    'border-[var(--platform-cool-border)]',
  );
});

test('supports dark RPG badge tones', () => {
  const { rerender } = render(
    <PlatformPillBadge tone="darkSky">爆发</PlatformPillBadge>,
  );

  expect(screen.getByText('爆发').className).toContain('bg-sky-500/10');

  rerender(<PlatformPillBadge tone="darkEmerald">状态</PlatformPillBadge>);
  expect(screen.getByText('状态').className).toContain('text-emerald-100');

  rerender(<PlatformPillBadge tone="darkNeutral">Lv.7</PlatformPillBadge>);
  expect(screen.getByText('Lv.7').className).toContain('bg-black/20');

  rerender(<PlatformPillBadge tone="darkAmber">队长</PlatformPillBadge>);
  expect(screen.getByText('队长').className).toContain('text-amber-100');

  rerender(<PlatformPillBadge tone="darkRose">敌对</PlatformPillBadge>);
  expect(screen.getByText('敌对').className).toContain('bg-rose-500/10');
});

test('supports profile tones for personal center chips', () => {
  render(<PlatformPillBadge tone="profile">80泥点</PlatformPillBadge>);

  const badge = screen.getByText('80泥点');

  expect(badge.className).toContain('border-rose-100');
  expect(badge.className).toContain('bg-rose-50');
  expect(badge.className).toContain('text-zinc-600');

  render(<PlatformPillBadge tone="profileAccent">RPG</PlatformPillBadge>);

  expect(screen.getByText('RPG').className).toContain('text-[#ff4056]');
});