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

/* @vitest-environment jsdom */

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

import {
  PlatformOptionSegment,
  PlatformPillTabRail,
  PlatformUnderlineTabRail,
} from './PlatformSegmentedTabPresets';

test('underline tab rail keeps channel preset classes and tab semantics', () => {
  const onChange = vi.fn();

  render(
    <PlatformUnderlineTabRail
      items={[
        { id: 'recommend', label: '推荐' },
        { id: 'ranking', label: '排行' },
      ]}
      activeId="recommend"
      onChange={onChange}
      ariaLabel="发现频道"
      className="min-w-0"
    />,
  );

  const tablist = screen.getByRole('tablist', { name: '发现频道' });
  const recommendTab = screen.getByRole('tab', { name: '推荐' });
  const rankingTab = screen.getByRole('tab', { name: '排行' });

  expect(tablist.className).toContain('platform-mobile-home-channelbar');
  expect(tablist.className).toContain('min-w-0');
  expect(recommendTab.className).toContain('platform-mobile-home-channel');
  expect(recommendTab.className).toContain(
    'platform-mobile-home-channel--active',
  );
  expect(rankingTab.className).not.toContain(
    'platform-mobile-home-channel--active',
  );

  fireEvent.click(rankingTab);

  expect(onChange).toHaveBeenCalledWith('ranking');
});

test('underline tab rail supports ranking preset', () => {
  render(
    <PlatformUnderlineTabRail
      items={[
        { id: 'hot', label: '热门' },
        { id: 'new', label: '最新' },
      ]}
      activeId="hot"
      onChange={vi.fn()}
      ariaLabel="作品排行"
      variant="ranking"
    />,
  );

  const hotTab = screen.getByRole('tab', { name: '热门' });

  expect(hotTab.closest('div')?.className).toContain('platform-ranking-tabs');
  expect(hotTab.className).toContain('platform-ranking-tab');
  expect(hotTab.className).toContain('platform-ranking-tab--active');
});

test('option segment keeps category filter preset classes', () => {
  render(
    <PlatformOptionSegment
      items={[
        { id: 'all', label: '全部' },
        { id: 'rpg', label: '文字冒险' },
      ]}
      activeId="all"
      onChange={vi.fn()}
      variant="categoryFilter"
    />,
  );

  const allButton = screen.getByRole('button', { name: '全部' });

  expect(allButton.closest('div')?.className).toContain(
    'platform-category-filter-dialog__options',
  );
  expect(allButton.className).toContain(
    'platform-category-filter-dialog__option',
  );
  expect(allButton.className).toContain(
    'platform-category-filter-dialog__option--active',
  );
});

test('option segment supports profile tab semantics', () => {
  const onChange = vi.fn();

  render(
    <PlatformOptionSegment
      items={[
        { id: 'points', label: '泥点充值' },
        { id: 'membership', label: '会员卡' },
      ]}
      activeId="points"
      onChange={onChange}
      variant="profile"
      ariaLabel="充值类型"
    />,
  );

  const tablist = screen.getByRole('tablist', { name: '充值类型' });
  const membershipTab = screen.getByRole('tab', { name: '会员卡' });

  expect(tablist.className).toContain('grid-cols-2');
  expect(membershipTab.className).toContain('w-full');

  fireEvent.click(membershipTab);

  expect(onChange).toHaveBeenCalledWith('membership');
});

test('pill tab rail keeps creation entry preset classes', () => {
  render(
    <PlatformPillTabRail
      items={[
        { id: 'recent', label: '最近创作' },
        { id: 'recommend', label: '热门推荐' },
      ]}
      activeId="recent"
      onChange={vi.fn()}
      ariaLabel="创作入口页签"
    />,
  );

  const recentTab = screen.getByRole('tab', { name: '最近创作' });

  expect(recentTab.closest('div')?.className).toContain('snap-x');
  expect(recentTab.className).toContain('snap-start');
  expect(recentTab.className).toContain('after:bg-[#d9793f]');
});