Genarrative/src/components/shared-components/SharedComponentsShowcasePage.test.tsx

/* @vitest-environment jsdom */

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

import SharedComponentsShowcasePage from './SharedComponentsShowcasePage';

describe('SharedComponentsShowcasePage', () => {
  test('shows visible feedback for interactive button examples', () => {
    render(<SharedComponentsShowcasePage />);

    fireEvent.click(screen.getByRole('button', { name: '主要操作' }));
    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
      '主要操作已点击',
    );

    fireEvent.click(screen.getByRole('button', { name: '创建示例' }));
    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
      '创建示例已点击',
    );
  });

  test('keeps the loading example disabled and exposes stateful feedback', () => {
    render(<SharedComponentsShowcasePage />);

    expect(
      (screen.getByRole('button', { name: '加载中' }) as HTMLButtonElement)
        .disabled,
    ).toBe(true);

    fireEvent.click(screen.getByRole('switch', { name: '已启用' }));
    expect(screen.getByRole('switch', { name: '已停用' })).toBeTruthy();
    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
      '开关已点击',
    );
  });

  test('exposes the platform component catalog with local interactions', () => {
    render(<SharedComponentsShowcasePage />);

    fireEvent.click(screen.getByRole('tab', { name: '平台组件' }));

    expect(
      screen.getByRole('heading', { name: '导航 / 筛选工具栏' }),
    ).toBeTruthy();
    expect(
      screen.getByRole('heading', { name: '媒体 / 上传入口' }),
    ).toBeTruthy();
    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();

    const recentOrder = screen
      .getAllByRole('button', { name: /^选择/ })
      .map((button) => button.getAttribute('aria-label'));
    const previewImageBeforeSort = screen
      .getByAltText('珊瑚岛预览')
      .getAttribute('src');
    fireEvent.click(screen.getByRole('button', { name: '最近使用' }));
    const nameOrder = screen
      .getAllByRole('button', { name: /^选择/ })
      .map((button) => button.getAttribute('aria-label'));
    expect(nameOrder).not.toEqual(recentOrder);
    expect(screen.getByText('当前筛选：全部 · 名称 · 4 个结果')).toBeTruthy();
    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();
    expect(screen.getByAltText('珊瑚岛预览').getAttribute('src')).toBe(
      previewImageBeforeSort,
    );

    fireEvent.click(screen.getAllByRole('button', { name: '筛选 3' })[0]!);
    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
    const draftButtons = screen.getAllByRole('button', { name: '草稿' });
    fireEvent.click(draftButtons[draftButtons.length - 1]!);
    expect(screen.getByRole('dialog', { name: '筛选示例' })).toBeTruthy();
    fireEvent.click(screen.getByRole('button', { name: '完成' }));
    expect(screen.queryByRole('dialog', { name: '筛选示例' })).toBeNull();
    expect(
      screen.getAllByRole('button', { name: '草稿 2' }).length,
    ).toBeGreaterThan(0);
    expect(screen.getByRole('button', { name: '选择珊瑚岛' })).toBeTruthy();
    expect(screen.queryByRole('button', { name: '选择月光林' })).toBeNull();

    fireEvent.click(screen.getByRole('button', { name: '名称' }));
    expect(screen.getByRole('button', { name: '最近使用' })).toBeTruthy();
    expect(
      screen.getByText('当前筛选：草稿 · 最近使用 · 2 个结果'),
    ).toBeTruthy();
    expect(screen.getByRole('button', { name: '预览珊瑚岛' })).toBeTruthy();

    fireEvent.click(screen.getByRole('button', { name: '空态' }));
    expect(screen.getByText('暂无可展示内容')).toBeTruthy();
    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
      '异步状态：empty已点击',
    );

    fireEvent.click(screen.getByRole('button', { name: '上传素材 PNG / JPG' }));
    expect(screen.getByRole('status', { name: '交互反馈' }).textContent).toBe(
      '上传素材已点击',
    );
  });
});